:root{
  --bg:#FFFFFF;--side:#FBFBFA;--bg0:#FFFFFF;--hov:#F1F1EF;--sel:#EDEDEA;--bub:#F2F2F0;
  --t0:#1F1F1E;--t1:#2B2B29;--t2:#5E5E5A;--t3:#8C8C88;--t4:#A8A8A4;
  --bd:#E6E6E3;--bd2:#D9D9D5;
  --accent:#D97757;--blue:#2F7BEB;--check:#4A6E9B;--warn:#B26B12;--ultra:#6E56CF;
  --codei:#B3261E;--codeibg:#F6F6F4;--codebg:#F7F7F5;
  --dbg:#FCEDED;--dbd:#EDB4B4;--dt:#9E2B2B;
  --track:#E6E6E6;--trackF:#D2D2D0;--statsBg:#F5F5F3;--tileBg:#EBEBE8;--heat0:#E4E4E1;--trackU:#F2F0F8;--tdot:#A3A39F;--ttick:#8E8E8A;
  --hk:#D73A49;--hs:#0A6B3D;--hn:#005CC5;--hc:#8A8A85;--hf:#6F42C1;--ht:#005CC5;
  --sans:"Anthropic Sans","Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,sans-serif;--serif:var(--sans);--mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --zoom:1;--sideW:clamp(250px,19.25vw,400px);--colW:clamp(460px,34.7vw,860px);--compW:clamp(500px,37.5vw,920px);
}
html.dark{
  --bg:#1F1F1E;--side:#1A1A19;--bg0:#262625;--hov:#2C2C2A;--sel:#30302E;--bub:#2E2E2C;
  --t0:#F2F2EF;--t1:#E3E3DF;--t2:#B4B4AF;--t3:#8E8E89;--t4:#6E6E6A;
  --bd:#2F2F2D;--bd2:#3B3B38;
  --check:#8FB3E0;--warn:#E3A64B;--ultra:#A996F5;
  --codei:#F2958E;--codeibg:#2A2A28;--codebg:#232322;
  --dbg:#3A2322;--dbd:#7A3B38;--dt:#F4B4AE;
  --track:#323230;--trackF:#4A4A47;--statsBg:#262625;--tileBg:#2E2E2C;--heat0:#353533;--trackU:#2C2838;--tdot:#7B7B76;--ttick:#8E8E89;
  --hk:#FF7B8B;--hs:#A5D6A7;--hn:#B39DDB;--hc:#7C7B75;--hf:#82AAFF;--ht:#7FDBCA;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:calc(14px * var(--zoom))}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
svg.i{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ───────── Window ───────── */
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
#stage.framed{background:radial-gradient(120% 120% at 15% 0%,#3a4766 0%,#181c27 55%,#0b0d12 100%)}
#win{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--bg);overflow:hidden;font-family:var(--sans);color:var(--t0);-webkit-font-smoothing:antialiased}
#stage.framed #win{width:calc(100vw - 72px);height:calc(100vh - 72px);border-radius:8px;box-shadow:0 26px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12)}
#stage.f-mac #win{border-radius:11px}

/* Top bar */
#topbar{flex:none;height:2.6rem;display:flex;align-items:center;user-select:none}
.tb-left{width:var(--sideW);flex:none;height:100%;display:flex;align-items:center;gap:.15rem;padding:0 .5rem 0 .55rem;background:var(--side);border-right:1px solid var(--bd)}
.tb-left .sp,.tb-main .sp{flex:1}
.tbi{width:1.95rem;height:1.95rem;display:grid;place-items:center;border-radius:.4rem;color:var(--t2)}
.tbi svg.i{width:1.05rem;height:1.05rem}
.seg2{display:flex;gap:2px;padding:2px;border-radius:.5rem;background:var(--hov)}
.seg2 .tbi{width:1.75rem;height:1.6rem;border-radius:.35rem;color:var(--t3)}
.seg2 .tbi.on{background:var(--bg0);color:var(--t1);box-shadow:0 0 0 1px var(--bd2)}
.lights{display:none;gap:8px;margin-right:.5rem}
.lights i{display:block;width:12px;height:12px;border-radius:50%}
.lights i:nth-child(1){background:#ff5f57}.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}
#stage.f-mac .lights{display:flex}
#stage.f-mac #winCtl{display:none}
.tb-main{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:.35rem;padding-left:1rem}
.tb-ico{display:grid;color:var(--t1)}
.tb-ico svg.i{width:1.05rem;height:1.05rem}
#titleText{font-size:1rem;font-weight:500;color:var(--t0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:.35rem}
.tb-chev{display:grid;color:var(--t2)}
.tb-chev svg.i{width:.95rem;height:.95rem}
.badge2{margin-left:.35rem;padding:.12rem .4rem;border-radius:.35rem;background:var(--hov);font-size:.85rem;color:var(--t2);white-space:nowrap}
#winCtl{display:flex;margin-left:.75rem;height:100%}
#winCtl span{width:3.2rem;height:100%;display:grid;place-items:center;color:var(--t2)}
#winCtl svg.i{width:1rem;height:1rem;stroke-width:1.3}

#app{flex:1;min-height:0;display:flex}

/* ───────── Sidebar ───────── */
#side{width:var(--sideW);flex:none;display:flex;flex-direction:column;background:var(--side);border-right:1px solid var(--bd);padding:.35rem .55rem .5rem}
#side.hide,.tb-left.hide{display:none}
.search{display:flex;align-items:center;gap:.5rem;height:2.15rem;padding:0 .6rem;border:1px solid var(--bd2);border-radius:.45rem;background:var(--bg0);color:var(--t3);font-size:1rem}
.search svg.i{width:1rem;height:1rem}
.nav{display:flex;flex-direction:column;margin-top:.55rem}
.nav-item{display:flex;align-items:center;gap:.6rem;height:2.05rem;padding:0 .55rem;border-radius:.45rem;font-size:1.05rem;color:var(--t1)}
.nav-item svg.i{width:1.05rem;height:1.05rem;color:var(--t2)}
.nav-item.more,.nav-item.more svg.i{color:var(--t3)}
.nav-item.hov,.nav-item:hover{background:var(--hov)}
#sideScroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--bd2) transparent;margin-right:-.3rem;padding-right:.3rem}
#sideScroll>.nav{margin-top:0}
#groups{margin-top:1.35rem;display:flex;flex-direction:column}
.grp{display:flex;align-items:center;height:2.35rem;padding:0 .3rem 0 .55rem;border-radius:.45rem;font-size:.95rem;color:var(--t2)}
.grp .gn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp .gc{display:grid;margin-left:.2rem;color:var(--t3)}
.grp .gc svg.i{width:.85rem;height:.85rem}
.grp .sp{flex:1}
.grp .ga{display:flex;gap:.2rem;color:var(--t2)}
.grp .ga span{width:1.6rem;height:1.6rem;display:grid;place-items:center}
.grp .ga svg.i{width:1.05rem;height:1.05rem}
.grp.cur{background:var(--sel);color:var(--t0)}

.ses{display:flex;align-items:center;gap:.65rem;flex:none;height:2.05rem;padding:0 .55rem;border-radius:.45rem;font-size:1.05rem;color:var(--t1)}
.ses .dot{flex:none;width:.42rem;height:.42rem;border-radius:50%;border:1.3px solid var(--t4)}
.ses .dot.f{background:var(--t4)}
.ses .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ses.cur{background:var(--sel);color:var(--t0)}
.ses.fresh{animation:fadein .5s ease}
.grp{flex:none}
.grp.open .gc{display:none}
#main.empty ~ * {}
.nav-item.on{background:var(--sel)}
.grp.fresh{animation:fadein .5s ease}
.side-foot{display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--bd);margin:.4rem -.55rem 0;padding:.75rem 1rem .25rem}
.side-foot .av svg{width:1.15rem;height:1.15rem}
.uname{font-size:1rem;color:var(--t1);white-space:nowrap}
.uplan{color:var(--t3)}
.side-foot .sp{flex:1}
.side-foot .ic2{display:grid;color:var(--t2)}
.side-foot .ic2 svg.i{width:.95rem;height:.95rem}

/* ───────── Main area ───────── */
#main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
#scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bd2) transparent}
#thread{width:var(--colW);max-width:calc(100% - 3rem);margin:0 auto;padding:1.25rem 0 2rem}
#center{flex:none;display:flex;flex-direction:column;align-items:center;padding:0 1.5rem}
#main.empty #scroll{display:none}
#main.empty #center{flex:1;justify-content:center;padding-bottom:9vh}
#greet{display:none;align-items:center;gap:.75rem;margin-bottom:1.75rem}
#main.empty #greet{display:flex}
#greet .spark{width:2.2rem;height:2.2rem}
#greet h1{margin:0;font:400 2.2rem/1.15 var(--serif);letter-spacing:-.02em;color:var(--t1)}
#composerWrap{width:var(--compW);max-width:100%;padding-bottom:.6rem}
#chips{display:none;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}
#main.empty #chips.on{display:flex}
.chip{display:flex;align-items:center;gap:.4rem;height:2rem;padding:0 .75rem;border:1px solid var(--bd2);border-radius:.5rem;font-size:.95rem;color:var(--t2)}
.chip svg.i{width:1rem;height:1rem;color:var(--t3)}

/* Home screen (new session) */
#home{display:none;flex:1;min-height:0;overflow-y:auto;padding:2.15rem 1.5rem 1rem}
#main.empty #home{display:block}
#main.empty #center{flex:none;justify-content:flex-start;padding-bottom:0}
.home-col{width:var(--compW);max-width:100%;margin:0 auto}
.hgreet{display:flex;align-items:center;gap:.55rem;margin-left:-.1rem}
.hgreet .spark{width:1.35rem;height:1.35rem}
.hgreet h1{margin:0;font:400 1.5rem/1.3 var(--sans);letter-spacing:-.01em;color:var(--t0)}
.stats{width:min(100%,33.5rem);margin:1.85rem 0 0 .9rem;padding:.85rem .95rem .95rem;border-radius:.7rem;background:var(--statsBg)}
.st-tabs{display:flex;align-items:center;gap:.25rem;font-size:.97rem;color:var(--t3)}
.st-tabs span{padding:.15rem .4rem;border-radius:.35rem}
.st-tabs .on{color:var(--t0);font-weight:500;background:var(--bg0);box-shadow:0 0 0 1px var(--bd)}
.st-tabs .sp{flex:1}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.9rem}
.st-tile{background:var(--tileBg);border-radius:.4rem;padding:.4rem .3rem .45rem}
.st-tile .k{font-size:.92rem;color:var(--t3)}
.st-tile .v{margin-top:.15rem;font-size:1rem;font-weight:600;color:var(--t0)}
.st-tile .v.n{font-weight:500}
.heat{display:grid;grid-template-columns:repeat(26,1fr);grid-auto-rows:auto;gap:3px;margin-top:.85rem}
.heat i{display:block;aspect-ratio:1;border-radius:2px;background:var(--heat0)}
.heat i.l1{background:#9EBBF0}.heat i.l2{background:#6597EA}.heat i.l3{background:#3B73DD}
.heat i.x{visibility:hidden}
.st-note{margin-top:.85rem;font-size:.85rem;color:var(--t3)}
#ctx{display:none;align-items:center;gap:.5rem;margin:0 0 .55rem .1rem}
#main.empty #ctx{display:flex}
.ctxb{display:flex;align-items:center;gap:.4rem;height:1.75rem;padding:0 .55rem;border:1px solid var(--bd2);border-radius:.45rem;font-size:.97rem;color:var(--t1);background:var(--bg0)}
.ctxb svg.i{width:.95rem;height:.95rem;color:var(--t2)}
#composerWrap{position:relative}
/* Clawd: 34×23 half-units; its feet rest on the top edge of the chat box. */
#composer{position:relative}
.clawd{display:none;position:absolute;bottom:100%;right:.45rem;width:4.42rem;height:2.99rem;image-rendering:pixelated;pointer-events:none}
#main.empty .clawd{display:block}
#win.empty .tb-main > :not(#winCtl):not(.sp){visibility:hidden}
#busy .ring.idle{border-color:var(--bd2);animation:none}

/* Composer */
#composer{display:flex;align-items:flex-start;gap:.5rem;background:var(--bg0);border:1px solid var(--bd2);border-radius:.85rem;padding:.6rem .7rem .6rem .85rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
#cInput{flex:1;min-width:0;min-height:1.5rem;max-height:12rem;overflow:hidden;font-size:1.07rem;line-height:1.5;color:var(--t0);white-space:pre-wrap;overflow-wrap:anywhere}
#cPh{color:var(--t3)}
#caret{display:inline-block;width:1.5px;height:1.2em;margin:0 1px 0 0;background:var(--t0);vertical-align:-.25em;animation:caret 1.06s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
#sendBtn{flex:none;width:1.6rem;height:1.6rem;margin-top:-.05rem;display:grid;place-items:center;border-radius:.35rem;color:var(--t3);transition:transform .1s}
#sendBtn svg.i{width:1rem;height:1rem}
#sendBtn.stop{color:var(--t0)}
#sendBtn.stop svg.i{width:1.15rem;height:1.15rem}
#sendBtn.press{transform:scale(.88)}
.c-row{display:flex;align-items:center;gap:.25rem;margin-top:.45rem;padding:0 .45rem;font-size:.95rem;color:var(--t2)}
.c-row .sp{flex:1}
.cb2{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:.35rem;color:var(--t2)}
.cb2 svg.i{width:1rem;height:1rem}
.cb2.sm svg.i{width:.8rem;height:.8rem}
.cb2.hov{background:var(--hov)}
.c-row .auto{margin-left:.35rem;color:var(--t2)}
#modelBtn,#effortBtn{flex:none;white-space:nowrap;height:1.8rem;display:flex;align-items:center;gap:.3rem;padding:0 .45rem;border-radius:.4rem;font-size:.95rem;color:var(--t1)}
#modelBtn:hover,#modelBtn.is-open,#modelBtn.hov,#effortBtn:hover,#effortBtn.is-open,#effortBtn.hov{background:var(--hov)}
#effortWarn{display:flex}
#effortWarn svg.i{width:.95rem;height:.95rem;color:var(--warn)}
#busy{display:flex;align-items:center;gap:.4rem;margin-left:.3rem;font-size:.85rem;color:var(--t3);white-space:nowrap}
#busy .ring{width:1rem;height:1rem;border-radius:50%;border:2px solid color-mix(in srgb,var(--blue) 22%,transparent);border-top-color:var(--blue);animation:spin .9s linear infinite}

/* Model menu */
#menu{position:fixed;z-index:30;min-width:15.5rem;max-width:22rem;padding:.375rem;background:var(--bg0);border:1px solid var(--bd2);border-radius:.8rem;box-shadow:0 .75rem 2.5rem rgba(0,0,0,.12),0 .125rem .5rem rgba(0,0,0,.05);font-family:var(--sans)}
html.dark #menu{box-shadow:0 .75rem 2.5rem rgba(0,0,0,.5)}
.mi{display:flex;align-items:center;gap:.75rem;padding:.5rem .65rem;border-radius:.5rem}
.mi:hover,.mi.hov{background:var(--hov)}
.mt{flex:1;min-width:0}
.mn{font-size:1.07rem;color:var(--t0)}
.mc{min-width:1rem;color:var(--check);display:grid;place-items:center}
.mc .num{font-size:1rem;color:var(--t3)}
.mc svg.i{width:1.05rem;height:1.05rem;stroke-width:2}
.badge{display:inline-block;margin-left:.5rem;padding:.0625rem .4rem;border-radius:.3125rem;background:var(--hov);font-size:.85rem;color:var(--t2);vertical-align:1px}
.msep{height:1px;background:var(--bd);margin:.375rem .25rem}
.msec{font-size:1rem;color:var(--t3);padding:.375rem .65rem .125rem}
.sw{width:2.2rem;height:1.25rem;border-radius:999px;background:var(--bd2);position:relative;transition:background .2s;flex:none}
.sw i{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.sw.on{background:var(--blue)}
.sw.on i{transform:translateX(.95rem)}

/* Effort picker */
#effortPop{position:fixed;z-index:30;width:21rem;padding:1.1rem 1.2rem .95rem;background:var(--bg0);border:1px solid var(--bd2);border-radius:.9rem;box-shadow:0 .75rem 2.5rem rgba(0,0,0,.12),0 .125rem .5rem rgba(0,0,0,.05);font-family:var(--sans);user-select:none;-webkit-user-select:none}
html.dark #effortPop{box-shadow:0 .75rem 2.5rem rgba(0,0,0,.5)}
.ep-h{display:flex;align-items:center;gap:.5rem;font-size:1.07rem}
.ep-t{color:var(--t3)}
.ep-v{color:var(--t0);font-weight:500}
.ep-v.ultra{color:var(--ultra)}
.ep-q{margin-left:auto;display:grid;color:var(--t3)}
.ep-q svg.help{width:1.2rem;height:1.2rem;display:block}
.ep-ends{display:flex;justify-content:space-between;margin:1rem 0 .55rem;font-size:1rem;color:var(--t3)}
.ep-track{position:relative;height:1.9rem;border-radius:.53rem;background:var(--track);cursor:pointer;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}
.ep-fill{position:absolute;left:0;top:0;bottom:0;border-radius:.53rem;background:var(--trackF);transition:width .09s ease-out}
.ep-track.ultra .ep-fill{display:none}
.ep-track canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:.53rem;display:none}
.ep-track.ultra{background:var(--trackU)}
.ep-track.ultra canvas{display:block}
.ep-dot{position:absolute;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--tdot)}
.ep-tick{position:absolute;top:50%;width:2px;height:.8rem;margin:-.4rem 0 0 -1px;border-radius:1px;background:var(--ttick)}
.ep-thumb{position:absolute;top:0;width:1.52rem;height:100%;margin:0 0 0 -.76rem;border-radius:.53rem;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.14);transition:left .09s ease-out}
.ep-rec{position:relative;height:1.35rem;margin-top:.4rem;font-size:1rem;color:var(--t3)}
.ep-rec span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ep-warn{display:flex;gap:.5rem;margin-top:.7rem;font-size:1rem;line-height:1.45;color:var(--warn)}
.ep-warn svg.i{width:1.05rem;height:1.05rem;margin-top:.15rem}

