/* Session Viewer v3 · Claude Code desktop feel · Hebrew RTL
   All URLs here are relative to this file, so the app can live under a sub path (e.g. /viewer/). */
@font-face{font-family:Heebo;font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/heebo-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/heebo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ================= tokens ================= */
:root{
 --font:Heebo,system-ui,"Segoe UI",Arial,sans-serif;--mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
 --r-xs:6px;--r-sm:8px;--r:10px;--r-lg:14px;--r-xl:18px;--r-pill:999px;
 --side-w:296px;--info-w:344px;--top-h:52px;--feed-w:780px;--av:28px;--gut:40px;--hit:36px;
 --ease:cubic-bezier(.2,.7,.2,1);--ease-in:cubic-bezier(.4,0,1,1);--dur:.18s;--dur-l:.24s;
 --z-sticky:5;--z-pop:30;--z-scrim:40;--z-drawer:50;
}
[data-theme=light]{color-scheme:light;
 --bg:#faf9f5;--side:#f3f1ea;--card:#fff;--tile:#f4f2ec;--raise:#fff;
 --hover:rgba(31,30,29,.05);--active:rgba(31,30,29,.085);--line:rgba(31,30,29,.10);--line-2:rgba(31,30,29,.18);
 --text:#1f1e1d;--text-2:#4a4843;--text-3:#6a675f;
 --accent:#a3472a;--accent-fill:#b0502c;--on-accent:#fff;--accent-soft:rgba(201,100,66,.11);--accent-line:rgba(176,80,44,.32);
 --user-bg:#f4ebe3;--user-line:#e6d5c8;
 --run:#14753a;--done:#4a5ea6;--stuck:#8f5600;--err:#bb2f28;--neutral:#6a675f;
 --agent:#6a4bd0;--agent-soft:rgba(106,75,208,.10);--agent-line:rgba(106,75,208,.28);
 --code-bg:#f2f0ea;--glass:rgba(250,249,245,.82);--track:rgba(31,30,29,.10);
 --shadow-sm:0 1px 2px rgba(31,30,29,.05);--shadow-pop:0 12px 32px rgba(31,30,29,.14),0 2px 6px rgba(31,30,29,.06);--scrim:rgba(20,19,18,.40)}
[data-theme=dark]{color-scheme:dark;
 --bg:#262624;--side:#1f1e1d;--card:#30302e;--tile:#2b2a28;--raise:#353532;
 --hover:rgba(255,255,255,.05);--active:rgba(255,255,255,.085);--line:rgba(255,255,255,.085);--line-2:rgba(255,255,255,.15);
 --text:#f0eee6;--text-2:#c3c0b6;--text-3:#a09d94;
 --accent:#e5906f;--accent-fill:#d97757;--on-accent:#1a1918;--accent-soft:rgba(217,119,87,.14);--accent-line:rgba(217,119,87,.34);
 --user-bg:#33302d;--user-line:#45403b;
 --run:#62cf8d;--done:#9fb3ee;--stuck:#eab155;--err:#ff8b80;--neutral:#a09d94;
 --agent:#b3a0ff;--agent-soft:rgba(179,160,255,.13);--agent-line:rgba(179,160,255,.30);
 --code-bg:#1f1e1d;--glass:rgba(38,38,36,.82);--track:rgba(255,255,255,.10);
 --shadow-sm:0 1px 2px rgba(0,0,0,.25);--shadow-pop:0 14px 40px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);--scrim:rgba(0,0,0,.55)}

/* ================= base ================= */
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font:15px/1.65 var(--font);background:var(--bg);color:var(--text);display:flex;overflow:hidden;height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
bdi,.num,.tnum{font-variant-numeric:tabular-nums}
svg{display:block;flex-shrink:0}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:8px;inset-inline-start:8px;z-index:100;padding:8px 14px;border-radius:var(--r);background:var(--accent-fill);color:var(--on-accent);font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}
.dimmer{color:var(--text-3)}
#main:focus,#home h1:focus{outline:none}
.mono,.path,code{font-family:var(--mono)}

