/* ═══════════════════════════════════════════
   质量压缩机组件样式 - compressor.css
   ═══════════════════════════════════════════ */

.compressor-layout {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  margin-top: 8px;
}

/* 进度条轨道 */
.compressor-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(180deg, #110822, #080212);
  border: 1px solid rgba(160, 110, 255, .3);
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(160, 110, 255, .06);
}

/* 填充层 - 紫青渐变 */
.compressor-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  border-radius: 8px;
  background: linear-gradient(90deg, #6a1fb0 0%, #9b3fd8 40%, #c97cff 75%, #ff8fd5 100%);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, .28),
    inset 0 -3px 8px rgba(0, 0, 0, .25),
    0 0 20px rgba(170, 90, 255, .6);
  transition: width .9s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  will-change: width;
}

/* 压缩进行中：色调偏冷紫 */
.compressor-fill.compressing {
  background: linear-gradient(90deg, #4a1590 0%, #7a2fc0 45%, #b05ce8 100%);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, .2),
    0 0 16px rgba(140, 70, 220, .45);
  transition: none;
}

/* 星际流动纹路 */
.compressor-fill .compressor-flow {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 100%;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.4) 0 1.6px, transparent 3px),
    radial-gradient(circle at 46% 32%, rgba(220,200,255,.3) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 74% 66%, rgba(255,200,240,.35) 0 1.6px, transparent 3px),
    radial-gradient(circle at 36% 72%, rgba(200,180,255,.25) 0 1px, transparent 2.2px),
    radial-gradient(circle at 90% 40%, rgba(255,255,255,.3) 0 1.2px, transparent 2.6px);
  background-size: 62px 100%, 94px 100%, 78px 100%, 116px 100%, 70px 100%;
  background-repeat: repeat;
  animation: compStarsFlow 2.2s linear infinite;
  mix-blend-mode: screen;
  will-change: transform;
  pointer-events: none;
}
@keyframes compStarsFlow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* 扫光层 */
.compressor-fill .compressor-shimmer {
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(210, 180, 255, .3) 42%,
    rgba(255, 255, 255, .5) 50%,
    rgba(210, 180, 255, .3) 58%,
    transparent 100%);
  animation: compShimmer 3.2s ease-in-out infinite;
  mix-blend-mode: screen;
  will-change: transform;
  pointer-events: none;
}
@keyframes compShimmer {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .55; }
  50%      { transform: translate3d(350%, 0, 0); opacity: 1; }
}

/* 百分比文字 */
.compressor-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .96);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 8px rgba(170,90,255,.5);
  z-index: 2;
  pointer-events: none;
}

/* 按钮组 */
.compressor-btns {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-shrink: 0;
}

/* 填充按钮 - 紫调 */
.btn-fill {
  color: #f0e6ff;
  background: linear-gradient(135deg, #7a2fc0, #a855f7);
  box-shadow: 0 6px 20px rgba(136, 58, 200, .4), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-fill:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(136, 58, 200, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-fill:active:not(:disabled) { transform: translateY(0); }
.btn-fill:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* 压缩按钮 - 默认禁用暗灰 */
.btn-compress {
  color: rgba(255, 255, 255, .35);
  background: linear-gradient(135deg, #2a2238, #1a1426);
  border: 1px solid rgba(160, 110, 255, .15);
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* 就绪可点：金色 */
.btn-compress.ready {
  color: #1a0826;
  background: linear-gradient(135deg, #ffd166, #ffb84a);
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(255, 184, 74, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-compress.ready:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255, 184, 74, .6), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-compress.ready:active { transform: translateY(0); }
.btn-compress:disabled:not(.ready) { opacity: 1; }

/* 状态提示 */
.compressor-hint {
  margin-top: 8px;
  color: rgba(200, 185, 230, .55);
  font-size: 11px;
  letter-spacing: .5px;
  min-height: 14px;
  transition: color .3s;
}
.compressor-hint.warn { color: #ffb84a; }
.compressor-hint.ok   { color: #d4a8ff; }
.compressor-hint.cool { color: #8fd5ff; }