/* Extracted from demo/app.py on 2026-08-14.
 *
 * Lives here so styling can change WITHOUT restarting the portal -
 * a restart kills every live chat session, because the agent CLI
 * processes are children of this process. Edit this file and reload
 * the page; nothing is torn down.
 */

/* Palette sampled from the firm's own artwork: navy #141C30, rose gold #E0A0A4.
   Light mode is paper with navy type and a rose deepened enough to hold contrast
   on white. Dark mode is the brand's own pairing, rose gold on navy, so the
   identity reads strongest where the logo already lives. */
:root{
  --paper:#FBFAF9; --panel:#FFFFFF; --ink:#141C30; --ink-2:#5C6474;
  --rule:#E5E1E2; --accent:#AE6E76; --accent-bg:#F7EDEE; --rose:#E0A0A4;
  --code-bg:#FAF7F7; --zebra:#FBF9F9;
  --mut:#5C6474; --card:#FFFFFF; --line:#E5E1E2; --code:#F4F1F0;
  --ok:#2F6B4F; --shadow:0 1px 2px rgba(20,28,48,.05);
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1524; --panel:#161E33; --ink:#E9E7E6; --ink-2:#98A0B0;
  --rule:#27304A; --accent:#E0A0A4; --accent-bg:#1E2740; --rose:#E0A0A4;
  --code-bg:#141B2E; --zebra:#161D30;
  --mut:#98A0B0; --card:#161E33; --line:#27304A; --code:#131B2C;
  --ok:#7FB79A; --shadow:none;
}}
:root[data-theme="dark"]{
  --paper:#0E1524; --panel:#161E33; --ink:#E9E7E6; --ink-2:#98A0B0;
  --rule:#27304A; --accent:#E0A0A4; --accent-bg:#1E2740; --rose:#E0A0A4;
  --mut:#98A0B0; --card:#161E33; --line:#27304A; --code:#131B2C;
  --ok:#7FB79A; --shadow:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* author display:flex otherwise wins */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px 64px}
header{border-bottom:1px solid var(--rule);background:var(--panel);
position:sticky;top:0;z-index:5}
.hdr{max-width:1080px;margin:0 auto;padding:11px 20px;display:flex;
gap:14px;align-items:center;flex-wrap:wrap}
.logo{height:30px;width:auto;display:block}
.logo.dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo.light{display:none}
  :root:not([data-theme="light"]) .logo.dark{display:block}}