/* icon button */
.ib{width:var(--hit);height:var(--hit);display:grid;place-items:center;border-radius:var(--r-sm);border:0;background:none;color:var(--text-2);flex-shrink:0;transition:background-color var(--dur),color var(--dur)}
.ib:hover{background:var(--hover);color:var(--text)}.ib:active{background:var(--active)}.ib svg{width:18px;height:18px}
.ib[aria-expanded=true]{background:var(--active);color:var(--text)}

/* ================= status (always icon + text + color) ================= */
.st-running{--sc:var(--run)}.st-done{--sc:var(--done)}.st-stuck{--sc:var(--stuck)}.st-error{--sc:var(--err)}.st-stopped{--sc:var(--neutral)}
.sic{width:16px;height:16px;display:grid;place-items:center;color:var(--sc,var(--neutral));flex-shrink:0}.sic svg{width:15px;height:15px}
.pdot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--run)}
.pdot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--run);opacity:0;animation:ring 1.8s var(--ease) infinite;animation-delay:inherit}
@keyframes ring{0%{transform:scale(.45);opacity:.85}100%{transform:scale(1.35);opacity:0}}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 9px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;white-space:nowrap;line-height:1;
 color:var(--sc);background:color-mix(in srgb,var(--sc) 12%,transparent);border:1px solid color-mix(in srgb,var(--sc) 28%,transparent)}
.pill .sic{width:14px;height:14px}.pill .sic svg{width:13px;height:13px}.pill.sm{height:22px;font-size:12px;padding:0 8px 0 7px}

