/* Voice2Claim — light theme tím (rebrand 19/07 theo mockup mới của Long).
   Palette: tím indigo chủ đạo · card trắng bo lớn · đỏ hồng (ghi âm/CAO) ·
   cam (chờ/warn) · xanh lá (done). Semantic giữ nguyên tên biến cũ. */
:root{
  --bg:#f1f2f9; --bg2:#f7f8fd; --panel:#ffffff; --panel2:#efecfd;
  --line:#e5e7f4; --txt:#23284d; --dim:#6b7294; --dim2:#9aa1c0;
  --acc:#6d5ae8; --acc2:#8b76f2; --ok:#1faa6a; --warn:#e8930c;
  --low:#b6bdd9; --danger:#e0526c; --armed:#e8930c;
  --ok-bg:#e6f8ef; --ok-line:#bfe8d2; --warn-bg:#fff4e0; --warn-line:#f3d9a8;
  --dan-bg:#fdeaee; --dan-line:#f4bfca; --acc-bg:#efecfd; --acc-line:#d9d2fa;
  --shadow:0 2px 12px rgba(51,48,116,.07);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}
[x-cloak]{display:none!important}
.wrap{max-width:1280px;margin:0 auto;padding:16px 20px 60px}
button{font:inherit;color:inherit;cursor:pointer}

