/* ==========================================================================
   python/pyserver/static/style.css - 演示页样式（深色，监控页风格）
   ========================================================================== */

:root {
  --bg:        #0f1319;
  --panel:     #171d26;
  --panel-2:   #1e2530;
  --line:      #2a3441;
  --fg:        #e6edf3;
  --fg-dim:    #8b98a8;
  --accent:    #4c9aff;
  --ok:        #3fb950;
  --warn:      #d29922;
  --err:       #f85149;
}

* { box-sizing: border-box; }

/* 必须显式声明：浏览器默认的 [hidden]{display:none} 只是 UA 样式，
   会被下面任何一条作者写的 display:flex/block **盖掉**。
   （曾经 .player-hint / .subtitle-list 就因此藏不住——遮罩一直糊在画面上，
     覆盖式/累积式两个视图也会同时显示。） */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.6 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
h1 { font-size: 17px; margin: 0; font-weight: 600; }
h2 { font-size: 13px; margin: 0 0 10px; color: var(--fg-dim);
     font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.muted { color: var(--fg-dim); margin: 6px 0; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.status { display: flex; gap: 8px; align-items: center; }

.badge {
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-pending { background: #1d2530; color: var(--fg-dim); border-color: var(--line); }
.badge-ok      { background: rgba(63,185,80,.14);  color: var(--ok);   border-color: rgba(63,185,80,.35); }
.badge-err     { background: rgba(248,81,73,.14);  color: var(--err);  border-color: rgba(248,81,73,.35); }
.badge-idle    { background: #1d2530; color: var(--fg-dim); border-color: var(--line); }
.badge-demo    { background: rgba(210,153,34,.16); color: var(--warn); border-color: rgba(210,153,34,.4); }

/* ---------- 布局 ---------- */
.layout {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  grid-template-areas: "player side" "subs subs";
}
.player-card   { grid-area: player; }
.subtitle-card { grid-area: subs; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-areas: "player" "side" "subs"; }
  .player-card { grid-area: player; }
  .layout > section:nth-child(2) { grid-area: side; }
}

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px;
}

/* ---------- 播放器 ---------- */
.player-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.player-head h2 { margin: 0; }

.player-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 8px; overflow: hidden;
}
#player { width: 100%; height: 100%; display: block; background: #000; }

/* 画面遮罩：只在无画面时出现，纯文字、不含任何按钮 */
.player-hint {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(10,13,18,.82); color: var(--fg-dim); text-align: center;
  padding: 16px;
}
.player-hint p { margin: 0; }

/* 控制条：位于画面之下，不遮挡内容 */
.player-controls {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
}
.grow { flex: 1 1 auto; }

.player-tip { color: var(--warn); font-size: 12px; margin: 8px 0 0; }

.player-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px; color: var(--fg-dim); font-size: 12px;
  flex-wrap: wrap;
}
.player-meta code { color: var(--fg); word-break: break-all; }

/* ---------- 字幕 ---------- */
.subtitle-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 16px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  color: #fff; font-size: 17px; line-height: 1.5; text-align: center;
  text-shadow: 0 1px 3px #000;
}

.subtitle-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.subtitle-head h2 { margin: 0; }

.segmented {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
}
.seg-btn {
  background: var(--panel-2); color: var(--fg-dim); border: 0;
  padding: 5px 14px; font-size: 12px; cursor: pointer;
}
.seg-btn.is-active { background: var(--accent); color: #fff; }

.subtitle-single {
  min-height: 76px; display: flex; align-items: center;
  padding: 14px 16px; background: var(--panel-2);
  border-radius: 8px; font-size: 18px; line-height: 1.5;
}
.subtitle-single p { margin: 0; }

.subtitle-list {
  max-height: 220px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 6px;
}
.sub-line {
  display: flex; gap: 10px; padding: 7px 10px;
  background: var(--panel-2); border-radius: 6px;
}
.sub-time { color: var(--fg-dim); font-size: 12px; flex: 0 0 auto;
            font-family: Consolas, monospace; padding-top: 2px; }
.sub-text { flex: 1 1 auto; }
.sub-call { color: var(--fg-dim); font-size: 11px; flex: 0 0 auto; padding-top: 3px; }

/* ---------- 会话 / 元信息 ---------- */
.sessions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.session {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px;
}
.session-id { font-weight: 600; margin-bottom: 5px; }
.session-row { display: flex; justify-content: space-between; gap: 8px;
               font-size: 12px; color: var(--fg-dim); }
.session-row code { color: var(--fg); word-break: break-all; }
.pill { padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.pill-on  { background: rgba(63,185,80,.16); color: var(--ok); }
.pill-off { background: #21293456; color: var(--fg-dim); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
      margin: 0; font-size: 12px; }
.kv dt { color: var(--fg-dim); }
.kv dd { margin: 0; text-align: right; word-break: break-all; }
.err { color: var(--err); }

/* ---------- 按钮 ---------- */
.btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 7px;
  padding: 7px 15px; font-size: 13px; cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-ghost { background: transparent; color: var(--fg-dim);
             border: 1px solid var(--line); padding: 4px 11px; font-size: 12px; }
.btn-ghost:hover { color: var(--fg); }
.btn-ghost:disabled:hover { color: var(--fg-dim); }

/* 需要用户点一下才能开声时，把按钮点亮提示（呼吸光晕） */
.btn-attn { animation: attn 1.5s ease-in-out infinite; }
.btn-attn:hover { filter: brightness(1.15); }
@keyframes attn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,154,255,.55); }
  50%      { box-shadow: 0 0 0 7px rgba(76,154,255,0); }
}