/* ─── voice / transcript ─── */
/* relies on cyber-goth.css for shared chrome (status bar, eyebrow,
   .page, .hub-sub, .hub-aside, .divider, .hub-stack) */

/* display:flex on .file-row / .bar-wrap would otherwise beat the UA's
   [hidden] rule and show empty chrome on load */
[hidden] { display: none !important; }

.stt-page { padding-top: 70px; padding-bottom: 80px; gap: 0; }

/* ─── title ─── */
.stt-title {
  font-family: 'RoyaleCouture', serif;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 0.92; letter-spacing: 0.1em;
  color: var(--cyan);
  text-align: center;
  text-shadow:
    0 0 20px rgba(116,215,254,0.5),
    0 0 55px rgba(116,215,254,0.18),
    0 0 110px rgba(138,111,232,0.12);
  animation: rise 1s cubic-bezier(0.16,1,0.3,1) 0.18s both;
}

.stt-title-ghost {
  position: absolute; inset: 0;
  font-family: 'RoyaleCouture', serif;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 0.92; letter-spacing: 0.1em;
  text-align: center;
  color: transparent;
  pointer-events: none; opacity: 0;
  animation: ghost-appear 10s linear 3s infinite;
}
.stt-title-ghost::before {
  content: 'VOICE / TRANSCRIPT';
  position: absolute; inset: 0;
  color: rgba(255,45,146,0.3);
  clip-path: inset(20% 0 65% 0);
  transform: translateX(-2px);
  animation: glitch-r 10s linear 3s infinite;
}
.stt-title-ghost::after {
  content: 'VOICE / TRANSCRIPT';
  position: absolute; inset: 0;
  color: rgba(0,240,255,0.22);
  clip-path: inset(60% 0 15% 0);
  transform: translateX(2px);
  animation: glitch-b 10s linear 3.1s infinite;
}

/* ─── panels ─── */
.panels {
  width: 100%; max-width: 1120px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 8px;
  animation: rise 1.1s cubic-bezier(0.16,1,0.3,1) 0.44s both;
}
@media (max-width: 880px) {
  .panels { grid-template-columns: 1fr; gap: 18px; }
}

.panel {
  position: relative;
  border: 1px solid rgba(138,111,232,0.18);
  background: rgba(8,4,20,0.55);
  padding: 0;
  display: flex; flex-direction: column;
  min-height: 460px;
  transition: border-color .25s, box-shadow .25s;
}
.panel:hover {
  border-color: rgba(138,111,232,0.32);
  box-shadow: 0 0 26px rgba(138,111,232,0.08);
}

.panel-mic   { --panel-c: var(--cyan); }
.panel-file  { --panel-c: var(--lavender); }

.panel::before,
.panel::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  border: 1px solid rgba(138,111,232,0.4);
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px;  border-width: 1px 0 0 1px; }
.panel::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.panel-head {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid rgba(138,111,232,0.12);
  background: linear-gradient(180deg, rgba(138,111,232,0.06), transparent);
}
.panel-num {
  font-family: monospace; font-size: 9px;
  letter-spacing: 0.3em; color: rgba(116,215,254,0.45);
}
.panel-name {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 14px; letter-spacing: 0.2em;
  color: var(--panel-c);
  flex: 1;
}
.panel-tag {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(185,173,249,0.45);
  text-transform: lowercase;
}

.panel-body {
  padding: 22px 20px 18px;
  display: flex; flex-direction: column;
  flex: 1; gap: 14px;
}

.panel-unsupported {
  margin: 14px 20px 18px;
  padding: 14px 16px;
  border: 1px dashed rgba(255,45,146,0.3);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.04em; line-height: 1.6;
  color: rgba(255,45,146,0.85);
}

/* ─── MIC stage ─── */
.mic-stage {
  position: relative;
  height: 150px;
  display: flex; align-items: center; justify-content: center;
}

.mic-btn {
  position: relative; z-index: 2;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(116,215,254,0.55);
  background: radial-gradient(circle at 50% 40%,
    rgba(116,215,254,0.18), rgba(8,4,20,0.85) 75%);
  color: var(--cyan);
  cursor: none;
  display: grid; place-items: center;
  transition: transform .15s, border-color .25s, box-shadow .25s, color .25s;
}
.mic-btn:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(116,215,254,0.4);
}
.mic-btn:active { transform: scale(0.96); }