:root[data-theme="dark"] .logo.light{display:none}
:root[data-theme="dark"] .logo.dark{display:block}
.divider{width:1px;height:20px;background:var(--rule)}
.appname{font-family:var(--serif);font-size:14.5px;color:var(--ink-2);
text-decoration:none;white-space:nowrap}
a.appname:hover{color:var(--accent)}
.grow{flex:1}
.pill{background:var(--accent-bg);color:var(--accent);border-radius:999px;
padding:3px 10px;font-size:11.5px;font-weight:650;letter-spacing:.04em}
select,input,button{font:inherit;color:inherit;background:var(--panel);
border:1px solid var(--rule);border-radius:8px;padding:8px 11px}
button{cursor:pointer}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);
font-weight:600}
button.primary:hover{filter:brightness(1.06)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-family:var(--serif);font-size:27px;margin:26px 0 4px;
letter-spacing:-.01em;text-wrap:balance;font-weight:600}
h2{font-family:var(--mono);font-size:11px;text-transform:uppercase;
letter-spacing:.13em;color:var(--ink-2);margin:32px 0 10px;font-weight:650}
.sub{color:var(--ink-2);font-size:13.5px;margin:0 0 8px;max-width:72ch}
.grid{display:flex;flex-direction:column;gap:6px}
.item{background:var(--panel);border:1px solid var(--rule);border-radius:9px;
padding:11px 14px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
.item:hover{border-color:var(--rose)}
.item .main{flex:1;min-width:0}
.item .nm{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.item .meta{color:var(--ink-2);font-size:12.5px}
.item .acts{display:flex;gap:14px;flex:0 0 auto;font-size:13.5px}
.item .acts a{text-decoration:none;white-space:nowrap}
.item .acts a:hover{text-decoration:underline}
.kids{display:flex;flex-direction:column;gap:6px;margin:6px 0 6px 22px;
padding-left:14px;border-left:2px solid var(--rose)}
.item.kid{background:transparent;box-shadow:none}
.twist{font:inherit;font-size:12.5px;color:var(--ink-2);background:transparent;
border:1px solid var(--rule);border-radius:6px;padding:4px 9px;cursor:pointer}
.twist:hover{border-color:var(--accent);color:var(--accent)}
.twist[aria-expanded=true]{color:var(--accent);border-color:var(--accent)}
.pillbtn{font:inherit;font-size:11px;font-weight:650;letter-spacing:.04em;
text-transform:uppercase;border-radius:999px;padding:3px 10px;flex:0 0 auto;
border:1px solid transparent;cursor:default;white-space:nowrap}
button.pillbtn{cursor:pointer}
button.pillbtn:hover{filter:brightness(.97);border-color:currentColor}
.s-unset{background:transparent;color:var(--ink-3);
border-color:var(--ink-3);opacity:.5}
button.s-unset:hover{color:var(--accent);border-color:var(--accent);opacity:1}
/* full strength inside the filter menu - there it is a choice, not a blank */
.stopt .s-unset{opacity:.75}
.s-trial-prep{background:#EFE7F7;color:#6A3E9C}
.s-in-trial{background:#E4EDF8;color:#2C5C90}
.s-active{background:#E8F2EC;color:#2F6B4F}
.s-dormant{background:#F5EFE3;color:#8A6A2F}
.s-closed{background:#EDEEF2;color:#5C6474}
.s-archive{background:#EAE7EF;color:#5B4F76}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --s-act-bg:#16301F; --s-act-fg:#7FB79A; --s-dor-bg:#302713; --s-dor-fg:#D2A45E;
  --s-clo-bg:#1E2438; --s-clo-fg:#98A0B0; --s-arc-bg:#241E33; --s-arc-fg:#A99BC7;
  --s-tri-bg:#2A1D3D; --s-tri-fg:#C4A3E8;
  --s-itr-bg:#182739; --s-itr-fg:#8FB6DF;}}
:root[data-theme="dark"]{--s-act-bg:#16301F; --s-act-fg:#7FB79A;
  --s-dor-bg:#302713; --s-dor-fg:#D2A45E; --s-clo-bg:#1E2438; --s-clo-fg:#98A0B0;
  --s-arc-bg:#241E33; --s-arc-fg:#A99BC7;
  --s-tri-bg:#2A1D3D; --s-tri-fg:#C4A3E8;
  --s-itr-bg:#182739; --s-itr-fg:#8FB6DF;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .s-active{background:var(--s-act-bg);color:var(--s-act-fg)}
:root:not([data-theme="light"]) .s-dormant{background:var(--s-dor-bg);color:var(--s-dor-fg)}
:root:not([data-theme="light"]) .s-closed{background:var(--s-clo-bg);color:var(--s-clo-fg)}
:root:not([data-theme="light"]) .s-archive{background:var(--s-arc-bg);color:var(--s-arc-fg)}
:root:not([data-theme="light"]) .s-trial-prep{background:var(--s-tri-bg);color:var(--s-tri-fg)}
:root:not([data-theme="light"]) .s-in-trial{background:var(--s-itr-bg);color:var(--s-itr-fg)}}
:root[data-theme="dark"] .s-active{background:var(--s-act-bg);color:var(--s-act-fg)}
:root[data-theme="dark"] .s-dormant{background:var(--s-dor-bg);color:var(--s-dor-fg)}
:root[data-theme="dark"] .s-closed{background:var(--s-clo-bg);color:var(--s-clo-fg)}
:root[data-theme="dark"] .s-archive{background:var(--s-arc-bg);color:var(--s-arc-fg)}
:root[data-theme="dark"] .s-trial-prep{background:var(--s-tri-bg);color:var(--s-tri-fg)}
:root[data-theme="dark"] .s-in-trial{background:var(--s-itr-bg);color:var(--s-itr-fg)}
.localbadge{display:inline-block;margin-left:9px;font-size:10.5px;font-weight:650;
letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
border:1px solid var(--rose);border-radius:4px;padding:1px 6px;vertical-align:2px}
.statusmenu{position:absolute;z-index:20;background:var(--panel);
border:1px solid var(--rule);border-radius:9px;padding:5px;display:flex;
flex-direction:column;gap:2px;box-shadow:0 6px 24px rgba(20,28,48,.16);min-width:130px}
.statusmenu button{border:none;background:transparent;text-align:left;
padding:7px 11px;border-radius:6px;font-size:13.5px;cursor:pointer}
.statusmenu button:hover{background:var(--accent-bg);color:var(--accent)}
/* The transcript is its own window: the page chrome (session, context,
   documents) stays above it, and only the conversation scrolls. The chat page
   also runs wider than the rest of the portal - a 1080px column made a
   full-width desktop read like a phone. */
body:has(.chatpage){height:100dvh;display:flex;flex-direction:column;
overflow:hidden}
body:has(.chatpage) .wrap{flex:1;min-height:0;display:flex;
flex-direction:column;padding-bottom:18px;max-width:min(1560px,94vw)}
.chatpage{flex:1;min-height:0;display:flex;flex-direction:column}
/* the flex column stretched the back pill to full width; other pages are
   block layout and were never affected */
body:has(.chatpage) .backb{align-self:flex-start;margin:18px 0 4px}

.chatsplit{flex:1;min-height:0;display:flex;gap:14px}
.chatsplit>.chatbox{flex:1;min-width:0}
.chatsplit.split>.chatbox{flex:1 1 52%}
.docpane{flex:1 1 48%;min-width:0;margin-top:14px;display:flex;
flex-direction:column;border:1px solid var(--rule);border-radius:13px;
background:var(--panel);overflow:hidden}
.docpane[hidden]{display:none}
.dphead{display:flex;align-items:center;gap:10px;padding:10px 12px;
border-bottom:1px solid var(--rule);background:var(--paper)}
.dptitle{flex:1;min-width:0;font-size:13px;font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpclose{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;
color:var(--ink-3);padding:0 4px}
.dpclose:hover{color:var(--accent)}
.dpbody{flex:1;min-height:0;overflow:auto;padding:0;display:flex;
flex-direction:column;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.dpframe{flex:1;width:100%;border:0;min-height:320px;background:#fff}
.dpimg{max-width:100%;height:auto;display:block;margin:auto;padding:12px}
.dptext{padding:14px 16px;font-size:13.5px;line-height:1.55;
white-space:pre-wrap;word-break:break-word}
.dptext.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
font-size:12px;white-space:pre}
.dpempty{padding:22px 18px;color:var(--ink-3);font-size:13px;line-height:1.6}
.dpnote{padding:10px 16px;font-size:11.5px;color:var(--ink-3);
border-top:1px solid var(--rule)}
.dpover{padding:30px 22px;text-align:center}
.dpovert{margin:0 0 6px;font-size:14px;font-weight:600;word-break:break-word}
.dpoverm{margin:0 0 18px;font-size:12.5px;color:var(--ink-3)}
.dpovern{margin:14px 0 0;font-size:11px;color:var(--ink-3);line-height:1.5}
.dpdl{display:inline-block;padding:9px 18px;border-radius:9px;
background:var(--accent);color:#fff;text-decoration:none;font-size:13px}
.dpdl:hover{filter:brightness(1.06)}
.dpdl.inline{display:block;margin:0 16px 16px;text-align:center}
.dpgrid{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.dpgrid table{border-collapse:separate;border-spacing:0;font-size:12px;
font-variant-numeric:tabular-nums}
.dpgrid th,.dpgrid td{border-right:1px solid var(--rule);
border-bottom:1px solid var(--rule);padding:4px 9px;text-align:left;
max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpgrid thead th{position:sticky;top:0;z-index:2;background:var(--accent-bg);
font-weight:650;white-space:nowrap}
.dpgrid .rn{position:sticky;left:0;z-index:1;background:var(--panel);
color:var(--ink-3);text-align:right;min-width:44px;font-size:11px}
.dpgrid thead .rn{z-index:3}
.dpgrid tbody tr:hover td{background:var(--accent-bg)}
.dptabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--rule);
overflow-x:auto;flex:0 0 auto}
.dptabs button{font:inherit;font-size:12px;padding:4px 11px;border-radius:7px;
border:1px solid var(--rule);background:var(--panel);color:var(--ink-2);
cursor:pointer;white-space:nowrap}
.dptabs button.on{border-color:var(--accent);color:var(--accent);
background:var(--accent-bg)}
.dpmailhdr{padding:14px 16px;border-bottom:1px solid var(--rule);
background:var(--paper);font-size:13px}
.dpmailhdr>div{display:flex;gap:10px;margin:2px 0}
.dpmailhdr .mk{flex:0 0 62px;color:var(--ink-3);font-size:11.5px;
text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.dpmailhdr .mv{flex:1;min-width:0;word-break:break-word}
.dpatt{padding:9px 16px;border-bottom:1px solid var(--rule);
font-size:12px;color:var(--accent);background:var(--accent-bg)}
.dpmailbody{flex:1;min-height:0;overflow:auto;padding:14px 16px;
font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
-webkit-overflow-scrolling:touch}
.dplink,.dpnew{display:block;padding:12px 16px;font-size:12.5px}
.dpnew{border-top:1px solid var(--rule);color:var(--ink-3)}
.dpnew:hover{color:var(--accent)}
.dprecent{border-top:1px solid var(--rule);background:var(--paper);
max-height:33%;overflow-y:auto;flex:0 0 auto;
-webkit-overflow-scrolling:touch;touch-action:pan-y}
.dprlabel{padding:9px 12px 4px;font-size:10.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3)}
.dprecent ul{list-style:none;margin:0;padding:0 6px 8px}
.dprecent ul li+li{margin-top:3px}
.dpitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
border:1px solid transparent;background:var(--panel);padding:7px 9px;
border-radius:8px;cursor:pointer;font:inherit;color:var(--ink)}
.dprecent ul li:nth-child(odd) .dpitem{background:var(--zebra)}
.dpitem:hover{border-color:var(--rule)}
.dpitem.on{border-color:var(--accent);background:var(--accent-bg)}
.dpitem.o-chat .dpic{color:var(--accent);border-color:var(--accent)}
.dpitem.o-analysis .dpic{color:var(--accent)}
.artifact.wp{background:none;color:var(--accent);border-style:dashed}
.dpn .artifact{margin-left:7px;padding:0 6px;font-size:9px;vertical-align:1px}
.dpic{flex:0 0 auto;display:inline-flex;width:28px;height:28px;
align-items:center;justify-content:center;border-radius:7px;
background:var(--paper);border:1px solid var(--rule)}
.dpmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dpn{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpw{font-size:11px;color:var(--ink-3)}
.k-pdf .dpic{color:#B3352F}
.k-sheet .dpic{color:#1E7A45}
.k-mail .dpic{color:#2C5C90}
.k-image .dpic{color:#8A5CB8}
.k-video .dpic{color:#B5651D}
.k-audio .dpic{color:#0F7B8A}
.k-doc .dpic{color:#2B4E8C}
.k-text .dpic{color:#5C6474}
.k-archive .dpic{color:#8A6A2F}
.k-file .dpic{color:var(--ink-3)}
.dpcount{margin-left:2px;padding:0 6px;border-radius:999px;
background:var(--accent-bg);color:var(--accent);font-size:11px}
.dpcount[hidden]{display:none}
/* narrow: the viewer takes the whole width rather than squeezing both */
@media (max-width:1100px){
  .chatsplit{flex-direction:column}
  .chatsplit.split>.chatbox{flex:1 1 auto;min-height:38vh}
  .docpane{flex:1 1 auto;min-height:42vh}
}
.chatbox{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:14px;
border:1px solid var(--rule);border-radius:13px;background:var(--paper);
box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden}
#log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
padding:18px 22px 6px;scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;touch-action:pan-y}
.chatbox form.ask{margin:0;position:static;padding:13px 16px;
border-top:1px solid var(--rule);background:var(--panel)}
.chatbox .readonly{margin:0;border:0;border-top:1px dashed var(--rule);
border-radius:0;padding:14px 16px;background:var(--panel)}
.chatbox .waking{padding:26px 0}

/* Long lines stay readable at 1560px, but tables and code may use the room. */
#log>.msg{max-width:1180px}
.docs ul{max-height:118px;overflow-y:auto}

/* Below this, the chrome costs more than it gives: let the page scroll. */
@media (max-height:620px),(max-width:900px){
  body:has(.chatpage){height:auto;overflow:visible}
  body:has(.chatpage) .wrap{max-width:1080px}
  .chatbox{min-height:60vh}
}
/* Touch: never trap the page inside a nested scroller. The transcript grows
   naturally and the whole page scrolls, which is what a finger expects. */
@media (pointer:coarse){
  body:has(.chatpage){height:auto;overflow:visible}
  .chatsplit{flex-direction:column}
  .chatbox{min-height:70vh}
  #log{flex:none;max-height:none;overflow-y:visible;overscroll-behavior:auto}
  .chatbox form.ask{position:sticky;bottom:0}
  .docpane{min-height:70vh}
  .dprecent{max-height:none}
}

/* rendered assistant markdown */
.msg .body>*:first-child{margin-top:0}
.msg .body>*:last-child{margin-bottom:0}
.msg .body p{margin:0 0 .7em}
.msg .body h3,.msg .body h4,.msg .body h5,.msg .body h6{
margin:1.15em 0 .45em;line-height:1.3}
.msg .body h3{font-size:1.11em}
.msg .body h4{font-size:1.02em}
.msg .body h5,.msg .body h6{font-size:.95em;color:var(--ink-2)}
.msg .body ul,.msg .body ol{margin:0 0 .7em;padding-left:1.35em}
.msg .body li{margin:.22em 0}
.msg .body li>ul,.msg .body li>ol{margin:.2em 0}
.msg .body strong{font-weight:650}
.msg .body em{font-style:italic}
.msg .body del{opacity:.65}
.msg .body a{color:var(--accent);text-decoration:underline;
text-underline-offset:2px}
.msg .body code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
font-size:.88em;padding:.1em .35em;border-radius:4px;background:var(--accent-bg);
color:var(--ink)}
.msg .body pre.code{margin:0 0 .8em;padding:11px 13px;border-radius:8px;
background:var(--code-bg);border:1px solid var(--rule);overflow-x:auto}
.msg .body pre.code code{background:none;padding:0;font-size:12.5px;
line-height:1.5;white-space:pre}
.msg .body blockquote{margin:0 0 .75em;padding:.1em 0 .1em .9em;
border-left:3px solid var(--rule);color:var(--ink-2)}
.msg .body hr{margin:1.1em 0;border:0;border-top:1px solid var(--rule)}
.msg .body .tw{margin:0 0 .8em;overflow-x:auto}
.msg .body table{border-collapse:collapse;font-size:13px;min-width:100%}
.msg .body th,.msg .body td{border:1px solid var(--rule);padding:5px 9px;
text-align:left;vertical-align:top}
.msg .body th{background:var(--accent-bg);font-weight:600;white-space:nowrap}
.msg.a .body.cursor>*:last-child::after{content:'88';margin-left:2px;
opacity:.5;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.statusmenu .clearst{margin-top:5px;padding-top:8px;
border-top:1px solid var(--rule);border-radius:0;color:var(--ink-3);
font-size:12px;letter-spacing:0;text-transform:none}
.statusmenu .clearst:hover{color:var(--rose)}

.act.pin{padding:4px 8px;color:var(--ink-3)}
.act.pin:hover{border-color:var(--accent);color:var(--accent)}
.act.pin.on{color:var(--accent);border-color:var(--accent);
background:var(--accent-bg)}
.act.pin.on svg{fill:currentColor}
.item.pinned{border-left:3px solid var(--accent)}
.pinhint{margin:0 0 12px;font-size:12.5px;color:var(--ink-3)}

/* Spark sync: request buttons and the approval tree */
.act.syncreq{color:var(--ink-3)}
.act.syncreq:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.act.syncreq.done{border-color:#2F6B4F;color:#2F6B4F;background:#E8F2EC}
a.act.syncreq{text-decoration:none}
a.act.syncreq.on{border-color:var(--accent);color:var(--accent);
background:var(--accent-bg);font-weight:600}
.act.syncreq:disabled{opacity:.6;cursor:default}
.synctree{list-style:none;margin:14px 0 0;padding:0;border:1px solid var(--rule);
border-radius:11px;background:var(--panel);max-height:60vh;overflow:auto;
-webkit-overflow-scrolling:touch}
.synctree .twrap{list-style:none}
.tkids{list-style:none;margin:0;padding:0}
.tnode{display:flex;align-items:center;gap:9px;padding:7px 12px;
border-bottom:1px solid var(--rule);font-size:13px}
.tnode:hover{background:var(--zebra)}
.ttwist{flex:0 0 auto;width:22px;height:22px;border:1px solid var(--rule);
border-radius:6px;background:var(--paper);color:var(--ink-2);cursor:pointer;
font-size:11px;line-height:1;padding:0}
.ttwist:hover{border-color:var(--accent);color:var(--accent)}
.tcb{flex:0 0 auto;accent-color:var(--accent);cursor:pointer;margin:0}
.tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.tmeta{flex:0 0 auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ttag{flex:0 0 auto;font-size:10.5px;font-weight:650;letter-spacing:.04em;
text-transform:uppercase;padding:2px 8px;border-radius:999px;
background:#E8F2EC;color:#2F6B4F}
.tnone{padding:12px 14px;color:var(--ink-3);font-size:12.5px;list-style:none}
.syncacts{display:flex;align-items:center;gap:14px;margin:16px 0;flex-wrap:wrap}
.declineb{font:inherit;font-size:13px;padding:7px 15px;border-radius:8px;
border:1px solid var(--rule);background:var(--panel);color:var(--ink-3);
cursor:pointer}
.declineb:hover{border-color:var(--rose);color:var(--rose)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ttag,
:root:not([data-theme="light"]) .act.syncreq.done{background:#16301F;color:#7FB79A}}
:root[data-theme="dark"] .ttag,
:root[data-theme="dark"] .act.syncreq.done{background:#16301F;color:#7FB79A}

/* status filter dropdown */
.filterdd{position:relative}
.filterdd>summary{list-style:none;cursor:pointer;user-select:none}
.filterdd>summary::-webkit-details-marker{display:none}
.filterdd[open]>summary{border-color:var(--accent);color:var(--accent)}
.stmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:45;width:214px;
padding:8px;background:var(--panel);border:1px solid var(--rule);
border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.stopt{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px;
cursor:pointer}
.stopt:hover{background:var(--accent-bg)}
.stopt input{margin:0;accent-color:var(--accent);cursor:pointer}
.stopt .pillbtn{cursor:pointer}
.strow{display:flex;align-items:center;gap:10px;margin-top:7px;padding-top:8px;
border-top:1px solid var(--rule)}
.stapply{flex:1 1 auto;font:inherit;font-size:12.5px;padding:5px 10px;
border:1px solid var(--accent);border-radius:7px;background:var(--accent);
color:#fff;cursor:pointer}
.stclear{font-size:12px;color:var(--ink-3);text-decoration:none}
.stclear:hover{color:var(--accent)}

/* navigation, icon actions, live indicators, delete */
.backb{display:inline-flex;align-items:center;gap:6px;margin:24px 0 18px;
padding:5px 12px 5px 9px;border:1px solid var(--rule);border-radius:999px;
font-size:12.5px;color:var(--ink-2);text-decoration:none;background:var(--panel)}
.backb:hover{border-color:var(--accent);color:var(--accent)}
.backb svg{flex:0 0 auto}
.act{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
border:1px solid var(--rule);border-radius:7px;font-size:12.5px;
text-decoration:none;color:var(--ink-2);background:var(--panel);cursor:pointer}
.act:hover{border-color:var(--accent);color:var(--accent)}
.act svg{flex:0 0 auto}
.act.chat:hover{background:var(--accent-bg)}
.spicon{display:block;flex:0 0 auto;width:15px;height:15px}
.act.sp:hover{border-color:#1A9BA1;color:#036C70;background:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .act.sp:hover{color:#37C6D0}}
:root[data-theme="dark"] .act.sp:hover{color:#37C6D0}
.act.del{padding:4px 9px;color:var(--ink-3)}
.act.del:hover{border-color:var(--rose);color:var(--rose);background:transparent}
.act.del:disabled{opacity:.4;cursor:not-allowed}
.livebadge{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
font-size:11px;font-weight:650;padding:3px 9px;border-radius:999px;
background:#E8F2EC;color:#2F6B4F;white-space:nowrap}
.livedot{width:6px;height:6px;border-radius:50%;background:currentColor;
animation:pulse 1.6s ease-in-out infinite}
.livepill{display:inline-flex;align-items:center;gap:6px;font-size:12px;
padding:4px 11px;border-radius:999px;border:1px solid var(--rule);
color:#2F6B4F;background:#E8F2EC;text-decoration:none;white-space:nowrap}
.livepill:hover{border-color:#2F6B4F}
.bugb{flex:0 0 auto;font:inherit;font-size:12px;padding:4px 11px;
border-radius:999px;border:1px solid var(--rule);background:var(--panel);
color:var(--ink-3);cursor:pointer;white-space:nowrap}
.bugb:hover{border-color:var(--rose);color:var(--rose)}
.syncpill.bugs{border-color:var(--rose);color:var(--rose);background:none}
.bugdlg{position:fixed;inset:0;z-index:80;background:rgba(20,28,48,.45);
display:flex;align-items:center;justify-content:center;padding:20px}
.bugdlg[hidden]{display:none}
.bugcard{width:min(560px,100%);max-height:88vh;overflow:auto;padding:22px 24px;
border-radius:14px;background:var(--paper);border:1px solid var(--rule);
box-shadow:0 20px 60px rgba(0,0,0,.3)}
.bugcard h2{margin:0 0 6px;font-size:17px}
.bugcard>p{margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.bugcard textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;
padding:10px 12px;border:1px solid var(--rule);border-radius:9px;
background:var(--panel);color:var(--ink);resize:vertical}
.bugwhat{margin:12px 0 0;padding:11px 13px;border-radius:9px;
background:var(--accent-bg);font-size:11.5px;line-height:1.55;color:var(--ink-2)}
.bugrow{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.bugshotb,.bugcancel{font:inherit;font-size:13px;padding:7px 14px;
border-radius:8px;border:1px solid var(--rule);background:var(--panel);
color:var(--ink-2);cursor:pointer}
.bugshotb:hover,.bugcancel:hover{border-color:var(--accent);color:var(--accent)}
.bugshotb:disabled{opacity:.55;cursor:default}
.bugstatus{margin:12px 0 0;font-size:12px;color:var(--ink-3);min-height:1em}
.bugshot{max-width:100%;border:1px solid var(--rule);border-radius:10px;
display:block}
.bugpre{padding:14px 16px;border:1px solid var(--rule);border-radius:10px;
background:var(--code-bg);font-size:12px;line-height:1.5;overflow:auto;
max-height:420px;white-space:pre-wrap;word-break:break-word}
.bugmeta>div{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--rule)}
.bugmeta .mk{flex:0 0 150px;color:var(--ink-3);font-size:12px}
.bugmeta .mv{flex:1;min-width:0;font-size:12.5px;word-break:break-word}
.bar-sep{color:var(--rule);font-weight:300;user-select:none}
.recentgrp{margin:26px 0 0}
.rgh{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:14px}
.rgh a{color:var(--ink);text-decoration:none}
.rgh a:hover{color:var(--accent)}
.recentgrp>.meta{display:block;margin:0 0 8px;font-size:12px;color:var(--ink-3)}
.sharedtag{margin-left:8px;padding:1px 8px;border-radius:999px;font-size:10px;
font-weight:650;letter-spacing:.04em;text-transform:uppercase;
border:1px dashed var(--rule);color:var(--ink-3)}
.syncpill{display:inline-flex;align-items:center;font-size:12px;padding:4px 11px;
border-radius:999px;border:1px solid var(--accent);color:var(--accent);
background:var(--accent-bg);text-decoration:none;white-space:nowrap}
.syncpill[quiet]{border-color:var(--rule);color:var(--ink-3);background:none}
.syncpill:hover{border-color:var(--accent);color:var(--accent)}
.themeb{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--rule);
border-radius:8px;background:var(--panel);color:var(--ink-2);cursor:pointer;
font-size:14px;line-height:1;display:inline-flex;align-items:center;
justify-content:center}
.themeb:hover{border-color:var(--accent);color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .livebadge,
:root:not([data-theme="light"]) .livepill{background:#16301F;color:#7FB79A}}
:root[data-theme="dark"] .livebadge,
:root[data-theme="dark"] .livepill{background:#16301F;color:#7FB79A}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}
/* session state, waking, read-only follow */
.sessbar{display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:8px 13px;
border:1px solid var(--rule);border-radius:9px;background:var(--panel);
font-size:12.5px;color:var(--ink-2)}
.sessbar .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);
flex:0 0 auto}
.sessbar[data-state=live] .dot{background:#3f9e5a;
box-shadow:0 0 0 3px rgba(63,158,90,.16)}
.sessbar[data-state=waking] .dot{background:#c08a2e;animation:pulse 1s infinite}
.sessbar[data-state=dormant] .dot{background:var(--ink-3)}
@keyframes pulse{50%{opacity:.3}}
.sessbar .sep,.sessbar #sessttl{color:var(--ink-3)}
.sessbar .viewers{font-size:11.5px;padding:2px 9px;border-radius:999px;
background:var(--accent-bg);color:var(--accent)}
.wakeb{padding:3px 11px;font-size:12px;border:1px solid var(--rule);
border-radius:7px;background:none;color:var(--ink-2);cursor:pointer}
.wakeb:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.waking{display:flex;align-items:center;justify-content:center;gap:13px;
padding:34px 0;color:var(--ink-2);font-size:14px}
.waking .spin{width:34px;height:34px;animation:spin 1.15s linear infinite;
opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
.bar.watching{border-color:var(--accent);color:var(--accent);
background:var(--accent-bg)}
.readonly{margin-top:18px;padding:13px 15px;border:1px dashed var(--rule);
border-radius:9px;color:var(--ink-3);font-size:13px;display:flex;
align-items:center;gap:12px;flex-wrap:wrap}
.handb{padding:4px 12px;font-size:12px;border:1px solid var(--rule);
border-radius:7px;background:var(--panel);color:var(--ink-2);cursor:pointer}
.handb:hover{border-color:var(--accent);color:var(--accent)}
@media (prefers-reduced-motion:reduce){
.waking .spin{animation:none}.sessbar[data-state=waking] .dot{animation:none}}
/* chat: budget, documents, share */
.chathead{display:flex;align-items:center;gap:16px;justify-content:space-between}
.chathead h1{margin:0;font-size:1.5rem}
.ctxbar{margin:12px 0 0;padding:10px 14px;border:1px solid var(--rule);
border-radius:10px;background:var(--panel)}
.btop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
flex-wrap:wrap}
.blabel{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.bnums{font-size:12.5px;color:var(--ink-3)}
.btrack{margin:8px 0 5px;height:6px;border-radius:999px;background:var(--rule);
overflow:hidden}
.bfill{height:100%;border-radius:999px;background:var(--accent);
transition:width .35s ease}
.bnote{font-size:11.5px;color:var(--ink-3)}
.btrack{display:flex}
.seg{height:100%;flex:0 0 auto;transition:width .35s ease}
.seg:first-child{border-radius:999px 0 0 999px}
.bnote{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ctxbar.warn{border-color:#c08a2e}
.ctxbar.warn .bfill{background:#c08a2e}
.ctxbar.warn #ctxnote{color:#8a6420}
.ctxbar.critical{border-color:var(--rose)}
.ctxbar.critical .bfill{background:var(--rose)}
.ctxbar.critical #ctxnote{color:var(--rose);font-weight:600}
.docs{margin:12px 0 0;padding:11px 14px;border:1px solid var(--rule);
border-radius:10px;background:var(--panel)}
.docs h2{margin:0 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-2)}
.docs .n{display:inline-block;min-width:18px;padding:0 6px;margin-left:6px;
border-radius:999px;background:var(--accent-bg);color:var(--accent);
font-size:11px;text-transform:none;letter-spacing:0}
.docs ul{list-style:none;margin:0;padding:0}
.docs li{display:flex;align-items:center;gap:10px;padding:6px 0;
border-top:1px solid var(--rule)}
.docs li:first-child{border-top:0}
.docs .fn{flex:1 1 auto;font-size:13.5px;word-break:break-all}
.artifact{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
white-space:nowrap;vertical-align:1px;
background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent)}
.docs .fm{flex:0 0 auto;font-size:11.5px;color:var(--ink-3)}
.docs li a{flex:0 0 auto;font-size:12px;padding:3px 9px;border:1px solid var(--rule);
border-radius:6px;text-decoration:none;color:var(--ink-2)}
.docs li a:hover{border-color:var(--accent);color:var(--accent)}
.docs .hint{margin:9px 0 0;font-size:11.5px;color:var(--ink-3)}
.shareb{padding:6px 15px;font-size:13px;border:1px solid var(--rule);
border-radius:8px;background:var(--panel);color:var(--ink-2);cursor:pointer}
.shareb:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.shareb:disabled{opacity:.45;cursor:not-allowed}
.headacts{position:relative}
.sharemenu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:290px;
background:var(--panel);border:1px solid var(--rule);border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.16);padding:6px}
.sharemenu .sh{padding:7px 10px 5px;font-size:11px;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-3)}
.sharemenu button{display:flex;flex-direction:column;align-items:flex-start;
width:100%;gap:1px;padding:8px 10px;border:0;border-radius:7px;background:none;
text-align:left;font-size:13.5px;color:var(--ink);cursor:pointer}
.sharemenu button:hover:not(:disabled){background:var(--accent-bg)}
.sharemenu button span{font-size:11.5px;color:var(--ink-3)}
.sharemenu .note{padding:7px 10px 8px;border-top:1px solid var(--rule);
margin-top:5px;font-size:11px;line-height:1.45;color:var(--ink-3)}
.msg.n .body{border-left:3px solid var(--accent);padding-left:11px;
font-size:13px;color:var(--ink-2)}
.item.expandable{cursor:pointer}
.item.expandable:hover{border-color:var(--rose)}
.toggle{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
color:var(--ink-2);border:1px solid var(--rule);border-radius:999px;
padding:4px 12px 4px 5px;font-size:12.5px}
.toggle:hover{border-color:var(--rose);color:var(--ink)}
.toggle .knob{width:26px;height:15px;border-radius:999px;background:var(--rule);
position:relative;flex:0 0 auto;transition:background .15s}
.toggle .knob::after{content:'';position:absolute;top:2px;left:2px;width:11px;
height:11px;border-radius:50%;background:var(--panel);transition:left .15s}
.toggle.on{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}
.toggle.on .knob{background:var(--accent)}
.toggle.on .knob::after{left:13px}
.sortbar{display:flex;gap:16px;align-items:center;color:var(--ink-2);
font-size:12.5px;margin:2px 0 12px}
.sortlink{text-decoration:none;color:var(--ink-2)}
.sortlink:hover{color:var(--accent)}
.sortlink.on{color:var(--accent);font-weight:650}
.search{display:flex;align-items:center;gap:10px;margin:18px 0 4px;
position:sticky;top:54px;background:var(--paper);padding:8px 0;z-index:4}
.search input{flex:1;padding:10px 13px;font-size:15px}
.search button{border:none;background:transparent;color:var(--ink-2);
font-size:20px;line-height:1;padding:0 6px}
.count{color:var(--ink-2);font-size:12.5px;flex:0 0 auto}
.tally{color:var(--ink-2);font-weight:400;letter-spacing:0;text-transform:none;
font-size:12px;margin-left:6px}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.mono{font-family:var(--mono);font-size:12px}
.bar{background:var(--code);border:1px solid var(--rule);border-radius:8px;
padding:9px 13px;color:var(--ink-2);font-size:12.5px;margin:14px 0}
.msg{margin:14px 0;display:flex;gap:11px}
.msg .who{flex:0 0 66px;color:var(--ink-2);font-size:12px;padding-top:2px}
.msg .body{flex:1;white-space:pre-wrap;background:var(--panel);
border:1px solid var(--rule);border-radius:9px;padding:11px 14px}
.msg.u .body{background:var(--accent-bg);border-color:transparent}
.empty{color:var(--ink-2);padding:20px 0}
form.ask{display:flex;gap:9px;margin-top:20px}
form.ask input{flex:1}
.cursor::after{content:'▍';color:var(--accent)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==========================================================================
   Mobile. Added 2026-08-14 after the portal was tried on a phone: the desktop
   row - name, meta, pill, three or four icon buttons, all on one line - packs
   into ~390px as unreadable 11px text and 24px tap targets.
   
   The rule below 760px: one thing per line, nothing under 44px to tap, and
   body text at 16px so iOS does not zoom the page when a field is focused.
   ========================================================================== */
@media (max-width: 760px) {

  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; line-height: 1.6; }
  .wrap { padding: 0 14px 48px; }

  /* Header: let it wrap rather than shrink to nothing. */
  .hdr { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .hdr .logo { height: 26px; }
  .appname { font-size: 15px; }
  .grow { flex-basis: 100%; height: 0; }
  .bugb, .syncpill, .livepill { font-size: 13px; padding: 6px 12px; }
  .themeb { width: 36px; height: 36px; }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.05rem; }
  .sub { font-size: 14px; }

  /* Cards become blocks: title, then meta, then a full-width row of actions. */
  .item {
    display: block;
    padding: 14px 15px;
    border-radius: 12px;
    margin-bottom: 10px;
  }
  .item .main { display: block; margin-bottom: 10px; }
  .nm { font-size: 16px; font-weight: 600; line-height: 1.35;
        white-space: normal; word-break: break-word; }
  .meta { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; }

  /* Actions: real buttons, thumb-sized, wrapping onto as many lines as needed. */
  .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .act, .twist, .pillbtn, button.pillbtn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
  }
  .act { flex: 1 1 auto; }
  .act.pin, .act.del { flex: 0 0 auto; min-width: 52px; }
  .act svg { width: 17px; height: 17px; }
  .twist { width: 100%; justify-content: space-between; margin-bottom: 2px; }

  /* The status pill is a control, so it gets the same treatment. */
  .pillbtn { font-size: 12px; letter-spacing: .05em; padding: 10px 16px; }
  .item > .pillbtn, .item > .livebadge { margin-top: 10px; margin-right: 8px; }
  .livebadge { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
  .localbadge { display: inline-block; margin: 6px 0 0; }

  /* Sub-matters: indent less, they are already visually nested by the rule. */
  .kids { padding-left: 0; }
  .item.kid { margin-left: 10px; border-left: 3px solid var(--accent-bg); }

  /* Filter and sort controls stack and become tappable. */
  .search input { font-size: 16px; padding: 13px 14px; }
  .sortbar { flex-wrap: wrap; gap: 8px; font-size: 14px; }
  .sortlink { min-height: 40px; display: inline-flex; align-items: center;
              padding: 8px 12px; border: 1px solid var(--rule);
              border-radius: 9px; }
  .toggle { min-height: 40px; }
  .filterdd > summary { min-height: 40px; }
  .stmenu { width: min(280px, calc(100vw - 40px)); }
  .bar { font-size: 13px; padding: 11px 13px; }
  .bar form button { min-height: 38px; padding: 8px 14px; font-size: 13px; }

  /* Chat: the composer must clear the on-screen keyboard. */
  .chathead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .headacts { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .chatbox form.ask { padding: 10px 12px; gap: 8px; }
  .chatbox form.ask input { font-size: 16px; padding: 12px 13px; }
  .primary { min-height: 44px; padding: 11px 18px; font-size: 15px; }
  .msg { gap: 8px; }
  .msg .who { flex-basis: 46px; font-size: 11.5px; }
  .msg .body { padding: 12px 13px; font-size: 15px; }
  #log { padding: 14px 12px 6px; }
  .sessbar, .ctxbar, .docs { padding: 11px 12px; font-size: 13px; }
  .sessbar { flex-wrap: wrap; gap: 7px; }

  /* Document viewer stacks under the conversation. */
  .docpane { min-height: 60vh; }
  .dpitem { padding: 10px; }
  .dpn { font-size: 14px; }
  .dpw { font-size: 12px; }
  .dpic { width: 34px; height: 34px; }

  /* Bug dialog fills the screen rather than floating in a corner. */
  .bugcard { padding: 18px; border-radius: 12px; max-height: 92vh; }
  .bugcard textarea { font-size: 16px; }
  .bugrow { gap: 8px; }
  .bugrow button { min-height: 44px; flex: 1 1 auto; }

  /* Sync tree: folder rows are a decision surface, give them room. */
  .tnode { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .tname { flex: 1 1 100%; font-size: 15px; order: 2; }
  .tmeta { order: 3; font-size: 12.5px; }
  .ttwist { width: 40px; height: 40px; font-size: 13px; }
  .tcb { width: 22px; height: 22px; }
}

/* Very narrow: drop the action labels and keep the icons, so a row of four
   buttons still fits without shrinking the tap target. */
@media (max-width: 400px) {
  .act.chat span, .act.open span, .act.sp span { display: none; }
  .act.chat, .act.open, .act.sp { flex: 1 1 auto; min-width: 56px; }
  .hdr .divider { display: none; }
}