/* ================= sidebar ================= */
#side{width:var(--side-w);flex-shrink:0;background:var(--side);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:0 12px 0 16px;height:var(--top-h);flex-shrink:0}
.brand .bt{font-size:15px;font-weight:700;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--accent-fill);color:var(--on-accent);flex-shrink:0}.logo svg{width:16px;height:16px}
#close{display:none}
.snav{padding:4px 8px 8px;display:grid;gap:2px;flex-shrink:0}
.navi{display:flex;align-items:center;gap:10px;min-height:var(--hit);padding:6px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--text-2);font-weight:500;font-size:14px;transition:background-color var(--dur),color var(--dur)}
.navi svg{width:17px;height:17px}.navi:hover{background:var(--hover);color:var(--text)}
.navi[aria-current]{background:var(--active);color:var(--text);font-weight:600}
.navi .n{margin-inline-start:auto}
.search{position:relative;margin:2px 8px 6px;flex-shrink:0}
.search svg{position:absolute;top:50%;inset-inline-start:11px;width:15px;height:15px;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.search input{width:100%;height:var(--hit);border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);padding:0 34px 0 10px;font-size:14px;color:var(--text);transition:border-color var(--dur)}
.search input::placeholder{color:var(--text-3)}.search input:hover{border-color:var(--line-2)}
.search input:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.search input::-webkit-search-cancel-button{cursor:pointer}
#list{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px 8px 24px;scrollbar-width:thin}
.cnt-b{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--hover);color:var(--text-3);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.grp{margin-top:6px}
.gh,.ph{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:start;border-radius:var(--r-sm);transition:background-color var(--dur)}
.gh:hover,.ph:hover{background:var(--hover)}
.gh{min-height:34px;padding:4px 8px;font-size:12.5px;font-weight:700;color:var(--text-2);letter-spacing:.01em}
.gh .gn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{width:14px;height:14px;color:var(--text-3);transition:transform var(--dur) var(--ease)}
[aria-expanded=false]>.chev{transform:rotate(90deg)}
.gh .runb{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--run)}
.ph{min-height:30px;padding:2px 8px 2px 8px;padding-inline-start:20px;font-size:12px;font-weight:600;color:var(--text-3)}
.ph .gn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph .chev{width:12px;height:12px}
.rows{display:grid;gap:1px;padding:2px 0 6px}
.row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;padding-inline-start:20px;border-radius:var(--r);text-decoration:none;color:var(--text);transition:background-color var(--dur);position:relative}
.row:hover{background:var(--hover)}
.row[aria-current]{background:var(--card);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.row[aria-current]::before{content:'';position:absolute;inset-block:10px;inset-inline-start:6px;width:3px;border-radius:3px;background:var(--accent-fill)}
.row .sic{margin-top:3px}
.rb{flex:1;min-width:0;display:grid;gap:1px}
.rt{font-size:14px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.row[aria-current] .rt{font-weight:600}
.rm{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm .stx{color:var(--sc);font-weight:600}
.side-empty{padding:24px 12px;text-align:center;color:var(--text-3);font-size:13.5px}

/* ================= app column + top bar ================= */
#app{flex:1;min-width:0;display:flex;flex-direction:column}
#top{position:relative;z-index:var(--z-sticky);height:var(--top-h);flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg)}
#menu{display:none}
#topTitle{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text-2);opacity:0;transform:translateY(4px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);pointer-events:none}
#topTitle span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.home #topTitle,body.tt #topTitle{opacity:1;transform:none}
.tools{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
/* usage meters */
.uwrap{position:relative}
#usageBtn{display:flex;align-items:center;gap:4px;height:var(--hit);padding:0 6px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);transition:border-color var(--dur),background-color var(--dur)}
#usageBtn:hover{border-color:var(--line-2)}#usageBtn[aria-expanded=true]{border-color:var(--line-2);background:var(--raise)}
.meter{display:flex;align-items:center;gap:7px;padding:0 6px;font-size:12.5px;color:var(--text-3);white-space:nowrap}
.meter+.meter{border-inline-start:1px solid var(--line);padding-inline-start:10px}
.meter .mp{font-weight:700;color:var(--text);font-size:13px;min-width:3ch}
.meter .ms{display:none}.meter .warnic{display:none;width:14px;height:14px}
.meter.warn .warnic,.meter.stop .warnic{display:block}
.meter.warn .warnic,.meter.warn .mp{color:var(--stuck)}.meter.stop .warnic,.meter.stop .mp{color:var(--err)}.meter.unknown .mp{color:var(--text-3);font-weight:500}
.bar{display:block;width:44px;height:5px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--run);transform-origin:right;transform:scaleX(0);transition:transform .4s var(--ease)}
.lv-ok .bar i,.bar.lv-ok i{background:var(--run)}.lv-warn .bar i,.bar.lv-warn i{background:var(--stuck)}.lv-stop .bar i,.bar.lv-stop i{background:var(--err)}.lv-unknown .bar i{background:var(--text-3)}
#usagePop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:var(--z-pop);width:320px;background:var(--raise);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:16px;font-size:13px;color:var(--text-2);animation:pop .18s var(--ease)}
.up-h{font-size:13px;font-weight:700;color:var(--text);margin:0 0 12px}
.uw+.uw{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.uw .l{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.uw .l b{font-size:13.5px;color:var(--text);font-weight:600}.uw .l .big{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.uw.lv-warn .big{color:var(--stuck)}.uw.lv-stop .big{color:var(--err)}
.uw .bar{width:100%;height:6px;margin:6px 0}
.uw .rst{font-size:12.5px;color:var(--text-3)}
.uw .act{display:flex;gap:6px;align-items:center;margin-top:6px;font-weight:600;font-size:12.5px}.uw .act svg{width:14px;height:14px}
.uw.lv-warn .act{color:var(--stuck)}.uw.lv-stop .act{color:var(--err)}
.up-src{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3);line-height:1.55}
#infoBtn{display:none}
body.home #infoBtn{display:none!important}

/* ================= main + info layout ================= */
#wrap{flex:1;min-height:0;display:flex}
#mainc{flex:1;min-width:0;position:relative;display:flex}
#main{flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;scroll-padding-top:24px}
#info{width:var(--info-w);flex-shrink:0;background:var(--side);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
body.home #info{display:none}
.ihd{display:flex;align-items:center;gap:8px;padding:0 12px 0 20px;height:48px;flex-shrink:0;border-bottom:1px solid var(--line)}
.ihd h2{margin:0;font-size:14px;font-weight:700;flex:1}
#infoClose{display:none}
#infoBody{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px 20px 32px;scrollbar-width:thin}
.isec{padding:16px 0;border-bottom:1px solid var(--line)}.isec:last-child{border-bottom:0}
.isec h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--text-3);letter-spacing:.02em}
.isec h3 .cnt-b{margin-inline-start:auto}
.sum{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;line-height:1.65;color:var(--text)}
.sum li{position:relative;padding-inline-start:14px;overflow-wrap:anywhere}
.sum li::before{content:'';position:absolute;inset-inline-start:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.sum strong{font-weight:600}
.sum code,.md code{display:inline-block;max-width:100%;vertical-align:bottom;overflow-wrap:anywhere;line-height:1.5}.sum code{font-size:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:13.5px;align-items:baseline}
.kv dt{color:var(--text-3)}.kv dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere;text-align:end}
.kv dd .note{display:block;font-size:12px;color:var(--text-3)}
.kv dt.full{grid-column:1/-1;margin-bottom:-2px}
.kv dd.ltrv{grid-column:1/-1;direction:ltr;text-align:left;font-family:var(--mono);font-size:12px;color:var(--text-2);background:var(--tile);border:1px solid var(--line);border-radius:var(--r-xs);padding:4px 8px;margin-bottom:4px;overflow-wrap:anywhere}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.tile{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px}
.tile .k{display:block;font-size:12px;color:var(--text-3)}
.tile .big{display:block;font-size:20px;font-weight:700;color:var(--text);line-height:1.35;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tile .big.muted{font-size:14px;font-weight:600;color:var(--text-2);line-height:1.9}
.bym{margin-top:12px;display:grid;gap:6px}
.bym .bm{display:flex;align-items:center;gap:8px;font-size:13px}.bym .bm .mn{flex:1}
.subs{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:grid;gap:6px}
.sa .h{display:flex;align-items:center;gap:8px;min-width:0}
.sa .d{font-size:13.5px;color:var(--text);line-height:1.5;overflow-wrap:anywhere}
.sa .m{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:var(--text-3)}
.sa .m b{font-family:var(--mono);font-weight:600;color:var(--text-2);font-size:12px}
.sa.nested{margin-inline-start:14px}
.sa .h .pill{margin-inline-start:auto}
.chipa{display:inline-block;font:600 11.5px/1.6 var(--mono);padding:0 7px;border-radius:var(--r-xs);background:var(--agent-soft);color:var(--agent);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.iempty{display:flex;gap:10px;align-items:center;color:var(--text-3);font-size:13.5px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r)}
.iempty svg{width:16px;height:16px}

/* ================= session header ================= */
.shdr{max-width:var(--feed-w);margin:0 auto;padding:28px 32px 4px}
.crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--text-3);margin-bottom:6px}
.crumb svg{width:14px;height:14px}
.shdr h1{margin:0;font-size:22px;line-height:1.35;font-weight:700;letter-spacing:-.015em;overflow-wrap:anywhere}
.shdr h1:focus{outline:none}
.smeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:12px;font-size:13px;color:var(--text-3)}
.smeta .sep{width:3px;height:3px;border-radius:50%;background:var(--text-3);opacity:.6}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);color:var(--text-2);white-space:nowrap}
.chip.warnc{color:var(--stuck);border-color:color-mix(in srgb,var(--stuck) 35%,transparent)}
.lnk{background:none;border:0;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;min-height:24px}