/* header (trang pilot/call — thanh trong nội dung) */
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px}
.logo .dot{width:34px;height:34px;border-radius:10px;background:radial-gradient(circle at 30% 30%,var(--acc2),var(--acc) 60%,#5646c4);display:grid;place-items:center;font-size:17px;color:#fff}
.logo small{display:block;font-weight:500;color:var(--dim);font-size:11px}
.switcher{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.switcher button{border:0;background:transparent;color:var(--dim);padding:7px 14px;border-radius:8px;font-weight:700;font-size:13px}
.switcher button.on{background:var(--acc);color:#fff;box-shadow:0 2px 10px rgba(109,90,232,.35)}
.chips{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);font-size:12px;font-weight:700;color:var(--dim)}
.chip .st{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(31,170,106,.6)}
.chip.mode{color:#178a55;border-color:var(--ok-line);background:var(--ok-bg)}
.stopwatch{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--txt);background:var(--bg2);border:1px solid var(--line);padding:6px 14px;border-radius:10px;min-width:150px;text-align:center}
.stopwatch span{color:var(--dim);font-size:10px;display:block;line-height:1;margin-bottom:2px}

/* tabs */
nav{display:flex;gap:8px;margin:16px 0}
nav button{flex:1;padding:11px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--dim);font-weight:700;font-size:13.5px}
nav button.on{background:var(--acc-bg);color:#4f43b5;border-color:var(--acc);box-shadow:inset 0 -3px 0 var(--acc)}
nav button:disabled{opacity:.4;cursor:not-allowed}

/* layout & panel */
.cols{display:grid;grid-template-columns:minmax(340px,5fr) minmax(380px,6fr);gap:14px;align-items:start}
.cols.rev{grid-template-columns:minmax(330px,4fr) minmax(430px,7fr)}
.cols.con{grid-template-columns:minmax(420px,7fr) minmax(320px,4fr)}
@media(max-width:960px){.cols,.cols.rev,.cols.con{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow)}
.panel h3{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.panel h3 .right{margin-left:auto;display:flex;gap:6px;align-items:center}
.pad{padding:14px}

/* upload */
.drop{border:2px dashed var(--acc-line);border-radius:13px;padding:20px;display:flex;align-items:center;gap:16px;background:var(--bg2);flex-wrap:wrap}
.drop.drag{border-color:var(--acc)}
.drop .big{font-size:30px}
.drop b{display:block;font-size:14px}
.drop small{color:var(--dim)}
.drop .btns{margin-left:auto;display:flex;gap:8px}
.btn{border:1px solid var(--line);background:var(--panel);color:#3c4270;font-weight:700;border-radius:9px;padding:9px 14px;font-size:12.5px;box-shadow:0 1px 3px rgba(51,48,116,.06)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.rec{background:var(--danger);border-color:var(--danger);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{padding:12px 18px;font-size:13.5px;border-radius:11px}
.btn.send{background:linear-gradient(90deg,#25c07c,var(--ok));border-color:var(--ok);color:#fff;font-weight:900;box-shadow:0 4px 18px rgba(31,170,106,.25)}
.btn.send:disabled{filter:grayscale(.6)}
.fchip{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;margin-top:10px;font-family:var(--mono)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tag{font-size:10.5px;font-family:var(--mono);border:1px solid var(--acc-line);color:#5b4fd0;border-radius:6px;padding:2px 8px;background:var(--acc-bg)}

/* transcript */
.tr{max-height:420px;overflow:auto;padding:12px 14px;font-size:13.5px;white-space:pre-wrap;line-height:1.7}
.tr .muted{color:var(--dim2);font-style:italic}

/* form */
.sec{padding:11px 14px;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.sec h4{font-size:11px;color:#5b4fd0;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:9px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.f{position:relative;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--low);border-radius:9px;padding:7px 10px 6px;min-height:52px;opacity:.35;transform:translateY(4px);transition:opacity .35s,transform .35s}
.f.show{opacity:1;transform:none}
.f label{display:block;font-size:10.5px;color:var(--dim);margin-bottom:2px}
.f .v{font-size:13px;font-weight:600;word-break:break-word;white-space:pre-wrap}
.f.hi{border-left-color:var(--ok)}
.f.mid{border-left-color:var(--warn)}
.f.lo .v{color:var(--dim2);font-weight:400;font-style:italic}
.f .cf{position:absolute;top:6px;right:8px;font-family:var(--mono);font-size:9.5px;color:var(--dim2)}
.f.hi .cf{color:var(--ok)}.f.mid .cf{color:var(--warn)}
.f .evi{font-size:10.5px;color:var(--dim2);margin-top:3px;border-left:2px solid var(--line);padding-left:6px;font-style:italic}
.f .lock{position:absolute;bottom:5px;right:8px;font-size:10px}

/* actions */
.actions{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.act{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--bg2);border-radius:11px;padding:10px 13px;opacity:.55}
.act .ic{width:30px;height:30px;border-radius:8px;background:var(--acc-bg);display:grid;place-items:center;font-size:15px}
.act b{font-size:13px;display:block}
.act small{color:var(--dim);font-size:11px;font-family:var(--mono)}
.act .st{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--dim2);text-align:right}
.act.armed{opacity:1;border-color:var(--warn);background:linear-gradient(90deg,var(--warn-bg),var(--bg2));animation:armglow 1.4s infinite}
.act.armed .st{color:var(--warn)}
.act.fired{opacity:1;border-color:var(--ok-line);background:var(--ok-bg)}
.act.fired .st{color:var(--ok)}
@keyframes armglow{50%{box-shadow:0 0 26px rgba(232,147,12,.28)}}
.toast{margin:0 14px 13px;border:1px solid var(--ok-line);background:var(--ok-bg);border-radius:11px;padding:10px 13px;font-size:12.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toast a{color:#178a55;font-weight:700}
.toast .tts{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--acc-line);background:var(--acc-bg);border-radius:999px;padding:3px 10px;font-size:11.5px;color:#5b4fd0}

/* side-by-side */
.sbs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
@media(max-width:640px){.sbs{grid-template-columns:1fr}}
.sbs>div{padding:12px 14px;font-size:12.5px}
.sbs>div:first-child{border-right:1px solid var(--line)}
.sbs h5{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;margin-bottom:7px}
.sbs .v h5{color:var(--ok)}.sbs .g h5{color:var(--danger)}

/* review */
.scorewrap{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 14px 6px}
.ring{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--panel)}
.ring span{position:relative;display:flex;align-items:baseline;gap:2px}
.ring b{font-size:38px;line-height:1}.ring small{color:var(--dim);font-size:12px}
.grade{font-weight:900;letter-spacing:1.2px;font-size:12.5px;padding:5px 16px;border-radius:999px;border:1px solid}
.grade.ok{background:var(--ok-bg);color:#178a55;border-color:var(--ok-line)}
.grade.warn{background:var(--warn-bg);color:#b97e0b;border-color:var(--warn-line)}
.grade.bad{background:var(--dan-bg);color:#c74560;border-color:var(--dan-line)}
.gsub{color:var(--dim2);font-size:10.5px;text-align:center;padding:0 14px 8px}
.brk{padding:4px 14px 14px;display:flex;flex-direction:column;gap:10px}
.brow label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-bottom:4px}
.brow label b{color:var(--txt);font-family:var(--mono);font-size:11px}
.bar{height:6px;background:#e8eaf5;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--ok)}
.att{margin:0 14px 10px;border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--bg2);border-radius:9px;padding:9px 11px;font-size:12.5px}
.att.dim{border-left-color:var(--low)}
.att .h{display:flex;gap:8px;align-items:center;font-weight:700;flex-wrap:wrap}
.audit{margin:2px 14px 14px;font-size:11px;color:var(--dim2);font-family:var(--mono)}
.rrow{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) 44px 30px;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.rrow .val{min-width:0}
@media(max-width:700px){.rrow{grid-template-columns:minmax(90px,120px) minmax(0,1fr) 40px 26px;gap:6px}}
.rrow .k{color:var(--dim);font-size:11.5px}
.rrow .val{white-space:pre-wrap;word-break:break-word}
.rrow .c{font-family:var(--mono);font-size:10.5px;text-align:right}
.rrow .c.g{color:var(--ok)}.rrow .c.y{color:var(--warn)}.rrow .c.n{color:var(--dim2)}
.rrow .e{background:none;border:0;color:var(--dim2);font-size:13px}
.rrow.warnrow{background:var(--warn-bg)}
.rrow input,.rrow textarea{width:100%;background:var(--panel);border:1px solid var(--acc);color:var(--txt);border-radius:7px;padding:6px 8px;font:inherit}
.actionbar{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.sendnote{width:100%;font-size:11px;color:var(--dim2);font-family:var(--mono)}
.ackrow{display:flex;gap:8px;align-items:center;font-size:12px;color:#b97e0b}

/* console */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
td .mono{font-family:var(--mono);font-size:11.5px;color:#5b4fd0}
.pr{font-size:10px;font-weight:800;border-radius:6px;padding:2px 8px}
.pr.CAO{background:var(--dan-bg);color:#c74560}
.pr.TB{background:var(--warn-bg);color:#b97e0b}
.pr.THUONG{background:var(--acc-bg);color:#5b4fd0}
.stt{font-size:11px;font-weight:700;color:var(--ok)}
.log{font-family:var(--mono);font-size:11px;color:var(--dim);background:var(--bg2);border-radius:9px;padding:10px 12px;line-height:1.8;overflow:auto;max-height:260px}
.log .warn{color:#b97e0b}
.empty{color:var(--dim2);font-size:12.5px;text-align:center;padding:26px 10px;font-style:italic}
.note{margin-top:16px;color:var(--dim2);font-size:11.5px;text-align:center}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--dim2);border-top-color:var(--acc);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.rec-ind{width:9px;height:9px;border-radius:50%;background:#fff;display:inline-block;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}