:root{
  --bg:#EDF0F3; --panel:#FFFFFF; --sunk:#F4F6F8; --ink:#0F1C28; --muted:#5A6B7C; --line:#D6DDE5;
  --rail:#13283F; --rail-ink:#C9D6E3; --accent:#C8731F; --accent-ink:#FFFFFF; --accent-soft:#F8E8D6;
  --good:#2B7A4B; --good-soft:#DDEFE3; --warn:#946500; --warn-soft:#F6EBCB; --crit:#B23A26; --crit-soft:#F5DDD7;
  --paper:#FFFFFF; --paper-ink:#1B1B1B; --bubble:#E7EDF3; --bubble-me:#13283F; --bubble-me-ink:#F2F6FA;
  --tg-bg:#DCE7EE; --tg-in:#FFFFFF; --tg-ink:#111111; --tg-btn:#3E87C8;
  --f-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A121A; --panel:#111C27; --sunk:#0D1721; --ink:#E4EBF2; --muted:#8C9DAE; --line:#223241;
  --rail:#07101A; --rail-ink:#9FB2C5; --accent:#E8964A; --accent-ink:#1A0F05; --accent-soft:#3A2715;
  --good:#5FBF86; --good-soft:#16301F; --warn:#E0B44A; --warn-soft:#2F2610; --crit:#EE7A62; --crit-soft:#3A1A14;
  --paper:#F4F1EC; --paper-ink:#1B1B1B; --bubble:#1A2836; --bubble-me:#2A4561; --bubble-me-ink:#EEF3F8;
  --tg-bg:#0E1621; --tg-in:#182533; --tg-ink:#E9EEF3; --tg-btn:#5AA1DE; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A121A; --panel:#111C27; --sunk:#0D1721; --ink:#E4EBF2; --muted:#8C9DAE; --line:#223241;
  --rail:#07101A; --rail-ink:#9FB2C5; --accent:#E8964A; --accent-ink:#1A0F05; --accent-soft:#3A2715;
  --good:#5FBF86; --good-soft:#16301F; --warn:#E0B44A; --warn-soft:#2F2610; --crit:#EE7A62; --crit-soft:#3A1A14;
  --paper:#F4F1EC; --paper-ink:#1B1B1B; --bubble:#1A2836; --bubble-me:#2A4561; --bubble-me-ink:#EEF3F8;
  --tg-bg:#0E1621; --tg-in:#182533; --tg-ink:#E9EEF3; --tg-btn:#5AA1DE; color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;text-align:inherit}
button:focus-visible,input:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.app{display:grid;grid-template-columns:68px minmax(0,1fr) 384px;height:100%}
.app.no-aside{grid-template-columns:68px minmax(0,1fr) 0}
.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;align-items:center;gap:6px;padding-block:14px}
.logo{font-family:var(--f-display);font-weight:800;color:#fff;font-size:15px;letter-spacing:-.02em;margin-bottom:12px}
.logo i{color:var(--accent);font-style:normal}
.nav{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;align-content:center;gap:3px;font-size:10px;position:relative;text-align:center}
.nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.nav.on{background:rgba(255,255,255,.1);color:#fff}
.nav:hover{color:#fff}
.badge{position:absolute;top:3px;right:3px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:600;border-radius:9px;min-width:17px;height:17px;display:grid;place-items:center;padding-inline:4px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.search{flex:1;display:flex;align-items:center;gap:10px;background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:8px 12px;color:var(--muted);max-width:620px;min-width:0}
.search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search kbd{margin-left:auto;font-family:var(--f-mono);font-size:11px;border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.pill{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.iconbtn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);flex:none}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.me{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;line-height:1.25}
.me .av{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600}
.scroll{flex:1;overflow:auto;padding:22px 24px 40px;min-height:0}
.scroll.flush{padding:0;display:flex;flex-direction:column}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:26px;font-weight:700} h2{font-size:16px;font-weight:700} h3{font-size:15px}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card h2{margin-bottom:10px;display:flex;align-items:center;gap:8px}
.count{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:400}
.row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line);width:100%}
.row:first-of-type{border-top:0}
.grow{flex:1;min-width:0}
.code{font-family:var(--f-mono);font-size:12px;font-weight:500;background:var(--sunk);border:1px solid var(--line);border-radius:5px;padding:1px 6px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none}
.dot.crit{background:var(--crit)} .dot.warn{background:var(--warn)} .dot.good{background:var(--good)} .dot.info{background:var(--accent)}
.btn{border:1px solid var(--line);border-radius:8px;padding:6px 12px;background:var(--panel);font-weight:500;white-space:nowrap}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:3px 9px;font-size:12px}
.btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.state{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px;white-space:nowrap;display:inline-block}
.state.ok{background:var(--good-soft);color:var(--good)} .state.no{background:var(--crit-soft);color:var(--crit)} .state.wait{background:var(--warn-soft);color:var(--warn)}
.triage{display:flex;gap:6px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel);overflow-x:auto;flex:none}
.chip{border:1px solid var(--line);border-radius:16px;padding:5px 11px;font-size:13px;white-space:nowrap;background:var(--sunk)}
.chip b{font-family:var(--f-mono);font-weight:500;margin-left:4px}
.chip.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.mailwrap{flex:1;display:grid;grid-template-columns:340px minmax(0,1fr);min-height:0}
.mlist{border-right:1px solid var(--line);overflow:auto;background:var(--panel)}
.mitem{display:block;width:100%;padding:11px 16px;border-bottom:1px solid var(--line)}
.mitem.on{background:var(--accent-soft)}
.mitem .l1{display:flex;gap:8px;align-items:baseline}
.mitem .from{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mitem .when{font-size:12px;color:var(--muted);white-space:nowrap}
.mitem .subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mitem .ai{font-size:12px;color:var(--muted);margin-top:3px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mitem.unread .subj{font-weight:600}
.reader{overflow:auto;padding:20px 24px 30px;min-width:0}
.sumcard{border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--r);padding:12px 14px;margin:14px 0}
.sumcard ul{margin:6px 0 0;padding-left:18px}
.sumcard li{margin:2px 0}
.mailmsg{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-top:10px}
.mailmsg .mh{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mailmsg .mb{padding:12px 14px;white-space:pre-wrap}
.mailmsg.collapsed .mh{border-bottom:0}
.attach{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line)}
.att{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--sunk);min-width:0}
.ext{font-family:var(--f-mono);font-size:9px;font-weight:600;border-radius:4px;padding:3px 5px;color:#fff;display:inline-block;min-width:30px;text-align:center}
.ext.pdf{background:#B23A26}.ext.xlsx{background:#2B7A4B}.ext.docx{background:#2F5E9E}.ext.dwg{background:#6A4BA0}.ext.jpg{background:#8A6D3B}
.composer{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-top:14px;overflow:hidden}
.composer .ch{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap;font-size:13px}
.composer .cb{padding:12px 14px;min-height:120px;white-space:pre-wrap}
.composer .cf{display:flex;gap:6px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
.backlink{display:none}
.facts{display:flex;flex-wrap:wrap;gap:20px}
.fact .v{font-family:var(--f-display);font-size:18px;font-weight:700}
.fact .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stages{display:flex;gap:3px;margin:6px 0 16px;overflow-x:auto}
.stage{flex:1 0 auto;font-size:11px;padding:6px 8px;background:var(--sunk);color:var(--muted);border-radius:4px;white-space:nowrap}
.stage.done{background:var(--good-soft);color:var(--good)} .stage.now{background:var(--accent);color:var(--accent-ink);font-weight:600}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tab{padding:9px 14px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.files{display:grid;grid-template-columns:220px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r);background:var(--panel);min-height:540px;overflow:hidden}
.tree{border-right:1px solid var(--line);padding:10px;overflow:auto;background:var(--sunk)}
.folder{font-family:var(--f-mono);font-size:12px;padding:6px 8px;border-radius:6px;display:block;width:100%}
.folder.on{background:var(--panel);font-weight:500;box-shadow:inset 0 0 0 1px var(--line)}
.drivepath{font-size:11px;color:var(--muted);padding:6px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.fpane{display:flex;flex-direction:column;min-width:0}
.flist{border-bottom:1px solid var(--line);max-height:190px;overflow:auto}
.file{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 14px;width:100%;border-top:1px solid var(--line)}
.file:first-child{border-top:0}
.file.on{background:var(--accent-soft)}
.fname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmeta{font-size:12px;color:var(--muted);white-space:nowrap}
.viewer{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--sunk)}
.vbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.aside{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-width:0;min-height:0}
.ahead{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:9px;background:var(--rail);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:13px;flex:none}
.ctx{margin:10px 14px 0;font-size:12px;background:var(--accent-soft);border-radius:8px;padding:7px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.src{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:4px}
.msg{max-width:90%;padding:8px 11px;border-radius:12px;background:var(--bubble);font-size:13px;white-space:pre-wrap}
.msg.mine{align-self:flex-end;background:var(--bubble-me);color:var(--bubble-me-ink);border-bottom-right-radius:4px}
.msg.bot{border-bottom-left-radius:4px}
.cite{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.cite span{font-size:11px;border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:1px 6px;color:var(--ink)}
.acard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel);font-size:13px}
.acard table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}
.acard td{padding:3px 2px;border-top:1px solid var(--line)}
.acard .n{text-align:right;font-family:var(--f-mono);white-space:nowrap}
.quick{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 0}
.quick button{font-size:12px;border:1px solid var(--line);border-radius:14px;padding:4px 10px;white-space:nowrap;background:var(--sunk)}
.compose{display:flex;gap:8px;padding:10px 14px 14px}
.compose input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--sunk);color:var(--ink);font:inherit}
.scrim{position:fixed;inset:0;background:rgba(5,12,20,.5);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px;z-index:30;overflow:auto}
.palette{width:min(640px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden}
.palette input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:16px;background:var(--panel);color:var(--ink);font-family:var(--f-body)}
.palette input:focus{outline:none}
.pres{max-height:50vh;overflow:auto;padding:6px}
.pgroup{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px 4px}
.pitem{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:8px;width:100%}
.pitem:hover{background:var(--sunk)}
.pitem .k{margin-left:auto;font-size:11px;color:var(--muted)}
.askline{border-top:1px solid var(--line);padding:10px 14px;font-size:13px;color:var(--muted)}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--good);color:#FFFFFF;padding:9px 16px;border-radius:10px;z-index:50;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.fab,.tabbar{display:none}
@media (max-width:1180px){
  .app,.app.no-aside{grid-template-columns:68px minmax(0,1fr)}
  .aside{position:fixed;right:0;top:0;bottom:0;width:min(400px,100%);z-index:15;box-shadow:-10px 0 30px rgba(0,0,0,.25)}
  .app.no-aside .aside{display:none}
}
@media (max-width:860px){
  .mailwrap{grid-template-columns:minmax(0,1fr)}
  .mailwrap.reading .mlist{display:none}
  .mailwrap:not(.reading) .reader{display:none}
  .backlink{display:inline-block;margin-bottom:8px}
  .me span{display:none}
}
@media (max-width:720px){
  .app,.app.no-aside{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .rail{display:none}
  .tabbar{display:flex;justify-content:space-around;background:var(--rail);color:var(--rail-ink);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar .nav{width:58px;height:48px}
  .top{padding:10px 16px;gap:8px} .me{display:none} .top .pill{font-size:10px;padding:3px 7px}
  .scroll{padding:16px 16px 90px} .reader{padding:16px}
  .triage{padding:10px 16px}
  .cols-3,.cols-2{grid-template-columns:minmax(0,1fr)}
  .files{grid-template-columns:minmax(0,1fr)}
  .tree{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:4px;overflow-x:auto;padding:8px}
  .tree .drivepath{display:none} .folder{width:auto;white-space:nowrap}
  .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:16px;background:var(--accent);color:var(--accent-ink);z-index:12;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .fab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
  .aside{width:100%}
}

/* ---------- real-app additions ---------- */
html,body{height:100%;margin:0}
.app{height:100vh;height:100dvh}
a{color:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn:disabled,.chip:disabled{opacity:.55;cursor:default}
.btn:hover:not(:disabled){border-color:var(--muted)}
.btn.primary:hover:not(:disabled){filter:brightness(1.06)}
.btn.link{border:0;background:none;padding:3px 6px;color:var(--accent);font-weight:600}
.caret::after{content:"\258D";color:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dot.muted{background:var(--line)}
.state{font-size:11px}
.top .pill.live{background:var(--good-soft);color:var(--good)}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block;margin-right:6px}
.livedot.off{background:var(--warn)}
.search{text-align:left;font:inherit}
.scroll.flush{overflow:hidden}
.pageh{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:14px}
.input{border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:var(--sunk);color:var(--ink);font:inherit;min-width:0}
.input.grow{flex:1}
textarea.input{resize:vertical;width:100%;box-sizing:border-box}
.field{display:grid;gap:4px;margin-bottom:10px}
.field label{font-size:12px;color:var(--muted);font-weight:600}
.form{display:grid;gap:4px;max-width:520px}

/* banner when the assistant drives the app */
.banner{display:flex;align-items:center;gap:10px;padding:7px 20px;background:var(--accent-soft);border-bottom:1px solid var(--accent);font-size:13px}
.banner .bi{width:18px;height:18px;border-radius:6px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.banner span.t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.banner{animation:slide .3s ease-out}@keyframes slide{from{transform:translateY(-100%);opacity:0}}
  .msg,.acard{animation:in .25s ease-out}@keyframes in{from{transform:translateY(5px);opacity:.5}to{transform:none;opacity:1}}
  .skel{animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{50%{opacity:.5}}
  .progress i{animation:indet 1.6s ease-in-out infinite}@keyframes indet{0%{margin-left:-40%}100%{margin-left:100%}}
  .flashy{animation:flash 1.6s ease-out}@keyframes flash{from{box-shadow:0 0 0 3px var(--accent)}to{box-shadow:0 0 0 0 transparent}}}

/* loading, empty, error */
.skel{background:var(--sunk);border-radius:6px;height:14px;margin:10px 0}
.skel.l{height:44px}
.empty{text-align:center;color:var(--muted);padding:34px 16px}
.empty b{display:block;color:var(--ink);font-family:var(--f-display);font-size:15px;margin-bottom:4px}
.errbox{border:1px solid var(--crit);background:var(--crit-soft);color:var(--crit);border-radius:var(--r);padding:10px 12px;margin:10px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.errbox span{flex:1;min-width:160px}
.progress{margin:10px 0;border:1px solid var(--line);background:var(--sunk);border-radius:var(--r);padding:10px 12px;font-size:13px}
.progress .pb{height:4px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;width:40%;background:var(--accent);border-radius:3px}
.progress .mono{color:var(--muted);font-size:12px;margin-left:6px}

/* sign-in screen */
.signin{height:100vh;height:100dvh;display:grid;place-items:center;padding:16px;background:var(--bg)}
.signin .card{max-width:420px;width:100%;text-align:center;padding:30px 24px}
.signin .mark{width:64px;height:64px;border-radius:16px;background:var(--rail);color:#fff;margin:0 auto 14px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:32px;position:relative}
.signin .mark i{position:absolute;right:11px;bottom:15px;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* mail extras */
.mitem{text-align:left}
.mitem .chev{color:var(--accent);font-weight:700}
.cat{font-size:11px;border-radius:10px;padding:1px 7px;background:var(--sunk);border:1px solid var(--line);color:var(--muted)}
.cat.needs{background:var(--crit-soft);color:var(--crit);border-color:transparent}
.cat.waiting{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.cat.fyi{background:var(--good-soft);color:var(--good);border-color:transparent}
.triage{align-items:center}
.triage .sp{flex:1}
.mlist .more{padding:12px 16px}
.readerhead{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.readerhead h2{font-size:20px;flex:1 1 280px;min-width:0}
.toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.mailmsg .mh{cursor:default}
button.mh{width:100%;text-align:left}
.mailmsg.collapsed .mb{display:none}
.mailmsg .mb{overflow-wrap:anywhere}
.mailmsg .tr{border-top:1px dashed var(--line);background:var(--sunk);color:var(--ink)}
.composer textarea{display:block;width:100%;box-sizing:border-box;border:0;background:var(--panel);color:var(--ink);font:inherit;padding:12px 14px;min-height:170px;resize:vertical}
.composer textarea:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.composer.assisted{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.badge-ai{font-size:11px;font-weight:600;background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:2px 8px}
.testnote{font-size:12px;color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:6px 10px;margin:8px 0 0}
.testnote.ok{color:var(--good);background:var(--good-soft)}
.filebox{border:1px solid var(--line);border-radius:var(--r);background:var(--sunk);padding:10px;margin-top:8px}
.filebox .opt{display:flex;gap:8px;align-items:center;width:100%;padding:6px 8px;border-radius:7px}
.filebox .opt:hover{background:var(--panel)}

/* projects */
.plist .row{padding:11px 0;align-items:center}
.plist .row:hover{background:var(--sunk)}
.stages{margin-top:12px}
.stage.done{background:var(--good-soft);color:var(--good)}
.facts .fact{min-width:90px}
.taskrow{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.taskrow:first-of-type{border-top:0}

/* files */
.files{min-height:480px}
.tree .folder{display:flex;gap:6px;align-items:center;text-align:left}
.tree .folder svg,.file svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.flist{max-height:230px}
.file{text-align:left}
.file .ext{align-self:center}
.canvas{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch}
.vframe{flex:1;min-height:560px;width:100%;border:0;background:#fff}
.vimg{max-width:100%;max-height:100%;object-fit:contain;margin:auto;padding:12px;box-sizing:border-box}
.vcard{margin:auto;text-align:center;padding:24px;max-width:320px}
.viewer{min-height:340px}
.fpane{min-height:0}
.ext.png,.ext.jpg,.ext.jpeg,.ext.img{background:#8A6D3B}
.ext.doc,.ext.gdoc{background:#2F5E9E}.ext.sheet{background:#2B7A4B}.ext.dir{background:var(--muted)}.ext.oth{background:#6B7785}

/* assistant */
.ahead .x{margin-left:auto}
.chat .msg.mine{white-space:pre-wrap}
.msg .orig{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.typing{align-self:flex-start;color:var(--muted);font-size:12px;display:flex;gap:6px;align-items:center}
.acard h4{margin:0 0 4px;font-family:var(--f-display);font-size:14px}
.acard.success{border-color:var(--good)}.acard.warning{border-color:var(--warn)}
.acard p{margin:0;white-space:pre-wrap}
.quick{padding-bottom:2px}

/* palette */
.pitem{text-align:left}
.pitem.sel{background:var(--accent-soft)}
.pitem .sub{color:var(--muted);font-size:12px}

/* toasts */
#toastRoot{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;display:grid;gap:8px;justify-items:center;width:calc(100% - 32px);pointer-events:none}
.toast{position:static;transform:none;pointer-events:auto}
.toast.err{background:var(--crit)}
.toast.info{background:var(--rail)}

.theme svg{width:18px;height:18px}
@media (max-width:860px){
  .readerhead h2{font-size:18px}
  .banner{padding:7px 16px}
}
@media (max-width:720px){
  .top .search span{font-size:13px}
  .top .search kbd{display:none}
  .files .flist{max-height:200px}
  .tabbar{position:relative}
  .scroll.flush{padding:0}
  .aside{padding-bottom:env(safe-area-inset-bottom,0px)}
}
.fab[hidden]{display:none!important}
.app.no-aside .aside{display:none}
*,*::before,*::after{box-sizing:border-box}
a{text-decoration:none;color:inherit}
a.btn{display:inline-block}
a.nav,a.logo{text-decoration:none}
a.row,a.mitem,a.file,a.folder{color:inherit}
a:hover .grow b,a.row:hover b{text-decoration:none}
@media (max-width:720px){.reader{padding-bottom:96px}.vframe{min-height:420px}}
@media (max-width:720px){.facts{gap:10px 20px}.fact .v{font-size:15px}.phead h1{font-size:22px}}
.pitem{flex-wrap:wrap;gap:2px 10px}
.pitem .sub{margin-left:auto}