/*  Audio Mixer – Channel Strip Styles
    Vertical fader | dB scale | dual L/R VU meters
*/

/* ── Panel container ────────────────────────────────────── */
.audio-mixer-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  overflow: hidden;
}

.audio-mixer-header {
  padding: 4px 8px 2px;
  font-size: 11px;
  color: var(--muted, #888);
  border-bottom: 1px solid var(--line, #454545);
  flex-shrink: 0;
}
.audio-mixer-header strong { color: var(--text-light, #ccc); }

.audio-mixer-hint {
  font-size: 10px;
  color: var(--muted, #888);
  padding: 0 8px;
  flex-shrink: 0;
}

.audio-mixer-empty {
  margin: 4px;
  padding: 8px;
  font-size: 11px;
  color: var(--muted, #888);
  border: 1px dashed var(--line, #454545);
  border-radius: 6px;
}

/* ── Strip list ──────────────────────────────────────────── */
.audio-mixer-list {
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 5px 6px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  align-items: stretch;      /* all strips same height */
}

.audio-mixer-list::-webkit-scrollbar { height: 4px; }
.audio-mixer-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}

/* ── Channel strip ───────────────────────────────────────── */
.channel-strip {
  flex-shrink: 0;
  width: 62px;
  height: 250px;             /* fixed height – same for all strip types */
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--line, #454545);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  user-select: none;
}

.channel-strip.pgm-active {
  border-color: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,0.4), inset 0 1px 3px rgba(0,0,0,0.5);
}
.channel-strip.pvw-active {
  border-color: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.3), inset 0 1px 3px rgba(0,0,0,0.5);
}

/* ── Header ─────────────────────────────────────────────── */
.channel-name {
  flex-shrink: 0;
  padding: 3px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light, #ccc);
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--line, #454545);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  height: 20px;
  line-height: 14px;
}

/* ── Main body: fader | scale | VU wrapper ──────────────── */
.channel-strip-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 5px 3px 3px;
  gap: 2px;
}

/* ── Fader column ───────────────────────────────────────── */
.fader-container {
  flex: 0 0 16px;
  position: relative;
  cursor: ns-resize;
}

.fader-track {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
}

/* 0 dB notch */
.fader-track::after {
  content: '';
  position: absolute;
  top: calc(10 / 70 * 100%);
  left: -4px;
  right: -4px;
  height: 1px;
  background: rgba(255,255,255,0.4);
}

.fader-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(10 / 70 * 100%);
  width: 16px;
  height: 10px;
  background: #dedede;
  border-radius: 2px;
  border: 1px solid #aaa;
  box-shadow: 0 2px 5px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.6);
  cursor: grab;
  z-index: 5;
}

.fader-handle::after {
  content: '';
  position: absolute;
  top: calc(50% - 0.5px);
  left: 2px;
  right: 2px;
  height: 1px;
  background: rgba(0,0,0,0.22);
}

.fader-handle:active { cursor: grabbing; background: #fff; }

/* ── dB scale ───────────────────────────────────────────── */
.db-scale {
  flex: 0 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 7px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.35);
  text-align: right;
  line-height: 1;
}

/* ── VU wrapper: meter bars + L/R labels ────────────────── */
.vu-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vu-container {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  background: rgba(0,0,0,0.55);
  border-radius: 2px;
  padding: 2px 2px 0;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.8);
  overflow: hidden;
  gap: 2px;
}

/* 0 dB reference line */
.zero-db-line {
  position: absolute;
  bottom: calc(50 / 70 * 100%);
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.25);
  z-index: 2;
}

/* L and R meter bars */
.vu-container .bar {
  flex: 1;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(
    to top,
    #22c55e  0%,
    #22c55e 68%,
    #f59e0b 83%,
    #ef4444 100%
  );
  mask-image: repeating-linear-gradient(
    to top, #000 0px, #000 2px, transparent 2px, transparent 3px
  );
  transition: height 50ms cubic-bezier(0.1, 0.7, 0.1, 1);
  height: 0%;
  min-height: 0;
}

.vu-container.is-muted .bar {
  height: 2px !important;
  background: #444;
  mask-image: none;
}

/* L / R channel labels under the meter */
.vu-lr-labels {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 9px;
  font-size: 7px;
  font-weight: 600;
  color: rgba(255,255,255,0.30);
  line-height: 9px;
  letter-spacing: 0.05em;
}

/* ── Footer: same fixed height for ALL strip types ───────── */
.channel-footer {
  flex-shrink: 0;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 3px 4px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--line, #454545);
}

.channel-btn-row {
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: center;
  height: 20px;
}

.channel-footer .solo-btn,
.channel-footer .mute-btn {
  width: 20px;
  height: 18px;
  border: none;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.channel-footer .solo-btn:hover,
.channel-footer .mute-btn:hover { background: rgba(255,255,255,0.13); }

.channel-footer .solo-btn.is-active {
  background: rgba(234,179,8,0.30);
  color: #fde047;
  border: 1px solid rgba(253,224,71,0.45);
}

.channel-footer .mute-btn.is-muted {
  background: rgba(239,68,68,0.25);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.4);
}

.channel-db-value {
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1;
}

/* ── Master bus strip colours ────────────────────────────── */
.channel-strip.master-pgm { border-color: rgba(239,68,68,0.45); }
.channel-strip.master-pgm .channel-name {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
}

.channel-strip.master-pvw { border-color: rgba(34,197,94,0.45); }
.channel-strip.master-pvw .channel-name {
  background: rgba(34,197,94,0.15);
  color: #86efac;
}