:root{--bg:#f4f6fb;--card:#fff;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--brand:#2563eb;--brand2:#1d4ed8;
--good:#16a34a;--goodbg:#dcfce7;--bad:#dc2626;--badbg:#fee2e2;--warn:#d97706;--agent:#eef4ff;--lead:#fff;--chip:#f1f5f9;
--r:14px;--shadow:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.05)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;-webkit-text-size-adjust:100%}
.hidden{display:none!important}a{color:var(--brand);text-decoration:none}
.muted{color:var(--muted)}.err{color:var(--bad);min-height:1.2em}
.btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;min-height:42px;display:inline-flex;align-items:center;gap:6px;justify-content:center;transition:.12s}
.btn:hover{border-color:#cbd5e1;background:#f8fafc}.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{background:var(--brand2)}
.btn.big{min-height:50px;font-size:16px;width:100%}.btn.sm{min-height:34px;padding:5px 10px;font-size:13px}
.btn.good.on{background:var(--good);border-color:var(--good);color:#fff}.btn.bad.on{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.okay.on{background:var(--warn);border-color:var(--warn);color:#fff}
/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,#0f172a,#1e3a8a)}
.login-card{background:#fff;border-radius:20px;padding:32px 26px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center}
.login-card h1{margin:6px 0 2px;font-size:24px}.logo{font-size:40px;color:var(--brand)}
.login-card input{width:100%;margin:18px 0 12px;padding:14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:16px}
/* header */
.top{position:sticky;top:0;z-index:20;background:#0f172a;color:#fff;display:flex;align-items:center;gap:14px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top))}
.brand{color:#fff;font-weight:700;font-size:17px;white-space:nowrap}.top nav{display:flex;gap:4px;margin-left:auto}
.top nav a{color:#cbd5e1;padding:8px 12px;border-radius:9px;font-weight:600;font-size:14px}.top nav a.on{background:#1e293b;color:#fff}
.saved{font-size:12px;color:#86efac;min-width:56px;text-align:right}
main{max-width:920px;margin:0 auto;padding:16px 14px 140px}
/* queue */
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;margin-bottom:14px}
.progress-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.progress-wrap .big{font-size:22px;font-weight:800}
.bar{height:10px;background:#e5e7eb;border-radius:99px;overflow:hidden;flex:1;min-width:140px}.bar>i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:99px;transition:width .3s}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.seg{display:inline-flex;background:var(--chip);border-radius:11px;padding:3px}
.seg button{border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 11px;border-radius:9px;cursor:pointer;min-height:36px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.search{flex:1;min-width:160px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.list{display:flex;flex-direction:column;gap:8px}
.item{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;display:flex;gap:12px;align-items:center;cursor:pointer;border:2px solid transparent;color:inherit}
.item:hover{border-color:#bfdbfe}.item .main{flex:1;min-width:0}.item .t{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .s{font-size:13px;color:var(--muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
.av.mike{background:#0ea5e9}.av.chris{background:#8b5cf6}
.badge{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--chip);color:#334155;white-space:nowrap}
.badge.passed{background:var(--goodbg);color:#166534}.badge.failed{background:var(--badbg);color:#991b1b}.badge.real{background:#fef3c7;color:#92400e}
.badge.done{background:#16a34a;color:#fff}.badge.test{background:#e0e7ff;color:#3730a3}
.pager{display:flex;justify-content:center;gap:10px;align-items:center;margin:16px 0}
.empty{text-align:center;color:var(--muted);padding:40px 10px}
/* call view */
.callhead{display:flex;gap:12px;align-items:flex-start}.callhead h2{margin:0;font-size:19px;line-height:1.25}
.callhead .back{flex:none}.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
details.info{margin-top:10px;font-size:14px}details.info summary{cursor:pointer;color:var(--brand);font-weight:600;padding:4px 0}
details.info pre,.pre{white-space:pre-wrap;font:13px/1.45 ui-monospace,Menlo,monospace;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px;max-height:320px;overflow:auto;margin:6px 0}
audio{width:100%;margin-top:10px}
.convo{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.turn{display:flex;flex-direction:column;max-width:88%}
.turn.user{align-self:flex-start}.turn.agent{align-self:flex-end;width:88%}
.who{font-size:11.5px;color:var(--muted);font-weight:700;margin:0 6px 3px;display:flex;gap:8px;align-items:center}
.turn.agent .who{justify-content:flex-end}.who .ts{cursor:pointer;color:var(--brand)}
.bubble{padding:11px 14px;border-radius:16px;box-shadow:var(--shadow);white-space:pre-wrap;word-wrap:break-word}
.user .bubble{background:var(--lead);border-bottom-left-radius:5px}
.agent .bubble{background:var(--agent);border-bottom-right-radius:5px;border:2px solid transparent}
.turn.context{opacity:.55}.turn.context .bubble{box-shadow:none;border:1px dashed #cbd5e1}
.turn.focus .bubble{border-color:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.turn.l-good .bubble{background:#effcf3;border-left:5px solid var(--good)}
.turn.l-bad .bubble{background:#fff5f5;border-left:5px solid var(--bad)}
.orig-struck{text-decoration:line-through;color:#94a3b8;font-size:13.5px;margin-bottom:6px}.fixed{color:#166534;font-weight:500}
.fixed:before{content:"✓ Should say: ";font-weight:800}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tool{font:12.5px ui-monospace,Menlo,monospace;background:#fff;border:1px solid #cbd5e1;border-radius:99px;padding:4px 10px;cursor:pointer;color:#334155}
.tool.err{border-color:#fca5a5;color:#991b1b;background:#fff1f2}.tool:before{content:"⚙ "}
.toolbox{flex-basis:100%;font:12px/1.4 ui-monospace,Menlo,monospace;background:#0f172a;color:#e2e8f0;border-radius:10px;padding:10px;white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto}
.lab{display:flex;gap:8px;margin-top:8px;justify-content:flex-end;flex-wrap:wrap}
.lab .btn{min-height:46px;min-width:92px;font-size:15px}
.edit{background:#fff;border:1px solid #fecaca;border-radius:14px;padding:12px;margin-top:8px;box-shadow:var(--shadow)}
.edit label{font-weight:700;font-size:14px;display:block;margin-bottom:6px}
.edit textarea{width:100%;min-height:96px;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;font-size:15.5px;resize:vertical}
.edit input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tagbtn{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
.tagbtn.on{background:#1e293b;color:#fff;border-color:#1e293b}
.edit .foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px;flex-wrap:wrap}
.hint{font-size:12px;color:var(--muted)}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.dock .in{max-width:920px;margin:0 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dock .rate{display:flex;gap:6px}.dock .rate .btn{min-width:70px}
.dock input{flex:1;min-width:140px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
.dock .count{font-size:12.5px;color:var(--muted);white-space:nowrap}
.kbdhint{font-size:12px;color:var(--muted);text-align:center;margin:14px 0}
kbd{font:12px ui-monospace,Menlo,monospace;background:#fff;border:1px solid #cbd5e1;border-bottom-width:2px;border-radius:5px;padding:1px 6px}
/* export / ideas */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}.stat b{font-size:16px}
h3{margin:0 0 10px}.tagbar{display:flex;align-items:center;gap:10px;margin:6px 0}.tagbar .name{width:170px;font-weight:600;font-size:14px}
.tagbar .bar{height:14px}.tagbar .bar>i{background:linear-gradient(90deg,#f87171,#dc2626)}
.idea{border-top:1px solid var(--line);padding:10px 0;font-size:14px}.idea .o{color:#991b1b}.idea .w{color:#166534}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal-card{background:#fff;border-radius:16px;padding:20px;max-width:440px;width:100%}.keys td{padding:5px 8px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:90px;background:#0f172a;color:#fff;padding:10px 16px;border-radius:12px;z-index:60;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.25)}
@media (max-width:640px){
  .top{gap:8px;padding:8px 10px}.brand span{display:none}.top nav a{padding:8px 9px}
  main{padding:12px 10px 170px}.turn,.turn.agent{max-width:100%;width:100%}.grid2{grid-template-columns:1fr}
  .lab .btn{flex:1}.dock .rate{flex:1}.dock .rate .btn{flex:1;min-width:0}.dock .next{flex:1 1 100%}
  .kbdhint{display:none}.tagbar .name{width:120px}
}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}.row.end{justify-content:flex-end}
.lbl{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:14px}.num{width:80px;padding:7px;border:1px solid var(--line);border-radius:8px;font:inherit}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}.check{display:flex;gap:8px;align-items:flex-start;padding:8px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:14px}
.check input{margin-top:3px;width:18px;height:18px}
textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit}
textarea.editor{min-height:420px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.45}
.runcard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
.small{font-size:12.5px}.list{display:block}
.banner{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:10px 14px;margin-bottom:12px}
.banner.warn{background:#fffbeb;border-color:#fde68a}.banner.bad{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.docs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.doc{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;text-align:left;cursor:pointer;font:inherit;font-size:13.5px}
.doc.on{border-color:var(--brand);box-shadow:0 0 0 2px #bfdbfe}
pre.diff{max-height:50vh;overflow:auto;background:#0f172a;color:#e2e8f0;padding:10px;border-radius:10px;font-size:12px;white-space:pre-wrap;word-break:break-word}
pre.diff .add{color:#86efac;background:rgba(34,197,94,.12);display:inline-block;width:100%}pre.diff .del{color:#fca5a5;background:rgba(239,68,68,.12);display:inline-block;width:100%}
pre.diff .at{color:#93c5fd}pre.diff .h{color:#94a3b8}
span.add{color:#16a34a;font-weight:700}span.del{color:#dc2626;font-weight:700}
.modal-card.wide{max-width:900px;max-height:90vh;overflow:auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.stat .big{font-size:26px;font-weight:800}
.err{color:#b91c1c}button[disabled]{opacity:.5;cursor:not-allowed}