.mic-icon { width: 28px; height: 28px; display: block; }
.mic-stop {
  display: none;
  width: 14px; height: 14px;
  background: var(--pink-hot);
  box-shadow: 0 0 14px rgba(255,45,146,0.6);
}

.mic-btn.is-rec {
  border-color: var(--pink-hot);
  color: var(--pink-hot);
  background: radial-gradient(circle at 50% 40%,
    rgba(255,45,146,0.22), rgba(8,4,20,0.9) 75%);
  box-shadow: 0 0 26px rgba(255,45,146,0.35);
}
.mic-btn.is-rec .mic-icon { display: none; }
.mic-btn.is-rec .mic-stop { display: block; }

.mic-ring {
  position: absolute; inset: 0;
  border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(116,215,254,0.18);
  opacity: 0;
}
.mic-btn.is-rec .mic-ring {
  border-color: rgba(255,45,146,0.4);
  animation: mic-pulse 1.8s ease-out infinite;
}
.mic-btn.is-rec .mic-ring-2 { animation-delay: 0.6s; }
.mic-btn.is-rec .mic-ring-3 { animation-delay: 1.2s; }
@keyframes mic-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0;    }
}

.mic-pulse-wrap {
  position: absolute; left: 18px; right: 18px;
  bottom: 6px; height: 28px;
  pointer-events: none;
}
#mic-meter { width: 100%; height: 100%; opacity: 0.6; }

/* ─── shared form row ─── */
.mic-row {
  display: flex; align-items: center;
  gap: 12px; justify-content: space-between;
}

.mic-status {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(185,173,249,0.55);
}
.mic-status.is-rec {
  color: var(--pink-hot);
}
.mic-status.is-rec::before {
  content: '●'; margin-right: 6px;
  animation: blink 1.2s step-end infinite;
}

.mic-lang {
  appearance: none; -webkit-appearance: none;
  background: rgba(8,4,20,0.55);
  border: 1px solid rgba(138,111,232,0.22);
  color: #d8cfff;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.1em;
  padding: 5px 22px 5px 8px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(185,173,249,0.55) 50%),
                    linear-gradient(135deg, rgba(185,173,249,0.55) 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  cursor: none;
  transition: border-color .2s;
}
.mic-lang:hover  { border-color: rgba(138,111,232,0.45); }
.mic-lang:focus  { outline: none; border-color: var(--violet); }
.mic-lang option { background: #0a061a; color: #d8cfff; }

/* ─── transcript box ─── */
.transcript-label {
  font-family: monospace; font-size: 7px;
  letter-spacing: 0.45em; text-transform: uppercase;
  color: rgba(138,111,232,0.5);
  margin: 4px 0 -6px;
}

.transcript {
  flex: 1;
  min-height: 110px;
  max-height: 240px;
  overflow-y: auto;
  padding: 12px 14px;
  background: rgba(0,0,8,0.55);
  border: 1px solid rgba(138,111,232,0.18);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; line-height: 1.7;
  color: #ece5ff;
  letter-spacing: 0.01em;
  white-space: pre-wrap; word-wrap: break-word;
  scrollbar-width: thin;
  scrollbar-color: rgba(138,111,232,0.35) transparent;
}
.transcript::-webkit-scrollbar { width: 6px; }
.transcript::-webkit-scrollbar-thumb {
  background: rgba(138,111,232,0.35); border-radius: 3px;
}
.transcript:empty::before,
.transcript.is-empty::before {
  content: attr(data-empty);
  color: rgba(185,173,249,0.32);
  font-style: italic;
}
.transcript .interim {
  color: rgba(185,173,249,0.55);
  font-style: italic;
}
.transcript .seg-time {
  display: inline-block;
  font-size: 9px; letter-spacing: 0.2em;
  color: rgba(116,215,254,0.45);
  margin-right: 8px;
  vertical-align: 1px;
}

/* ─── footer buttons ─── */
.panel-foot {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}

.btn-mini {
  background: transparent;
  border: 1px solid rgba(138,111,232,0.28);
  color: #d8cfff;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 12px;
  cursor: none;
  transition: border-color .18s, color .18s, background .18s;
}
.btn-mini:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(116,215,254,0.06);
}
.btn-mini:active { transform: translateY(1px); }
.btn-mini.is-flash {
  border-color: var(--acid);
  color: var(--acid);
}

.word-count {
  margin-left: auto;
  font-family: monospace; font-size: 9px;
  letter-spacing: 0.3em; color: rgba(138,111,232,0.5);
  text-transform: uppercase;
}