/* ================= chat feed ================= */
#feed{max-width:var(--feed-w);margin:0 auto;padding:20px 32px 120px}
.start{display:flex;align-items:center;gap:12px;color:var(--text-3);font-size:12px;margin:8px 0 20px}.start::before,.start::after{content:'';flex:1;height:1px;background:var(--line)}
.start span{display:inline-flex;gap:6px;align-items:center;max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msg{display:flex;gap:12px;margin:20px 0;align-items:flex-start;overflow-wrap:anywhere}
#feed>.msg{content-visibility:auto;contain-intrinsic-size:auto 80px}
.msg>.bd{flex:1;min-width:0}
.av{width:var(--av);height:var(--av);border-radius:50%;flex-shrink:0;display:grid;place-items:center;margin-top:1px}.av svg{width:16px;height:16px}
.asst .av{background:var(--accent-soft);color:var(--accent)}
.user .av{background:var(--text);color:var(--bg)}.user .av svg{width:15px;height:15px}
.agent .av{background:var(--agent-soft);color:var(--agent)}
.final .av{background:color-mix(in srgb,var(--run) 14%,transparent);color:var(--run)}.final.err .av{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}
.lbl{font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:4px}
.user .bd{background:var(--user-bg);border:1px solid var(--user-line);border-radius:var(--r-sm) var(--r-xl) var(--r-xl) var(--r-xl);padding:12px 16px}
.user .bd .lbl{color:var(--accent)}.user .txt{white-space:pre-wrap}
.txt.clamp{max-height:15.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.more{margin-top:6px;background:none;border:0;padding:4px 0;min-height:32px;color:var(--accent);font-weight:600;font-size:13px}
.asst .bd{padding-top:2px}
.final .bd{background:color-mix(in srgb,var(--run) 7%,var(--bg));border:1px solid color-mix(in srgb,var(--run) 26%,transparent);border-radius:var(--r-lg);padding:12px 16px}
.final.err .bd{background:color-mix(in srgb,var(--err) 7%,var(--bg));border-color:color-mix(in srgb,var(--err) 28%,transparent)}
.final .lbl{font-size:14px;color:var(--run);margin-bottom:8px}.final.err .lbl{color:var(--err)}
.final .bits{display:flex;flex-wrap:wrap;gap:6px}.final .bits span{font-size:12.5px;padding:2px 10px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);color:var(--text-2)}.final .md{margin-top:12px}
/* steps */
.step{display:block;margin:10px 0;margin-inline-start:var(--gut);background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:14px;color:var(--text-2)}
.step:has(+.step){margin-bottom:0;border-end-start-radius:0;border-end-end-radius:0}
.step+.step{margin-top:-1px;border-start-start-radius:0;border-start-end-radius:0}
details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:6px 10px;min-height:40px;border-radius:inherit;transition:background-color var(--dur)}
details>summary::-webkit-details-marker{display:none}details>summary:hover{background:var(--hover)}
details>summary::after{content:'';width:6px;height:6px;flex-shrink:0;border-left:1.6px solid var(--text-3);border-bottom:1.6px solid var(--text-3);transform:rotate(45deg);transition:transform var(--dur) var(--ease);margin-inline:2px 4px}
details[open]>summary::after{transform:rotate(-45deg)}
details[open]>summary{border-end-start-radius:0;border-end-end-radius:0}
details[open]>:not(summary){animation:fade .2s var(--ease)}
.ic{width:24px;height:24px;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--tile);color:var(--text-2);flex-shrink:0;border:1px solid var(--line)}.ic svg{width:14px;height:14px}
.k-agent>summary .ic{background:var(--agent-soft);color:var(--agent);border-color:var(--agent-line)}.k-skill>summary .ic{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.tx{flex:1;min-width:0;display:flex;align-items:baseline;gap:.32em;white-space:nowrap;overflow:hidden;color:var(--text)}
.tx>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tx>.chipa{flex-shrink:0;overflow:visible;margin-inline-end:4px}
.hint{flex-shrink:0;font-size:12px;color:var(--text-3);white-space:nowrap}
.think .tx{color:var(--text-3);font-style:italic}.extra .tx{color:var(--text-3)}
.mk{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center}.mk svg{width:12px;height:12px;stroke-width:3}
.mk.ok{background:color-mix(in srgb,var(--run) 14%,transparent);color:var(--run)}.mk.no{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err)}
.mk.wait{position:relative}.mk.wait::before{content:'';width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
.cnt{color:var(--text-3);font-size:12px;white-space:nowrap;flex-shrink:0}.cnt:empty{display:none}
.tx code,.tx .path{font-family:var(--mono);font-size:12.5px;color:var(--text);background:none;border:0;padding:0}
.tech{padding:4px 14px 12px}.tech .lbl{margin-top:10px}
.what{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:12.5px;color:var(--text-3)}.what svg{width:14px;height:14px}
.think>.md{color:var(--text-2);font-size:14px;padding:8px 16px 12px}.extra>pre{margin:4px 12px 12px}
.todo{list-style:none;margin:8px 0 4px;padding:0;display:grid;gap:4px;font-size:13.5px}
.todo li{display:flex;gap:8px;align-items:flex-start;color:var(--text)}.todo li .sic{margin-top:3px}.todo li.dn{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--line-2)}
.sub{margin:2px 12px 12px;padding:2px 0;padding-inline-start:12px;border-inline-start:2px solid var(--agent-line)}
.sub .msg{margin:12px 0;font-size:14px}.sub .av{--av:24px}.sub .av svg{width:13px;height:13px}.sub .step{margin-inline-start:36px;background:var(--bg)}
.path{font-size:13px}
code{font-size:.86em;background:var(--code-bg);border:1px solid var(--line);padding:1px 5px;border-radius:5px}
pre{direction:ltr;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.55 var(--mono);margin:6px 0;max-height:480px;overflow:auto;background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--text)}
pre code{background:none;border:0;padding:0;font-size:inherit}
/* markdown */
.md{line-height:1.7}.md p{margin:0 0 10px}.md>:last-child{margin-bottom:0}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:18px 0 8px;line-height:1.35;font-weight:700;letter-spacing:-.01em}.md>:first-child{margin-top:0}
.md h1{font-size:1.35em}.md h2{font-size:1.2em}.md h3{font-size:1.08em}.md h4,.md h5,.md h6{font-size:1em}
.md ul,.md ol{margin:4px 0 10px;padding-inline-start:22px}.md li{margin:3px 0}.md li::marker{color:var(--text-3)}
.md blockquote{margin:8px 0;padding:2px 0;padding-inline-start:14px;border-inline-start:3px solid var(--accent-line);color:var(--text-2)}
.md hr{border:0;border-top:1px solid var(--line);margin:16px 0}.md a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
.md pre{white-space:pre;background:var(--code-bg)}
.md .tw{overflow:auto;margin:8px 0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.md table{border-collapse:collapse;font-size:14px;min-width:100%}.md th,.md td{border-bottom:1px solid var(--line);padding:7px 12px;overflow-wrap:normal;text-align:start;vertical-align:top}
.md td+td,.md th+th{border-inline-start:1px solid var(--line)}.md th{background:var(--tile);font-weight:600;color:var(--text)}.md tbody tr:last-child td{border-bottom:0}
.badline{display:none}body.showbad .badline{display:block;margin:8px 0;margin-inline-start:var(--gut)}
.loading{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:14px;padding:24px 0}
.loading::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
#newer{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:var(--z-sticky);display:flex;align-items:center;gap:6px;background:var(--accent-fill);color:var(--on-accent);border:0;border-radius:var(--r-pill);padding:0 16px;height:36px;font-weight:600;font-size:13px;box-shadow:var(--shadow-pop);animation:popc .22s var(--ease)}
#newer svg{width:15px;height:15px}

/* ================= home ================= */
#home{max-width:1080px;margin:0 auto;padding:32px 32px 80px}
.hh{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.hh h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.hh p{margin:4px 0 0;color:var(--text-3);font-size:14px}
.live-n{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3)}
.today{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:32px}
.today .tt{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:-4px}
.today .tt h2{margin:0;font-size:14px;font-weight:700}.today .tt small{color:var(--text-3);font-size:12.5px}
.stat .k{display:block;font-size:12.5px;color:var(--text-3)}
.stat .v{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.3;font-variant-numeric:tabular-nums}
.stat .v.muted{font-size:15px;font-weight:600;color:var(--text-2);line-height:2.1}
.stat .note{font-size:12px;color:var(--text-3)}
.hsec{margin-top:28px}
.hsec>h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;font-weight:700}
.hsec>h2 .sic{width:18px;height:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.scard{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--text);transition:border-color var(--dur),transform var(--dur) var(--ease),box-shadow var(--dur);min-width:0}
.scard:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}.scard:active{transform:scale(.995)}
.scard .top{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3)}
.scard .top .when{margin-inline-start:auto;white-space:nowrap}
.scard .t{font-size:15px;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.scard .w{font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .la{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);background:var(--tile);border-radius:var(--r-sm);padding:6px 10px;min-width:0}
.scard .la svg{width:14px;height:14px;color:var(--run)}.scard .la span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.scard .ft{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-3)}
.scard .ft b{color:var(--text-2);font-weight:600}
.scard.st-running{border-color:color-mix(in srgb,var(--run) 30%,var(--line))}
.hempty{display:flex;align-items:center;gap:12px;padding:16px 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--text-3);font-size:14px}
.hempty svg{width:18px;height:18px}
.showall{margin-top:10px;background:none;border:0;padding:6px 2px;min-height:32px;color:var(--accent);font-weight:600;font-size:13.5px}

