/* OpenOnion shared styles. Dark is the default; html.light flips the variables.
   Theme is chosen server-side (cookie) so it survives no-JS page reloads. */
:root{
  color-scheme: dark;
  --bg:#0e0e12; --text:#e6e6ea; --muted:#9a9aa6; --muted2:#73737e;
  --panel:#15151b; --panel2:#1b1b22; --asst:#15171d;
  --border:#2a2a34; --border2:#26262e; --hair:#1f1f27; --hair2:#1b1b22;
  --role:#8a8a96; --h2:#c9c9d2; --link:#9a9aa6;
  --btn-bg:#ffffff; --btn-text:#0e0e12; --btn-ghost:#23232c;
  --warn-bg:#322a13; --warn-bd:#564921; --warn-tx:#ecca6b;
  --err-bg:#351619; --err-bd:#5d2730; --err-ac:#e0414a; --err-tx:#ff9ea3;
  --ok-bg:#16301e; --ok-bd:#2a5436; --ok-tx:#86efac;
  --info-bg:#152834; --info-bd:#27505f; --info-ac:#2f81f7; --info-tx:#88c9e8;
  --seed-bg:#2a2410; --seed-bd:#4a4020; --seed-tx:#f0c674;
  --num:#6b6b76;
}
html.light{
  color-scheme: light;
  --bg:#ffffff; --text:#1a1a1f; --muted:#5f5f6b; --muted2:#8a8a96;
  --panel:#f7f7fa; --panel2:#f5f5f8; --asst:#fafafc;
  --border:#d6d6de; --border2:#e4e4ea; --hair:#e7e7ec; --hair2:#ededf1;
  --role:#7a7a86; --h2:#33333c; --link:#5f5f6b;
  --btn-bg:#0e0e12; --btn-text:#ffffff; --btn-ghost:#e0e0e6;
  --warn-bg:#FEEFB3; --warn-bd:#ecd98f; --warn-tx:#9F6000;
  --err-bg:#FFBABA; --err-bd:#f3a3a3; --err-ac:#D8000C; --err-tx:#D8000C;
  --ok-bg:#DFF2BF; --ok-bd:#c2e39a; --ok-tx:#4F8A10;
  --info-bg:#D9EDF7; --info-bd:#a8d4e8; --info-ac:#31708F; --info-tx:#31708F;
  --seed-bg:#fdf4dc; --seed-bd:#e8d59a; --seed-tx:#7a5a10;
  --num:#9a9aa6;
}
/* No explicit choice (no theme class) → follow the OS. Dark is the :root base, so
   we only need to flip to light when the system prefers light. Explicit .light/.dark
   always win (excluded here). JS (applyTheme) also swaps the theme-dependent PNGs. */
@media (prefers-color-scheme: light){
  html:not(.light):not(.dark){
    color-scheme: light;
    --bg:#ffffff; --text:#1a1a1f; --muted:#5f5f6b; --muted2:#8a8a96;
    --panel:#f7f7fa; --panel2:#f5f5f8; --asst:#fafafc;
    --border:#d6d6de; --border2:#e4e4ea; --hair:#e7e7ec; --hair2:#ededf1;
    --role:#7a7a86; --h2:#33333c; --link:#5f5f6b;
    --btn-bg:#0e0e12; --btn-text:#ffffff; --btn-ghost:#e0e0e6;
    --warn-bg:#FEEFB3; --warn-bd:#ecd98f; --warn-tx:#9F6000;
    --err-bg:#FFBABA; --err-bd:#f3a3a3; --err-ac:#D8000C; --err-tx:#D8000C;
    --ok-bg:#DFF2BF; --ok-bd:#c2e39a; --ok-tx:#4F8A10;
    --info-bg:#D9EDF7; --info-bd:#a8d4e8; --info-ac:#31708F; --info-tx:#31708F;
    --seed-bg:#fdf4dc; --seed-bd:#e8d59a; --seed-tx:#7a5a10;
    --num:#9a9aa6;
  }
}

body{ background:var(--bg); color:var(--text); font:16px/1.5 system-ui,sans-serif; margin:0; }
.wrap{ max-width:760px; margin:0 auto; padding:1rem; }
.wrap.w560{ max-width:560px; } .wrap.w620{ max-width:620px; }

/* responsive: never overflow the viewport horizontally on mobile */
html, body{ overflow-x:hidden; max-width:100%; }
img, table, pre, .terminal{ max-width:100%; }
code, .bal, .addr, .word{ overflow-wrap:anywhere; word-break:break-word; }
.prose th, .prose td{ overflow-wrap:anywhere; }
.row{ flex-wrap:wrap; }            /* Send / model / price wrap instead of pushing wide */
.modelcost{ white-space:normal; }  /* allow the price label to wrap on narrow screens */

header{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border2); padding-bottom:.5rem; margin-bottom:1rem; }
.brand{ display:flex; align-items:center; gap:.5rem; }
/* Brand wordmark: the "dLLM" logo is the Cal Sans typeface rendered as text (not a
   PNG) so it inherits the theme colour and flips cleanly between light/dark. */