/* ───────── Messages ───────── */
.m-user{display:flex;justify-content:flex-end;margin:1.6rem 0 1.3rem;animation:fadein .25s ease}
.bubble{max-width:min(36rem,85%);background:var(--bub);border-radius:.85rem;padding:.55rem .9rem;font-size:1.07rem;line-height:1.5;color:var(--t0);white-space:pre-wrap;overflow-wrap:anywhere}
.turn{margin:0 0 1rem}
.blocks>*+*{margin-top:.85rem}
.b-text{font-family:var(--serif);font-size:1.07rem;line-height:1.43;color:var(--t0);overflow-wrap:anywhere}
.b-text>:first-child{margin-top:0}.b-text>:last-child{margin-bottom:0}
.b-text p{margin:0 0 .75em}
.b-text h1,.b-text h2,.b-text h3{color:var(--t0);margin:1.1em 0 .45em;line-height:1.3}
.b-text h1{font-size:1.35rem;font-weight:600}.b-text h2{font-size:1.2rem;font-weight:600}.b-text h3{font-size:1.07rem;font-weight:600}
.b-text ul,.b-text ol{margin:0 0 .75em;padding-left:2.1em}
.b-text li{margin:.15em 0;padding-left:.15em}
.b-text li::marker{color:var(--t3)}
.b-text strong{font-weight:600;color:var(--t0)}
.b-text code{font-family:var(--mono);font-size:.87em;color:var(--codei);background:var(--codeibg);border:1px solid var(--bd);border-radius:.3rem;padding:.05em .3em}
.b-text pre{margin:0 0 .75em;background:var(--codebg);border:1px solid var(--bd);border-radius:.6rem;overflow:hidden}
.b-text pre .ch{display:flex;justify-content:space-between;padding:.4rem .85rem;font:.85rem var(--sans);color:var(--t3);border-bottom:1px solid var(--bd)}
.b-text pre code{display:block;background:none;border:0;color:var(--t1);padding:.7rem .85rem;font-size:.9rem;line-height:1.6;white-space:pre;overflow-x:auto}
.b-text blockquote{margin:0 0 .75em;padding-left:1em;border-left:3px solid var(--bd2);color:var(--t2)}
.b-text hr{border:0;border-top:1px solid var(--bd2);margin:1.2em 0}
.b-text a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.tbl{margin:0 0 .75em;overflow-x:auto}
.b-text table{border-collapse:collapse;font-size:.97em;min-width:60%}
.b-text th{font-weight:600;color:var(--t0);text-align:left;padding:.45em .9em .45em 0;border-bottom:1px solid var(--bd2)}
.b-text td{padding:.45em .9em .45em 0;border-bottom:1px solid var(--bd)}
.b-text tr:last-child td{border-bottom:0}
.hl-kw{color:var(--hk)}.hl-str{color:var(--hs)}.hl-num{color:var(--hn)}.hl-com{color:var(--hc);font-style:italic}.hl-fn{color:var(--hf)}.hl-type{color:var(--ht)}