/* ================= motion ================= */
.in{animation:rise .24s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}}
@keyframes popc{from{opacity:0;transform:translate(-50%,8px)}}
@keyframes fade{from{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}
#scrim{display:none}

/* ================= responsive ================= */
/* info panel becomes a drawer on the end side (left in RTL) */
@media (max-width:1279px){
 #infoBtn{display:grid}#infoClose{display:grid}
 #info{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:var(--z-drawer);width:min(380px,92vw);border-inline-start:0;box-shadow:var(--shadow-pop);transform:translateX(-100%);visibility:hidden;transition:transform var(--dur-l) var(--ease-in),visibility 0s var(--dur-l)}
 body.infoopen #info{transform:none;visibility:visible;transition:transform var(--dur-l) var(--ease)}
 #scrim{display:block;position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-l)}
 body.infoopen #scrim,body.drawer #scrim{opacity:1;pointer-events:auto}
}
/* sidebar becomes a drawer on the start side (right in RTL) */
@media (max-width:860px){
 #menu,#close{display:grid}
 #side{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:var(--z-drawer);width:min(320px,88vw);box-shadow:var(--shadow-pop);transform:translateX(100%);visibility:hidden;transition:transform var(--dur-l) var(--ease-in),visibility 0s var(--dur-l)}
 body.drawer #side{transform:none;visibility:visible;transition:transform var(--dur-l) var(--ease)}
 #top{padding:0 8px}
 #topTitle{display:none}
 .shdr{padding:20px 20px 0}#feed{padding:16px 20px 110px}#home{padding:24px 20px 80px}
 .today{grid-template-columns:1fr 1fr}
}
/* touch: 44px targets */
@media (max-width:860px),(pointer:coarse){
 :root{--hit:44px;--top-h:56px}
 .row{min-height:52px}.gh,.ph{min-height:44px}
 details>summary{min-height:44px}
 .more,.showall,.lnk{min-height:44px}
}
@media (max-width:560px){
 :root{--av:24px;--gut:0px}
 body{font-size:16px}
 .shdr{padding:16px 16px 0}.shdr h1{font-size:19px}
 #feed{padding:12px 16px 100px}#home{padding:20px 16px 72px}
 .hh h1{font-size:22px}
 .today{padding:14px 16px;gap:12px}.stat .v{font-size:20px}
 .cards{grid-template-columns:1fr}
 .meter .ml,.bar{display:none}.meter{padding:0 4px;gap:4px}.meter+.meter{padding-inline-start:8px}
 .meter .ms{display:inline}
 #usageBtn{padding:0 6px}
 #usagePop{position:fixed;top:calc(var(--top-h) + 6px);inset-inline:8px;width:auto}
 details>summary:has(.hint){flex-wrap:wrap;row-gap:0}
 .hint{order:9;flex-basis:100%;padding-inline-start:32px;margin-top:-4px;padding-bottom:2px;white-space:normal}
 .msg{gap:10px}.sub{margin-inline:8px}.sub .step{margin-inline-start:0}
 details>summary{gap:8px;padding-inline:8px}
 .md table{font-size:13px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.mk.wait::before{border-top-color:var(--line-2)}.pdot::after{display:none}}