@font-face{ font-family:'Cal Sans'; src:url('/static/CalSans-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
.logo{ font-family:'Cal Sans', system-ui, sans-serif; font-weight:400; color:var(--text); line-height:1; letter-spacing:-.01em; display:inline-block; }
.brand .logo{ font-size:1.8rem; }
.logolink{ display:inline-flex; align-items:center; text-decoration:none; }
h1{ font-size:1.15rem; margin:0; letter-spacing:.5px; }
h2{ font-size:.95rem; color:var(--h2); margin:1.5rem 0 .5rem; }
.bal{ font-size:.85rem; color:var(--muted); }
.muted{ color:var(--muted); }
.nav{ display:flex; align-items:center; gap:.6rem; }
header a, a.newchat{ color:var(--link); font-size:.85rem; text-decoration:none; }

/* theme toggle (sun/moon png so it works on Tor Safest) — borderless.
   It's a POST form (not a link) so toggling carries the chat instead of wiping it. */
.theme-toggle{ display:inline-flex; align-items:center; padding:.15rem; line-height:0; margin:0; }
.theme-toggle img{ height:1.25rem; width:1.25rem; display:block; }
.iconbtn{ background:none; border:0; padding:0; margin:0; cursor:pointer; line-height:0; color:inherit; font:inherit; display:inline-flex; align-items:center; }
.ti{ height:1.05rem; width:1.05rem; display:block; }
.drawer-toggle{ margin:0; width:100%; }
.drawer-btn{ display:flex; align-items:center; width:100%; padding:.55rem .2rem; border:0; border-top:1px solid var(--hair2); background:none; color:var(--h2); cursor:pointer; line-height:0; font:inherit; }

/* CSS-only hamburger drawer (no JS — works on Tor Safest) */
.navtoggle{ display:none; }
.hamburger{ display:none; cursor:pointer; font-size:1.3rem; line-height:1; color:var(--h2); padding:.1rem .35rem; border:1px solid var(--border); border-radius:6px; user-select:none; }
.drawer{ display:none; width:100%; flex-direction:column; gap:.1rem; margin-top:.6rem; }
.drawer a, .drawer .bal{ padding:.55rem .2rem; border-top:1px solid var(--hair2); }
.drawer a{ color:var(--h2); text-decoration:none; font-size:.95rem; }
@media (max-width:560px){
  .links-inline{ display:none; }
  .theme-desktop{ display:none; }            /* header toggle hidden; lives in the drawer on mobile */
  .hamburger{ display:inline-block; }
  .navtoggle:checked ~ .drawer{ display:flex; }
}

/* Secondary pages keep their menu in the drawer markup. On DESKTOP we lay that
   drawer out inline in the header so it matches the chat (/) desktop menu —
   link-coloured with "·" separators — instead of a mobile-style hamburger. On
   mobile it collapses into the hamburger via the shared rules above. */
@media (min-width:561px){
  header.menu-only{ gap:.55rem; }
  .menu-only .brand{ margin-right:auto; }              /* push balance + menu to the right, like chat */
  .menu-only .drawer{ display:flex; flex-direction:row; align-items:center; width:auto; margin-top:0; gap:.55rem; }
  .menu-only .drawer a, .menu-only .drawer .drawer-btn{ border-top:0; padding:0; width:auto; color:var(--link); font-size:.85rem; }
  .menu-only .drawer .drawer-btn{ line-height:0; }
  .menu-only .drawer a:not(.drawer-btn) + a:not(.drawer-btn)::before{ content:"·"; color:var(--muted); margin-right:.55rem; }
}

/* forms / buttons */
form{ margin-top:1rem; }
.row{ display:flex; gap:.5rem; margin-top:.5rem; align-items:center; }
textarea{ width:100%; box-sizing:border-box; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:.7rem; font:inherit; min-height:5rem; }
button{ background:var(--btn-bg); color:var(--btn-text); border:0; border-radius:8px; padding:.6rem 1.1rem; font:inherit; cursor:pointer; }
button.ghost{ background:var(--btn-ghost); color:var(--text); }
.modelsel{ background:var(--panel); color:var(--muted); border:1px solid var(--border); border-radius:8px; padding:.45rem .5rem; font:inherit; font-size:.85rem; max-width:55%; }
button.stop{ background:#9a2828; color:#fff; }
.regen{ background:var(--btn-ghost); color:var(--text); display:inline-flex; align-items:center; justify-content:center; padding:.6rem .9rem; line-height:1; }
.regen img{ height:1.3rem; width:1.3rem; display:block; }
.adminin{ background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:.35rem .5rem; font:inherit; width:8rem; box-sizing:border-box; }
.adminfs{ border:1px solid var(--border); border-radius:8px; padding:.5rem .8rem; margin:.5rem 0; } .adminfs legend{ color:var(--h2); font-size:.85rem; }
/* multi-page admin shell (reuses the app shell: appbody/app/main/content/appside) */
.topbar-title{ font-weight:600; color:var(--muted2); margin-left:.1rem; }
.admin-nav{ display:flex; flex-direction:column; gap:2px; padding:.3rem 0; }
.admin-nav .navico, .admin-side-foot .navico{ width:16px; height:16px; flex:0 0 auto; opacity:.7; }
.admin-nav .side-link.on{ background:var(--panel2); color:var(--text); font-weight:600; }
.admin-nav .side-link.on .navico{ opacity:1; }
.admin-side-foot{ margin-top:auto; border-top:1px solid var(--hair2); padding-top:.4rem; display:flex; flex-direction:column; gap:2px; }
.admin-side-foot .side-link{ width:100%; background:none; border:0; cursor:pointer; font:inherit; }

/* terminal-style code blocks (matches rp.joelovestech.com) — intentionally always dark */
.terminal{ border-radius:12px; overflow:hidden; border:1px solid var(--border); box-shadow:0 12px 30px -12px rgba(0,0,0,.4); margin:.9rem 0; }
.terminal-header{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:#1f2937; }
.terminal-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.terminal-dot-red{ background:#ef4444; } .terminal-dot-yellow{ background:#eab308; } .terminal-dot-green{ background:#22c55e; }
.terminal-title{ margin-left:8px; color:#9ca3af; font-size:.8rem; font-family:'JetBrains Mono','Consolas',monospace; }
.terminal-body{ background:#111827; color:#e5e7eb; padding:16px; margin:0; font-size:.8rem; line-height:1.6; overflow-x:auto; font-family:'JetBrains Mono','Consolas',monospace; white-space:pre; }
.terminal-prompt{ color:#22c55e; font-weight:bold; } .terminal-string{ color:#fbbf24; } .terminal-key{ color:#60a5fa; } .terminal-comment{ color:#6b7280; }
.modelcost{ color:var(--muted2); font-size:.8rem; white-space:nowrap; }

/* chat turns */
.turn{ padding:.6rem .8rem; border-radius:8px; margin:.5rem 0; overflow-wrap:anywhere; }
.user{ background:var(--panel2); white-space:pre-wrap; }   /* user text is plain (escaped) */
.assistant{ background:var(--asst); border:1px solid var(--border); }
.role{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--role); margin-bottom:.25rem; }
/* markdown rendered (and sanitized) in assistant turns */
.assistant p{ margin:.5rem 0; } .assistant p:first-of-type{ margin-top:.2rem; } .assistant p:last-child{ margin-bottom:.1rem; }
.assistant h1,.assistant h2,.assistant h3,.assistant h4{ font-size:1rem; margin:.7rem 0 .3rem; color:var(--text); }
.assistant ul,.assistant ol{ margin:.4rem 0; padding-left:1.3rem; } .assistant li{ margin:.2rem 0; }
.assistant code{ background:var(--panel); padding:.1rem .35rem; border-radius:4px; font-size:.9em; }
.assistant pre{ position:relative; background:var(--panel); padding:.6rem .8rem; border-radius:8px; overflow-x:auto; } .assistant pre code{ background:none; padding:0; }
.assistant pre .copy{ position:absolute; top:.35rem; right:.35rem; font-size:.7rem; line-height:1; padding:.2rem .45rem; background:var(--border); color:var(--text); border:0; border-radius:5px; cursor:pointer; opacity:.65; }
.assistant pre .copy:hover{ opacity:1; }
.gen-img{ max-width:100%; width:512px; border-radius:12px; margin:.2rem 0; display:block; background:var(--panel2); }
.img-status{ color:var(--muted2); font-style:italic; }
.img-err{ color:#ef4444; }
.img-save{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:.45rem 0 .1rem; padding:.45rem .65rem; border-radius:8px;
  background:rgba(59,130,246,.12); color:#2563eb; font-size:.82rem; max-width:512px; }
.dark .img-save{ color:#60a5fa; }
.img-save svg{ width:1em; height:1em; flex:0 0 auto; }
.img-save-dl{ margin-left:auto; font-weight:600; color:inherit; text-decoration:underline; cursor:pointer; }
.assistant strong{ color:var(--text); font-weight:600; }
.assistant a{ color:var(--link); }
.assistant blockquote{ border-left:3px solid var(--border); margin:.5rem 0; padding-left:.8rem; color:var(--muted); }
.assistant table{ border-collapse:collapse; margin:.4rem 0; } .assistant th,.assistant td{ border:1px solid var(--border); padding:.3rem .5rem; }
/* live streaming cursor (JS path) */
.streaming .body::after{ content:"▋"; color:var(--muted); margin-left:1px; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* topup */
.addr{ font-family:monospace; font-size:.8rem; word-break:break-all; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:.7rem; margin:.5rem 0 1rem; }
img.qr{ background:#fff; padding:8px; border-radius:8px; width:240px; height:240px; display:block; margin:0 auto 1rem; }

/* account seed words */
.words{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin:.5rem 0; }
.word{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:.45rem .6rem; font-family:monospace; font-size:.9rem; }
.word .n{ color:var(--num); margin-right:.4rem; user-select:none; }
.seed-note{ color:var(--seed-tx); font-size:.85rem; background:var(--seed-bg); border:1px solid var(--seed-bd); border-radius:8px; padding:.6rem .8rem; }
/* one-time voucher code box — distinct class so dllm-account.js (which rewrites
   .seed-note with the recovery phrase) can never clobber the code */
.vch-box{ font-size:.9rem; background:var(--panel2); border:1px solid var(--link); border-radius:8px; padding:.6rem .8rem; margin:.6rem 0; }
.dot-on{ color:#22c55e; }
.dot-off{ color:#9ca3af; }
/* stat cards (/network, /points) */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin:1rem 0 1.5rem; }
.stat{ border:1px solid var(--border); border-radius:12px; padding:.9rem 1rem; background:var(--panel); }
.stat .v{ font-size:1.5rem; font-weight:600; }
.stat .k{ color:var(--muted2); font-size:.78rem; margin-top:.2rem; }
/* analytics charts (/network, /pricing) */
.chart-wrap{ border:1px solid var(--border); border-radius:12px; padding:1rem .8rem .3rem; background:var(--panel); margin:.4rem 0 1.5rem; }
.chart{ width:100%; height:auto; display:block; touch-action:pan-y; }
.chart-tip{ position:fixed; z-index:90; transform:translate(-50%,-100%); pointer-events:none;
  background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:8px;
  padding:.3rem .5rem; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px;
  box-shadow:0 4px 14px rgba(0,0,0,.25); white-space:nowrap; display:flex; gap:.45rem; align-items:baseline; }
.chart-tip .ct-l{ color:var(--muted2); }
.chart-tip .ct-v{ font-weight:600; }
.chart-lbl{ fill:var(--muted2); font-size:10px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:-.2px; }
.chart rect[fill="transparent"]:hover{ fill:var(--accent); fill-opacity:.06; }
.chart rect:hover{ filter:brightness(1.12); }
.split{ display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; margin:.4rem 0 1.5rem; }
.donut-wrap{ flex:0 0 160px; }
.donut{ width:160px; height:160px; }
.donut-mid{ fill:var(--text); font-size:22px; font-weight:600; }
.legend{ flex:1 1 240px; min-width:200px; }
.legend-row{ display:flex; align-items:center; gap:.5rem; padding:.22rem 0; font-size:.86rem; }
.legend-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.legend-val{ color:var(--muted2); font-size:.8rem; white-space:nowrap; }
.swatch{ display:inline-block; width:11px; height:11px; border-radius:3px; flex:0 0 auto; margin-right:.4rem; vertical-align:middle; }
.tablewrap{ overflow-x:auto; margin:.4rem 0 1.5rem; }
table.data{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.data th{ text-align:left; color:var(--muted2); font-weight:500; border-bottom:1px solid var(--border); padding:.4rem .5rem; white-space:nowrap; }
table.data td{ padding:.45rem .5rem; border-bottom:1px solid var(--border); }
table.data td:not(:first-child), table.data th:not(:first-child){ text-align:right; }
.pricetag{ font-variant-numeric:tabular-nums; }

/* /pricing — model card grid */
.price-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:.8rem; margin:.7rem 0 1.5rem; }
.price-card{ border:1px solid var(--border); border-radius:14px; background:var(--panel); padding:1rem;
  transition:border-color .15s, transform .15s, box-shadow .15s; }
.price-card:hover{ border-color:var(--link); transform:translateY(-2px); box-shadow:0 10px 26px -14px rgba(0,0,0,.35); }
.pc-top{ display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; }
.brand-ava{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px;
  color:#fff; font-weight:700; font-size:16px; flex:0 0 auto; }
/* lobehub mono icon avatar (themed via currentColor) — /pricing */
.brand-ico{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto; color:var(--text); font-size:26px; line-height:0; }
.brand-ico svg{ width:1em; height:1em; display:block; }
.pc-id{ min-width:0; }
.pc-name{ font-weight:600; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-sub{ font-size:.74rem; color:var(--muted2); }
.pc-prices{ display:flex; gap:1.3rem; margin-bottom:.75rem; }
.pc-num{ font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pc-unit{ font-size:.72rem; color:var(--muted2); margin-left:.12rem; }
.pc-badges{ display:flex; flex-wrap:nowrap; gap:.35rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pc-badges::-webkit-scrollbar{ display:none; }
/* per-card "start" CTA — compact top-right icon, deep-links into a new chat/image
   with this model selected (message-circle-plus for text, image-plus for image) */
.pc-start{ margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--border); border-radius:9px; color:var(--muted); text-decoration:none; }
.pc-start:hover{ background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); }
.pc-start svg{ width:1.15rem; height:1.15rem; display:block; }
.pc-badge{ flex:0 0 auto; font-size:.72rem; padding:.16rem .55rem; border-radius:999px; background:var(--panel2); color:var(--muted2); white-space:nowrap; }
.pc-badge.live{ background:rgba(34,197,94,.13); color:#16a34a; }
.pc-badge.cheap{ background:rgba(99,102,241,.13); color:var(--link); }
.pc-badge.e2ee{ background:rgba(34,197,94,.13); color:#16a34a; font-weight:600; }
.dark .pc-badge.e2ee{ color:#4ade80; }
.pc-badge.host{ background:var(--panel2); color:var(--muted2); }
.pc-badge{ display:inline-flex; align-items:center; gap:.25rem; }
.pc-badge svg{ width:.9em; height:.9em; }
.pc-badge.img{ background:rgba(168,85,247,.14); color:#a855f7; font-weight:600; }
.pc-badge.nsfw{ background:rgba(239,68,68,.14); color:#ef4444; font-weight:700; }
.price-search{ width:100%; box-sizing:border-box; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:.55rem .7rem; font:inherit; font-size:.9rem; margin:.2rem 0 .6rem; }
.price-search::placeholder{ color:var(--muted2); }
.price-controls{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin:.2rem 0 1.1rem; }
.price-sorts{ display:flex; gap:.5rem; }
.price-filters{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pf-pill{ font-size:.82rem; padding:.34rem .9rem; border-radius:999px; border:1px solid var(--border); background:var(--panel); color:var(--muted2); cursor:pointer; transition:all .12s; }
.pf-pill:hover{ color:var(--text); }
.pf-pill.on{ background:var(--accent,var(--link)); color:#fff; border-color:transparent; }
.pc-badge .dot-on{ font-size:.6em; vertical-align:middle; }

/* /worker — connected-worker cards */
.worker-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.8rem; margin:.6rem 0 1.5rem; }
.worker-card{ border:1px solid var(--border); border-radius:14px; background:var(--panel); padding:1rem; }
.worker-card:hover{ border-color:var(--link); transform:translateY(-2px); box-shadow:0 10px 26px -14px rgba(0,0,0,.35); transition:border-color .15s, transform .15s, box-shadow .15s; }
.wc-top{ display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; }
.wc-ava{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:#16a34a; color:#fff; flex:0 0 auto; }
.wc-ava svg{ width:20px; height:20px; }
.wc-live{ position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:50%; background:#22c55e; border:2px solid var(--panel); box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:wc-pulse 2s infinite; }
@keyframes wc-pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); } 70%{ box-shadow:0 0 0 5px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.wc-id{ min-width:0; }
.wc-name{ font-weight:600; font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:.3rem; }
.wc-models{ display:flex; flex-direction:column; gap:.3rem; }
.wc-model{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.8rem; padding:.32rem .55rem; background:var(--panel2); border-radius:8px; }
.wc-mname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.wc-mmeta{ color:var(--muted2); white-space:nowrap; flex:0 0 auto; font-variant-numeric:tabular-nums; display:flex; align-items:center; }
.wc-quant{ background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:0 .3rem; margin-right:.4rem; font-size:.68rem; color:var(--muted2); }
.wc-model.off{ opacity:.45; }
.wc-tog{ display:inline; margin:0 0 0 .45rem; }
.wc-tog button{ background:none; border:0; padding:0; color:var(--muted2); cursor:pointer; display:inline-flex; vertical-align:middle; }
.wc-tog button:hover{ color:var(--text); }
.wc-tog svg{ width:14px; height:14px; }
.worker-empty{ border:1px dashed var(--border); border-radius:12px; padding:1rem; color:var(--muted2); font-size:.9rem; }

/* API page: key card + copy-able code blocks */
.apikey-card{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:.7rem .9rem; margin:.6rem 0 .3rem; }
.akc-main{ min-width:0; flex:1 1 auto; }
.akc-label{ font-size:.72rem; color:var(--muted2); margin-bottom:.2rem; }
.akc-key{ font-size:.9rem; word-break:break-all; background:none; padding:0; }
.akc-actions{ display:flex; gap:.4rem; flex:0 0 auto; }
.akc-actions .ghost{ padding:.25rem .6rem; font-size:.8rem; }
.secret{ filter:blur(5px); transition:filter .12s; }
.secret.show, .secret:hover{ filter:none; }
.code-wrap{ position:relative; margin:.3rem 0 1rem; }
.code-body{ background:var(--seed-bg); border:1px solid var(--seed-bd); border-radius:8px; padding:.7rem .85rem; margin:0;
  font-family:'JetBrains Mono','Consolas',monospace; font-size:.8rem; line-height:1.55; overflow-x:auto; white-space:pre; color:var(--text); }
.code-copy{ position:absolute; top:.4rem; right:.4rem; font-size:.72rem; padding:.18rem .5rem; opacity:.85; }
.code-copy:hover{ opacity:1; }
table.data code{ word-break:break-all; }
/* model-pricing table: keep cells on one line so it x-scrolls (tablewrap) on mobile */
table.data.models td, table.data.models th{ white-space:nowrap; }
table.data.models code{ word-break:normal; }

/* ── model picker (composer drawer) ─────────────────────────────────────── */
.mp-ava{ display:inline-flex; align-items:center; justify-content:center; border-radius:7px; color:#fff; font-weight:700; flex:0 0 auto; line-height:1; }
.mp-ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--text); line-height:0; }
.mp-ico svg{ width:1em; height:1em; display:block; }
.mp-trigger{ display:inline-flex; align-items:center; gap:.45rem; max-width:100%; padding:.3rem .55rem; border:1px solid var(--border); border-radius:999px;
  background:var(--panel); color:var(--text); font:inherit; font-size:.85rem; cursor:pointer; }
.mp-trigger:hover{ background:var(--panel2); }
.mp-trig-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14rem; }
.mp-trig-chev{ display:inline-flex; flex:0 0 auto; opacity:.55; }
.mp-trig-chev svg{ width:14px; height:14px; }
body.mp-noscroll{ overflow:hidden; overscroll-behavior:none; }
html.mp-lock, html.mp-lock body{ overscroll-behavior:none; }
.mp-backdrop{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; }
.mp-backdrop[hidden]{ display:none; } /* class display:flex would otherwise override [hidden] */
.mp-sheet{ background:var(--bg); width:100%; height:93dvh; max-height:93dvh; border-radius:16px 16px 0 0; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -10px 40px rgba(0,0,0,.3); animation:mp-up .2s ease-out; }
@keyframes mp-up{ from{ transform:translateY(100%); } to{ transform:none; } }
.mp-grab{ width:36px; height:4px; border-radius:2px; background:var(--border); margin:.5rem auto .15rem; flex:0 0 auto; }
.mp-head{ display:flex; align-items:center; justify-content:space-between; padding:.5rem 1rem .5rem; }
.mp-close{ background:none; border:0; color:var(--muted2); cursor:pointer; padding:.2rem; display:inline-flex; border-radius:6px; }
.mp-close:hover{ background:var(--panel2); }
.mp-close svg{ width:18px; height:18px; }
.mp-search{ position:relative; margin:.2rem 1rem .5rem; }
.mp-search svg{ position:absolute; left:.6rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted2); }
.mp-search input{ width:100%; box-sizing:border-box; padding:.55rem .7rem .55rem 2.1rem; border:1px solid var(--border); border-radius:10px;
  background:var(--panel); color:var(--text); font:inherit; font-size:.9rem; }
.mp-tabs{ display:flex; gap:.3rem; padding:0 1rem .5rem; }
.mp-tabs button{ flex:1 1 0; padding:.35rem; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--muted2);
  font:inherit; font-size:.8rem; cursor:pointer; }
.mp-tabs button.on{ background:var(--link); border-color:var(--link); color:#fff; }
/* category filter chips (toggle): Images / E2EE / NSFW */
.mp-filters{ display:flex; gap:.3rem; padding:0 1rem .5rem; }
.mp-filters button{ flex:1 1 0; padding:.3rem; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--muted2);
  font:inherit; font-size:.76rem; font-weight:600; cursor:pointer; }
.mp-filters button[data-scope].on{ background:var(--link); border-color:var(--link); color:#fff; }
.mp-filters button[data-f="image"].on{ background:rgba(168,85,247,.16); border-color:#a855f7; color:#a855f7; }
.mp-filters button[data-f="e2ee"].on{ background:rgba(34,197,94,.16); border-color:#16a34a; color:#16a34a; }
.dark .mp-filters button[data-f="e2ee"].on{ color:#4ade80; }
.mp-filters button[data-f="nsfw"].on{ background:rgba(239,68,68,.16); border-color:#ef4444; color:#ef4444; }
.mp-list{ overflow-y:auto; overscroll-behavior:contain; padding:.2rem .6rem 1rem; -webkit-overflow-scrolling:touch; }
.mp-row{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.5rem .5rem; border:0; border-radius:10px; background:none; color:var(--text); cursor:pointer; font:inherit; }
.mp-row:hover{ background:var(--panel2); }
.mp-row.on{ background:var(--seed-bg); }
.mp-mid{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.mp-name{ font-size:.92rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-row.armed{ background:var(--panel2); outline:2px solid var(--link); outline-offset:-2px; }
.mp-name.mp-mq{ text-overflow:clip; animation:mp-marquee 3.2s ease-in-out infinite alternate; }
@keyframes mp-marquee{ 0%,12%{ transform:translateX(0); } 88%,100%{ transform:translateX(var(--mq,0)); } }
.mp-meta{ font-size:.76rem; color:var(--muted2); margin-top:2px; display:flex; align-items:center; gap:.3rem; min-width:0;
  flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.mp-meta::-webkit-scrollbar{ display:none; }
.mp-mtxt{ flex:0 0 auto; white-space:nowrap; }
.mp-tag{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.18rem; font-size:.66rem; font-weight:600; padding:.05rem .32rem; border-radius:5px; line-height:1.5; white-space:nowrap; }
.mp-tag-cheap{ color:var(--link); background:rgba(99,102,241,.14); }
.mp-tag svg{ width:.72em; height:.72em; }
.mp-tag-e2ee{ color:#16a34a; background:rgba(34,197,94,.12); }
.mp-tag-host{ color:var(--muted2); background:var(--panel2); }
.mp-tag-img{ color:#a855f7; background:rgba(168,85,247,.14); }
.mp-tag-nsfw{ color:#ef4444; background:rgba(239,68,68,.14); font-weight:700; letter-spacing:.02em; }
.dark .mp-tag-e2ee{ color:#4ade80; }
.mp-price{ flex:0 0 auto; text-align:right; font-size:.86rem; font-variant-numeric:tabular-nums; }
.mp-price-sub{ display:block; font-size:.68rem; color:var(--muted2); }
.mp-tick{ flex:0 0 auto; width:18px; color:var(--link); display:inline-flex; }
.mp-tick svg{ width:18px; height:18px; }
.mp-empty{ color:var(--muted2); text-align:center; padding:1.5rem; font-size:.9rem; }
@media (min-width:680px){
  .mp-backdrop{ align-items:center; }
  .mp-sheet{ max-width:460px; border-radius:16px; height:auto; max-height:78dvh; animation:mp-pop .16s ease-out; }
  @keyframes mp-pop{ from{ transform:scale(.97); opacity:.5; } to{ transform:none; opacity:1; } }
}
/* web-search privacy picker: a compact tray mirroring the model picker (overlay +
   bottom-sheet on mobile, anchored card on desktop), with three radio rows. */
.sp-backdrop{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; }
.sp-backdrop[hidden]{ display:none; }
.sp-sheet{ background:var(--bg); width:100%; border-radius:16px 16px 0 0; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -10px 40px rgba(0,0,0,.3); animation:mp-up .2s ease-out; }
.sp-list{ display:flex; flex-direction:column; padding:.2rem .6rem 1.1rem; }
.sp-row{ display:flex; align-items:flex-start; gap:.7rem; width:100%; text-align:left; padding:.65rem .6rem; border:0; border-radius:10px; background:none; color:var(--text); cursor:pointer; font:inherit; }
.sp-row:hover{ background:var(--panel2); }
.sp-row.on{ background:var(--seed-bg); }
.sp-row.disabled{ opacity:.4; cursor:not-allowed; }
.sp-row.disabled:hover{ background:none; }
.sp-ico{ flex:0 0 auto; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; color:var(--muted2); }
.sp-ico svg{ width:20px; height:20px; }
.sp-ico img{ width:20px; height:20px; display:block; }
.sp-tor .sp-ico{ color:#7d4698; }
.dark .sp-tor .sp-ico{ color:#b07fd0; }
.sp-anon .sp-ico{ color:#16a34a; }
.dark .sp-anon .sp-ico{ color:#4ade80; }
.sp-mid{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sp-name{ font-size:.92rem; font-weight:600; }
.sp-desc{ font-size:.76rem; color:var(--muted2); line-height:1.4; }
.sp-tick{ flex:0 0 auto; width:18px; color:var(--link); display:inline-flex; margin-top:2px; }
.sp-tick svg{ width:18px; height:18px; }
@media (min-width:680px){
  .sp-backdrop{ align-items:center; }
  .sp-sheet{ max-width:380px; border-radius:16px; animation:mp-pop .16s ease-out; }
}

/* ── attach-files: composer chips + in-message chips ── */
.attach-input{ display:none; }
.attach-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .5rem; }
.attach-chips[hidden]{ display:none; }
.attach-chip{ display:inline-flex; align-items:center; gap:.4rem; max-width:100%;
  background:var(--panel2); border:1px solid var(--border); border-radius:10px;
  padding:.3rem .45rem .3rem .5rem; font-size:.8rem; }
.attach-chip-ico{ flex:0 0 auto; display:inline-flex; color:var(--muted2); }
.attach-chip-ico svg{ width:16px; height:16px; }
.attach-chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14rem; }
.attach-chip-size{ flex:0 0 auto; color:var(--muted2); font-size:.72rem; }
.attach-chip.reading{ opacity:.75; }
.attach-chip-spin{ flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--muted2); border-top-color:transparent; animation:att-spin .7s linear infinite; }
@keyframes att-spin{ to{ transform:rotate(360deg); } }
.attach-chip-x{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:none; color:var(--muted2); cursor:pointer; padding:0; margin-left:.1rem; line-height:1; }
.attach-chip-x:hover{ color:var(--text); }
.attach-chip-x svg{ width:14px; height:14px; }

/* file chips rendered inside a sent user turn */
.msg-files{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.msg-file{ display:inline-flex; align-items:center; gap:.4rem; max-width:100%;
  background:var(--panel2); border:1px solid var(--border); border-radius:10px;
  padding:.25rem .5rem; font-size:.8rem; }
.msg-file-ico{ flex:0 0 auto; display:inline-flex; color:var(--muted2); }
.msg-file-ico svg{ width:16px; height:16px; }
.msg-file-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:16rem; }
table.data tr.me-row td{ background:var(--seed-bg); font-weight:600; }
.you-tag{ font-size:.7rem; background:var(--link); color:#fff; border-radius:4px; padding:.05rem .3rem; margin-left:.3rem; vertical-align:middle; }
.codeblock{ background:var(--seed-bg); border:1px solid var(--seed-bd); border-radius:6px; padding:.5rem .7rem; font-size:.82rem; overflow-x:auto; margin:.3rem 0; }
.codeblock code{ background:none; padding:0; }

/* flashes / notes */
.flash{ padding:.6rem .8rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem; }
.flash.warn{ background:var(--warn-bg); color:var(--warn-tx); }
.err{ background:var(--err-bg); color:var(--err-tx); }
.flash.info{ background:var(--info-bg); color:var(--info-tx); }
.err{ padding:.7rem; border-radius:8px; }
.flash.ok{ background:var(--ok-bg); color:var(--ok-tx); }
/* red "flag" box for out-of-credits, with a top-up CTA button */
.flash.err{ background:var(--err-bg); color:var(--err-tx); display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
.flash-cta{ margin-left:auto; background:var(--err-ac); color:#fff; padding:.32rem .75rem; border-radius:6px; text-decoration:none; font-weight:600; font-size:.85rem; white-space:nowrap; }
.flash.info{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
.flash.info .flash-cta{ background:var(--info-ac); }
.flash-cta:hover{ filter:brightness(1.08); }
.note{ color:var(--muted2); font-size:.78rem; border-top:1px solid var(--hair); padding-top:.75rem; margin-top:1.5rem; }
hr{ border:0; border-top:1px solid var(--hair); margin:1.5rem 0; }

/* footer */
.foot{ color:var(--muted2); font-size:.75rem; text-align:center; margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--hair); }
.foot a{ color:var(--muted); text-decoration:none; }
.foot a:hover{ text-decoration:underline; }
/* UI language picker — native <details> disclosure (no JS, works on Tor Safest) */
details.langpick{ margin:1.5rem 0 .25rem; font-size:.8rem; text-align:center; }
details.langpick > summary{ cursor:pointer; color:var(--muted); display:inline-block; list-style:none; user-select:none; }
details.langpick > summary::-webkit-details-marker{ display:none; }
details.langpick > summary:hover{ color:var(--text); }
.langpick-list{ display:flex; flex-wrap:wrap; gap:.2rem .8rem; justify-content:center; margin-top:.6rem; }
.langpick-list a{ color:var(--muted); text-decoration:none; }
.langpick-list a:hover{ text-decoration:underline; }
.langpick-list a.on{ color:var(--text); font-weight:600; text-decoration:underline; }
/* Balance shown as a clickable wallet icon (links to /credits); replaces the word "balance" */
a.walletbal{ display:inline-flex; align-items:center; gap:.3rem; color:var(--muted); text-decoration:none; }
.walleticon{ height:1.05rem; width:auto; display:block; }
/* account icon: sits to the right of the balance in the topbar */
.acct-icon{ display:inline-flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; margin-left:.55rem; padding:.1rem; }
.acct-icon:hover{ color:var(--text); }
.acct-icon svg{ height:1.3rem; width:1.3rem; display:block; }

/* ToS gate (cookieless landing) */
.gate .lead{ font-size:1.1rem; color:var(--text); margin:1.2rem 0 1rem; }
.gate ul{ color:var(--muted); padding-left:1.1rem; margin:0 0 .5rem; }
.gate li{ margin:.4rem 0; }
.agree{ display:flex; gap:.6rem; align-items:flex-start; margin:1.3rem 0 1rem; color:var(--muted); font-size:.92rem; }
.agree input{ margin-top:.25rem; flex:0 0 auto; }
.agree a{ color:var(--link); }

/* legal prose (terms / privacy) */
.prose h2{ font-size:1rem; color:var(--h2); margin:1.4rem 0 .4rem; }
.prose p, .prose li{ color:var(--muted); font-size:.92rem; }
.prose strong{ color:var(--text); }
.prose .updated{ color:var(--muted2); font-size:.8rem; margin-top:.25rem; }
.prose a{ color:var(--link); }
.prose table{ border-collapse:collapse; width:100%; margin:.7rem 0; font-size:.86rem; }
.prose th, .prose td{ border:1px solid var(--border); padding:.4rem .55rem; text-align:left; vertical-align:top; }
.prose th{ color:var(--h2); }

/* on-ramp coin picker (buy credit with another coin) */
.swapbox{ margin:.4rem 0 .2rem; }
.coingrid{ display:flex; flex-wrap:wrap; gap:.45rem; }
.cointile{ display:flex; align-items:center; gap:.4rem; padding:.4rem .55rem; border:1px solid var(--border,#3a3a3a); border-radius:8px; cursor:pointer; font-size:.88rem; line-height:1; }
.cointile:hover{ border-color:var(--link,#6cf); }
.cointile input{ position:absolute; opacity:0; width:0; height:0; }
.cointile:has(input:checked){ border-color:var(--link,#6cf); background:rgba(120,180,255,.10); }
.cointile img{ display:block; }
.cointile .ct-tick{ font-weight:600; }
.cointile .ct-name{ color:var(--muted,#9a9a9a); font-size:.78rem; }

/* /credits funding tabs — CSS-only (radio + :checked) so Monero + Swap work no-JS */
.credit-tabs{ margin-top:1rem; }
.credit-tabs > .ctab-radio{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.ctab-labels{ display:flex; gap:.4rem; border-bottom:1px solid var(--border2); margin-bottom:.2rem; }
.ctab{ padding:.5rem .85rem; cursor:pointer; font-size:.9rem; color:var(--muted); border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; margin-bottom:-1px; }
.ctab:hover{ color:var(--text); }
.ctab-panel{ display:none; }
#ctab-wallet:checked ~ .ctab-labels .ctab[for="ctab-wallet"],
#ctab-xmr:checked    ~ .ctab-labels .ctab[for="ctab-xmr"],
#ctab-swap:checked   ~ .ctab-labels .ctab[for="ctab-swap"]{ color:var(--text); font-weight:600; border-color:var(--border2); border-bottom-color:var(--bg); background:var(--panel); }
#ctab-wallet:checked ~ #panel-wallet,
#ctab-xmr:checked    ~ #panel-xmr,
#ctab-swap:checked   ~ #panel-swap{ display:block; }

/* wallet (Solana USDC) pay row */
.sol-row{ display:flex; align-items:center; gap:.4rem; margin-top:.2rem; }
.sol-row .sol-dollar{ color:var(--muted); font-size:1.05rem; }
.sol-row input{ width:7rem; box-sizing:border-box; padding:.5rem .6rem; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:inherit; font-size:.95rem; }
.sol-reqs{ font-size:.8rem; color:var(--muted); margin:.55rem 0 0; padding-left:1.1rem; line-height:1.45; }
.sol-reqs li{ margin:.15rem 0; }
.sol-status{ font-size:.85rem; margin:.6rem 0 0; min-height:1.1rem; color:var(--muted); }
.sol-status.ok{ color:var(--ok-tx); }
.sol-status.err{ color:var(--err-ac); }

/* wallet chooser modal */
.sol-modal-ov{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.sol-modal{ background:var(--panel); border:1px solid var(--border); border-radius:14px; width:100%; max-width:340px; padding:1rem; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.sol-modal-h{ font-weight:600; font-size:1rem; color:var(--text); margin:.1rem 0 .8rem; }
.sol-wallet{ display:flex; align-items:center; gap:.7rem; width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--border2); border-radius:10px; padding:.65rem .8rem; margin-bottom:.5rem; cursor:pointer; font:inherit; font-size:.95rem; text-align:left; }
.sol-wallet:hover{ border-color:var(--link); }
.sol-wallet img{ width:26px; height:26px; border-radius:6px; display:block; flex:0 0 auto; }
.sol-modal-x{ width:100%; background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; font-size:.88rem; padding:.45rem; margin-top:.2rem; }
.sol-modal-x:hover{ color:var(--text); }
.sol-modal-hint{ font-size:.76rem; color:var(--muted2); margin:.4rem 0 .2rem; line-height:1.35; }

/* /account grouped sections */
.acct-section{ border:1px solid var(--border2); border-radius:12px; padding:.4rem 1rem 1rem; margin:1rem 0; background:var(--panel); }
.acct-section .acct-h{ font-size:1rem; color:var(--text); margin:1rem 0 .3rem; }
.acct-section .acct-subh{ font-size:.9rem; color:var(--h2); margin:1.4rem 0 .3rem; }
.acct-section.danger{ border-color:var(--warn-bd); }
.acct-section.danger .acct-h{ color:var(--warn-tx); }
/* FAQ accordion (native <details>, works no-JS) */
.faq-item{ border:1px solid var(--border2); border-radius:10px; background:var(--panel); margin:.5rem 0; padding:0 .9rem; }
.faq-item > summary{ cursor:pointer; list-style:none; padding:.75rem 0; font-weight:600; color:var(--text); font-size:.95rem; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::after{ content:"+"; color:var(--muted2); font-weight:400; font-size:1.2rem; line-height:1; }
.faq-item[open] > summary::after{ content:"\2212"; }
.faq-a{ padding:0 0 .85rem; color:var(--muted); font-size:.9rem; line-height:1.55; }
.faq-a p{ margin:.5rem 0; } .faq-a ul{ margin:.5rem 0; padding-left:1.1rem; } .faq-a li{ margin:.25rem 0; }
.faq-a strong{ color:var(--text); }
/* /docs index cards */
.doc-list{ display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0 1.4rem; }
.doc-card{ display:block; border:1px solid var(--border2); border-radius:10px; background:var(--panel); padding:.7rem .9rem; text-decoration:none; transition:border-color .12s, transform .12s; }
.doc-card:hover{ border-color:var(--link); transform:translateY(-1px); }
.doc-card .doc-t{ display:block; color:var(--text); font-weight:600; font-size:.95rem; }
.doc-card .doc-d{ display:block; color:var(--muted); font-size:.83rem; margin-top:.15rem; line-height:1.4; }
.reveal-row{ display:flex; gap:.4rem; margin:.1rem 0 .5rem; }
.reveal-row .ghost{ padding:.25rem .7rem; font-size:.8rem; }

/* JS-enhanced coin picker (no-JS keeps the .coingrid tiles) */
.coingrid.enhanced{ display:none; }
.coinpick{ position:relative; max-width:340px; }
.coinpick-trigger{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; padding:.55rem .7rem; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; cursor:pointer; font:inherit; font-size:.95rem; }
.coinpick-trigger .cp-sel{ display:flex; align-items:center; gap:.45rem; min-width:0; }
.coinpick-trigger .cp-sel.placeholder{ color:var(--muted); }
.coinpick-trigger img{ border-radius:50%; display:block; }
.coinpick-trigger .cp-chev{ color:var(--muted); font-size:.7rem; }
.coinpick-panel{ position:absolute; z-index:30; left:0; right:0; margin-top:.3rem; max-height:300px; overflow-y:auto; background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.45); padding:.25rem; }
.coinpick-row{ display:flex; align-items:center; gap:.55rem; width:100%; padding:.45rem .55rem; background:none; border:0; border-radius:6px; color:var(--text); cursor:pointer; font:inherit; font-size:.92rem; text-align:left; }
.coinpick-row:hover{ background:var(--panel2); }
.coinpick-row img{ border-radius:50%; display:block; }
.coinpick-row .cp-name{ color:var(--muted); font-size:.8rem; margin-left:auto; }

/* ── dLLM app shell (chat) — Akash-Chat-style layout (clearnet, JS-enhanced) ─ */
.chatbody, .appbody{ display:flex; flex-direction:column; height:100dvh; overflow:hidden; } /* header on top, then the app row */
.sidetoggle{ display:none; }
.app{ display:flex; flex:1 1 auto; min-height:0; width:100%; } /* sidebar + content, below the full-width header */

/* sidebar */
.sidebar{ width:264px; flex:0 0 264px; background:var(--panel); border-right:1px solid var(--border2);
  display:flex; flex-direction:column; padding:.75rem; box-sizing:border-box; gap:.5rem; }
.side-head{ display:flex; align-items:center; justify-content:space-between; }
.side-logo .logo{ font-size:1.75rem; }
.side-collapse{ display:none; cursor:pointer; color:var(--muted); font-size:1rem; padding:.2rem .4rem; }
.newchat-btn{ display:flex; align-items:center; justify-content:center; gap:.3rem; width:100%; box-sizing:border-box;
  padding:.6rem .8rem; border:1px solid var(--border); border-radius:10px; background:var(--bg);
  color:var(--text); text-decoration:none; font-size:.92rem; font-weight:500; }
.newchat-btn:hover{ background:var(--panel2); }
.newchat-btn .navico{ width:17px; height:17px; flex:0 0 auto; }
.side-history{ flex:1 1 auto; overflow-y:auto; min-height:0; margin:.25rem 0; }
.side-history .hist-row{ display:flex; align-items:center; border-radius:8px; }
.side-history .hist-row:hover{ background:var(--panel2); }
.side-history .hist-row.on{ background:var(--seed-bg); }
.side-history .hist-row.on .hist-item{ font-weight:600; color:var(--text); }
.side-history .hist-item{ flex:1 1 auto; min-width:0; display:block; padding:.45rem .2rem .45rem .6rem; border-radius:8px; color:var(--h2);
  text-decoration:none; font-size:.88rem; overflow:hidden; }
.side-history .hist-title{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-history .hist-sub{ display:block; font-size:.72rem; color:var(--muted2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.side-history .hist-del{ flex:0 0 auto; background:none; border:0; color:var(--muted2); cursor:pointer; font-size:1.05rem; line-height:1; padding:.2rem .55rem; opacity:0; }
.side-history .hist-row:hover .hist-del{ opacity:.75; }
.side-history .hist-del:hover{ color:var(--err-ac); opacity:1; }
.side-history .hist-clear{ display:block; width:100%; text-align:left; background:none; border:0; color:var(--muted2);
  cursor:pointer; font-size:.78rem; padding:.5rem .6rem; margin-top:.3rem; border-top:1px solid var(--hair2); }
.side-history .hist-clear:hover{ color:var(--err-ac); }
.side-history .hist-empty{ color:var(--muted2); font-size:.8rem; padding:.4rem .6rem; }
.hero-enc{ display:flex; align-items:center; justify-content:center; gap:.35rem; color:#16a34a; font-size:.84rem; font-weight:600; margin:.7rem 0 .1rem; }
.hero-enc.hosted{ color:#a855f7; } /* hosted/Venice: purple lock + "Anonymous" (not E2EE) */
.hero-enc svg{ width:15px; height:15px; flex:0 0 auto; }
.hero-note{ color:var(--muted2); font-size:.82rem; margin:.15rem 0 0; }
.side-nav{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,auto); grid-auto-flow:column; gap:2px .35rem; border-top:1px solid var(--hair2); padding-top:.35rem; margin-top:.15rem; }
.side-nav a, .side-link{ display:flex; align-items:center; gap:.45rem; min-width:0; text-align:left; padding:.32rem .4rem; border-radius:7px;
  color:var(--h2); text-decoration:none; font-size:.82rem; white-space:nowrap; overflow:hidden; background:none; border:0; cursor:pointer; font:inherit; line-height:1.15; }
.side-nav a:hover, .side-link:hover{ background:var(--panel2); }
.side-nav .navico{ width:16px; height:16px; flex:0 0 auto; opacity:.7; }
.side-nav a:hover .navico{ opacity:1; }
.side-lang{ border-top:1px solid var(--hair2); margin-top:.35rem; padding-top:.45rem; }
.side-social{ display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.5rem .4rem .2rem; border-top:1px solid var(--hair2); margin-top:.35rem; }
.side-social a{ color:var(--muted2); display:inline-flex; }
.side-social a:hover{ color:var(--text); }
.side-social svg{ width:16px; height:16px; }
.side-social .theme-toggle{ margin:0; display:inline-flex; }
.side-social .theme-toggle .iconbtn{ background:none; border:0; padding:0; display:inline-flex; cursor:pointer; }
.side-social .theme-toggle .ti{ width:16px; height:16px; display:block; opacity:.7; }
.side-social .theme-toggle:hover .ti{ opacity:1; }
.side-lang details.langpick{ margin:0; text-align:left; font-size:.82rem; }
.side-lang .langpick-list{ justify-content:flex-start; margin-top:.45rem; }
.side-theme{ margin:0; }
/* skin switcher (Classic ↔ Argent) — labeled so it can't be mistaken for the
   light/dark theme toggle. */
.side-skin{ margin:.5rem 0 .1rem; }
.skin-switch button{ display:inline-flex; align-items:center; gap:.5rem; width:100%; background:none; border:1px solid var(--border); border-radius:7px; padding:.4rem .55rem; color:var(--muted); font:inherit; font-size:.8rem; cursor:pointer; text-align:left; }
.skin-switch button:hover{ color:var(--text); border-color:var(--border2); }
.skin-switch button b{ color:var(--text); font-weight:600; }
.skin-switch svg{ width:15px; height:15px; flex:0 0 auto; }
.skin-switch-link{ display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--muted); text-decoration:none; }
.skin-switch-link:hover{ color:var(--text); }
.skin-switch-link svg{ width:16px; height:16px; flex:0 0 auto; }
.side-foot{ color:var(--muted2); font-size:.72rem; padding:.5rem .2rem 0; }
.side-foot a{ color:var(--muted2); text-decoration:none; }

/* main column */
.main{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar{ display:flex; flex-wrap:nowrap; align-items:center; gap:.6rem; margin:0; padding:.6rem 1rem; border-bottom:1px solid var(--border2); }
.side-burger{ display:inline-flex; align-items:center; cursor:pointer; font-size:1.25rem; color:var(--h2); padding:.1rem .3rem; }
.topbar-logo{ display:inline-flex; }
.topbar-logo .logo{ font-size:1.7rem; }
.topbar-spacer{ flex:1 1 auto; }
/* retractable sidebar: burger collapses it on desktop, opens it on mobile */
@media (min-width:761px){ .sidetoggle:checked ~ .app .sidebar{ display:none; } }

/* content pages (account / topup / api) inside the app shell */
.content{ flex:1 1 auto; overflow-y:auto; }
.content-inner{ max-width:680px; margin:0 auto; padding:1.5rem 1.1rem 3rem; box-sizing:border-box; }
.content-inner.w620{ max-width:640px; }
.content-inner.w560{ max-width:580px; }
.page-h1{ font-size:1.3rem; margin:.2rem 0 1.1rem; }

/* chat scroll area + centered column */
.chatarea{ flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; }
.chatarea > #thread, .chatarea > .composer-wrap, .chatarea > .continue-form, .chatarea > .postbal-note{
  width:100%; max-width:760px; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; box-sizing:border-box; }
#thread{ flex:0 0 auto; padding-top:1rem; }
.composer-wrap{ position:sticky; bottom:0; background:var(--bg); padding-bottom:.6rem; padding-top:.4rem; margin-top:auto; }

/* empty state (no messages): center hero + composer */
.chatarea.empty{ justify-content:center; align-items:center; }
.chatarea.empty > #thread{ display:none; }
.chatarea.empty .composer-wrap{ position:static; margin-top:0; }
.hero{ text-align:center; margin-bottom:1.2rem; }
.hero-logo{ font-family:'Cal Sans', system-ui, sans-serif; font-weight:400; color:var(--text); font-size:3.5rem; line-height:1; letter-spacing:-.01em; display:inline-block; margin-bottom:.8rem; }
.hero-title{ font-size:1.4rem; color:var(--h2); margin:0; font-weight:600; }
.chatarea:not(.empty) .hero{ display:none; }

/* conversation view (Akash-style): no role labels; user = right bubble; assistant = plain left */
.chatbody .turn .role{ display:none; }
.chatbody .turn{ background:none; border:0; padding:0; margin:1rem 0; }
.chatbody .turn.user{ text-align:right; }
.chatbody .turn.user .body{ display:inline-block; text-align:left; background:var(--panel2); border-radius:14px; padding:.55rem .9rem; max-width:85%; white-space:pre-wrap; }
.chatbody .turn.assistant{ background:none; border:0; }

/* per-assistant-message actions (copy / regenerate / branch) — lucide icons */
.msg-actions{ display:flex; gap:.1rem; margin-top:.45rem; }
.chatbody .turn.user .msg-actions{ justify-content:flex-end; }
.act{ background:none; border:0; color:var(--muted2); cursor:pointer; padding:.32rem; border-radius:6px; display:inline-flex; line-height:0; }
.act:hover{ color:var(--text); background:var(--panel2); }
.act.done{ color:#2faa6a; }
.act svg{ display:block; }

/* sidebar history row: rename (pencil) + delete (trash), icons appear on hover */
.side-history .hist-act{ flex:0 0 auto; background:none; border:0; color:var(--muted2); cursor:pointer; padding:.3rem .3rem; line-height:0; opacity:0; display:inline-flex; }
.side-history .hist-row:hover .hist-act{ opacity:.65; }
.side-history .hist-act:hover{ opacity:1; color:var(--text); }
.side-history .hist-del:hover{ color:var(--err-ac); }
.side-history .hist-act svg{ display:block; }

/* composer (big rounded input) */
.composer{ margin:0; border:1px solid var(--border); border-radius:16px; background:var(--panel);
  padding:.6rem .8rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.composer textarea{ border:0; background:none; padding:.3rem .1rem; min-height:1.6rem; max-height:40dvh;
  resize:none; width:100%; box-sizing:border-box; }
.composer textarea:focus{ outline:none; }
.composer-bar{ display:flex; align-items:center; gap:.5rem; margin-top:.3rem; }
.composer-left{ flex:1 1 auto; min-width:0; }
.composer-right{ display:flex; align-items:center; gap:.4rem; }
.composer .modelsel{ max-width:100%; border-radius:10px; }
.modelpill{ font-size:.82rem; color:var(--muted); }
.sendbtn{ width:auto; height:auto; padding:.25rem; border-radius:8px; background:none; color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.sendbtn:hover{ color:var(--link); background:var(--panel2); }
.sendbtn svg{ width:22px; height:22px; }
.webtoggle{ padding:.25rem; border-radius:8px; background:none; border:none; cursor:pointer; color:var(--muted2);
  display:inline-flex; align-items:center; justify-content:center; line-height:1; flex:0 0 auto; transition:color .12s, background .12s; }
/* width:20px alone isn't enough for the tor <img>: the global `img{max-width:100%}`
   (line 57) clamps it to the button's content box, so on a squeezed mobile composer
   the img shrank below the inline <svg> globe (which that rule doesn't cover). Pin both
   icons identically with max-width:none + no flex-shrink. */
.webtoggle svg, .webtoggle img{ width:20px; height:20px; max-width:none; flex:0 0 auto; display:block; }
.webtoggle:hover{ background:var(--panel2); }
/* privacy-mode colors: off = muted/gray, anon = green accent, tor = purple accent */
.webtoggle.mode-off{ color:var(--muted2); opacity:.55; }
.webtoggle.mode-anon{ color:#16a34a; }
.dark .webtoggle.mode-anon{ color:#4ade80; }
.webtoggle.mode-tor{ color:#7d4698; }
.dark .webtoggle.mode-tor{ color:#b07fd0; }
.composer-note{ text-align:center; color:var(--muted2); font-size:.74rem; margin:.5rem 0 0; }
/* image-settings popover (aspect ratio / format / style / negative prompt) */
.imgsetwrap{ position:relative; display:inline-flex; }
#imgsettings{ opacity:1; }
.imgsetpop{ position:absolute; bottom:calc(100% + 8px); right:0; z-index:40; width:248px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.7rem .8rem; box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:.65rem; }
.imgset-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.imgset-row.imgset-col{ flex-direction:column; align-items:stretch; gap:.3rem; }
.imgset-lbl{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); white-space:nowrap; }
.imgset-seg{ display:flex; flex-wrap:wrap; gap:.25rem; justify-content:flex-end; }
.imgset-seg button{ background:var(--panel2); border:1px solid var(--border2); color:var(--muted); border-radius:6px; padding:.25rem .45rem; font-size:.72rem; cursor:pointer; line-height:1.2; }
.imgset-seg button:hover{ color:var(--text); }
.imgset-seg button.on{ background:var(--btn-bg); color:var(--btn-text); border-color:var(--btn-bg); }
.imgset-sel{ background:var(--panel2); border:1px solid var(--border2); color:var(--text); border-radius:6px; padding:.3rem .4rem; font-size:.8rem; max-width:130px; }
.imgset-inp{ background:var(--panel2); border:1px solid var(--border2); color:var(--text); border-radius:6px; padding:.35rem .5rem; font-size:.8rem; width:100%; }
.composer-note .modelcost{ color:var(--muted2); }
.chatbody details.langpick{ margin:.5rem 0 0; }

/* mobile: sidebar becomes an off-canvas drawer */
@media (max-width:760px){
  .sidebar{ position:fixed; z-index:50; top:0; left:0; height:100dvh; width:min(88vw,308px); flex-basis:auto; transform:translateX(-100%);
    transition:transform .18s ease; box-shadow:0 0 40px rgba(0,0,0,.3); }
  .sidetoggle:checked ~ .app .sidebar{ transform:none; }
  .side-scrim{ display:none; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.45); }
  .sidetoggle:checked ~ .side-scrim{ display:block; }
}