/* ─── FILE dropzone ─── */
.dropzone {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 22px 16px;
  border: 1px dashed rgba(138,111,232,0.32);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 12px,
      rgba(138,111,232,0.025) 12px 24px);
  cursor: none;
  transition: border-color .2s, background .2s, color .2s;
}
.dropzone:hover,
.dropzone.is-drag {
  border-color: var(--lavender);
  background:
    repeating-linear-gradient(45deg,
      rgba(185,173,249,0.04) 0 12px,
      rgba(185,173,249,0.08) 12px 24px);
}
.dz-icon {
  width: 30px; height: 30px;
  color: var(--lavender);
  opacity: 0.7;
}
.dropzone:hover .dz-icon { opacity: 1; }
.dz-title {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lavender);
}
.dz-sub {
  font-family: monospace; font-size: 9px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(185,173,249,0.45);
}
.dz-or {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(216,207,255,0.55);
}
.dz-pick {
  color: var(--cyan);
  border-bottom: 1px dotted rgba(116,215,254,0.5);
}

/* selected file row */
.file-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(138,111,232,0.14);
  background: rgba(8,4,20,0.4);
}
.file-row-opts {
  border: none; background: none; padding: 0;
  flex-wrap: wrap;
}
.file-name {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.04em;
  color: #ece5ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-meta {
  font-family: monospace; font-size: 10px;
  letter-spacing: 0.18em; color: rgba(116,215,254,0.55);
  text-transform: uppercase;
}

/* progress bar */
.bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.bar-track {
  height: 2px;
  background: rgba(138,111,232,0.14);
  position: relative; overflow: hidden;
}
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 8px var(--violet);
  transition: width 0.4s ease;
}
.bar-fill.is-indeterm {
  width: 28%;
  animation: bar-indeterm 1.6s ease-in-out infinite;
}
@keyframes bar-indeterm {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.bar-status {
  font-family: monospace; font-size: 9.5px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(116,215,254,0.55);
}
.bar-status.is-error { color: var(--pink-hot); letter-spacing: 0.16em; }
.bar-status.is-done  { color: var(--acid); }

/* ─── polish / AI suggestions ─── */
.btn-polish {
  border-color: rgba(185,173,249,0.3);
  color: rgba(185,173,249,0.8);
}
.btn-polish:hover {
  border-color: var(--lavender);
  color: var(--lavender);
  background: rgba(138,111,232,0.08);
}
.btn-polish.is-busy {
  pointer-events: none;
  opacity: 0.45;
}

.polish-wrap {
  border: 1px solid rgba(138,111,232,0.18);
  background: rgba(0,0,8,0.45);
  padding: 0;
  margin-top: 4px;
}

.polish-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(138,111,232,0.12);
}
.polish-title {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lavender);
}
.polish-model {
  font-family: monospace; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(116,215,254,0.4);
}
.polish-spacer { flex: 1; }

.btn-mini-sm {
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: 0.14em;
}

.polish-bar {
  padding: 8px 12px;
}

.polish-list {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(138,111,232,0.35) transparent;
}
.polish-list::-webkit-scrollbar { width: 6px; }
.polish-list::-webkit-scrollbar-thumb {
  background: rgba(138,111,232,0.35); border-radius: 3px;
}

.polish-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(138,111,232,0.08);
  transition: background .15s;
}
.polish-repolish { margin-top: -1px; }
.polish-item:hover { background: rgba(138,111,232,0.04); }

.polish-item.is-accepted {
  background: rgba(0,255,200,0.04);
}
.polish-item.is-accepted .pi-old { text-decoration: line-through; opacity: 0.4; }
.polish-item.is-accepted .pi-new { color: var(--acid); }
.polish-item.is-rejected {
  opacity: 0.3;
}

.pi-diff {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.6;
}
.pi-old {
  color: rgba(255,45,146,0.8);
  background: rgba(255,45,146,0.08);
  padding: 1px 4px;
}
.pi-arrow {
  color: rgba(138,111,232,0.45);
  margin: 0 4px;
  font-size: 10px;
}
.pi-new {
  color: rgba(0,255,200,0.8);
  background: rgba(0,255,200,0.06);
  padding: 1px 4px;
}
.pi-reason {
  display: block;
  font-size: 9px; letter-spacing: 0.1em;
  color: rgba(185,173,249,0.4);
  margin-top: 2px;
}

