/* PiApp: same token system as G-Max (near-black surfaces, one accent), tuned for reading chat on a phone. */
:root {
  color-scheme: dark;
  --bg:#0a0a0b; --s1:#131316; --s2:#1b1b20; --s3:#26262d;
  --line:#ffffff14; --line-2:#ffffff26;
  --fg:#f5f5f6; --fg-2:#b6b6bf; --mut:#83838d;
  --accent:#8ea2ff; --on-accent:#0b1033; --accent-soft:#8ea2ff22;
  --pos:#3ddc97; --neg:#ff6b6b; --warn:#ffb224;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --t-xs:12px; --t-sm:13px; --t-md:15px; --t-lg:17px; --t-xl:22px;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
}
* { box-sizing:border-box; }
html, body { height:100%; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:var(--t-md)/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none; }
h1, h2, h3, p { margin:0; }
h1 { font-size:var(--t-lg); font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
button { font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled { opacity:.45; cursor:default; }
input, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[hidden] { display:none !important; }
.grow { flex:1; min-width:0; }
.mut { color:var(--mut); }

.i { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.i.sm { width:16px; height:16px; }
.icon-btn { width:44px; height:44px; border-radius:var(--r-pill); display:inline-flex; align-items:center; justify-content:center; color:var(--fg-2); flex:none; }
.icon-btn:active { background:var(--s3); }
.btn { min-height:46px; padding:0 18px; border-radius:var(--r-md); background:var(--s2); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:550; }
.btn:active { background:var(--s3); }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.btn.danger { color:var(--neg); }
.badge.warn { background:#ffb22422; color:var(--warn); }
.badge { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent); margin-left:6px; vertical-align:2px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--mut); flex:none; margin:0 6px; }
.dot.on { background:var(--pos); } .dot.busy { background:var(--accent); animation:pulse 1.2s infinite; } .dot.off { background:var(--neg); }
@keyframes pulse { 50% { opacity:.35; } }
.spin { animation:spin .9s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }

/* ---------- views ---------- */
.view { position:fixed; inset:0; display:flex; flex-direction:column; padding-left:var(--sal); padding-right:var(--sar); }
.view.center { align-items:center; justify-content:center; }
.bar { display:flex; align-items:center; gap:4px; padding:calc(var(--sat) + 6px) 8px 6px 12px; border-bottom:1px solid var(--line); background:var(--bg); min-height:56px; }
.bar .icon-btn:first-child { margin-left:-6px; }
.scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:12px 12px calc(var(--sab) + 16px); }

/* login */
.login { width:min(320px, 86vw); display:flex; flex-direction:column; gap:14px; text-align:center; }
.logo { font-size:56px; font-weight:300; color:var(--accent); line-height:1; }
.login input { height:50px; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--s1); padding:0 16px; font-size:16px; }
.login .or { display:flex; align-items:center; gap:10px; color:var(--mut); font-size:var(--t-sm); }
.login .or::before, .login .or::after { content:""; flex:1; border-top:1px solid var(--line-2); }

/* lists */
.list { display:flex; flex-direction:column; gap:8px; }
.card { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px; border-radius:var(--r-lg); background:var(--s1); border:1px solid var(--line); min-height:60px; }
.card:active { background:var(--s2); }
.card .i { color:var(--mut); }
.card .name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .sub { font-size:var(--t-sm); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card.live { border-color:var(--accent-soft); background:linear-gradient(var(--accent-soft), var(--accent-soft)), var(--s1); }
.card .x { margin:-8px -6px -8px 0; }
.section { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--mut); margin:20px 4px 8px; font-weight:600; }
.new-chat { display:flex; gap:8px; margin-bottom:8px; }
.empty { color:var(--mut); text-align:center; padding:32px 12px; }

