/* Live caption surface: concise alongside negotiation cues, full transcript in the existing details sheet. */
#live .caption-card { width:100%; min-width:0; padding:12px 14px; border-radius:16px;
  border:1px solid color-mix(in srgb,var(--primary) 26%,var(--rule)); background:var(--panel); box-shadow:var(--shadow); }
#live .caption-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#live .caption-top h2 { margin:0; font:700 17px/1.5 var(--display); color:var(--ink); }
#live .caption-phase { font:600 12px/1.6 var(--body); color:var(--soft); }
#live .caption-phase[data-live=true] { color:var(--jade); }
#live .caption-phase[data-live=true]::before { content:""; display:inline-block; width:7px; height:7px; margin-inline-end:6px; border-radius:50%; background:var(--jade); }
#live .caption-show { flex:none; min-height:44px; padding:7px 12px; background:var(--primary-soft); color:var(--primary); border:1px solid var(--rule); border-radius:12px; font:700 13px var(--body); cursor:pointer; }
#live .caption-show span { display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:9px; margin-inline-start:4px; background:var(--panel); }
#live .caption-partial { margin:8px 0; padding:7px 10px; color:var(--soft); background:var(--sunk); border-inline-start:3px solid var(--jade);
  border-radius:9px; font:500 16px/1.7 var(--body); overflow-wrap:anywhere; white-space:pre-wrap; max-height:6em; overflow:auto; }
#live .caption-recent { max-width:100%; min-width:0; }
#live .caption-line { border:1px solid var(--rule); border-radius:13px; background:var(--panel); padding:12px 13px; margin:8px 0; min-width:0; }
#live .caption-line.recent { background:color-mix(in srgb,var(--primary) 5%,var(--panel)); padding:8px 10px; }
#live .caption-meta { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
#live .caption-speaker-label { display:flex; align-items:center; gap:7px; font:500 12px/1.6 var(--body); color:var(--soft); }
#live .caption-speaker { max-width:180px; min-height:40px; border:1px solid var(--rule); background:var(--panel); color:var(--ink);
  border-radius:9px; padding:5px 8px; font:600 14px/1.5 var(--body); cursor:pointer; }
#live .caption-time { font:500 12px var(--mono); direction:ltr; color:var(--soft); }
#live .caption-text { margin:6px 0 3px; font:500 17px/1.7 var(--body); color:var(--ink); overflow-wrap:anywhere; white-space:pre-wrap; }
#live .caption-provenance { display:block; font:400 11px/1.6 var(--body); color:var(--soft); }
#live .caption-recent .caption-provenance { display:none; }
#live .caption-connection { margin:4px 0 0; color:var(--soft); font:500 12px/1.5 var(--body); }
#live .caption-connection[data-alert=true] { color:var(--coral); font-weight:600; }
#live .caption-disclaimer { margin:3px 0 0; color:var(--soft); font:400 11px/1.4 var(--body); }
#live .caption-empty { margin:10px 0; font-size:14px; color:var(--soft); }
#live .caption-history { min-height:90px; max-height:42dvh; overflow:auto; overscroll-behavior:contain; scroll-behavior:smooth; }
#live .caption-history .caption-line:first-child { margin-top:0; }
#live .caption-raw { margin-top:16px; font:500 13px var(--body); color:var(--soft); }
#live .caption-raw summary { min-height:44px; cursor:pointer; }
@media (max-width:430px) {
  #live .caption-card { padding:10px; }
  #live .caption-top h2 { font-size:15px; }
  #live .caption-show { font-size:12px; }
  #live .caption-partial { font-size:15px; line-height:1.55; max-height:3.1em; }
  #live .caption-recent .caption-text { font-size:15px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #live .caption-disclaimer { display:none; }
  #live .caption-recent .caption-line { margin:4px 0; }
}
@media (min-width:1100px) {
  #live .caption-card { padding:16px 18px; }
  #live .caption-history { max-height:calc(100dvh - 350px); }
}
@media (prefers-reduced-motion:reduce) { #live .caption-history { scroll-behavior:auto; } }