@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');
:root{
 /* Voicer-X — production-grade dark mode (Stitch design system) */
 --bg:#111319; --sidebar:#0b0e13; --surface:#1a1f27; --surface2:#272a30;
 --border:rgba(255,255,255,.06); --text:#e1e2e9; --muted:#94a3b8;
 --accent:#34d399; --accent2:#2bb889; --ink:#0e1116; --danger:#f87171; --ok:#34d399; --radius:12px;
 --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --botnav-h:60px; --header-h:56px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);
 font:15px/1.55 'Hanken Grotesk',ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:.6rem 1rem;
 background:var(--accent);color:var(--ink);font-weight:600;transition:.15s}
button:hover{background:var(--accent2)}
button.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
button.ghost:hover{background:var(--surface2)}
button.tonechip{padding:.25rem .7rem;font-size:.82rem;border-radius:999px}
button.tonechip.on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
button.danger{background:transparent;border:1px solid rgba(239,68,68,.5);color:#ff8a8a}
button.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
input,textarea,select{font:inherit;width:100%;background:var(--surface);color:var(--text);
 border:1px solid var(--border);border-radius:10px;padding:.65rem .75rem;margin-top:.3rem}
input:focus,textarea:focus{outline:0;border-color:var(--accent)}
/* Range sliders must not inherit the text-input box styling (padding/border/bg
   shrink the track and break the drag hit-area). Keep them native + accented. */
input[type=range]{background:transparent;border:0;border-radius:0;padding:0;accent-color:var(--accent);cursor:pointer}
textarea{min-height:120px;resize:vertical}
label{display:block;font-size:.85rem;color:var(--muted);margin-top:.85rem}
.muted{color:var(--muted)} .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:-.02em;font-size:1.3rem}
.brand .dot{color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* ---- Home dashboard ---- */
.home-hero{display:flex;align-items:center;gap:1.25rem;justify-content:space-between;
  background:linear-gradient(135deg,rgba(52,211,153,.16),rgba(52,211,153,.03));
  border:1px solid var(--border);border-radius:16px;padding:1.5rem 1.6rem;margin-bottom:1.4rem;flex-wrap:wrap}
.home-hero h1{margin:0 0 .35rem;font-size:1.5rem;letter-spacing:-.01em;font-weight:700}
.home-hero p{margin:0;color:var(--muted);max-width:34rem}
.home-hero .cta{background:var(--accent);color:var(--ink);font-size:1.02rem;font-weight:700;
  padding:.85rem 1.4rem;border-radius:12px;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.home-hero .cta:hover{background:var(--accent2)}
.hero-ctas{display:flex;gap:.7rem;flex-wrap:wrap}
.home-hero .cta.secondary{background:var(--surface2);color:var(--text);border:1px solid rgba(52,211,153,.5)}
.home-hero .cta.secondary:hover{background:var(--surface)}
.home-hero .cta.secondary:disabled{opacity:.7;cursor:default}
/* Home: action-first launcher — one big Start a call, chips for the rest */
.home-launch{text-align:center;padding:1.8rem 1.2rem 1.5rem;margin-bottom:1.4rem;
  background:linear-gradient(135deg,rgba(52,211,153,.16),rgba(52,211,153,.03));
  border:1px solid var(--border);border-radius:16px}
.home-launch h1{margin:0 0 .2rem;font-size:1.5rem;letter-spacing:-.01em;font-weight:700}
.home-launch p{margin:0 0 1.15rem;color:var(--muted)}
.launch-ctas{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.home-launch .cta{background:var(--accent);color:var(--ink);font-size:1.02rem;font-weight:700;
  padding:.85rem 1.4rem;border-radius:12px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.home-launch .cta:hover{background:var(--accent2)}
.home-launch .cta.big{font-size:1.12rem;padding:.95rem 2.1rem}
.home-launch .cta.oncall{background:var(--danger);color:#fff}
.home-launch .cta.oncall:hover{background:#dc2626}
.home-launch .cta.oncall:disabled{opacity:.7;cursor:default}
.home-launch .cta.secondary{background:var(--surface2);color:var(--text);border:1px solid rgba(52,211,153,.5)}
.home-launch .cta.secondary:hover{background:var(--surface)}
.home-launch .cta.secondary:disabled{opacity:.7;cursor:default}
.launch-chips{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.chipbtn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:999px;
  padding:.42rem .95rem;font-size:.85rem;font-weight:600;transition:.15s}
.chipbtn:hover{color:var(--text);border-color:rgba(52,211,153,.5);background:var(--surface)}
/* ---- Settings: Features picker (toggle cards) ---- */
.featgrid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:.4rem}
.featcard{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;position:relative;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  padding:.75rem .85rem;transition:.15s;opacity:.75}
.featcard:hover{border-color:rgba(52,211,153,.35)}
.featcard.on{border-color:rgba(52,211,153,.4);opacity:1}
.featcard .fc-ico{font-size:1.2rem;line-height:1.3}
.featcard .fc-body{flex:1;min-width:0}
.featcard .fc-name{display:block;font-weight:600;font-size:.92rem}
.featcard .fc-desc{display:block;color:var(--muted);font-size:.78rem;line-height:1.35}
.featcard input{position:absolute;opacity:0;pointer-events:none;width:0;height:0;margin:0}
.featcard .fc-switch{flex:none;width:34px;height:19px;border-radius:999px;margin-top:.1rem;
  background:var(--surface);border:1px solid rgba(255,255,255,.15);position:relative;transition:.15s}
.featcard .fc-switch::after{content:'';position:absolute;left:2px;top:1px;width:15px;height:15px;
  border-radius:50%;background:var(--muted);transition:.15s}
.featcard input:checked~.fc-switch{background:var(--accent);border-color:var(--accent)}
.featcard input:checked~.fc-switch::after{left:16px;background:var(--ink)}
.featcard input:focus-visible~.fc-switch{outline:2px solid var(--accent);outline-offset:2px}
.home-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-bottom:1.4rem}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.15rem 1.2rem;text-align:left;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:.35rem;
  color:var(--text);font-weight:500;align-items:flex-start;width:100%}
.tile:hover{background:var(--surface2);border-color:rgba(52,211,153,.5);transform:translateY(-1px)}
.tile .tico{font-size:1.5rem;line-height:1}
.tile .tt{font-weight:700;font-size:1rem}
.tile .td{color:var(--muted);font-size:.85rem;font-weight:400}
.home-stats{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:1rem}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.1rem}
.stat .sv{font-size:1.6rem;font-weight:800;line-height:1.1}
.stat .sl{color:var(--muted);font-size:.82rem;margin-top:.2rem}
/* ---- Help ---- */
.help-block{margin-bottom:1.4rem}
.help-block h2{font-size:1.05rem;margin:0 0 .7rem}
.help-list{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.help-item{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:.9rem 1rem}
.help-item .hico{font-size:1.2rem;line-height:1.2;flex:none}
.help-item .ht{font-weight:700;font-size:.95rem}
.help-item .hd{color:var(--muted);font-size:.85rem}
.help-steps{counter-reset:step;display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.help-steps li{position:relative;padding-left:2.4rem;color:var(--text)}
.help-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-.1rem;
  width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:var(--ink);font-weight:700;
  display:grid;place-items:center;font-size:.9rem}
.help-steps li b{font-weight:700}
.help-steps li .hs{color:var(--muted);font-size:.88rem}
@media (max-width:640px){
  .home-hero{flex-direction:column;align-items:flex-start}
  .home-hero .cta{width:100%;justify-content:center}
  .hero-ctas{width:100%}
  /* Launcher stacks: full-width Start a call, phone options split 50/50 */
  .home-launch{padding:1.4rem 1rem 1.2rem}
  .launch-ctas .cta.big{flex:1 0 100%}
  .launch-ctas .cta.secondary{flex:1;padding:.78rem .3rem;font-size:.82rem;min-width:0}
  .chipbtn{font-size:.8rem;padding:.4rem .8rem}
}
.badge{font-size:.72rem;padding:.18rem .55rem;border-radius:999px;background:var(--surface2);border:1px solid var(--border);color:var(--muted)}
.badge.host{color:var(--accent);border-color:rgba(52,211,153,.5)}
.err{background:rgba(239,68,68,.12);color:#ff9b9b;padding:.6rem .8rem;border-radius:10px;margin:.5rem 0}
.ok{background:rgba(52,211,153,.14);color:#7fe3c4;padding:.6rem .8rem;border-radius:10px;margin:.5rem 0}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.auth .card{width:100%;max-width:380px}
.authtabs{display:flex;gap:.4rem;margin:.2rem 0 1rem}
.authtab{flex:1;background:transparent;border:1px solid var(--border);color:var(--muted);font-weight:600}
.authtab.active{background:var(--surface2);color:var(--text);border-color:var(--accent)}
.ordiv{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.8rem;margin:1rem 0}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--border)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.2rem}
.gicon{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
 background:#fff;color:#4285F4;font-weight:800;font-size:.8rem}
.approve-note{display:flex;gap:.6rem;align-items:flex-start;margin:.2rem 0 1rem;padding:.8rem .9rem;
 border-radius:12px;background:rgba(52,211,153,.16);border:1px solid rgba(52,211,153,.55);
 color:#cdeee2;font-size:.92rem;line-height:1.45}
.approve-note b{color:#fff}
.approve-ico{font-size:1.05rem;line-height:1.2}

/* app shell: sidebar + main */
.app{display:flex;min-height:calc(100vh - var(--header-h))}
.sidebar{width:250px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);
 display:flex;flex-direction:column;padding:1rem .75rem;gap:.4rem;position:sticky;
 top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto}
.nav{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:10px;color:var(--muted);cursor:pointer}
.nav:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav.active{background:var(--surface);color:var(--text)}
.navsec{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);opacity:.6;font-weight:700;padding:.75rem .7rem .15rem}
.navsec:first-of-type{padding-top:.35rem}
.navparent{justify-content:space-between;font-weight:600;color:var(--text)}
.navparent::after{content:"▾";font-size:.7rem;opacity:.7;margin-left:auto;transition:transform .15s}
.navparent.collapsed::after{transform:rotate(-90deg)}
.navgroup{display:flex;flex-direction:column;gap:.3rem;margin:.15rem 0 .15rem}
.navgroup.hide{display:none}
.navgroup .nav{padding-left:1.9rem;font-size:.95rem}
.navgroup .nav.active{background:var(--surface)}
.rec-on{color:#fff;background:#c0392b;border-color:#c0392b;animation:recpulse 1.2s ease-in-out infinite}
@keyframes recpulse{50%{opacity:.55}}
.side-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:.8rem}
.side-foot .uid{font-size:.82rem;color:var(--muted);margin-bottom:.6rem;word-break:break-all}
.foot-actions{display:flex;flex-direction:column;gap:.5rem}
.foot-actions form{margin:0}
.foot-actions button{width:100%;text-align:left}
.main{flex:1;min-width:0;padding:1.6rem 1.8rem;max-width:80vw}

/* top bar — visible on every screen, holds the call control + session timer */
.mtop{display:flex;align-items:center;gap:.85rem;position:sticky;top:0;z-index:30;
 height:var(--header-h);padding:0 1.2rem;background:var(--sidebar);border-bottom:1px solid var(--border)}
.mtop .burger{display:none}                 /* desktop: sidebar is always visible */
.mtop .brand{display:none}                  /* desktop: sidebar already shows the brand */
.mtop .spacer{flex:1}
.mtop .callbtn{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;
 padding:.45rem .9rem;border-radius:999px;line-height:1}
.callbtn.oncall{background:var(--danger);color:#fff}
.mtop .callbtn.oncall{background:var(--danger);color:#fff}
.mtop .callbtn.oncall:hover{background:#dc2626}
.call-timer{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:.82rem;
 letter-spacing:.04em;color:var(--accent);
 background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.32rem .7rem;line-height:1}
.mtop .user-chip{display:inline-block;font-size:.9rem;color:var(--text);max-width:22ch;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;
 background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.4rem .85rem;cursor:pointer}
#me-menu.menu .menucard{left:auto;right:0}
.drawer-backdrop{display:none}
/* fixed bottom icon nav — mobile only (shown in the media query below) */
.botnav{display:none}
.bn{flex:1 0 auto;min-width:11.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:.15rem;background:transparent;border:0;color:var(--muted);padding:.4rem .2rem;cursor:pointer;font-weight:600}
.bn .bi{font-size:1.3rem;line-height:1;position:relative}
.navdot{position:absolute;top:-2px;right:-6px;width:9px;height:9px;border-radius:50%;background:var(--accent,#34d399);box-shadow:0 0 0 2px var(--bg,#111)}
.bn .bnl{font-size:.62rem;letter-spacing:.01em}
.bn.active{color:var(--accent)}
.bn .badge{position:absolute;transform:translate(1.1rem,-.7rem)}
/* "More" popup sheet — mobile only, opened from the bottom nav */
.more-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:38}
.more-backdrop.open{display:block}
.more-sheet{display:none;position:fixed;left:0;right:0;z-index:39;
 bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom));
 background:var(--sidebar);border-top:1px solid var(--border);border-radius:18px 18px 0 0;
 box-shadow:0 -12px 40px rgba(0,0,0,.5);padding:1rem .6rem calc(1rem + env(safe-area-inset-bottom));
 grid-template-columns:repeat(4,1fr);gap:.5rem .2rem}
.more-sheet.open{display:grid}
.more-sheet .bn{flex:none;min-width:0}
/* documents: filters revealed under the search bar */
.docfilters{display:none;gap:.5rem;margin:-.4rem 0 1rem;flex-wrap:wrap}
.docfilters.open{display:flex}
.docfilters select{margin-top:0;width:auto;flex:1;min-width:140px}
.burger{background:transparent;border:1px solid var(--border);color:var(--text);
 font-size:1.1rem;line-height:1;padding:.45rem .7rem}
.sec{display:none} .sec.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;gap:.6rem;flex-wrap:wrap}
h1{font-size:1.3rem;margin:0;font-weight:700} h2{font-size:1.05rem;margin:0}
.inbox-tab.active{background:var(--accent,#34d399);color:#06281d;border-color:transparent;font-weight:600}
table.ctable{width:100%;border-collapse:collapse;font-size:.9rem}
table.ctable th{text-align:left;color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;padding:.5rem .6rem;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none}
table.ctable th:hover{color:var(--text)}
table.ctable td{padding:.65rem .6rem;border-bottom:1px solid var(--border);vertical-align:middle}
table.ctable tbody tr{cursor:pointer}
table.ctable tbody tr:hover{background:rgba(255,255,255,.04)}
table.ctable .col-num{text-align:center}
table.ctable td.col-num{text-align:center;color:var(--muted)}
.ctable .csub{font-weight:600;color:var(--text)}
.ctable .cattach{display:inline-flex;align-items:center;gap:.35rem;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.ctable .cattach a{color:var(--accent,#34d399)}
.ctable .cwhen{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ctable .unreaddot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent,#34d399);margin-right:.45rem;vertical-align:middle}
.sortarrow{margin-left:.3rem;font-size:.7rem;color:var(--accent,#34d399)}
ul.list{list-style:none;padding:0;margin:0}
ul.list li{padding:.75rem 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:.6rem;align-items:center}
ul.list li:last-child{border-bottom:0}
.bot-card h3{margin:0 0 .25rem;font-size:1.02rem}
.bot-card .exp{color:var(--muted);font-size:.86rem;min-height:2.4em}
.bot-actions{display:flex;gap:.5rem;margin-top:.9rem}
.bot-actions button{padding:.42rem .75rem;font-size:.85rem}

/* chat tab */
#sec-chat.active{display:flex;flex-direction:column;height:calc(100vh - 3.2rem - var(--header-h))}
#sec-chat .section-head{flex-shrink:0}
#sec-chat #expert{width:auto;min-width:150px;margin:0}
.chatwrap{flex:1;min-height:0;display:flex;flex-direction:column;
 border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.msgs{flex:1;min-height:0;overflow-y:auto;padding:1.2rem 1rem;display:flex;flex-direction:column;gap:1rem}
.msg{display:flex;gap:.7rem;max-width:100%}
.msg .who{font-size:.72rem;color:var(--muted);margin-bottom:.2rem}
.msg .bubble{padding:.7rem .9rem;border-radius:var(--radius);white-space:pre-wrap;word-wrap:break-word;line-height:1.5}
.msg.you{justify-content:flex-end}
.msg.you .bubble{background:var(--accent);color:var(--ink);border-bottom-right-radius:4px}
.msg.bot .col{max-width:88%}
.msg.bot .bubble{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.bot .bubble.thinking::after{content:"▋";animation:blink 1s steps(2) infinite}
/* Rendered markdown inside a bot reply. Block children carry their own spacing, so
   reset the bubble's pre-wrap for them and keep margins tight. */
.msg.bot .bubble>div,.msg.bot .bubble>ul,.msg.bot .bubble>ol,.msg.bot .bubble>h1,.msg.bot .bubble>h2,.msg.bot .bubble>h3,.msg.bot .bubble>h4,.msg.bot .bubble>h5,.msg.bot .bubble>h6{white-space:normal}
.msg.bot .bubble>*{margin:0}
.msg.bot .bubble>*+*{margin-top:.45rem}
.msg.bot .bubble ul,.msg.bot .bubble ol{padding-left:1.25rem}
.msg.bot .bubble li{margin:.12rem 0}
.msg.bot .bubble h1,.msg.bot .bubble h2,.msg.bot .bubble h3,.msg.bot .bubble h4,.msg.bot .bubble h5,.msg.bot .bubble h6{font-size:1.02rem;font-weight:650}
.msg.bot .bubble code{background:rgba(255,255,255,.07);padding:.05rem .3rem;border-radius:4px;font-size:.9em}
/* Rendered markdown outside chat bubbles (analysis modals, summaries, drawers, profiles) */
.md-body{line-height:1.55;word-wrap:break-word}
.md-body>*{margin:0}
.md-body>*+*{margin-top:.45rem}
.md-body ul,.md-body ol{margin:.2rem 0;padding-left:1.25rem}
.md-body li{margin:.12rem 0}
.md-body h1,.md-body h2,.md-body h3,.md-body h4,.md-body h5,.md-body h6{font-size:1.02rem;font-weight:650}
.md-body code{background:rgba(255,255,255,.07);padding:.05rem .3rem;border-radius:4px;font-size:.9em}
.msg.sys{justify-content:center}
.msg.sys .sysnote{font-size:.82rem;color:var(--muted);background:rgba(255,255,255,.04);
 border:1px solid var(--border);border-radius:999px;padding:.3rem .9rem;text-align:center}

/* --- interactive items panel (email results, browsable) --- */
.msg.panel{width:100%}
.ip{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:.9rem}
.ip-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;flex-wrap:wrap;padding:.8rem .9rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.ip-title{font-weight:650;font-size:.98rem}
.ip-sum{color:var(--muted);font-size:.82rem;margin-top:.15rem}
.ip-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex-shrink:0}
.ip-seg button{background:transparent;color:var(--muted);border:0;padding:.35rem .7rem;font-size:.82rem;cursor:pointer}
.ip-seg button+button{border-left:1px solid var(--border)}
.ip-seg button.on{background:var(--accent);color:var(--ink);font-weight:600}
.ip-tools{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem .9rem;align-items:center;border-bottom:1px solid var(--border)}
.ip-tools .ip-search{flex:1;min-width:140px}
.ip .ip-search,.ip select,.ip .ip-more-row input{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.35rem .55rem;font-size:.82rem}
.ip-toggle{background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:.35rem .6rem;font-size:.82rem;cursor:pointer;white-space:nowrap}
.ip-toggle.on{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:600}
.ip-more-row{display:flex;flex-wrap:wrap;gap:.4rem;padding:.55rem .9rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.ip-more-row .ip-f-sender,.ip-more-row .ip-f-subj{flex:1;min-width:130px}
.ip-datel{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.8rem}
.ip-body{max-height:460px;overflow-y:auto;padding:.55rem .9rem .8rem}
.ip-count{color:var(--muted);font-size:.76rem;margin:.15rem 0 .5rem}
.ip-empty{color:var(--muted);text-align:center;padding:1.4rem}
.ip-group{margin-bottom:.7rem}
.ip-ghead{font-size:.76rem;color:var(--muted);text-transform:lowercase;letter-spacing:.02em;padding:.25rem 0;position:sticky;top:0;background:var(--surface)}
.ip-gcount{opacity:.6}
/* priority accents */
.ip-pri-high{--pc:var(--danger,#f87171)}
.ip-pri-normal{--pc:var(--accent,#34d399)}
.ip-pri-low{--pc:var(--muted,#94a3b8)}
.ip-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--pc);flex-shrink:0;display:inline-block;margin-top:.35rem}
/* list view */
.ip-list{display:flex;flex-direction:column}
.ip-row{display:flex;gap:.55rem;padding:.45rem .3rem;border-bottom:1px solid var(--border);border-left:2px solid var(--pc);padding-left:.55rem}
.ip-row:last-child{border-bottom:0}
.ip-main{min-width:0;flex:1}
.ip-l1{display:flex;justify-content:space-between;gap:.6rem}
.ip-subj{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-l2{color:var(--muted);font-size:.8rem;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-from{color:var(--text);opacity:.85}
.ip-note{color:var(--pc);opacity:.95}
.ip-date{color:var(--muted);font-size:.78rem;flex-shrink:0}
.ip-chip{display:inline-block;font-size:.72rem;color:var(--muted);margin-left:.25rem}
.ip-chip.unread{color:var(--accent)}
/* cards view */
.ip-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.55rem}
.ip-card{border:1px solid var(--border);border-top:3px solid var(--pc);border-radius:10px;padding:.6rem .65rem;background:var(--bg);display:flex;flex-direction:column;gap:.2rem}
.ip-card-top{display:flex;justify-content:space-between;align-items:center}
.ip-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--pc);border:1px solid var(--pc);border-radius:999px;padding:.05rem .45rem}
.ip-card .ip-from{font-weight:600;font-size:.85rem}
.ip-card .ip-subj{white-space:normal;font-weight:500}
.ip-card .ip-note{font-size:.78rem}
.ip-card .ip-meta{color:var(--muted);font-size:.74rem;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* table view */
.ip-tablewrap{overflow-x:auto}
.ip-table{width:100%;border-collapse:collapse;font-size:.82rem}
.ip-table th{text-align:left;color:var(--muted);font-weight:500;font-size:.74rem;padding:.35rem .5rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.ip-table td{padding:.4rem .5rem;border-bottom:1px solid var(--border);vertical-align:top}
.ip-table td.ip-subj{white-space:normal;max-width:340px}
.ip-table td.ip-acct{color:var(--muted);white-space:nowrap}
.ip-table tr.ip-pri-high td:first-child,.ip-table .ip-dot{margin-top:.15rem}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes lkspin{to{transform:rotate(360deg)}}
.lk-spin{display:inline-block;width:1rem;height:1rem;border-radius:50%;vertical-align:-.15rem;margin-right:.5rem;border:2px solid var(--border);border-top-color:var(--accent);animation:lkspin .7s linear infinite}
/* Rotary-phone "dialing" overlay shown while the host agent spins up */
#lk-dialing{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
#lk-dialing.show{display:flex;animation:fade .2s ease}
#lk-dialing .dial-card{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.6rem 2rem;background:var(--bg,#fff);border:1px solid var(--border);border-radius:1rem;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#lk-dialing .rotary{width:200px;height:auto;display:block}
/* finger wheel sits in the dial's local space (origin at its own centre); it
   pulls a digit then springs back faster — the classic rotary motion */
#lk-dialing .dial-wheel{transform-origin:0 0;animation:dial 3.6s infinite}
@keyframes dial{
  0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  9%{transform:rotate(108deg);animation-timing-function:cubic-bezier(.7,0,.3,1)}
  20%{transform:rotate(0deg)}
  30%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  38%{transform:rotate(72deg);animation-timing-function:cubic-bezier(.7,0,.3,1)}
  49%{transform:rotate(0deg)}
  59%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  68%{transform:rotate(144deg);animation-timing-function:cubic-bezier(.7,0,.3,1)}
  80%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
/* handset gives a tiny "ringing" shudder at the top of each loop */
#lk-dialing .handset{transform-origin:110px 28px;animation:ring 3.6s ease-in-out infinite}
@keyframes ring{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-2deg)}92%{transform:rotate(2deg)}96%{transform:rotate(-1deg)}}
#lk-dialing .glow{transform-origin:110px 120px;animation:glowpulse 2.4s ease-in-out infinite}
@keyframes glowpulse{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.04)}}
#lk-dialing .dial-text{font-size:1.2rem;font-weight:600;letter-spacing:.02em;color:var(--text)}
#lk-dialing .dots span{animation:blink 1.4s infinite both}
#lk-dialing .dots span:nth-child(2){animation-delay:.2s}
#lk-dialing .dots span:nth-child(3){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){#lk-dialing .dial-wheel,#lk-dialing .handset,#lk-dialing .glow{animation:none}}
.composer{display:flex;gap:.6rem;align-items:flex-end;padding:.8rem 1rem;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0;padding-bottom:calc(.8rem + env(safe-area-inset-bottom))}
.composer textarea{margin:0;min-height:46px;max-height:180px;resize:none}
.composer button{height:46px;white-space:nowrap}
.composer button.stop{background:var(--surface2);border:1px solid var(--border);color:var(--text)}
.composer button.stop:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.empty{margin:auto;color:var(--muted);text-align:center;max-width:420px}
.empty h2{color:var(--text);font-weight:600}

/* live tab: full-width, full-height — transcript scrolls, composer pinned at the bottom */
.main:has(#sec-live.active){max-width:none}
#sec-live.active{display:flex;flex-direction:column;height:calc(100vh - 3.2rem - var(--header-h))}
#sec-live .section-head{flex-shrink:0}
/* Full screen mode: fill the whole screen, header (with its icons) stays visible above the transcript */
#sec-live:fullscreen,#sec-live:-webkit-full-screen{
  background:var(--bg);height:100vh;padding:1.2rem 1.8rem;box-sizing:border-box}
#sec-live:fullscreen #live-card,#sec-live:-webkit-full-screen #live-card{max-height:none}
#sec-live #listen-cfg{flex-shrink:0;max-height:45%;overflow-y:auto}
#live-card{flex:1;min-height:0;display:flex;flex-direction:column}
#live-pane{flex:1;min-height:0;overflow-y:auto}
#sec-live .composer textarea{min-height:56px;font-size:1.02rem}
/* Inline analysis view: same window shape as the transcript (fills the card, messages scroll) */
#live-analysis{display:none;flex:1;min-height:0;flex-direction:column}
#live-analysis.open{display:flex}
#an-msgs{flex:1;min-height:0;overflow-y:auto;padding:.2rem 0}
#an-msgs .bubble img{max-width:min(260px,100%);border-radius:10px;display:block}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;place-items:center;padding:1rem;z-index:60}
.overlay.open{display:grid}
.modal{background:var(--bg);border:1px solid var(--border);border-radius:16px;width:100%;max-width:540px;max-height:90vh;overflow:auto;padding:1.4rem}
/* Chat/conversation modals: wide by default — 80% on desktop, 90% on mobile. */
.modal.wide{max-width:80%}
@media(max-width:640px){.modal.wide{max-width:90%}}
/* Voice-answerable confirm dialog: stacks above the regular modal + lightbox
   so it can pop over anything, and above it a spoken answer can dismiss it. */
.overlay.vc{z-index:200}
.vc-q{line-height:1.5;white-space:pre-line}
.vc-in{margin-top:.75rem}
.pod-card{border:1px solid var(--border);border-radius:var(--radius);padding:.5rem .7rem;background:var(--surface)}
.pod-card>summary{cursor:pointer;font-size:.84rem;color:var(--muted);list-style:none}
.pod-card>summary::-webkit-details-marker{display:none}
.pod-card[open]>summary{color:var(--text);margin-bottom:.2rem}
.pod-table{width:100%;border-collapse:collapse;font-size:.86rem}
.pod-table th,.pod-table td{text-align:left;vertical-align:top;padding:.35rem .5rem;border-bottom:1px solid var(--border)}
.pod-table thead th{position:sticky;top:0;background:var(--bg);font-size:.78rem;color:var(--muted);font-weight:600}
.pod-table td.n,.pod-table th.n{width:2rem;color:var(--muted);text-align:right}
.pod-table td.sp,.pod-table th.sp{white-space:nowrap;color:var(--accent);font-weight:600}
.modal h2{margin-bottom:.4rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}
/* Add-source drag & drop zone */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  text-align:center;padding:1.8rem 1rem;margin-top:.5rem;cursor:pointer;
  border:1.5px dashed var(--border);border-radius:14px;background:var(--surface);
  transition:.15s;color:var(--muted)}
.dropzone:hover{border-color:var(--accent);background:var(--surface2)}
.dropzone.over{border-color:var(--accent);background:rgba(52,211,153,.08);color:var(--text)}
.dropzone .dz-ic{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--surface2);color:var(--accent);transition:.15s}
.dropzone.over .dz-ic{background:var(--accent);color:var(--ink);transform:translateY(-2px)}
.dropzone .dz-main{font-weight:600;color:var(--text);font-size:.95rem}
.dropzone .dz-main b{color:var(--accent)}
.dropzone .dz-sub{font-size:.76rem}
.filechips{display:flex;flex-direction:column;gap:.4rem;margin-top:.7rem}
.filechip{display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);font-size:.85rem}
.filechip .fc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filechip .fc-size{color:var(--muted);font-size:.76rem;flex:none}
.filechip .fc-stat{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.filechip.done .fc-stat{color:var(--ok)}
.filechip.err{border-color:rgba(248,113,113,.4)}
.filechip.err .fc-stat{color:var(--danger)}
.fc-spin{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:fcspin .7s linear infinite}
@keyframes fcspin{to{transform:rotate(360deg)}}

@media(max-width:820px){
 /* Safety net: never let a wide child (long doc names, emails, UIDs in
    tables/lists) push the whole page wider than the screen. clip keeps the
    sticky header working, unlike overflow:hidden. */
 html,body{overflow-x:clip}
 .app{flex-direction:column}
 /* Bigger, sticky top bar: burger + app name + timer + call + user. */
 .mtop{height:auto;gap:.6rem;padding:.85rem 1rem;padding-top:calc(.85rem + env(safe-area-inset-top));z-index:25;flex-wrap:nowrap}
 .mtop .burger{display:inline-block;font-size:1.9rem;padding:.55rem .9rem;border-radius:12px;flex:none}
 .mtop .brand{cursor:pointer}
 .mtop .callbtn{font-size:1.35rem;line-height:1;padding:.5rem .7rem;border-radius:12px;gap:0;
   background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;flex:none}
 .mtop .callbtn.oncall{background:var(--danger);border-color:var(--danger);color:#fff}
 .mtop .callbtn .lbl{display:none}          /* phones: icon-only call button to save room */
 /* Brand is the only flexible item in the mobile header — it truncates with
    an ellipsis instead of wrapping so burger/timer/call/user never get squeezed. */
 .mtop .brand{display:inline-block;font-size:1.5rem;min-width:0;flex:0 1 auto;
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mtop .call-timer{flex:none}
 .mtop .user-chip{max-width:28vw;flex:none}
 /* The sidebar menu slides up from the bottom as a scrollable drawer. */
 .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;height:auto;
   max-height:78dvh;overflow-y:auto;z-index:40;gap:.15rem;padding:1.4rem 1rem calc(1rem + env(safe-area-inset-bottom));
   border:0;border-top:1px solid var(--border);border-radius:20px 20px 0 0;
   box-shadow:0 -12px 40px rgba(0,0,0,.5);transform:translateY(105%);transition:transform .25s ease}
 .sidebar.open{transform:none}
 .sidebar::before{content:"";position:absolute;top:.6rem;left:50%;transform:translateX(-50%);
   width:40px;height:4px;border-radius:999px;background:var(--border)}
 .sidebar>.brand{display:none}
 .nav{font-size:1.05rem;padding:.85rem .8rem}
 .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35;
   opacity:0;pointer-events:none;transition:opacity .22s ease}
 .drawer-backdrop.open{opacity:1;pointer-events:auto}
 .main{padding:1.1rem;padding-bottom:calc(var(--botnav-h) + 1rem + env(safe-area-inset-bottom));max-width:90vw}
 /* fixed bottom icon bar, always present */
 .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:stretch;
   overflow-x:auto;background:var(--sidebar);border-top:1px solid var(--border);
   padding-bottom:env(safe-area-inset-bottom);height:calc(var(--botnav-h) + env(safe-area-inset-bottom))}
 /* Chat fills the screen between the top bar and the bottom icon nav.
    The section is pinned, the messages scroll, and the composer stays in
    normal flow at the very bottom — no fragile position:fixed alignment. */
 #sec-chat.active{position:fixed;left:0;right:0;z-index:20;
   top:calc(3.9rem + env(safe-area-inset-top));
   bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom));
   height:auto;margin:0;padding:.8rem;background:var(--bg);
   display:flex;flex-direction:column}
 #sec-chat .chatwrap{border:0;border-radius:0;background:none}
 #sec-chat .composer{padding:.7rem 0 .2rem;border-top:1px solid var(--border)}
 /* Bigger, easier-to-tap input on phones. */
 #sec-chat .composer textarea{min-height:66px;font-size:1.05rem;padding:.7rem .8rem}
 #sec-chat .composer button{height:auto;min-height:66px;padding:0 1.2rem;font-size:1rem}
 /* Live call fills the screen the same way chat does. */
 #sec-live.active{position:fixed;left:0;right:0;z-index:20;
   top:calc(3.9rem + env(safe-area-inset-top));
   bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom));
   height:auto;margin:0;padding:.8rem;background:var(--bg);
   display:flex;flex-direction:column}
 #sec-live .composer textarea{min-height:66px;font-size:1.05rem;padding:.7rem .8rem}
 #sec-live .composer button{height:auto;min-height:66px;padding:0 1.2rem;font-size:1rem}
}

/* documents: folder chips + sortable table */
.chips{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.chip{padding:.34rem .8rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);
 color:var(--muted);cursor:pointer;font-size:.83rem;white-space:nowrap;transition:.12s}
.chip:hover{background:var(--surface2);color:var(--text)}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.chip.add{border-style:dashed;color:var(--muted)}
.toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.toolbar input,.toolbar select{margin-top:0;width:auto}
.toolbar .search{min-width:220px;flex:1}
/* keep the (wide) docs table inside its own scroll box so it never widens the
   page — a page-level horizontal overflow breaks the sticky top bar's taps on iOS */
.tablewrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.docs{width:100%;border-collapse:collapse;font-size:.88rem}
table.docs th,table.docs td{text-align:left;padding:.62rem .55rem;border-bottom:1px solid var(--border);vertical-align:middle}
table.docs th{color:var(--muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;
 cursor:pointer;user-select:none;white-space:nowrap}
table.docs th:hover{color:var(--text)}
table.docs tbody tr{cursor:pointer;transition:background .12s}
table.docs tbody tr:hover{background:rgba(255,255,255,.04)}
table.docs tr.sel{background:rgba(52,211,153,.16)}
table.docs tr.sel:hover{background:rgba(52,211,153,.22)}
.docname{color:var(--text);font-weight:500;overflow-wrap:anywhere}
.docname:hover{color:var(--accent)}
.cellmuted{color:var(--muted);white-space:nowrap}
.act{display:flex;gap:.4rem;justify-content:flex-end}
.act button{padding:.34rem .65rem;font-size:.8rem}
.sortarrow{margin-left:.25rem;color:var(--accent)}
table.docs th.chkcell,table.docs td.chkcell{width:30px;padding-left:.55rem;padding-right:0;text-align:center}
.rchk{pointer-events:none;width:15px;height:15px;accent-color:var(--accent);margin:0;vertical-align:middle}
#allchk{width:15px;height:15px;accent-color:var(--accent);margin:0;cursor:pointer}
table.docs tbody tr[draggable]{cursor:grab}
table.docs tr.dragging{opacity:.45}
table.docs tr.dropok>td{background:rgba(52,211,153,.18);box-shadow:inset 0 0 0 1px var(--accent)}
a.dropok{outline:2px dashed var(--accent);outline-offset:3px;border-radius:6px}
.otag{display:inline-block;font-size:.66rem;line-height:1;padding:.18rem .42rem;border-radius:6px;border:1px solid var(--border);color:var(--muted);margin-left:.3rem;vertical-align:middle}
.otag.gen{color:var(--accent);border-color:rgba(52,211,153,.45)}
.dochint{font-size:.76rem;color:var(--muted);margin:-.2rem 0 .7rem}
table.docs tr.folderrow{background:rgba(255,255,255,.035)}
table.docs tr.folderrow:hover{background:rgba(52,211,153,.10)}
table.docs tr.folderrow td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.folderrow .ficon{font-size:1.15rem}
.folderrow .fname .docname{font-weight:700;font-size:.95rem}
.folderrow .fcount{margin-left:.55rem;font-size:.7rem;color:var(--muted);background:var(--surface2);border:1px solid var(--border);padding:.12rem .5rem;border-radius:999px;vertical-align:middle;white-space:nowrap}
.folderrow .fopen{margin-left:.6rem;font-size:.74rem;color:var(--accent);opacity:0;transition:opacity .12s}
.folderrow:hover .fopen{opacity:1}

/* document action buttons: icon + label (label hides on small screens) */
.act .actbtn{display:inline-flex;align-items:center;gap:.35rem}
.act .actbtn .ico{font-size:.95rem;line-height:1}

/* icon-only buttons (e.g. live-call actions: analyze / listeners / camera) */
button.ghost.icon{padding:.5rem;width:2.4rem;height:2.4rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;flex:none}
/* calls: accordion list */
.calls-acc{display:flex;flex-direction:column;gap:.6rem}
.podform{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.podform label{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
.podform label.wide{grid-column:1 / -1}
.podform label.chk{flex-direction:row;align-items:center;gap:.4rem}
.podform input,.podform textarea{font:inherit}
@media(max-width:640px){.podform{grid-template-columns:1fr}}
.podep{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--border)}
.podep:last-child{border-bottom:0}
.podep .pmeta{flex:1;min-width:0}
.podep .pt{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.podep .ps{font-size:.78rem;color:var(--muted)}
.podep .live{font-size:.72rem;color:var(--accent)}
.podep .pnote{font-size:.74rem;color:var(--muted);margin-top:.25rem;line-height:1.35}
.podep audio{width:100%;height:34px;margin:.35rem 0 .15rem}
/* Audio editor */
.aed-canvas{width:100%;height:130px;display:block;background:var(--surface2);border-radius:10px;cursor:crosshair;touch-action:none;border:1px solid var(--border)}
.aed-time{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin:.25rem .1rem}
.aed-tools{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.aed-segs{display:flex;flex-direction:column;gap:.3rem;margin:.4rem 0;max-height:150px;overflow:auto}
.aed-seg{display:flex;align-items:center;gap:.5rem;font-size:.82rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.3rem .5rem}
.aed-seg .n{font-weight:700;color:var(--accent);min-width:1.2em}
.aed-seg .rng{flex:1;font-family:monospace;font-size:.78rem}
.aed-filters{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin:.5rem 0}
.aed-filters label{font-size:.82rem;display:flex;align-items:center;gap:.35rem}
.podep .pnote.ok{color:var(--accent)}
.podep .pnote:empty{display:none}
.callcard{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.callcard.open{border-color:rgba(52,211,153,.5)}
.callrow{display:flex;align-items:stretch}
.callhead{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;cursor:pointer;flex:1;min-width:0;text-align:left;background:none;border:0;color:var(--text)}
.callrow .del{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;padding:0 1rem;font-size:1rem;line-height:1}
.callrow .del:hover{color:#e5484d;background:rgba(229,72,77,.08)}
.callrow .callstart{flex:none;align-self:center;white-space:nowrap;margin-right:.4rem;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.45);color:var(--accent);border-radius:999px;padding:.34rem .8rem;font-size:.8rem;cursor:pointer}
.callrow .callstart:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
@media(max-width:640px){.callrow .callstart{font-size:0;padding:.34rem .55rem}.callrow .callstart::before{content:"🎙️";font-size:.95rem}}
.callhead:hover{background:rgba(255,255,255,.04)}
.callhead .cwhen{font-weight:600}
.callhead .cmeta{color:var(--muted);font-size:.82rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.callhead .spacer{flex:1}
.callhead .chev{color:var(--muted);transition:transform .2s ease;font-size:.9rem}
.callcard.open .chev{transform:rotate(90deg);color:var(--accent)}
.callbody{padding:0 1rem 1rem;border-top:1px solid var(--border)}
.callbody h4{margin:.9rem 0 .3rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.callbody .recap{line-height:1.5}
.callbody .recap p,.callbody .recap div{margin:.35rem 0}
.callbody .recap h1,.callbody .recap h2,.callbody .recap h3{margin:.7rem 0 .3rem;font-size:.95rem}
.callbody .recap ul,.callbody .recap ol{margin:.3rem 0;padding-left:1.2rem}
.callbody .recap li{margin:.15rem 0}
.callbody .recap code{background:rgba(255,255,255,.07);padding:.05rem .3rem;border-radius:4px;font-size:.9em}
/* tabbed summary/transcript */
.calltabs{display:flex;gap:.3rem;margin:.8rem 0 .2rem;border-bottom:1px solid var(--border)}
.calltab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;padding:.45rem .7rem;font-size:.85rem;font-weight:600;margin-bottom:-1px}
.calltab.active{color:var(--accent);border-bottom-color:var(--accent)}
.calltab:hover{color:var(--text)}
.callpane{display:none;position:relative}
.callpane.active{display:block}
.copybtn{position:absolute;top:0;right:0;background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:6px;padding:.2rem .5rem;font-size:.75rem;z-index:1}
.copybtn:hover{color:var(--accent);border-color:var(--accent)}
.tlist{list-style:none;padding:0;margin:.3rem 0 0;max-height:340px;overflow:auto}
.tlist li{padding:.4rem 0;border-bottom:1px solid var(--border)}
.tlist li:last-child{border-bottom:0}
.tlist .spk{color:var(--accent);font-weight:600;margin-right:.35rem}
.ts{color:var(--muted);font-weight:400;font-size:.74rem;cursor:default}
.linkbtn{background:none;border:0;color:var(--accent);padding:.3rem 0;font-size:.85rem;cursor:pointer}
/* call card: consolidated actions + Download & send menu */
.callacts{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 .7rem}
.callacts .ghost{font-size:.85rem;padding:.45rem .8rem;border-radius:999px}
.podready{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:rgba(52,211,153,.1);
 border:1px solid rgba(52,211,153,.4);border-radius:12px;padding:.6rem .8rem;margin:.2rem 0 .7rem;font-size:.88rem}
.podready .pl{font-weight:600;color:var(--accent)}
.podready .spacer{flex:1}
.menu{position:relative}
.menu>summary{list-style:none;display:inline-flex;align-items:center;gap:.35rem;
 background:transparent;border:1px solid var(--border);color:var(--text);border-radius:999px;
 padding:.45rem .8rem;font-size:.85rem;font-weight:600;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{background:var(--surface2)}
.menu[open]>summary{background:var(--surface2);border-color:var(--accent)}
.menucard{position:absolute;z-index:6;top:calc(100% + .35rem);left:0;min-width:13rem;
 background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.3rem;
 box-shadow:0 10px 28px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:.1rem}
.menucard a,.menucard button{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;
 background:none;border:0;color:var(--text);padding:.55rem .65rem;border-radius:8px;font-size:.88rem;
 font-weight:500;cursor:pointer;text-decoration:none}
.menucard a:hover,.menucard button:hover{background:var(--surface2)}

@media(max-width:680px){
 .section-head{margin-bottom:.9rem}
 .section-head h1{font-size:1.2rem}
 .toolbar .search{min-width:0;flex:1 1 100%}
 .toolbar select{flex:1}
 table.docs{font-size:.92rem}
 table.docs th,table.docs td{padding:.62rem .4rem}
 /* keep Date + Source (origin) columns; drop the rest (Status lives in the info modal) */
 .col-type,.col-format,.col-size,.col-chunks,.col-status{display:none}
 .act .actbtn{padding:.45rem .55rem}
 .otag .ol{display:none}
 .dochint{display:none}
 .folderrow .fopen{display:none}
 .col-added{font-size:.8rem}
}

/* ---- Studio: setup form ---- */
.studio-card{padding:1.4rem 1.5rem}
.studio-intro{font-size:.9rem;margin:0 0 1.4rem;line-height:1.55}

/* saved setups (persisted server-side; see app/studio_sessions.py) */
.studio-saved{margin:0 0 1.2rem;border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;background:var(--surface)}
.studio-saved-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.studio-saved-head h3{margin:0;font-size:.95rem;font-weight:650}
.studio-saved-list{display:flex;flex-direction:column;gap:.35rem}
.saved-row{display:flex;align-items:center;gap:.5rem;border:1px solid var(--border);border-radius:10px;padding:.35rem .55rem;background:var(--surface2)}
.saved-row.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.saved-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;text-align:left;background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:.2rem .1rem}
.saved-t{font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-s{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-go{background:none;border:1px solid var(--border);border-radius:8px;color:var(--accent);font-size:.85rem;cursor:pointer;padding:.3rem .55rem;flex-shrink:0}
.saved-go:hover{background:rgba(52,211,153,.12);border-color:var(--accent)}

/* invitee entry (step 6) */
.invitee-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.invitee-row input{flex:1;min-width:140px}
#studio-invitees{display:inline-flex;flex-wrap:wrap;gap:.35rem}
#studio-invitees .chip{max-width:100%}
.studio-hero{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;padding:.4rem 0 .2rem}
.studio-hero .assist-btn{font-size:1rem;padding:.85rem 1.4rem}
.studio-manual-toggle{display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;padding:.35rem .2rem}
.studio-manual-toggle:hover{color:var(--text)}
.studio-manual-toggle .chev{display:inline-block;transition:transform .2s ease}
.studio-manual-toggle.open .chev{transform:rotate(90deg)}
.studio-manual{overflow:hidden;animation:studioSlide .24s ease}
@keyframes studioSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* wizard progress rail — shared across the 5 studio steps (Format/Topic/Sources/Experts/Review) */
.wiz-rail{display:flex;align-items:center;margin:0 0 1.3rem}
.wiz-node{display:flex;align-items:center;flex:1}
.wiz-node:last-child{flex:0}
.wiz-dot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0;
 font:600 .72rem var(--mono);border:1.5px solid var(--border);color:var(--muted);background:var(--surface2);transition:.2s}
.wiz-node.done .wiz-dot{background:rgba(52,211,153,.12);border-color:var(--accent);color:var(--accent)}
.wiz-node.current .wiz-dot{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.wiz-label{font-size:.76rem;color:var(--muted);margin-left:.4rem;white-space:nowrap;display:none}
.wiz-node.current .wiz-label{color:var(--text);font-weight:650}
.wiz-line{height:1.5px;flex:1;background:var(--border);margin:0 .5rem}
.wiz-node.done .wiz-line{background:var(--accent);opacity:.4}
@media(min-width:560px){.wiz-label{display:inline}}

.studio-step{padding:1.15rem 0;border-top:1px solid var(--border);display:none}
.studio-step.active{display:block}
.studio-step:first-of-type{border-top:0;padding-top:0}
#studio-manual-back:disabled{opacity:.35;cursor:default}
.studio-step-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;flex-wrap:wrap}
.studio-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
 background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:.78rem;font-weight:700;flex-shrink:0}
.studio-step-title{font-weight:650;font-size:1rem}
.studio-hint{font-size:.82rem;margin:.1rem 0 .7rem}
.studio-actions{display:flex;align-items:center;gap:.8rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--border);flex-wrap:wrap}
.studio-actions #studio-start{padding:.7rem 1.4rem;font-size:.95rem}
.assist-btn{margin-left:auto;padding:.4rem .85rem;font-size:.82rem;border-color:rgba(52,211,153,.5);color:var(--accent)}
.assist-btn:hover{background:rgba(52,211,153,.12)}
.assist-btn[disabled]{opacity:.55;cursor:default}

/* format picker as cards */
.fmt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem}
.fmt-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;
 background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.75rem .85rem;border-radius:12px;transition:.15s}
.fmt-btn:hover{background:var(--surface2);border-color:rgba(255,255,255,.22)}
.fmt-btn.active{border-color:var(--accent);background:rgba(52,211,153,.12);box-shadow:0 0 0 1px var(--accent) inset}
.fmt-ico{font-size:1.25rem;line-height:1}
.fmt-name{font-weight:650;font-size:.92rem}
.fmt-sub{font-size:.74rem;color:var(--muted)}

/* assist results panel */
.assist-panel{margin-top:.9rem;border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.07);border-radius:12px;padding:1rem 1.1rem}
.assist-panel.loading{color:var(--muted);font-size:.88rem}
.assist-sec{margin-top:.9rem}
.assist-sec:first-child{margin-top:0}
.assist-sec h4{margin:0 0 .45rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.assist-subj{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem;font-size:.92rem;display:flex;gap:.6rem;align-items:center;justify-content:space-between}
.assist-subj button{padding:.3rem .7rem;font-size:.78rem;flex-shrink:0}
.assist-subj.pick{justify-content:flex-start;cursor:pointer;margin-top:.4rem}
.assist-subj.pick:first-of-type{margin-top:0}
.assist-subj.pick input{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.assist-subj.pick:has(input:checked){border-color:var(--accent);background:rgba(52,211,153,.1)}
.assist-q{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem}
.assist-q li{font-size:.88rem;color:var(--text);padding-left:1.1rem;position:relative}
.assist-q li::before{content:"?";position:absolute;left:0;color:var(--accent);font-weight:700}
.expert-list{display:flex;flex-direction:column;gap:.5rem}
.expert-row{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem}
.expert-row .exi{flex:1;min-width:0}
.expert-row .exn{font-weight:600;font-size:.9rem}
.expert-row .exr{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.expert-row .exd{font-size:.8rem;color:var(--text);margin-top:.2rem;line-height:1.35}
.expert-row .exl{display:inline-block;font-size:.78rem;margin-top:.25rem;color:var(--accent);text-decoration:none}
.expert-row .exl:hover{text-decoration:underline}
.expert-row button{flex-shrink:0;padding:.32rem .7rem;font-size:.78rem}
.expert-row button.added{background:var(--surface2);border:1px solid var(--border);color:var(--muted);cursor:default}
/* live roster chips (tap to tune an expert mid-conversation) */
.exchip{display:inline-flex;flex-direction:column;gap:.05rem;text-align:left;padding:.4rem .7rem;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;min-width:0}
.exchip:hover{background:var(--surface2);border-color:var(--accent)}
.exchip.speaking{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.exchip .exn{font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:.3rem}
.exchip .exmeta{font-size:.72rem;color:var(--muted)}
/* background-jobs strip on the Live view (agent-started work in progress) */
#live-jobs{margin-bottom:.8rem}
.jobrow{display:flex;align-items:center;gap:.55rem;padding:.45rem .7rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:.35rem}
.jobrow.done{opacity:.75}
.jobmain{display:flex;flex-direction:column;min-width:0;flex:1}
.jobname{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jobstat{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jobtime{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.jobspin{width:.9rem;height:.9rem;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:jobspin 1s linear infinite}
@keyframes jobspin{to{transform:rotate(360deg)}}
.jobhint{font-size:.72rem;color:var(--muted);padding:.1rem .2rem .2rem}

/* ---- in-call expert cards (web call dock) ---- */
#lkx{position:fixed;right:16px;bottom:16px;z-index:60;display:none;flex-direction:column;gap:.5rem;
  width:min(300px,calc(100vw - 32px));max-height:60vh;overflow:auto}
#lkx.show{display:flex}
#lkx .lkx-h{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding-left:.1rem}
.lkxcard{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:.55rem .7rem;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.lkxcard:hover{background:var(--surface2);border-color:var(--accent)}
.lkxcard.speaking{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.lkxcard .lkxn{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.35rem}
.lkxcard .lkxdot{width:.5rem;height:.5rem;border-radius:50%;background:var(--muted);flex:none}
.lkxcard.speaking .lkxdot{background:var(--accent);box-shadow:0 0 0 3px rgba(52,211,153,.3)}
.lkxcard .lkxrole{color:var(--muted);font-size:.76rem;margin-top:.1rem}
.lkxcard .lkxmeta{color:var(--muted);font-size:.7rem;margin-top:.3rem;display:flex;flex-wrap:wrap;gap:.4rem}
.lkxcard .lkxgear{margin-left:auto;color:var(--muted);font-size:.8rem}
.lkxcard.standby{opacity:.62}
.lkxcard.standby .lkxdot{background:var(--muted);box-shadow:none}
.lkxbadge{font-family:var(--mono);font-size:.6rem;letter-spacing:.03em;padding:.1rem .4rem;border-radius:999px;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.lkxsb{margin-top:.5rem;width:100%;font-size:.78rem;padding:.35rem .5rem;border-radius:8px;
  background:var(--surface2);color:var(--text);border:1px solid var(--border);cursor:pointer}
.lkxsb:hover{border-color:var(--accent)}
.lkxstandby{font-size:.85rem;padding:.5rem;border-radius:8px;background:var(--surface2);
  color:var(--text);border:1px solid var(--border);cursor:pointer}
.lkxstandby.on{color:var(--accent);border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.1)}

/* ---- per-expert settings sheet ---- */
#lkxsheet{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);z-index:70;padding:18px}
#lkxsheet.show{display:flex}
.lkxsheet-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(0,0,0,.5);padding:20px;width:100%;max-width:380px;max-height:88vh;overflow:auto}
.lkxsheet-card h3{margin:0 0 .25rem;font-size:1.1rem}
.lkxsheet-card .lkxsub{color:var(--muted);font-size:.84rem;margin:0 0 1rem}
.lkxf{margin-bottom:.85rem}
.lkxf label{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:.3rem}
.lkxf label .lkxval{color:var(--text);font-variant-numeric:tabular-nums}
.lkxf input[type=range]{width:100%;accent-color:var(--accent)}
.lkxf input[type=text],.lkxf textarea{width:100%;background:var(--surface2);border:1px solid var(--border);
  color:var(--text);border-radius:10px;padding:.5rem .6rem;font:inherit;font-size:.88rem;outline:none;box-sizing:border-box}
.lkxf input[type=text]:focus,.lkxf textarea:focus{border-color:var(--accent)}
.lkxf textarea{resize:vertical;min-height:2.6rem}
.lkxtoast{font-size:.8rem;color:var(--ok);margin:.2rem 0 .6rem;min-height:1rem}
.lkxrow{display:flex;gap:.5rem}
.lkxrow button{flex:1}

/* speaker chips (invitees, attached-source chips, etc.) */
.chip-x{border:0;background:transparent;color:var(--muted);font-size:1rem;line-height:1;padding:0 .25rem;cursor:pointer;border-radius:6px}
.chip-x:hover{color:var(--text);background:var(--surface2)}
.mode-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.live-typing{font-size:.85rem;color:var(--muted);font-style:italic;padding:.3rem 0}

/* AI icon affordance on inputs */
.input-ai{position:relative}
.input-ai>input{width:100%;padding-right:2.7rem}
.ai-icon{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);width:1.9rem;height:1.9rem;display:grid;place-items:center;border:1px solid rgba(52,211,153,.45);background:rgba(52,211,153,.1);color:var(--accent);border-radius:8px;cursor:pointer;font-size:.95rem;line-height:1;padding:0;transition:background .12s,transform .12s}
.ai-icon:hover{background:rgba(52,211,153,.22);transform:translateY(-50%) scale(1.06)}
.ai-icon-inline{position:static;transform:none;flex-shrink:0;align-self:center}
.ai-icon-inline:hover{transform:scale(1.06)}

/* Studio setup chat popup */
.sc-modal{display:flex;flex-direction:column;height:min(80vh,640px);padding:0;overflow:hidden}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:1rem 1.2rem;border-bottom:1px solid var(--border)}
.sc-head .sc-title{font-weight:650;font-size:1rem}
.sc-head .sc-sub{font-size:.78rem;color:var(--muted);font-weight:400;margin-top:.1rem}
.sc-msgs{flex:1;overflow-y:auto;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem}
.sc-bubble{max-width:85%;padding:.6rem .8rem;border-radius:12px;font-size:.92rem;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}
.sc-bubble.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.sc-bubble.you{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.sc-bubble.thinking{color:var(--muted);font-style:italic}
/* rendered-markdown bot bubbles: drop pre-wrap, tighten block spacing */
.sc-bubble.md{white-space:normal}
.sc-bubble.md>*{margin:0}.sc-bubble.md>*+*{margin-top:.4rem}
.sc-bubble.md ul,.sc-bubble.md ol{margin:.2rem 0;padding-left:1.2rem}
.sc-bubble.md code{background:var(--surface2);padding:.05rem .3rem;border-radius:4px;font-size:.85em}
.sc-bubble.md h1,.sc-bubble.md h2,.sc-bubble.md h3,.sc-bubble.md h4,.sc-bubble.md h5,.sc-bubble.md h6{font-size:1rem;font-weight:650;margin:0}
.sc-suggest{padding:0 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.sc-suggest:empty{display:none}
.sc-suggest .assist-sec{margin:0}
.sc-suggest .assist-subj,.sc-suggest .expert-row{margin-top:.4rem}
/* tap-to-answer choice chips (single or multi-select) */
.sc-choices{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.sc-chip{padding:.34rem .7rem;font-size:.83rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);cursor:pointer}
.sc-chip:hover{border-color:var(--accent)}
.sc-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sc-chip-send{padding:.34rem .8rem;font-size:.83rem;border-radius:999px}
.sc-done{display:flex;flex-direction:column;gap:.55rem;font-size:.9rem;color:var(--ok);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.7rem .75rem}
.sc-done-msg{font-weight:600}
.sc-done-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.sc-done-go{font-size:.88rem;padding:.45rem 1rem;background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600}
.sc-done-close{font-size:.83rem;padding:.45rem .8rem;background:transparent;border:1px solid var(--border);color:var(--muted)}
.sc-done-close:hover{color:var(--text);border-color:var(--accent)}
.sc-docs{padding:0 1.2rem;font-size:.8rem;color:var(--muted)}
.sc-docs:empty{display:none}
.sc-doc-chip{display:inline-block;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:.1rem .5rem;margin:.1rem .15rem;color:var(--text)}
.sc-docpick{padding:.5rem 1.2rem 0}
.sc-docpick .picker-list{max-height:180px}
.sc-composer{display:flex;gap:.5rem;padding:.8rem 1.2rem;border-top:1px solid var(--border);align-items:flex-end}
.sc-composer textarea{flex:1;resize:none;min-height:2.4rem;max-height:7rem;font-size:.92rem}
.sc-composer button{flex-shrink:0}
.sc-attach{padding:.4rem .55rem;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:1.05rem;line-height:1}
.sc-attach:hover{border-color:var(--accent)}
.picker-up{padding:.3rem .6rem;font-size:.8rem;white-space:nowrap}

/* file picker with aligned checkboxes */
.picker{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg)}
.picker-bar{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.picker-search{flex:1;min-width:140px;margin:0;padding:.45rem .65rem;font-size:.86rem}
.picker-all{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-size:.84rem;color:var(--text);cursor:pointer;white-space:nowrap}
.picker-all input,.picker-row input{width:16px;height:16px;margin:0;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.picker-count{font-size:.8rem;color:var(--muted);margin-left:auto;white-space:nowrap}
.picker-list{max-height:230px;overflow:auto}
.picker-row{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.picker-row:last-child{border-bottom:0}
.picker-row:hover{background:var(--surface)}
.picker-row.sel{background:rgba(52,211,153,.1)}
.picker-row .pn{flex:1;min-width:0;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-row .pt{font-size:.72rem;color:var(--muted);background:var(--surface2);border-radius:999px;padding:.1rem .5rem;flex-shrink:0}
.picker-empty{padding:1rem;font-size:.84rem;color:var(--muted);text-align:center}

/* ---- In-call tabbed view (the Call screen, shown only while connected) ---- */
/* The new Call tab owns the in-call UI, so the old floating expert dock is retired. */
#lkx{display:none!important}
.callseg{display:flex;gap:.3rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.3rem;margin-bottom:1.3rem}
.callseg button{flex:1;background:transparent;color:var(--muted);font-weight:600;border-radius:999px;padding:.55rem .8rem;font-size:.9rem;transition:.15s}
.callseg button:hover{color:var(--text)}
.callseg button.on{background:var(--accent);color:var(--ink);font-weight:700}
.callsub{display:none}
.callsub.on{display:block;animation:fade .2s ease}
.call-status{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;margin-bottom:1.2rem}
.callctl{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.6rem}
.cbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:16px;padding:1.2rem .5rem;font-weight:600;font-size:.84rem;line-height:1.2;text-align:center;transition:.15s}
.cbtn:hover{background:var(--surface2);border-color:rgba(255,255,255,.12)}
.cbtn .cbi{font-size:1.55rem;line-height:1}
.cbtn.on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.cbtn.danger{border-color:rgba(248,113,113,.4)}
.cbtn.danger .cbl{color:var(--danger)}
.cbtn.danger.on{background:var(--danger);border-color:var(--danger);color:#fff}
.cbtn.danger.on .cbl{color:#fff}
.cbtn[disabled]{opacity:.5;cursor:default}
/* AI mode banner: an unmissable read of whether the AI is Active or on Standby. */
.aimode-banner{display:flex;align-items:center;gap:.6rem;border-radius:14px;padding:.7rem .9rem;margin-bottom:1rem;font-weight:700;font-size:.95rem;border:1px solid transparent}
.aimode-banner .amb-dot{width:.7rem;height:.7rem;border-radius:50%;flex:none}
.aimode-banner .amb-sub{font-weight:500;font-size:.8rem;opacity:.85;margin-left:auto;text-align:right}
.aimode-banner.active{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4);color:var(--accent)}
.aimode-banner.active .amb-dot{background:var(--accent);box-shadow:0 0 0 4px rgba(52,211,153,.25);animation:ambPulse 1.8s ease-in-out infinite}
.aimode-banner.standby{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.4);color:#fbbf24}
.aimode-banner.standby .amb-dot{background:#fbbf24}
@keyframes ambPulse{0%,100%{box-shadow:0 0 0 3px rgba(52,211,153,.28)}50%{box-shadow:0 0 0 6px rgba(52,211,153,.12)}}
.plist{display:flex;flex-direction:column;gap:.5rem}
.prow{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.6rem .85rem}
.prow .pdot{width:.55rem;height:.55rem;border-radius:50%;background:var(--muted);flex:none}
.prow.speaking{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.prow.speaking .pdot{background:var(--accent);box-shadow:0 0 0 3px rgba(52,211,153,.3)}
.prow .pn{font-weight:600;font-size:.92rem}
.prow .pr{color:var(--muted);font-size:.78rem}
.prow .pm{margin-left:auto;color:var(--muted);font-size:.76rem;white-space:nowrap}
.pcards{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:1.2rem}
.pcard{flex:0 0 auto;min-width:140px;max-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem}
.pcard:not(.human){cursor:pointer}
.pcard:not(.human):hover{background:var(--surface2);border-color:var(--accent)}
.pcard.speaking{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.pcard .pcn{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.35rem}
.pcard .pcdot{width:.5rem;height:.5rem;border-radius:50%;background:var(--muted);flex:none}
.pcard.speaking .pcdot{background:var(--accent);box-shadow:0 0 0 3px rgba(52,211,153,.3)}
.pcard .pcr{color:var(--muted);font-size:.74rem;margin-top:.15rem}
.pcard .pcm{color:var(--muted);font-size:.7rem;margin-top:.3rem}
.ctr-wrap{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.ctr-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .5rem .55rem .85rem;border-bottom:1px solid var(--border)}
.ctr-head .t{font-weight:600;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ctr-body{max-height:46vh;overflow-y:auto;padding:.85rem;display:flex;flex-direction:column;gap:.75rem}
.ctr-turn .ctr-spk{font-size:.74rem;color:var(--muted);margin-bottom:.15rem}
.ctr-turn.ai .ctr-spk{color:var(--accent)}
.ctr-turn .ctr-txt{font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.ctr-empty{color:var(--muted);font-size:.88rem;text-align:center;padding:1.4rem .5rem}
/* in-call hero + chip people list + stacked actions (Stitch layout) */
.call-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1rem 1.1rem;margin-bottom:1rem}
.call-hero .ch-l{display:flex;align-items:center;gap:.8rem;min-width:0}
.call-hero .ch-ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:rgba(52,211,153,.14);font-size:1.25rem;flex:none}
.call-hero .ch-t{font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.call-hero .call-status{margin:.15rem 0 0}
.call-actions{display:flex;flex-direction:row;gap:.6rem;margin-top:1rem}
.callact{display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600;border-radius:12px;padding:.85rem 1rem;font-size:.92rem}
.callact:hover{background:var(--surface2);border-color:rgba(255,255,255,.14)}
.call-actions .callact{flex:1;min-width:0;flex-direction:column;gap:.45rem;padding:1rem .55rem;text-align:center;line-height:1.25}
.call-actions .callact .ca-ic{font-size:1.5rem;line-height:1}
.call-actions .callact .ca-lb{font-size:.85rem}
.call-timer-big{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:center;font-size:1.7rem;font-weight:600;letter-spacing:.02em;color:var(--text);margin:.2rem 0 1.1rem}
/* ---- Call command bar: status + waveform | timer | End call ---- */
.call-cmdbar{position:sticky;top:calc(var(--header-h) + .6rem);z-index:20;display:flex;align-items:center;gap:1.1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:.8rem 1rem;margin-bottom:1.1rem;
  transition:background .3s,border-color .3s}
.call-cmdbar .ccb-left{display:flex;align-items:center;gap:.9rem;min-width:0;flex:1}
.call-cmdbar .call-status{margin:0}
.ccb-wave{display:flex;align-items:center;gap:3px;height:18px;flex:none}
.ccb-wave span{width:3px;height:6px;border-radius:2px;background:var(--muted);opacity:.6;transition:background .3s}
.call-cmdbar.live .ccb-wave span{background:var(--accent);opacity:1;animation:ccbWave .9s ease-in-out infinite}
.call-cmdbar.live .ccb-wave span:nth-child(2){animation-delay:.15s}
.call-cmdbar.live .ccb-wave span:nth-child(3){animation-delay:.3s}
.call-cmdbar.live .ccb-wave span:nth-child(4){animation-delay:.45s}
.call-cmdbar.live .ccb-wave span:nth-child(5){animation-delay:.6s}
@keyframes ccbWave{0%,100%{height:6px}50%{height:16px}}
.ccb-timer{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:1.45rem;letter-spacing:.02em;flex:none}
.call-cmdbar.ended .ccb-timer{color:var(--muted)}
.ccb-endwrap{flex:none;text-align:center}
.ccb-end{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--danger);color:#fff;
  border-radius:12px;padding:.85rem 1.6rem;font-weight:700;font-size:1rem;transition:background .2s,color .2s}
.ccb-end:hover{background:#dc2626}
.ccb-end[disabled]{cursor:default;opacity:.55}
.ccb-end .ccb-end-ico{font-size:1.15rem;line-height:1;display:inline-flex}
.ccb-end .ccb-end-ico svg{display:block}
.call-cmdbar.ending .ccb-end{background:#dc2626;opacity:1}
.call-cmdbar.ended .ccb-end{background:var(--surface2);color:var(--muted);opacity:1}
.ccb-spin{display:inline-block;width:1rem;height:1rem;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:lkspin .7s linear infinite}
.ccb-cap{display:none}
.mtop .callbtn.ending{background:#dc2626;color:#fff;opacity:.85;pointer-events:none}
/* Phones: the bar becomes a hero — big timer with a round hang-up under it */
@media(max-width:820px){
 .call-cmdbar{position:static;flex-direction:column;gap:.35rem;padding:1.1rem 1rem 1.25rem;text-align:center}
 .call-cmdbar .ccb-left{flex:none;flex-direction:column;gap:.55rem;justify-content:center;max-width:100%}
 .ccb-timer{font-size:2.4rem;line-height:1.15;margin:.15rem 0 .45rem}
 .ccb-end{width:76px;height:76px;border-radius:50%;padding:0}
 .call-cmdbar.live .ccb-end{animation:ccbPulse 2.2s infinite}
 .ccb-end .ccb-end-lbl{display:none}
 .ccb-end .ccb-end-ico{font-size:1.7rem}
 .ccb-end .ccb-end-ico svg{width:30px;height:30px}
 .ccb-spin{width:1.4rem;height:1.4rem}
 .ccb-cap{display:block;font-size:.85rem;color:var(--muted);margin-top:.55rem}
}
@keyframes ccbPulse{0%{box-shadow:0 0 0 0 rgba(248,113,113,.45)}70%{box-shadow:0 0 0 14px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}
@media (prefers-reduced-motion:reduce){.call-cmdbar.live .ccb-wave span,.ccb-end,.call-cmdbar.live .ccb-end{animation:none!important}}
.callctl2{grid-template-columns:repeat(2,1fr)}
@media(min-width:681px){.callctl2{grid-template-columns:repeat(3,1fr)}}
.calldash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.calldash-grid .callact{justify-content:flex-start}
.callbtn.connect{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.callbtn.connect:hover{background:var(--accent)}
.callctl2 .cbtn{padding:1.7rem .5rem;font-size:.98rem;border-radius:18px}
.callctl2 .cbtn .cbi{font-size:1.95rem}
.vpick{display:flex;flex-direction:column;gap:.5rem}
.vpick button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.7rem .85rem;color:var(--text)}
.vpick button:hover{background:var(--surface2)}
.vpick .vp-r{font-size:.8rem;color:var(--muted)}
.people-wrap{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.pgroup-h{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:.7rem 0 .15rem}
.pgroup-h:first-child{margin-top:0}
.prow .pav{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--surface2);font-size:1.05rem;flex:none}
.prow .pmeta{flex:1;min-width:0}
.prow .pmeta .pn{font-weight:600;font-size:.92rem;line-height:1.2}
.prow .pmeta .pr{color:var(--muted);font-size:.76rem;margin-top:.1rem}
.pchip{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;padding:.22rem .5rem;border-radius:999px;background:var(--surface2);color:var(--muted);border:1px solid var(--border);white-space:nowrap;flex:none}
.pchip.live{color:var(--accent);border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.1)}
.pchip.muted{color:#f4b4b4;border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.1)}
.prow .pkebab{color:var(--muted);font-size:1rem;flex:none;margin-left:.1rem}
.prow.standby{opacity:.62}
.prow .psb{font-size:.72rem;padding:.28rem .5rem;border-radius:999px;background:var(--surface2);
  color:var(--text);border:1px solid var(--border);cursor:pointer;flex:none;white-space:nowrap}
.prow .psb:hover{border-color:var(--accent)}
/* Home: recent calls list + experts carousel */
.home-section{margin-bottom:1.4rem}
.hsec-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 .7rem}
.hsec-head h2{margin:0;font-size:1.05rem;letter-spacing:-.01em}
.hsec-head .linkbtn{font-weight:600}
/* Recent calls: one card with compact separator rows (was tall stand-alone cards) */
#home-recent-wrap{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:.25rem 1rem .35rem}
#home-recent-wrap .hsec-head{margin:0;padding:.7rem 0 .45rem}
#home-recent-wrap .hsec-head h2{font-size:.95rem}
.recent-list{display:flex;flex-direction:column;gap:.5rem}
#home-recent-wrap .recent-list{gap:0}
.recent-row{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem;color:var(--text);font-weight:500}
.recent-row:hover{background:var(--surface2)}
#home-recent-wrap .recent-row{background:transparent;border:0;border-top:1px solid var(--border);border-radius:0;padding:.6rem .1rem}
#home-recent-wrap .recent-row:hover{background:var(--surface2)}
#home-recent-wrap .recent-row .rav{width:1.8rem;height:1.8rem;font-size:.85rem}
.recent-row .rav{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--surface2);font-size:1rem;flex:none}
.recent-row .rmeta{flex:1;min-width:0}
.recent-row .rt{font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-row .rs{color:var(--muted);font-family:var(--mono);font-size:.72rem;margin-top:.12rem}
.recent-row .rchev{color:var(--muted);font-size:1.1rem;flex:none}
.experts-row{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.4rem}
.expert-chip{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.45rem 1rem .45rem .5rem;color:var(--text);max-width:16rem;text-align:left}
.expert-chip:hover{background:var(--surface2);border-color:rgba(52,211,153,.45)}
.expert-chip .eav{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--surface2);color:#fff;font-weight:700;font-size:.95rem;text-transform:uppercase;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.expert-chip .emeta{display:flex;flex-direction:column;min-width:0;text-align:left;line-height:1.25}
.expert-chip .en{font-weight:600;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expert-chip .ee{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:680px){
  .callctl{gap:.55rem}
  .cbtn{padding:.95rem .35rem;font-size:.78rem}
  .cbtn .cbi{font-size:1.45rem}
  .ctr-body{max-height:40vh}
}
/* Books: spine-style card grid + reader */
.bookgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.bookcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s}
.bookcard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.bookcover{height:120px;display:flex;align-items:flex-end;padding:.7rem;position:relative;
  background:linear-gradient(135deg,var(--surface2),var(--sidebar))}
.bookcover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent);opacity:.85}
.bookcover .bookinitial{font-size:2.1rem;font-weight:800;color:var(--text);opacity:.18;line-height:1;
  position:absolute;top:.5rem;right:.7rem}
.bookcover .bookspinetitle{font-size:.92rem;font-weight:700;color:var(--text);line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bookmeta{padding:.6rem .75rem .75rem}
.bookmeta .bt{font-size:.9rem;font-weight:600;color:var(--text);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bookmeta .ba{font-size:.78rem;color:var(--muted);margin-top:.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bookmodal{max-width:760px;width:100%;display:flex;flex-direction:column;padding:0;max-height:88vh}
.bookmodal-head{display:flex;align-items:flex-start;gap:1rem;padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}
.bookmodal-title{font-size:1.15rem;font-weight:700;line-height:1.3}
.bookmodal-author{font-size:.9rem;margin-top:.2rem}
.bookmodal-head .ghost{margin-left:auto;flex:none}
.bookmodal-body{padding:1.3rem 1.6rem 1.8rem;overflow:auto;white-space:pre-wrap;
  font-size:1rem;line-height:1.7;color:var(--text);font-family:Georgia,'Times New Roman',serif}
.bookmodal-body .muted{font-family:inherit}
.bookbar{display:flex;align-items:center;gap:.5rem;padding:.55rem 1.4rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.bookbar .ghost{margin:0;flex:none;padding:.3rem .7rem}
.bookbar .ghost:disabled{opacity:.4;cursor:default}
.bookprompt{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.4rem;background:rgba(52,211,153,.09);border-bottom:1px solid var(--border);flex-wrap:wrap;font-size:.92rem}
.bookprompt button{margin:0;padding:.32rem .8rem}
/* Reader is its own page (not a modal): a fixed-height card with a pinned
   toolbar + progress bar on top and a roomy serif reading column that scrolls. */
.reader-top{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.reader-back{flex:none;margin:0}
.reader-titles h1{margin:0;font-size:1.3rem;line-height:1.25}
.reader-titles .muted{font-size:.9rem;margin-top:.15rem}
.readercard{padding:0;display:flex;flex-direction:column;max-height:calc(100vh - 170px);overflow:hidden}
/* Minimalist reader controls: a thin bar of borderless icon buttons + quiet
   selects, one filled play accent. */
.reader-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem .9rem;
  flex-wrap:wrap;padding:.5rem .8rem;border-bottom:1px solid var(--border)}
.rt-group{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}
.reader-toolbar .ghost{margin:0;flex:none;background:none;border:none;color:var(--muted);
  padding:.34rem .5rem;border-radius:8px;transition:background .15s,color .15s}
.reader-toolbar .ghost:hover:not(:disabled){background:var(--surface2);color:var(--text)}
.reader-toolbar .ghost.icon{font-size:1.05rem;line-height:1;min-width:2rem}
.reader-toolbar .ghost:disabled{opacity:.3;cursor:default}
.rt-pos{font-variant-numeric:tabular-nums;min-width:4.5rem;text-align:center;
  font-size:.82rem;color:var(--muted);padding:0 .2rem}
.rt-sep{width:1px;align-self:stretch;background:var(--border);margin:.15rem .35rem}
/* The one accented control: a round play/pause. */
.rt-play{flex:none;margin:0;width:2.1rem;height:2.1rem;border-radius:50%;border:none;
  background:var(--accent);color:#04130d;font-size:.8rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:filter .15s,transform .1s}
.rt-play:hover{filter:brightness(1.08)}
.rt-play:active{transform:scale(.94)}
.rt-play.on{box-shadow:0 0 0 3px rgba(52,211,153,.22)}
/* Quiet, borderless selects that only show their box on hover/focus. */
.rt-sel{width:auto;margin:0;padding:.28rem .4rem;font-size:.82rem;color:var(--muted);
  background:none;border:1px solid transparent;border-radius:8px;max-width:8.5rem;cursor:pointer}
.rt-sel:hover,.rt-sel:focus{color:var(--text);border-color:var(--border);background:var(--bg)}
.reader-progress{height:2px;background:var(--border);flex:none}
.reader-progress-fill{height:100%;width:0;background:var(--accent);transition:width .25s ease}
.reader-hint{padding:.5rem .9rem;font-size:.85rem;color:var(--muted);
  background:rgba(52,211,153,.08);border-bottom:1px solid var(--border)}
.reader-scroll{overflow:auto;padding:1.7rem 1.4rem 2.2rem;flex:1 1 auto}
/* Ebook reading column: serif, generous measure + leading, indented paragraphs. */
.readerbody{max-width:680px;margin:0 auto;
  font-size:1.08rem;line-height:1.75;color:var(--text);font-family:Georgia,'Times New Roman',serif}
.readerbody.muted{font-family:inherit}
.br-p{margin:0;text-indent:1.5em;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.br-p+.br-p{margin-top:.15em}
.br-h+.br-p,.br-hr+.br-p,.br-verse+.br-p{text-indent:0} /* first para after a break */
.br-h{margin:1.8em 0 1em;text-indent:0;text-align:center;font-family:inherit;
  font-size:1.05rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.br-p:first-child,.br-h:first-child{margin-top:0}
.br-verse{margin:1.1em 0;text-indent:0;white-space:normal;padding-left:1.5em;
  font-style:italic;line-height:1.7}
.br-hr{margin:1.6em 0;text-align:center;color:var(--muted);letter-spacing:.4em;
  text-indent:0;font-size:.9rem}
/* The sentence being read aloud, lit like a Kindle highlight. */
.br-chunk{transition:background .2s ease;border-radius:3px}
.br-chunk.br-reading{background:rgba(52,211,153,.26);
  box-shadow:0 0 0 3px rgba(52,211,153,.26)}
/* Floating "Ask about this" button shown over a text selection. */
.br-ask-pop{position:fixed;z-index:60;transform:translate(-50%,-100%);
  background:var(--accent);color:#04130d;font-weight:700;font-size:.85rem;
  border:none;border-radius:999px;padding:.4rem .85rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.4);white-space:nowrap}
.br-ask-pop:hover{filter:brightness(1.07)}
/* Full-screen "Kindle" reading mode: the reader card fills the viewport. */
.readercard.reader-full{position:fixed;inset:0;z-index:120;max-height:none;
  border-radius:0;border:none;background:var(--bg)}
.readercard.reader-full .reader-scroll{padding:2.6rem 1.4rem 3rem}
.readercard.reader-full .readerbody{max-width:640px;font-size:1.2rem;line-height:1.85}
body.reader-full-on .reader-top{display:none}
@media(max-width:680px){.bookgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .readercard{max-height:calc(100vh - 140px)}
  .reader-scroll{padding:1.2rem 1.1rem 1.6rem}
  .readerbody{font-size:1.06rem}
  .rt-sel{max-width:6.5rem}
  .bookmodal-body{padding:1rem 1.1rem 1.4rem}}
/* Live view: one full-width stream; visuals ride inline as thumbnails. */
.lt{margin:.5rem 0;line-height:1.55}
/* A turn still being spoken: slightly dimmed, with a pulsing caret. */
.lt-partial{opacity:.75}
.lt-cursor{color:var(--accent);margin-left:.15rem;animation:ltblink 1s steps(2,start) infinite}
@keyframes ltblink{to{visibility:hidden}}
.dthumb{background:var(--surface2,rgba(255,255,255,.03));border:1px solid var(--border);
  border-radius:12px;padding:.6rem .8rem;max-width:440px;cursor:pointer;margin:.55rem 0}
.dthumb:hover{border-color:var(--accent)}
.dt-t{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-m{color:var(--muted);font-size:.75rem;margin-top:.15rem}
.dt-body{max-height:190px;overflow:hidden;margin:.4rem 0;pointer-events:none}
/* Document teaser cards (equations, tables, outlines) get room to breathe:
   80% of the stream on desktop, 90% on mobile, centered — matches the app's
   content-width convention so a formula reads on one line instead of wrapping. */
.dthumb.wide{max-width:none;width:80%;margin-left:auto;margin-right:auto}
.dthumb.wide .dt-body{max-height:340px}
@media(max-width:640px){.dthumb.wide{width:90%}}
.thumbbox{width:56px;height:56px;border-radius:10px;background:var(--surface2,rgba(255,255,255,.05));
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:0 0 auto}
/* Display cards (see app/display.py + renderDisplayCard) */
.dcard h4{margin:0 0 .5rem;font-size:.95rem}
.dcard ul,.dcard ol{margin:.2rem 0;padding-left:1.3rem;line-height:1.6}
.dcard table{width:100%;border-collapse:collapse;font-size:.88rem}
.dcard th{text-align:left;color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--border);padding:.35rem .5rem}
.dcard td{padding:.35rem .5rem;border-bottom:1px solid var(--border)}
.dcard img{max-width:100%;border-radius:10px}
/* Lightbox resize cluster (see applyLbSize / screenResize): compact width/
   height +/- controls in the lightbox header. Hidden on narrow phones where
   the visual already fills the screen and the header has no room. */
.lb-resize{display:inline-flex;gap:.1rem;align-items:center}
.lb-resize button{padding:.15rem .4rem;font-size:.82rem;line-height:1;min-width:auto}
@media(max-width:560px){.lb-resize{display:none}}
/* Equation rendering (see texToHtml in dashboard.html). No KaTeX — these style
   the small TeX subset we emit: display/inline math, stacked fractions, radicals. */
.mathblock{display:block;text-align:center;font-size:1.06em;line-height:2.1;
  margin:.5rem 0;overflow-x:auto;white-space:nowrap}
.mathinline{white-space:nowrap}
.mfrac{display:inline-flex;flex-direction:column;vertical-align:middle;
  text-align:center;margin:0 .18em}
.mfrac .mnum{border-bottom:1px solid currentColor;padding:0 .4em}
.mfrac .mden{padding:0 .4em}
.msqrt{border-top:1px solid currentColor;padding:0 .1em .05em}
.msqrt::before{content:"√";border-top:0;margin-right:.05em}
.screen-frame{width:100%;aspect-ratio:16/9;border:1px solid var(--border);
  border-radius:10px;background:#000}
/* Covers the whole video when autoplay had to fall back to muted (see
   tryUnmutedYoutube/playMaybeMuted) — a big, unmissable tap target beats the
   small header 🔇 icon, especially on mobile where the muted fallback is hit
   far more often. */
.embed-slot{position:relative}
.unmute-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:.5rem;background:rgba(0,0,0,.45);color:#fff;font-size:1rem;font-weight:600;
  cursor:pointer;border-radius:10px;z-index:2;text-align:center}
/* Reader view: server-extracted article text for a "website" card, scrollable
   same-origin (unlike the cross-origin iframe fallback), so it supports
   manual + auto scroll and voice read-aloud. */
.dcard-reader{max-height:60vh;overflow-y:auto;border:1px solid var(--border);
  border-radius:10px;padding:1rem 1.1rem;background:var(--surface2,rgba(255,255,255,.03));
  line-height:1.7;font-size:.92rem}
.dcard-reader p{margin:0 0 1em}
.reader-toolbar{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.reader-toolbar button{padding:.3rem .6rem;font-size:.85rem}
.reader-toolbar input[type=range]{width:110px;vertical-align:middle}
.reader-toolbar .muted{font-size:.78rem}
.crow{display:grid;grid-template-columns:minmax(70px,max-content) 1fr max-content;
  gap:.5rem;align-items:center;margin:.3rem 0;font-size:.85rem}
.cbar{height:1.05rem;border-radius:4px;background:var(--accent);min-width:2px}
.vega-slot{width:100%;min-height:180px;overflow-x:auto;margin-top:.3rem}
.vega-slot svg{max-width:100%;height:auto}
.chip-hist{cursor:pointer;background:none;border:1px solid var(--border);
  border-radius:999px;color:var(--muted);font-size:.75rem;padding:.15rem .6rem}
.chip-hist.on{border-color:var(--accent);color:var(--accent)}

/* Keyboard accessibility: visible focus ring on anything focusable (mouse
   clicks don't trigger :focus-visible, so pointer users see no change). */
:focus-visible{outline:2px solid var(--accent,#6ea8fe);outline-offset:2px;border-radius:4px}

/* ---- Studio: expert cards screen + review screen ---- */
/* condensed one-line topic on the Experts screen — full text lives on the Topic step */
.topic-pill{display:flex;align-items:center;gap:.55rem;background:var(--surface2);border:1px solid var(--border);
 border-radius:10px;padding:.55rem .8rem;margin-top:.7rem;font-size:.85rem;color:var(--muted)}
.topic-pill .ic{flex-shrink:0}
.topic-pill .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topic-pill .edit{flex-shrink:0;background:none;border:none;color:var(--accent);font-size:.8rem;cursor:pointer;padding:0}
.sxp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.7rem;margin-top:.7rem}
.sxp-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .2s ease,background-color .2s ease}
.sxp-card.open{border-color:var(--accent);grid-column:1/-1}
.sxp-card:not(.open){cursor:pointer}
.sxp-card:not(.open):hover{border-color:var(--accent);background:rgba(52,211,153,.06)}
.sxp-card.just-added{animation:sxpChosenPulse 1000ms ease-out}
@keyframes sxpChosenPulse{
  0%{border-color:var(--accent);background:rgba(52,211,153,.18);box-shadow:0 0 0 3px rgba(52,211,153,.35)}
  70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}
  100%{border-color:var(--border);background:var(--surface);box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
.sxp-head{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem}
.sxp-avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;flex-shrink:0;
 background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.4);color:var(--accent);font-weight:700}
.sxp-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.sxp-nm b{font-size:.94rem}
.sxp-sub{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxp-add{background:none;border:1px solid var(--border);border-radius:8px;color:var(--accent);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:.82rem;flex-shrink:0}
.sxp-add:hover{border-color:var(--accent);background:rgba(52,211,153,.12)}
.sxp-body{padding:.2rem .9rem .9rem;border-top:1px solid var(--border)}
.sxp-body.sxp-mini{font-size:.8rem;color:var(--muted);padding:.45rem .9rem .7rem;border-top:0}
.sxp-body.sxp-hint{display:flex;align-items:center;justify-content:space-between;gap:.6rem;cursor:default}
.sxp-chosen-badge{font-size:.8rem;color:var(--accent);font-weight:600}
.sxp-add-details-btn{padding:.35rem .7rem;font-size:.8rem;flex-shrink:0}
.sxp-desc{font-size:.85rem;color:var(--muted);margin:.6rem 0 .3rem}
.sxp-lb{display:block;font-size:.82rem;font-weight:600;margin:.7rem 0 .3rem}
.sxp-body textarea{width:100%;font:inherit;font-size:.88rem}
.sxp-new{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem;border:1px solid var(--border);border-radius:12px;padding:.9rem;background:var(--surface)}

/* Create/verify expert modal (cexp*): name -> identify -> details/sources/image -> save */
.cexp-answer{font-size:.85rem;color:var(--muted);background:var(--surface2);border-radius:10px;padding:.6rem .8rem;margin:.4rem 0}
.cexp-sources{margin-top:.4rem}
.cexp-image-row{display:flex;align-items:center;gap:.8rem;margin:.3rem 0 .2rem}
.cexp-preview{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex-shrink:0}

/* saved expert library (expl*): the "Your experts" reuse panel and the full Library page grid */
.expl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem;margin-top:.7rem}
.expl-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:.8rem;display:flex;gap:.7rem;align-items:flex-start}
.expl-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.expl-avatar-txt{display:inline-grid;place-items:center;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.4);color:var(--accent);font-weight:700}
.expl-body{flex:1;min-width:0}
.expl-body b{font-size:.94rem}
.expl-sub{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.expl-stars{margin:.35rem 0;font-size:.95rem;letter-spacing:.1rem;cursor:pointer}
.expl-star{color:var(--border)}
.expl-star.on{color:var(--accent)}
.expl-actions{display:flex;gap:.4rem;margin-top:.4rem}
.expl-actions .ghost{padding:.3rem .6rem;font-size:.78rem}

/* an expert's attached sources: compact summary + chips, "Add sources" opens the srcm modal */
.srcm-summary-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.srcm-count{font-size:.82rem;color:var(--muted)}
.srcm-open-btn{padding:.35rem .7rem;font-size:.8rem;flex-shrink:0}
.srcm-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.srcm-chips .chip{font-size:.78rem;padding:.25rem .6rem}

/* the "Add sources" modal: 4 icon tabs, one pane visible at a time */
.srcm-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}
.srcm-tab{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:var(--surface2);
 border:1px solid var(--border);border-radius:11px;padding:.6rem .3rem;color:var(--muted);cursor:pointer;font:inherit}
.srcm-tab:hover{border-color:rgba(255,255,255,.22)}
.srcm-tab .ic{font-size:1.1rem;line-height:1}
.srcm-tab .lbl{font-size:.72rem;font-weight:600}
.srcm-tab.active{border-color:var(--accent);background:rgba(52,211,153,.12);color:var(--accent)}
.srcm-pane{display:none}
.srcm-pane.active{display:block}
@media(max-width:480px){.srcm-tabs{grid-template-columns:repeat(2,1fr)}}

/* two ways to grow the panel: ask AI, or write your own */
.sxp-add-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.1rem}
.sxp-add-action{border:1px dashed var(--border);border-radius:12px;padding:.8rem;text-align:center;
 background:transparent;color:var(--muted);font-size:.85rem;font-weight:600}
.sxp-add-action:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.sxp-add-action.ai{border-style:solid;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.12);color:var(--accent)}
.sxp-add-action.ai:hover{border-color:var(--accent)}
@media(max-width:480px){.sxp-add-actions{grid-template-columns:1fr}}
.srv-summary{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.4rem}
.srv-row{display:flex;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.92rem;align-items:baseline}
.srv-k{flex:0 0 90px;color:var(--muted);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.srv-edit{padding:.1rem .5rem;font-size:.75rem;margin-left:.5rem;vertical-align:top}
.srv-list{margin:.1rem 0 0;padding:0;list-style:none}
.srv-list li{display:flex;align-items:center;gap:.4rem;padding:.3rem 0;border-bottom:1px dashed var(--border)}
.srv-list li:last-child{border-bottom:0}
.srv-list li .srv-txt{flex:1;min-width:0}
.srv-line-actions{display:flex;gap:.1rem;flex-shrink:0}
.srv-line-btn{border:0;background:transparent;color:var(--muted);font-size:.85rem;line-height:1;padding:.15rem .4rem;cursor:pointer;border-radius:6px}
.srv-line-btn:hover{color:var(--text);background:var(--surface2)}
.srv-edit-input{flex:1;min-width:0;font-size:.9rem;padding:.25rem .5rem;border:1px solid var(--accent);border-radius:6px;background:var(--surface);color:var(--text)}