/* Gray rows: thinking, tools, token summary */
.b-think .th-head,.b-tool .tl-head{display:inline-flex;align-items:center;gap:.3rem;font-size:1.07rem;color:var(--t3);text-align:left;max-width:100%}
.th-head svg.i,.tl-head svg.i{width:.85rem;height:.85rem}
.tl-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-label.mono{font-family:var(--mono);font-size:.95rem}
.tl-meta{color:var(--t4)}
.tl-meta.err{color:var(--dt)}
.chev{transition:transform .2s}
.open>.th-head .chev,.open>.tl-head .chev{transform:rotate(90deg)}
.th-body,.tl-body{display:none;margin-top:.5rem;padding:.65rem .85rem;border:1px solid var(--bd);border-radius:.6rem;background:var(--codebg);font-size:.97rem;line-height:1.55;color:var(--t2);white-space:pre-wrap;overflow-wrap:anywhere}
.tl-body{font-family:var(--mono);font-size:.9rem;max-height:16rem;overflow-y:auto}
.b-think.open .th-body,.b-tool.open .tl-body{display:block}
.tl-body .dl{display:block}
.tl-body .add{background:color-mix(in srgb,#2ea043 16%,transparent)}
.tl-body .del{background:color-mix(in srgb,#f85149 16%,transparent)}
.mini-spin{width:.85rem;height:.85rem;border-radius:50%;border:1.6px solid var(--bd2);border-top-color:var(--t2);animation:spin .8s linear infinite;flex:none}
.shimmer{background:linear-gradient(90deg,var(--t3) 0%,var(--t3) 38%,var(--t0) 50%,var(--t3) 62%,var(--t3) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:shim 1.8s linear infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.status{display:flex;align-items:center;gap:.55rem;font-size:1.07rem;color:var(--t3)}
.status .sl{color:var(--t1)}
.th-time{color:var(--t3);margin-left:.15rem}
/* "Thinking" indicators: animated orange dots */
.dots{position:relative;display:inline-block;flex:none;width:1.15rem;height:1rem}
.dots i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.dots.wave i{top:calc(50% - 2px)}
.dots.wave i:nth-child(1){left:0}.dots.wave i:nth-child(2){left:calc(50% - 2px)}.dots.wave i:nth-child(3){right:0}
.dots.wave i{animation:dWave 1.2s ease-in-out infinite}
.dots.wave i:nth-child(2){animation-delay:.16s}.dots.wave i:nth-child(3){animation-delay:.32s}
@keyframes dWave{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-4px)}}
.dots.pinch i{top:calc(50% - 2px)}
.dots.pinch i:nth-child(1){left:0;animation:dPinchL 1.3s ease-in-out infinite}
.dots.pinch i:nth-child(2){left:calc(50% - 2px)}
.dots.pinch i:nth-child(3){right:0;animation:dPinchR 1.3s ease-in-out infinite}
@keyframes dPinchL{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(calc(.575rem - 2px))}}
@keyframes dPinchR{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(calc(-.575rem + 2px))}}
.dots.fold{width:.95rem;height:.95rem}
.dots.fold i{animation:dFold 1.4s cubic-bezier(.5,0,.3,1) infinite}
.dots.fold i:nth-child(1){left:0;top:0;--fx:1;--fy:1}
.dots.fold i:nth-child(2){right:0;top:0;--fx:-1;--fy:1}
.dots.fold i:nth-child(3){left:0;bottom:0;--fx:1;--fy:-1}
.dots.fold i:nth-child(4){right:0;bottom:0;--fx:-1;--fy:-1}
@keyframes dFold{0%,100%{transform:translate(0,0)}45%,55%{transform:translate(calc(var(--fx) * (.475rem - 2px)),calc(var(--fy) * (.475rem - 2px))) scale(.85)}}
.usage{font-size:1rem;color:var(--t3)}

/* Permission */
.perm{border:1px solid var(--bd2);border-radius:.8rem;background:var(--bg0);padding:.95rem 1rem .85rem;animation:fadein .25s ease}
.perm-h{display:flex;align-items:center;gap:.5rem;font-size:1.07rem;font-weight:600;color:var(--t0)}
.perm-h svg.i{color:var(--accent)}
.perm-cmd{margin:.7rem 0 .35rem;padding:.5rem .75rem;border-radius:.5rem;background:var(--codebg);border:1px solid var(--bd);font:.92rem/1.5 var(--mono);color:var(--t1);white-space:pre-wrap;overflow-wrap:anywhere}
.perm-d{font-size:.97rem;color:var(--t3)}
.perm-b{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.85rem}
.pb{height:2.1rem;padding:0 .9rem;border-radius:.5rem;border:1px solid var(--bd2);background:var(--bg0);font-size:.97rem;font-weight:500;color:var(--t1)}
.pb.pri{background:var(--t0);color:var(--bg);border-color:var(--t0)}
.pb.hov{filter:brightness(.93)}
html.dark .pb.hov{filter:brightness(1.15)}

/* Other blocks */
.err-box{border:1px solid var(--dbd);background:var(--dbg);color:var(--dt);border-radius:.7rem;padding:.75rem 1rem;font-size:1rem;line-height:1.5}
.note{font-size:1rem;color:var(--t3);font-style:italic}
.info{font-size:1rem;color:var(--t3);text-align:center;margin:.75rem 0}
.todo-card{border:1px solid var(--bd);border-radius:.7rem;padding:.75rem 1rem;font-size:1rem;background:var(--codebg)}
.todo-card .tt{font-weight:600;color:var(--t1);margin-bottom:.375rem}
.todo{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;color:var(--t1)}
.todo .bx{width:1rem;height:1rem;border-radius:.25rem;border:1.5px solid var(--bd2);flex:none;display:grid;place-items:center}
.todo.done{color:var(--t3);text-decoration:line-through}
.todo.done .bx{background:var(--t2);border-color:var(--t2);color:var(--bg)}
.todo.done .bx svg.i{width:.7rem;height:.7rem;stroke-width:3}
.todo.prog .bx{border-color:var(--accent);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
.compact-card{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:1.25rem 0;font-size:1rem;color:var(--t3)}
.divider{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;font-size:.9rem;color:var(--t3)}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--bd2)}
.foot{display:none}

/* Claude spark */
svg.spark{display:block;overflow:visible}
svg.spark line{stroke:var(--accent);stroke-width:2.1;stroke-linecap:round;transform-origin:12px 12px}
svg.spark.live{animation:spin 7s linear infinite}
svg.spark.live line{animation:ray 1.25s ease-in-out infinite}
@keyframes ray{0%,100%{transform:scale(1)}50%{transform:scale(.55)}}

/* Fake cursor */
#fakeCursor{position:fixed;left:0;top:0;z-index:70;width:22px;height:26px;pointer-events:none;opacity:0;transition:opacity .35s;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
#fakeCursor.on{opacity:1}
#fakeCursor svg{transition:transform .1s;transform-origin:3px 2px}
#fakeCursor.click svg{transform:scale(.86)}
body.nocursor,body.nocursor *{cursor:none!important}

/* ───────── Toast and control panel (never part of the recording) ───────── */
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,8px);z-index:80;padding:7px 14px;border-radius:999px;background:rgba(20,20,22,.88);color:#eee;border:1px solid rgba(255,255,255,.12);font:12px system-ui,"Segoe UI",sans-serif;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#panel{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(480px,100vw);display:flex;flex-direction:column;background:#17171a;color:#e8e6e3;border-left:1px solid #2d2d33;box-shadow:-24px 0 60px rgba(0,0,0,.5);font:13px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;transform:translateX(105%);transition:transform .22s ease;visibility:hidden}
#panel.open{transform:none;visibility:visible}
#panel header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
#panel header .ttl{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px}
#panel .x{background:none;border:0;color:#9a9aa2;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px}
#panel .x:hover{background:#26262b;color:#fff}
#panel nav{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid #2a2a30}
#panel nav button{background:none;border:0;border-bottom:2px solid transparent;color:#a3a3ab;padding:8px 10px;font:inherit;cursor:pointer}
#panel nav button.on{color:#fff;border-bottom-color:#D97757}
#panel section{display:none;flex:1;min-height:0;padding:14px 16px 16px;overflow:auto}
#panel section.on{display:flex;flex-direction:column;gap:10px}
#panel .seg{display:grid;grid-template-columns:repeat(3,1fr);background:#0f0f11;border:1px solid #2d2d33;border-radius:9px;padding:3px;gap:3px}
#panel .seg button{background:none;border:0;border-radius:6px;color:#b9b9c0;padding:7px 4px;font:inherit;cursor:pointer}
#panel .seg button.on{background:#2a2a31;color:#fff;box-shadow:inset 0 0 0 1px #3a3a42}
#panel .hint{margin:0;color:#a9a9b1;font-size:12.5px}
#panel textarea{width:100%;resize:none;background:#0d0d0f;color:#ecebe8;border:1px solid #2d2d33;border-radius:9px;padding:10px 12px;font:12.5px/1.55 "Cascadia Mono",Consolas,monospace;outline:none;tab-size:2}
#panel textarea:focus{border-color:#55555f}
#script{flex:1;min-height:220px}
#panel .ins{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:#8e8e97}
#panel .ins button{background:#24242a;color:#e8b6a3;border:1px solid #33333b;border-radius:6px;padding:3px 8px;font:12px "Cascadia Mono",Consolas,monospace;cursor:pointer}
#panel .ins button:hover{background:#2c2c33}

