/* Biên Bản AI — giao diện làm việc: thanh điều khiển trên, transcript trái, bảng phụ phải */
:root{
  --bg:#f4f6f8; --surface:#ffffff; --fg:#16202a; --muted:#5d6876; --line:#dce1e7; --soft:#e7eef5;
  --accent:#1d5d8a; --accent-fg:#ffffff; --rec:#c2410c; --ok:#2f7d4f; --warn:#a16207;
  --s1:#1d5d8a; --s2:#7c3aed; --s3:#0f766e; --s4:#b45309; --s5:#be185d; --s6:#4d7c0f;
  --font:"Segoe UI","Be Vietnam Pro",system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#10151b; --surface:#171e26; --fg:#e5eaf0; --muted:#98a3b0; --line:#2a3440; --soft:#1d2b38;
  --accent:#6bb0de; --accent-fg:#0d1820; --rec:#fb923c; --ok:#5fbf86; --warn:#e0b04a;
  --s1:#6bb0de; --s2:#b39af7; --s3:#4fc7b8; --s4:#e9a75a; --s5:#f08cbc; --s6:#a3d468; color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--font)}
a{color:var(--accent)}
button,select,input,textarea{font:inherit;color:inherit}
button{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer}
button:hover{border-color:var(--accent)}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}
button.rec{background:var(--rec);color:#fff;border-color:var(--rec);font-weight:600}
button:disabled{opacity:.5;cursor:not-allowed}
select,input,textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
textarea{width:100%;resize:vertical}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.small{font-size:13px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}
.pill{display:inline-block;font:500 11px var(--mono);padding:2px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.pill.live{color:var(--rec)} .pill.ok{color:var(--ok)} .pill.warn{color:var(--warn)} .pill.mute{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.err{color:var(--rec)}
[hidden]{display:none!important}

/* trang danh sách */
.page{max-width:980px;margin:0 auto;padding:28px 16px 60px;display:flex;flex-direction:column;gap:20px}
.page h1{margin:0;font-size:1.6rem}
.list{display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.item:hover{background:var(--soft)}
.ptable{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px}

/* phòng họp */
.room{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.bar h1{font-size:16px;margin:0 8px 0 0;max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .grow{flex:1}
.clock{font:600 15px var(--mono)}
.main{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0}
.tx{overflow-y:auto;padding:8px 16px 120px;min-height:0}
.side{border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:0;border-radius:0;border-bottom:2px solid transparent;background:none;padding:10px 4px;font-size:13px}
.tabs button[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}
.pane{overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}
.seg{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.seg .t{font:12px var(--mono);color:var(--muted);padding-top:3px}
.who{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:14px;background:none;border:0;padding:0;cursor:pointer}
.who:disabled{opacity:1;cursor:default}
.who i{width:9px;height:9px;border-radius:50%;display:inline-block}
.lang{font:500 11px var(--mono);border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--muted);margin-left:6px}
.orig{color:var(--muted);font-size:14px}
.orig[contenteditable="true"]{outline:1px dashed var(--accent);color:var(--fg)}
.trn{font-size:15.5px}
.seg.note .trn{font-style:italic}
.interim{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:10px 0;color:var(--muted);font-style:italic;min-height:44px}
.speakers{display:flex;flex-wrap:wrap;gap:6px}
.speakers button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.sum h3{margin:6px 0 2px;font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sum ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);max-width:min(460px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.35)}
.empty{padding:40px 0;color:var(--muted);text-align:center}
@media (max-width:860px){.main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 45%}.side{border-left:0;border-top:1px solid var(--line)}}
@media (prefers-reduced-motion:no-preference){.dot{animation:blink 1.2s infinite}}
@keyframes blink{50%{opacity:.25}}
.dot{width:9px;height:9px;border-radius:50%;background:var(--rec);display:inline-block}