/* ============================================================
   构音障碍即时字幕 MVP（千问版）— 完整样式
   黑夜配色 · 大字号字幕 · 三栏布局 · 响应式 · 投屏模式
   ============================================================ */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", sans-serif;
  background: #0f1220; color: #e0e3ec;
  display: flex; flex-direction: column;
  overflow: hidden;
  /* iOS / Android 安全区域 */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- Topbar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: #1a1d2e; border-bottom: 1px solid #2a2e42;
  flex-shrink: 0; min-height: 52px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.brand h1 { font-size: 16px; font-weight: 600; color: #f0f0ff; }
.brand h1 small { font-size: 11px; font-weight: 400; color: #8888aa; }
.brand .sub { font-size: 11px; color: #6a6a8a; margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.build-tag { font-size: 10px; color: #555; }
.status-pill {
  padding: 3px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;
}
.st-idle { background: #2a2e42; color: #a0a0c0; }
.st-listening { background: #1a3a2a; color: #4ecb71; }
.st-processing { background: #3a2a1a; color: #ffa726; }
.st-error { background: #3a1a1a; color: #ef5350; }
.st-connected { background: #1a2a3a; color: #42a5f5; }

/* ---- Buttons ---- */
.btn {
  padding: 6px 14px; border: 1px solid #3a3e52; border-radius: 6px;
  background: #1f2235; color: #c0c4d8; font-size: 13px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: #2a2e4a; border-color: #5a5e7a; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: #6c5ce7; border-color: #6c5ce7; color: #fff; }
.btn.primary:hover { background: #7d6ff0; }
.btn.warn { background: #5a4a1a; border-color: #8a6a1a; color: #ffc107; }
.btn.warn.off { background: #4a2a2a; border-color: #8a3a3a; color: #ef5350; }
.btn.ghost { background: transparent; border-color: transparent; color: #888; }
.btn.ghost:hover { background: #2a2e42; color: #ccc; }
.btn.ghost.danger:hover { color: #ef5350; }
.btn-group { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Layout ---- */
.layout {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.panel { overflow-y: auto; padding: 12px 14px; flex-shrink: 0; }
.panel.controls { width: 280px; border-right: 1px solid #2a2e42; background: #14172a; }
.panel.stage { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.panel.validate { width: 300px; border-left: 1px solid #2a2e42; background: #14172a; }

/* ---- Control Panel ---- */
.panel h2, .panel h3 { font-size: 13px; font-weight: 600; color: #8888aa; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.row { margin-bottom: 10px; }
.row label { display: block; font-size: 12px; color: #8888aa; margin-bottom: 3px; }
.row label span { color: #666; }
.row input[type="text"], .row input[type="number"], .row select, .row textarea {
  width: 100%; padding: 6px 10px; border: 1px solid #2a2e42; border-radius: 5px;
  background: #1a1d2e; color: #d0d4e8; font-size: 13px; outline: none;
}
.row input[type="text"]:focus, .row input[type="number"]:focus, .row select:focus, .row textarea:focus {
  border-color: #6c5ce7;
}
.row input[type="range"] { width: 100%; }
.row.check label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.row textarea { resize: vertical; min-height: 48px; }

/* Mic Meter */
.mic-meter-row { display: flex; align-items: center; gap: 8px; }
.mic-meter-row label { margin-bottom: 0; flex-shrink: 0; }
.mic-meter { flex: 1; height: 8px; background: #1a1d2e; border-radius: 4px; overflow: hidden; }
.mic-meter-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #4ecb71, #ffa726, #ef5350); border-radius: 4px; transition: width 0.05s linear; }
.mic-hint { font-size: 10px; color: #888; }
.mic-hint.ok { color: #4ecb71; }

/* Details / Accordion */
details.adv { margin-bottom: 10px; border: 1px solid #2a2e42; border-radius: 6px; padding: 6px 10px; background: #181b30; }
details.adv summary { font-size: 12px; font-weight: 600; color: #a0a4c0; cursor: pointer; padding: 2px 0; }
details.adv summary:hover { color: #c0c4e8; }

/* Hint */
.hint { font-size: 11px; color: #666; line-height: 1.5; margin-top: 8px; padding: 8px; background: #181b30; border-radius: 5px; }
.hint b { color: #a0a0c0; }
.hint-inline { font-size: 10px; color: #666; display: block; margin-top: 3px; line-height: 1.4; }

/* ---- Subtitle Stage ---- */
.subtitle-board {
  width: 100%; max-width: 900px; text-align: var(--subtitle-align, center);
  font-size: var(--subtitle-font-size, 56px); line-height: 1.3;
  padding: 20px; color: #f8f8ff;
  --subtitle-max-lines: 4;
}
.subtitle-placeholder { color: #3a3e58; font-size: 0.6em; transition: opacity 0.3s; }
.subtitle-history { margin-bottom: 8px; }
.subtitle-line {
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  animation: fadeInLine 0.3s ease;
}
@keyframes fadeInLine { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.subtitle-partial { color: #aaa; min-height: 0; transition: color 0.2s; }
.subtitle-partial.visible { color: #d0d4e8; }

/* ---- Validation Panel ---- */
.metrics-form { display: none; }
.metrics-form.open { display: block; }
.report-area { display: none; margin-top: 10px; padding: 10px; background: #181b30; border-radius: 6px; font-size: 12px; }
.report-area.open { display: block; }
.report-block h4 { font-size: 13px; margin-bottom: 6px; color: #a0a4c0; }
.report-block p { margin-bottom: 4px; }
.decision-Go { color: #4ecb71; font-weight: 700; }
.decision-No-Go { color: #ef5350; font-weight: 700; }
.muted { color: #666; font-size: 11px; }

/* Session List */
.session-list { font-size: 11px; }
.sess-row {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px;
  background: #1a1d2e; border-radius: 4px; margin-bottom: 3px;
}
.tag { padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; }
.tag-on { background: #1a3a2a; color: #4ecb71; }
.tag-off { background: #3a2a1a; color: #ffa726; }

/* ---- Error Banner ---- */
.error-banner {
  padding: 10px 16px; background: #3a1a1a; color: #ef5350;
  font-size: 12px; border-bottom: 1px solid #5a2a2a; flex-shrink: 0;
}

/* ---- Diagnostic Panel ---- */
.diag-toggle {
  position: fixed; bottom: 4px; left: 4px; z-index: 100; font-size: 10px; opacity: 0.6;
}
.diag-panel {
  position: fixed; bottom: 30px; left: 4px; z-index: 99;
  max-width: 400px; max-height: 300px; overflow: auto;
  padding: 8px 12px; background: #0a0a14; border: 1px solid #3a3e58;
  border-radius: 6px; font-size: 10px; font-family: monospace;
  white-space: pre-wrap; color: #a0a0c0;
}
.diag-panel .k { color: #888; }
.diag-panel .v { color: #a0c0e0; }
.diag-panel .err { color: #ef5350; }

/* ---- Log Bar ---- */
.logbar {
  border-top: 1px solid #2a2e42; background: #12142a; flex-shrink: 0;
  max-height: 120px; display: flex; flex-direction: column;
}
.log-head { padding: 4px 14px; font-size: 10px; color: #555; border-bottom: 1px solid #1a1d2e; }
.log { flex: 1; overflow-y: auto; padding: 4px 14px; font-size: 10px; font-family: monospace; color: #666; }
.log-line { padding: 1px 0; }

/* ---- Mobile Actions ---- */
.mobile-actions, .mobile-bar {
  display: none; padding: 8px 10px; background: #1a1d2e; border-top: 1px solid #2a2e42;
  justify-content: space-around; flex-shrink: 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* ---- Cast Mode ---- */
body.casting .panel.controls { display: none; }
body.casting .panel.validate { display: none; }
body.casting .topbar { display: none; }
body.casting .logbar { display: none; }
body.casting .subtitle-board { font-size: calc(var(--subtitle-font-size, 56px) * 1.6) !important; }
.cast-exit {
  display: none; position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 200;
  padding: 6px 14px; border: 1px solid #5a5e7a; border-radius: 6px;
  background: rgba(15,18,32,0.9); color: #ccc; font-size: 14px; cursor: pointer;
}
body.casting .cast-exit { display: block; }

/* ---- Qwen Settings Panel ---- */
#qwen-settings-panel details.adv { border-color: #3a3e58; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .panel.controls { width: 240px; }
  .panel.validate { width: 260px; }
}
@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .panel { width: 100% !important; max-height: none; flex: none; }
  .panel.controls { border-right: none; border-bottom: 1px solid #2a2e42; max-height: 45vh; }
  .panel.stage { flex: 1; min-height: 200px; }
  .panel.validate { border-left: none; border-top: 1px solid #2a2e42; max-height: 40vh; }
  .mobile-actions, .mobile-bar { display: flex; }
  .logbar { max-height: 80px; }
}
@media (max-width: 480px) {
  .brand h1 { font-size: 13px; }
  .brand .sub { display: none; }
  .topbar { padding: 6px 10px; }
  .panel { padding: 8px 10px; }
}