#panel .status{font-size:12px;color:#9fd6a8;min-height:18px}
#panel .status .w{color:#f0b37e;display:block}
#panel .btns{display:flex;gap:8px;flex-wrap:wrap}
#panel button.btn{flex:1;min-width:0;background:#24242a;color:#ecebe8;border:1px solid #33333b;border-radius:8px;padding:8px 10px;font:inherit;cursor:pointer;white-space:nowrap}
#panel button.btn:hover{background:#2c2c33}
#panel button.btn.primary{background:#D97757;border-color:#D97757;color:#1a0f0b;font-weight:650}
#panel button.btn.primary:hover{background:#e0866a}
#panel .small button.btn{font-size:12px;padding:6px 8px}
#panel .keys{font-size:11.5px;color:#8c8c95;line-height:1.7}
#panel .swap{font-size:12.5px;color:#e39a7f;text-decoration:none}
#panel .swap:hover{text-decoration:underline}
#panel kbd{font:11px "Cascadia Mono",Consolas,monospace;background:#26262c;border:1px solid #393941;border-bottom-width:2px;border-radius:4px;padding:0 5px;color:#ddd}
#panel .state{font-size:12px;color:#c9c9cf;display:flex;align-items:center;gap:7px}
#panel .state i{width:8px;height:8px;border-radius:50%;background:#666;display:inline-block}
#panel .state.play i{background:#4eba65}#panel .state.wait i{background:#D97757}#panel .state.pause i{background:#e0b341}
#panel h4{margin:8px 0 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8e8e97;font-weight:600}
#panel .f{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px}
#panel .f label{color:#c7c7cd}
#panel .f .v{display:flex;align-items:center;gap:8px}
#panel .f .v output{min-width:44px;text-align:right;color:#9b9ba3;font-variant-numeric:tabular-nums}
#panel select,#panel input[type=text],#panel input[type=number]{width:100%;background:#0f0f11;color:#ecebe8;border:1px solid #2d2d33;border-radius:7px;padding:6px 8px;font:inherit;outline:none}
#panel input[type=range]{flex:1;accent-color:#D97757}
#panel .chk{display:flex;align-items:center;gap:9px;color:#c7c7cd;cursor:pointer}
#panel .chk input{accent-color:#D97757;width:15px;height:15px}
#panel #models,#panel #recentsTa{min-height:110px;font-size:12px}
#panel .doc{font-size:12.8px;color:#d6d5d2}
#panel .doc h3{margin:14px 0 6px;font-size:13px;color:#fff}
#panel .doc h3:first-child{margin-top:0}
#panel .doc p{margin:4px 0 8px;color:#b9b9c0}
#panel .doc pre{margin:6px 0 10px;background:#0d0d0f;border:1px solid #2a2a30;border-radius:8px;padding:9px 11px;font:12px/1.55 "Cascadia Mono",Consolas,monospace;white-space:pre-wrap;color:#e9e7e3}
#panel .doc code{font:12px "Cascadia Mono",Consolas,monospace;background:#26262c;border-radius:4px;padding:1px 5px;color:#f1c7b8}
#panel .doc table{border-collapse:collapse;width:100%;margin:4px 0 10px}
#panel .doc td{border-top:1px solid #2a2a30;padding:6px 6px 6px 0;vertical-align:top;color:#b9b9c0}
#panel .doc td:first-child{white-space:nowrap;padding-right:10px}