.pi-actions {
  display: flex; gap: 4px;
  flex-shrink: 0;
  padding-top: 2px;
}
.pi-btn {
  background: transparent;
  border: 1px solid rgba(138,111,232,0.22);
  color: #d8cfff;
  font-family: monospace; font-size: 10px;
  padding: 2px 6px;
  cursor: none;
  transition: border-color .15s, color .15s;
}
.pi-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.pi-btn-reject:hover {
  border-color: var(--pink-hot);
  color: var(--pink-hot);
}

.polish-empty {
  padding: 14px 12px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: rgba(0,255,200,0.6);
  text-align: center;
}

.polish-error {
  padding: 10px 12px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--pink-hot);
}

.polish-section-label {
  padding: 8px 12px 4px;
  font-family: monospace; font-size: 8px;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(138,111,232,0.5);
  border-top: 1px solid rgba(138,111,232,0.1);
}
.polish-section-label:first-child { border-top: none; }

.pi-speaker .pi-diff { gap: 4px; }

.pi-speaker-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--cyan);
  background: rgba(116,215,254,0.1);
  border: 1px solid rgba(116,215,254,0.25);
  padding: 1px 6px;
}

.pi-context {
  color: rgba(216,207,255,0.7);
  font-style: italic;
  font-size: 11px;
}

.pi-speaker.is-accepted .pi-speaker-tag {
  background: rgba(0,255,200,0.1);
  border-color: rgba(0,255,200,0.3);
  color: var(--acid);
}

/* ─── confidence levels ─── */
.pi-conf-high .pi-old  { color: rgba(0,255,200,0.85); background: rgba(0,255,200,0.08); }
.pi-conf-high .pi-new  { color: rgba(0,255,200,0.85); background: rgba(0,255,200,0.06); }
.pi-conf-high .pi-speaker-tag { color: rgba(0,255,200,0.85); border-color: rgba(0,255,200,0.3); }

.pi-conf-medium .pi-old  { color: rgba(255,180,50,0.85); background: rgba(255,180,50,0.08); }
.pi-conf-medium .pi-new  { color: rgba(255,180,50,0.85); background: rgba(255,180,50,0.06); }
.pi-conf-medium .pi-speaker-tag { color: rgba(255,180,50,0.85); border-color: rgba(255,180,50,0.3); }

.pi-conf-low .pi-old  { color: rgba(255,60,60,0.85); background: rgba(255,60,60,0.08); }
.pi-conf-low .pi-new  { color: rgba(255,60,60,0.85); background: rgba(255,60,60,0.06); }
.pi-conf-low .pi-speaker-tag { color: rgba(255,60,60,0.85); border-color: rgba(255,60,60,0.3); }

/* ─── re-polish ─── */
.polish-repolish {
  padding: 8px 12px;
  border-top: 1px solid rgba(138,111,232,0.1);
  display: flex; justify-content: flex-end;
}

/* ─── mark speaker button ─── */
.btn-speaker-mark {
  border-color: rgba(116,215,254,0.3);
  color: rgba(116,215,254,0.7);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.btn-speaker-mark:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(116,215,254,0.06);
}

/* ─── speaker naming ─── */
.speaker-naming {
  padding: 10px 12px;
  border: 1px solid rgba(116,215,254,0.15);
  background: rgba(116,215,254,0.03);
  margin: 0 0 4px;
}
.speaker-naming-label {
  font-family: monospace; font-size: 8px;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(116,215,254,0.5);
  margin-bottom: 8px;
}
.speaker-naming-fields {
  display: flex; flex-direction: column; gap: 6px;
}
.speaker-naming-row {
  display: flex; align-items: center; gap: 8px;
}
.speaker-naming-key {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--cyan);
  min-width: 80px;
}
.speaker-naming-input {
  flex: 1;
  background: rgba(0,0,8,0.6);
  border: 1px solid rgba(138,111,232,0.25);
  color: #ece5ff;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 4px 8px;
  transition: border-color .2s;
}
.speaker-naming-input::placeholder {
  color: rgba(185,173,249,0.3);
  font-style: italic;
}
.speaker-naming-input:focus {
  outline: none;
  border-color: var(--cyan);
}
.speaker-naming-apply {
  align-self: flex-end;
  margin-top: 4px;
}

/* glitch + ghost shared with cyber-goth.css. these keyframes already exist there. */