/* ---------- chat ---------- */
.chat .titles { line-height:1.2; overflow:hidden; }
.chat .t1 { font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat .t2 { font-size:var(--t-xs); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; display:block; text-align:left; }
#msgs { padding-bottom:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:100%; overflow-wrap:anywhere; }
.msg.user { align-self:flex-end; max-width:88%; background:var(--s3); padding:9px 13px; border-radius:var(--r-xl) var(--r-xl) 6px var(--r-xl); white-space:pre-wrap; }
.msg.asst { display:flex; flex-direction:column; gap:8px; }
.msg.note { align-self:center; font-size:var(--t-xs); color:var(--mut); text-align:center; padding:2px 12px; }
.msg.err { color:var(--neg); background:#ff6b6b14; border:1px solid #ff6b6b33; border-radius:var(--r-md); padding:8px 12px; font-size:var(--t-sm); white-space:pre-wrap; }
.typing { display:flex; gap:4px; padding:6px 2px; }
.typing span { width:7px; height:7px; border-radius:50%; background:var(--mut); animation:pulse 1s infinite; }
.typing span:nth-child(2) { animation-delay:.15s; } .typing span:nth-child(3) { animation-delay:.3s; }

/* markdown */
.md > :first-child { margin-top:0; } .md > :last-child { margin-bottom:0; }
.md p, .md ul, .md ol, .md pre, .md blockquote, .md .tbl { margin:0 0 .7em; }
.md ul, .md ol { padding-left:1.3em; }
.md li { margin:.15em 0; }
.md h1, .md h2, .md h3, .md h4 { font-size:1.05em; font-weight:700; margin:1em 0 .4em; white-space:normal; }
.md h1 { font-size:1.2em; } .md h2 { font-size:1.12em; }
.md code { font-family:var(--mono); font-size:.88em; background:var(--s2); border:1px solid var(--line); padding:1px 5px; border-radius:6px; }
.md pre { background:var(--s1); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; overflow-x:auto; font-size:12.5px; line-height:1.5; position:relative; }
.md pre code { background:none; border:0; padding:0; font-size:inherit; }
.md pre .copy { position:absolute; top:4px; right:4px; font-size:11px; color:var(--mut); padding:4px 8px; border-radius:6px; background:var(--s2); }
.md blockquote { border-left:3px solid var(--line-2); padding-left:10px; color:var(--fg-2); }
.md a { color:var(--accent); }
.md hr { border:0; border-top:1px solid var(--line-2); margin:1em 0; }
.md .tbl { overflow-x:auto; }
.md table { border-collapse:collapse; font-size:var(--t-sm); }
.md th, .md td { border:1px solid var(--line-2); padding:5px 8px; text-align:left; vertical-align:top; }
.md th { background:var(--s2); }
.md td code, .md th code { white-space:nowrap; }

/* thinking + tool cards */
.tool { border:1px solid var(--line); border-radius:var(--r-md); background:var(--s1); font-size:var(--t-sm); }
details.think { font-size:var(--t-sm); }
details.think > summary { min-height:28px !important; padding:2px 0 !important; color:var(--mut) !important; font-style:italic; }
details.think > summary::before { content:'›'; font-style:normal; transition:transform .15s; display:inline-block; }
details.think[open] > summary::before { transform:rotate(90deg); }
details.think .body { padding:2px 0 6px 12px !important; border-left:2px solid var(--line-2); }
details.think > summary, .tool > summary { list-style:none; padding:8px 12px; display:flex; align-items:center; gap:8px; color:var(--fg-2); cursor:pointer; min-height:40px; }
summary::-webkit-details-marker { display:none; }
details.think .body { padding:0 12px 10px; color:var(--mut); white-space:pre-wrap; font-size:var(--t-sm); max-height:50vh; overflow:auto; }
.tool .tname { font-weight:650; color:var(--fg); flex:none; }
.tool .targ { font-family:var(--mono); font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.tool .st { flex:none; width:16px; text-align:center; }
.tool.ok .st { color:var(--pos); } .tool.bad .st { color:var(--neg); } .tool.run .st { color:var(--accent); }
.tool .out { margin:0; padding:8px 12px 10px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; max-height:45vh; overflow:auto; color:var(--fg-2); }
.tool .args { margin:0; padding:8px 12px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:30vh; overflow:auto; color:var(--mut); }
.tool.bad .out { color:var(--neg); }
.diff-add { color:var(--pos); } .diff-del { color:var(--neg); }

.fab { position:absolute; right:14px; bottom:calc(var(--composer-h, 80px) + 12px); width:40px; height:40px; border-radius:50%; background:var(--s3); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px #0008; }

/* composer */
.composer { border-top:1px solid var(--line); background:var(--bg); padding:6px 8px calc(var(--sab) + 6px); }
.composer .row { display:flex; align-items:flex-end; gap:4px; }
#input { flex:1; min-width:0; resize:none; overflow-y:hidden; max-height:40vh; min-height:44px; padding:11px 14px; border-radius:22px; border:1px solid var(--line-2); background:var(--s1); font-size:16px; line-height:1.35; outline:none; }
#input:focus { border-color:var(--accent); }
.send { width:44px; height:44px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; flex:none; }
.send .i { stroke-width:2.4; }
.send.stop { background:var(--neg); color:#2a0606; }
.send:disabled { background:var(--s3); color:var(--mut); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips:not(:empty) { margin-bottom:6px; }
.chip { font-size:var(--t-xs); padding:3px 9px; border-radius:var(--r-pill); background:var(--s2); color:var(--fg-2); border:1px solid var(--line); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip.q { border-style:dashed; }
#widgets pre { margin:0 0 6px; font-family:var(--mono); font-size:11.5px; background:var(--s1); border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 8px; white-space:pre-wrap; max-height:25vh; overflow:auto; }
.suggest { max-height:40vh; overflow:auto; background:var(--s1); border:1px solid var(--line-2); border-radius:var(--r-md); margin-bottom:6px; }
.suggest button { display:block; width:100%; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
.suggest button:last-child { border-bottom:0; }
.suggest b { font-family:var(--mono); font-weight:600; font-size:var(--t-sm); }
.suggest span { display:block; font-size:var(--t-xs); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* sheet */
.sheet-wrap { position:fixed; inset:0; background:#000a; z-index:20; display:flex; align-items:flex-end; justify-content:center; animation:fade .15s; }
.sheet { width:100%; max-width:560px; max-height:85vh; overflow:auto; background:var(--s1); border-radius:var(--r-xl) var(--r-xl) 0 0; border:1px solid var(--line-2); border-bottom:0; padding:8px 12px calc(var(--sab) + 12px); animation:up .2s cubic-bezier(.2,.8,.2,1); }
.sheet::before { content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--line-2); margin:0 auto 10px; }
.sheet h3 { font-size:var(--t-lg); margin:4px 4px 6px; }
.sheet p.msg { color:var(--fg-2); margin:0 4px 10px; white-space:pre-wrap; }
.sheet .opt { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; width:100%; text-align:left; padding:13px 12px; border-radius:var(--r-md); min-height:50px; }
.sheet .opt:active { background:var(--s2); }
.sheet .opt small { display:block; color:var(--mut); font-size:var(--t-xs); }
.sheet .opt.on { color:var(--accent); }
.sheet .opt.danger { color:var(--neg); }
.sheet input, .sheet textarea { width:100%; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--bg); padding:12px; font-size:16px; margin-bottom:10px; }
.sheet textarea { min-height:40vh; font-family:var(--mono); font-size:13px; }
.sheet .acts { display:flex; gap:8px; } .sheet .acts .btn { flex:1; }
.sheet .countdown { font-size:var(--t-xs); color:var(--warn); margin:0 4px 8px; }
.sheet pre { font-family:var(--mono); font-size:12px; white-space:pre-wrap; color:var(--fg-2); margin:0 4px 10px; }
.sheet label.check { display:flex; align-items:center; gap:10px; margin:4px 4px 14px; color:var(--fg-2); }
.sheet label.check input { width:20px; height:20px; margin:0; }
@keyframes up { from { transform:translateY(40px); opacity:0; } }
@keyframes fade { from { opacity:0; } }

#toasts { position:fixed; left:0; right:0; top:calc(var(--sat) + 60px); display:flex; flex-direction:column; align-items:center; gap:6px; z-index:30; pointer-events:none; padding:0 12px; }
.toast { background:var(--s3); border:1px solid var(--line-2); padding:9px 14px; border-radius:var(--r-md); font-size:var(--t-sm); max-width:520px; box-shadow:0 6px 20px #000a; animation:up .2s; pointer-events:auto; }
.toast.warning { border-color:#ffb22466; } .toast.error { border-color:#ff6b6b88; color:#ffd0d0; }

@media (min-width:800px) {
  .scroll, .composer { padding-left:max(12px, calc((100% - 820px) / 2)); padding-right:max(12px, calc((100% - 820px) / 2)); }
}

/* images */
.composer .row .icon-btn { width:38px; }
.attachments { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.attachments:not(:empty) { margin-bottom:6px; padding:8px 8px 2px 2px; }
.thumb { position:relative; flex:none; width:64px; height:64px; border-radius:var(--r-md); overflow:visible; }
.thumb img { width:100%; height:100%; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--line-2); }
.thumb .rm, .fchip .rm { position:absolute; top:-6px; right:-6px; width:24px; height:24px; border-radius:50%; background:var(--s3); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; }
.thumb .rm .i { width:14px; height:14px; }
.thumb.busy img { opacity:.4; }
.msg.user .imgs { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.msg.user .imgs img, .tool .imgs img { max-width:180px; max-height:180px; border-radius:var(--r-md); display:block; cursor:zoom-in; }
.msg.user .imgs:last-child { margin-bottom:0; }
.tool .imgs { padding:8px 12px; border-top:1px solid var(--line); }
.viewer { position:fixed; inset:0; z-index:40; background:#000e; display:flex; align-items:center; justify-content:center; padding:calc(var(--sat) + 12px) 12px calc(var(--sab) + 12px); }
.viewer img { max-width:100%; max-height:100%; object-fit:contain; }
.offscreen { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
label.icon-btn { cursor:pointer; }
.fchip { position:relative; flex:none; display:flex; align-items:center; gap:8px; height:64px; max-width:220px; padding:0 14px 0 10px; border-radius:var(--r-md); background:var(--s2); border:1px solid var(--line-2); }
.fchip .i { color:var(--accent); }
.fchip .fname { font-size:var(--t-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fchip .fsub { font-size:11px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fchip.busy { opacity:.6; }
.fchip.small { height:auto; padding:5px 10px 5px 8px; gap:6px; background:var(--s1); max-width:100%; }
.fchip.small .i { width:16px; height:16px; }
.msg.user .files { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
.msg.user .files:last-child { margin-bottom:0; }
.chat.dropping::after { content:"Drop files to attach"; position:absolute; inset:8px; border:2px dashed var(--accent); border-radius:var(--r-xl); background:#0a0a0bcc; display:flex; align-items:center; justify-content:center; font-size:var(--t-lg); color:var(--accent); z-index:15; pointer-events:none; }
.seg { display:flex; flex-wrap:wrap; gap:6px; margin:4px 4px 16px; }
.seg button { flex:1 0 auto; min-height:42px; padding:0 12px; border-radius:var(--r-md); background:var(--s2); border:1px solid var(--line); font-size:var(--t-sm); font-weight:550; }
.seg button.on { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.meter { margin:4px 4px 16px; }
.meter-head { display:flex; justify-content:space-between; margin-bottom:6px; color:var(--fg-2); }
.meter-head b { color:var(--fg); }
.meter-bar { height:10px; border-radius:var(--r-pill); background:var(--s3); overflow:hidden; }
.meter-bar i { display:block; height:100%; background:var(--pos); border-radius:inherit; transition:width .4s; }
.meter-bar.warm i { background:var(--warn); } .meter-bar.hot i { background:var(--neg); }
.meter small { display:block; margin-top:5px; color:var(--mut); font-size:var(--t-xs); }
.sheet p.err-text { color:var(--neg); }
.sheet p.mut { color:var(--mut); font-size:var(--t-xs); }

/* LaTeX: wide formulas scroll sideways instead of stretching the bubble */
.math { overflow-x: auto; overflow-y: hidden; margin: .5em 0; padding: .1em 0; }
.math .katex-display { margin: 0; }
.katex { font-size: 1.1em; }

/* LaTeX documents: compiled pages, with the code editable behind a tab */
.texdoc { border:1px solid var(--line); border-radius:var(--r-md); background:var(--s1); margin:0 0 .7em; overflow:hidden; }
.texbar { display:flex; align-items:center; gap:4px; padding:6px; border-bottom:1px solid var(--line); }
.texbar .grow { flex:1; }
.texbar button, .texbar a { min-height:34px; padding:0 10px; border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:550; color:var(--fg-2); display:inline-flex; align-items:center; text-decoration:none; }
.texbar a:not([hidden]) { background:var(--s2); }
.textabs { display:flex; background:var(--s2); border-radius:var(--r-sm); padding:2px; }
.textabs button { min-height:30px; }
.textabs button.on { background:var(--s3); color:var(--fg); }
.texview { padding:8px; display:flex; flex-direction:column; gap:8px; }
.texview img { width:100%; height:auto; display:block; background:#fff; border-radius:4px; min-height:120px; }
.texstatus { color:var(--mut); font-size:var(--t-sm); padding:6px 4px; }
.texlog { font-family:var(--mono); font-size:11.5px; white-space:pre-wrap; color:var(--neg); background:var(--bg); border-radius:var(--r-sm); padding:8px; margin:0; max-height:240px; overflow:auto; }
.texedit { padding:8px; display:flex; flex-direction:column; gap:8px; }
.texedit textarea { width:100%; min-height:200px; resize:vertical; font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; tab-size:2; white-space:pre; overflow:auto; }
.texdoc [hidden] { display:none !important; }
.texview img { cursor:zoom-in; }
.texzoom { position:fixed; inset:0; z-index:100; background:#000; }
.texzoom .pane { position:absolute; inset:0; overflow:auto; touch-action:pan-x pan-y; overscroll-behavior:contain; padding:calc(var(--sat) + 52px) 0 calc(var(--sab) + 16px); }
.texzoom .stage { width:100%; display:flex; flex-direction:column; gap:10px; }
.texzoom img { width:100%; height:auto; display:block; background:#fff; }
.texzoom .close { position:absolute; top:calc(var(--sat) + 8px); right:calc(var(--sar) + 8px); width:40px; height:40px; border-radius:50%; background:#000a; color:#fff; display:grid; place-items:center; }
.texzoom .close .i { width:20px; height:20px; }

/* account sheet */
.sheet .section-h { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin:16px 4px 4px; }
.sheet .row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md); }
.sheet .row .grow { min-width:0; }
.sheet .row .sub { color:var(--mut); font-size:var(--t-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet .row button { color:var(--fg-2); font-size:var(--t-sm); padding:8px 10px; border-radius:var(--r-sm); background:var(--s2); }
.sheet .row button.danger { color:var(--neg); }
.server-toggle { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:4px 2px 12px; color:var(--fg-2); font-size:var(--t-sm); }
.server-toggle input { width:20px; height:20px; margin:0; }
.server-toggle small { flex-basis:100%; color:var(--mut); font-size:var(--t-xs); }

/* viewer bar, documents in the viewer */
.texzoom .vbar { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:8px; padding:calc(var(--sat) + 6px) calc(var(--sar) + 8px) 6px calc(var(--sal) + 12px); background:#000d; z-index:1; }
.texzoom .vbar .vt { flex:1; min-width:0; color:#fff; font-weight:600; font-size:var(--t-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.texzoom .vbar .vbtn { color:#fff; font-size:var(--t-sm); font-weight:550; padding:8px 12px; border-radius:var(--r-pill); background:#ffffff1f; text-decoration:none; }
.texzoom .vbar .close { position:static; }
.texzoom .stage.doc { background:var(--bg); color:var(--fg); min-height:100%; padding:12px calc(var(--sar) + 14px) 24px calc(var(--sal) + 14px); }
.texzoom .vnote { color:var(--mut); font-size:var(--t-sm); padding:10px 4px; text-align:center; }
.texzoom .stage:not(.doc) .vnote { color:#bbb; }
.ftext { font-family:var(--mono); font-size:12.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; margin:0; }
.fframe { width:100%; height:calc(100dvh - 120px); border:0; background:#fff; border-radius:var(--r-sm); }
.fmedia { width:100%; max-height:80vh; }

/* previews of files a reply mentions */
.md a.fpath { color:var(--accent); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.md a.fpath code { color:var(--accent); }
.fprev { display:flex; flex-direction:column; align-items:stretch; gap:6px; width:min(260px, 100%); margin:8px 0 4px; padding:6px; border-radius:var(--r-md); background:var(--s1); border:1px solid var(--line); text-align:left; }
.fprev img { width:100%; max-height:320px; object-fit:contain; object-position:top; background:#fff; border-radius:6px; min-height:60px; }
.fprev span { font-size:var(--t-xs); color:var(--fg-2); padding:0 2px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* files screen */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin:0 2px 10px; font-size:var(--t-sm); color:var(--mut); }
.crumbs button { color:var(--fg-2); padding:4px 6px; border-radius:var(--r-sm); }
.crumbs button:last-child { color:var(--fg); font-weight:600; }
.ftable { overflow:auto; }
.ftable table { border-collapse:collapse; font-size:var(--t-sm); }
.ftable th, .ftable td { border:1px solid var(--line-2); padding:6px 8px; text-align:left; vertical-align:top; min-width:80px; max-width:320px; }
.ftable th { background:var(--s2); position:sticky; top:0; }
.fprev.wide { width:100%; }
.fprev .ftable { max-height:220px; }
.fprev .ftable td, .fprev .ftable th { font-size:var(--t-xs); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.texzoom .stage { width:min(100%, 1000px); margin:0 auto; }
.ftable .vnote { color:var(--mut); font-size:var(--t-xs); padding:6px 2px 0; text-align:left; }

/* code with line numbers */
.ftext.hljs { background:transparent; padding:0; }
.ftext.code { counter-reset:ln; }
.ftext.code .ln { display:block; position:relative; padding-left:3.4em; min-height:1.5em; }
.ftext.code .ln::before { counter-increment:ln; content:counter(ln); position:absolute; left:0; width:2.6em; text-align:right; color:var(--mut); opacity:.7; user-select:none; }
.ftext.code .ln.hit { background:var(--accent-soft); }
.md pre code.hljs { background:transparent; padding:0; }

/* notebooks */
.nb { display:flex; flex-direction:column; gap:12px; }
.nb-cell { border:1px solid var(--line); border-radius:var(--r-md); padding:8px 10px; background:var(--s1); }
.nb-in { font-family:var(--mono); font-size:11px; color:var(--mut); margin-bottom:4px; }
.nb-out { font-family:var(--mono); font-size:12px; white-space:pre-wrap; margin:6px 0 0; padding-top:6px; border-top:1px dashed var(--line-2); color:var(--fg-2); }
.nb-out.err { color:var(--neg); }
.nb-img { max-width:100%; background:#fff; margin-top:6px; border-radius:4px; }
.nb-html { width:100%; height:260px; border:0; background:#fff; margin-top:6px; border-radius:4px; }

/* office files */
.fframe.doc { height:calc(100dvh - 90px); }
.sheets .seg { margin:0 0 10px; }
.sheets .seg button.on, .seg button.on { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.slides { display:flex; flex-direction:column; gap:14px; }
.slide { border:1px solid var(--line-2); border-radius:var(--r-md); padding:14px 16px; background:var(--s1); }
.slide-n { font-size:var(--t-xs); color:var(--mut); }
.slide h3 { margin:4px 0 8px; font-size:var(--t-lg); }
.slide-text div { margin:3px 0; }
.slide img { max-width:100%; margin-top:8px; border-radius:4px; }
.slide-notes { margin-top:10px; font-size:var(--t-xs); color:var(--mut); white-space:pre-wrap; }

/* tool cards: open the file */
.tool summary .topen { margin-left:auto; flex:none; font-size:11px; color:var(--accent); padding:2px 8px; border-radius:var(--r-pill); background:var(--accent-soft); }

/* files search */
.fsearch { margin:0 0 10px; }
.fsearch input { width:100%; height:42px; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--s1); padding:0 12px; font-size:16px; color:var(--fg); }
.card.hits { flex-direction:column; align-items:stretch; gap:2px; padding:8px; }
.hit-file { display:flex; align-items:center; gap:8px; font-weight:600; font-size:var(--t-sm); padding:4px; text-align:left; }
.hit-line { display:flex; gap:8px; text-align:left; font-family:var(--mono); font-size:12px; padding:4px; border-radius:6px; color:var(--fg-2); }
.hit-line b { color:var(--mut); font-weight:400; min-width:2.5em; text-align:right; }
.hit-line span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hit-line:active, .hit-file:active { background:var(--s2); }
.changes .section { margin:16px 2px 8px; }
.changes .section:first-child { margin-top:4px; }
.changes .card { margin-bottom:6px; }
.chg { margin-bottom:8px; }
.chg > pre { margin:0 10px 10px; max-height:420px; overflow:auto; }
.chg-h { font-size:var(--t-xs); color:var(--mut); margin:6px 12px 4px; }