/* shadow.css — Shadowing practice page. Extends css/index.css (shared vars,
   header, .editor-link, .pp-btn look-alikes, .rec-dot, @keyframes spin). */

.shadow-wrap { width:100%; max-width:920px; margin:0 auto; }

/* ── Upload dropzone ─────────────────────────────────────────── */
.dropzone {
  border:2px dashed var(--border); border-radius:14px;
  padding:34px 20px; text-align:center; cursor:pointer;
  background:var(--surface); color:var(--muted);
  transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color:#7eb8f7; background:#213a55; color:#8fa8c0; }
.dropzone-icon { font-size:1.6rem; margin-bottom:6px; }
.dropzone-hint { font-size:.68rem; margin-top:4px; color:#4a6888; }
.open-file-row { display:flex; justify-content:center; margin-top:8px; }

/* ── File info bar ───────────────────────────────────────────── */
.file-info {
  display:none; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding:9px 14px; background:var(--card);
  border:1px solid var(--border); border-radius:10px; font-size:.76rem;
}
.file-info b { color:#c8d8e8; }
.cache-badge { font-size:.66rem; padding:2px 9px; border-radius:20px; border:1px solid var(--border); color:var(--muted); }
.cache-badge.hit  { color:#34d399; border-color:#34d39955; }
.cache-badge.miss { color:#7eb8f7; border-color:#7eb8f755; }
#fullAudio { height:28px; margin-left:auto; }

.transcribe-status { margin-top:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.transcribe-lang-label { display:flex; align-items:center; gap:6px; font-size:.68rem; color:var(--muted); }
.transcribe-lang-label select, .transcribe-lang-label input {
  background:#1a2e48; border:1px solid #2e4560; border-radius:5px;
  color:#d8e8f4; font-size:.72rem; padding:3px 6px; cursor:pointer;
}
.transcribe-lang-label input { width:90px; font-family:monospace; cursor:text; }

.hf-settings {
  margin-top:8px; padding:10px 14px; background:var(--card);
  border:1px solid var(--border); border-radius:10px;
  display:flex; flex-direction:column; gap:8px;
}
.hf-settings label { display:flex; align-items:center; gap:8px; font-size:.7rem; color:var(--muted); }
.hf-settings input {
  flex:1; background:#1a2e48; border:1px solid #2e4560; border-radius:5px;
  color:#d8e8f4; font-family:monospace; font-size:.72rem; padding:4px 7px;
}
.hf-hint { font-size:.64rem; color:#4a6888; line-height:1.5; }
.hf-hint a { color:#7eb8f7; }

.mini-spinner {
  width:14px; height:14px; flex-shrink:0; border:2px solid #2e4560;
  border-top-color:#7eb8f7; border-radius:50%; animation:spin .8s linear infinite;
}

/* ── Time range picker ───────────────────────────────────────── */
.range-wrap {
  margin-top:12px; padding:10px 14px; background:var(--card);
  border:1px solid var(--border); border-radius:10px;
}
.range-title { font-size:.7rem; font-weight:700; color:#7eb8f7; margin-bottom:8px; }
.range-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.range-row label { display:flex; align-items:center; gap:5px; font-size:.68rem; color:var(--muted); }
.range-text {
  width:72px; background:#1a2e48; border:1px solid #2e4560; border-radius:5px;
  color:#d8e8f4; font-family:monospace; font-size:.75rem; padding:3px 5px; text-align:center;
}
.range-row input[type=range] { flex:1; min-width:120px; accent-color:#7eb8f7; cursor:pointer; }
.range-presets { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px; }
.range-dur { font-size:.66rem; color:var(--muted); margin-left:4px; }
.sent-btn.primary { border-color:#7eb8f7; color:#7eb8f7; margin-left:auto; }
.sent-btn.primary:hover:not(:disabled) { background:#1f3a58; }

/* ── Progress bar (real read/decode percentages; indeterminate sweep for segmentation) ─ */
.progress-wrap {
  display:none; align-items:center; gap:9px; margin-top:12px;
  padding:8px 12px; background:#1a2636; border:1px solid var(--border); border-radius:10px;
}
.progress-label { font-size:.7rem; color:#7eb8f7; white-space:nowrap; }
.progress-track { flex:1; height:6px; background:#1a2e48; border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; width:0; background:#7eb8f7; border-radius:4px; transition:width .15s linear; }
.progress-wrap.indeterminate .progress-fill {
  width:40% !important; background:linear-gradient(90deg,#1a2e48,#7eb8f7,#1a2e48);
  animation:progress-sweep 1.1s ease-in-out infinite;
}
@keyframes progress-sweep { 0%{margin-left:-40%} 100%{margin-left:100%} }
.progress-pct { font-size:.66rem; color:var(--muted); font-family:monospace; min-width:32px; text-align:right; }

#uploadStatus { margin-top:8px; font-size:.72rem; color:var(--muted); min-height:1em; }

/* ── Params row ──────────────────────────────────────────────── */
.params-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding:8px 12px; background:#1a2636;
  border:1px solid var(--border); border-radius:10px; font-size:.72rem; color:var(--muted);
}
.params-row input[type=range] { accent-color:#7eb8f7; width:150px; cursor:pointer; }
.params-row .sent-btn { margin-left:auto; }
.trim-toggle { display:flex; align-items:center; gap:5px; font-size:.7rem; color:var(--muted); flex-basis:100%; margin-top:2px; cursor:pointer; }
.trim-toggle input { accent-color:#7eb8f7; cursor:pointer; }
.sensitivity-cache-note { font-size:.66rem; color:#34d399; flex-basis:100%; margin-top:2px; }

/* ── Sentence list ───────────────────────────────────────────── */
.sentence-list-wrap { display:none; margin-top:18px; }
.sentence-list-header {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.72rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;
}
.sentence-list-header b { color:#7eb8f7; }
.whole-slice-hint { font-size:.62rem; font-weight:400; text-transform:none; letter-spacing:0; color:#f0a95c; }

.sent-row {
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:9px 12px; margin-bottom:8px;
}
.sent-idx {
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:#1a2e48; color:#7eb8f7; font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.sent-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sent-wave { width:100%; height:40px; display:block; border-radius:5px; }
.sent-meta { display:flex; gap:10px; font-size:.63rem; color:#4a7090; font-family:monospace; }
.sent-transcript { font-size:.75rem; color:#c8d8e8; font-style:italic; line-height:1.4; }
.sent-controls { display:flex; align-items:center; gap:5px; flex-wrap:wrap; flex-shrink:0; }
.sent-btn {
  padding:4px 9px; border-radius:7px; border:1px solid #2e4560;
  background:#1a2e48; color:#d8e8f4; cursor:pointer; font-size:.72rem;
  transition:background .12s, border-color .12s; white-space:nowrap;
}
.sent-btn:hover:not(:disabled) { background:#243c5a; border-color:#4a7098; }
.sent-btn:disabled { opacity:.4; cursor:default; }
.sent-btn.rec-active { border-color:#f43f5e; color:#f43f5e; }
.sent-status { font-size:.63rem; color:var(--muted); min-width:80px; }

/* ── Cache list ──────────────────────────────────────────────── */
.cache-section { margin-top:26px; }
.cache-section-title { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#4a6888; margin-bottom:6px; }
.cache-list { display:flex; flex-direction:column; gap:5px; }
.cache-empty { font-size:.7rem; color:#3a5878; padding:8px 0; }
.cache-item {
  display:flex; align-items:center; gap:10px; font-size:.7rem; color:var(--muted);
  padding:6px 10px; background:var(--surface); border:1px solid var(--border); border-radius:8px;
}
.cache-name { color:#c8d8e8; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cache-forget { background:none; border:none; color:#4a6888; cursor:pointer; font-size:.8rem; }
.cache-forget:hover { color:#f43f5e; }

@media (max-width:700px) {
  .sent-row { flex-wrap:wrap; }
  .sent-controls { width:100%; justify-content:flex-start; }
}