/* Free AI console — local AI workbench.
   Paper base, ink text, one deep-teal accent. Mono only where scanning
   benefits (model IDs, filenames, code). */
:root {
  --paper:#f3f2ee; --card:#fff; --card2:#faf9f6; --ink:#1f2328; --muted:#6b7178;
  --line:#dcdad3; --teal:#12716a; --teal-ink:#0c5751; --teal-wash:#e4efee; --teal-line:#cfe3e1;
  --sidebar:#20242a; --sidebar-ink:#d6dbe0; --sidebar-line:#333a42;
  --code-inline:#eceae4; --notice-bg:#fbf3e2; --notice-line:#ecd9ad; --notice-ink:#6a4e14;
  --err-bg:#fbeae7; --err-line:#e6b6ae; --red:#b23b2e; --fs:15px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace;
}
html[data-theme=dark]{
  --paper:#16191d; --card:#1e2227; --card2:#252a31; --ink:#e4e9ee; --muted:#96a0aa;
  --line:#2e353d; --teal:#2a9d92; --teal-ink:#8fd6cb; --teal-wash:#173532; --teal-line:#245049;
  --sidebar:#111417; --sidebar-line:#262c34;
  --code-inline:#2a3138; --notice-bg:#332d1c; --notice-line:#5a4a22; --notice-ink:#e6cf8a;
  --err-bg:#3a2320; --err-line:#6b3a33; --red:#f08b7f;
}
html[data-size=small]{--fs:14px}
html[data-size=large]{--fs:17px}

/* ============================ THEMES (palettes) ============================
   Every palette recolors the accent ramp (--teal* tokens are the app's single
   accent, used by buttons, links, focus rings, chips, the guide banner and
   active steps) and tints the sidebar, for BOTH light and dark. The neutral
   base (paper / card / ink / line) is shared per mode, so contrast and legibility
   stay consistent while each theme feels distinct. Default (no attribute, or
   "teal") uses the :root / [data-theme=dark] values above. Accents are chosen to
   hold white button text and give AA-legible link text on their wash. */

/* Indigo */
html[data-palette=indigo]{--teal:#4f46e5;--teal-ink:#3730a3;--teal-wash:#eceafe;--teal-line:#d7d3f7;--sidebar:#1c1b2e;--sidebar-line:#2f2c47}
html[data-palette=indigo][data-theme=dark]{--teal:#7b74ee;--teal-ink:#c3bff8;--teal-wash:#211f45;--teal-line:#39346a;--sidebar:#131223;--sidebar-line:#282544}
/* Violet */
html[data-palette=violet]{--teal:#7c3aed;--teal-ink:#5b21b6;--teal-wash:#f2e9fe;--teal-line:#e2d2fb;--sidebar:#221a30;--sidebar-line:#382b4c}
html[data-palette=violet][data-theme=dark]{--teal:#9d6ff0;--teal-ink:#d3bbf7;--teal-wash:#2a1d47;--teal-line:#463370;--sidebar:#191223;--sidebar-line:#2f2340}
/* Azure */
html[data-palette=azure]{--teal:#1667d4;--teal-ink:#0f4c9c;--teal-wash:#e6f0fc;--teal-line:#c9def8;--sidebar:#17202e;--sidebar-line:#2a3242}
html[data-palette=azure][data-theme=dark]{--teal:#3f8ae5;--teal-ink:#9ec8f5;--teal-wash:#132a45;--teal-line:#244a72;--sidebar:#0f1826;--sidebar-line:#22303f}
/* Emerald */
html[data-palette=emerald]{--teal:#0e8a57;--teal-ink:#0a6b43;--teal-wash:#e4f5ed;--teal-line:#c6e9d7;--sidebar:#16211c;--sidebar-line:#26382e}
html[data-palette=emerald][data-theme=dark]{--teal:#16a86a;--teal-ink:#68d6a4;--teal-wash:#123528;--teal-line:#1f5540;--sidebar:#0e1712;--sidebar-line:#213229}
/* Rose */
html[data-palette=rose]{--teal:#c62a54;--teal-ink:#93213f;--teal-wash:#fce8ee;--teal-line:#f6cbd7;--sidebar:#271a1f;--sidebar-line:#412a32}
html[data-palette=rose][data-theme=dark]{--teal:#df5876;--teal-ink:#f4a8ba;--teal-wash:#3a1f28;--teal-line:#63333f;--sidebar:#1e1418;--sidebar-line:#3a2028}
/* Copper */
html[data-palette=copper]{--teal:#a85826;--teal-ink:#7f3f19;--teal-wash:#fbeade;--teal-line:#f0d2ba;--sidebar:#241c16;--sidebar-line:#3d2f24}
html[data-palette=copper][data-theme=dark]{--teal:#cf7b3f;--teal-ink:#eebf97;--teal-wash:#38271a;--teal-line:#5e4128;--sidebar:#1a130d;--sidebar-line:#33251a}
/* Graphite (neutral, minimal) */
html[data-palette=slate]{--teal:#475569;--teal-ink:#334155;--teal-wash:#eef1f5;--teal-line:#d6dde6;--sidebar:#1e242c;--sidebar-line:#333d49}
html[data-palette=slate][data-theme=dark]{--teal:#7386a0;--teal-ink:#c2ccda;--teal-wash:#222a35;--teal-line:#3a4655;--sidebar:#12161b;--sidebar-line:#262d36}

/* Smooth, subtle cross-fade when the theme changes (added by JS after first
   paint, so it never animates the initial load). */
html.theme-ready body,
html.theme-ready .btn,
html.theme-ready .card,
html.theme-ready .sidebar,
html.theme-ready .dropdown,
html.theme-ready .bubble,
html.theme-ready input,
html.theme-ready select,
html.theme-ready textarea{transition:background-color .22s ease,border-color .22s ease,color .22s ease}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* the hidden attribute must win over display rules */
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs);line-height:1.5}
.muted{color:var(--muted);font-size:13px}

:root{--sb-w:240px}
.layout{display:grid;grid-template-columns:var(--sb-w) 1fr;height:100vh}
.layout.show-art{grid-template-columns:var(--sb-w) 1fr clamp(300px,28vw,380px)}
.layout.sb-collapsed{grid-template-columns:1fr}
.layout.sb-collapsed.show-art{grid-template-columns:1fr clamp(300px,28vw,380px)}
.layout.sb-collapsed .sidebar{display:none}
body.resizing{cursor:col-resize;user-select:none}

/* buttons */
.btn{font:500 13px var(--sans);padding:8px 14px;border-radius:7px;
  border:1px solid var(--teal);background:var(--teal);color:#fff;cursor:pointer}
.btn:hover{background:var(--teal-ink);border-color:var(--teal-ink)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--muted);background:var(--card2)}
.btn.small{padding:5px 10px;font-size:12px}
.btn.send{padding:9px 22px}
.btn:disabled{opacity:.45;cursor:default}

/* LEFT sidebar */
.sidebar{background:var(--sidebar);color:var(--sidebar-ink);position:relative;
  display:flex;flex-direction:column;padding:12px 10px;min-width:0;min-height:0;overflow:hidden}
.sb-top,.sb-link,.sb-search,.sidebar-foot{flex:none}
.sb-top{display:flex;gap:6px;align-items:center}
.sb-top .newchat{flex:1}
.sb-icon{background:transparent;border:1px solid var(--sidebar-line);color:var(--sidebar-ink);
  border-radius:7px;width:32px;height:34px;cursor:pointer;font-size:16px}
.sb-icon:hover{background:#2a3038}
.sb-link{display:block;margin-top:8px;padding:8px 9px;border-radius:7px;font-size:13px;color:#b9c0c8;text-decoration:none}
.sb-link:hover{background:#2a3038;color:#fff}
.dbeta-sm{font-size:10px;color:#8b939c;margin-left:4px}
.sb-search{margin-top:10px}
.sb-search input{width:100%;font:13px var(--sans);padding:7px 9px;border-radius:7px;
  border:1px solid var(--sidebar-line);background:#181c21;color:var(--sidebar-ink)}
.sb-search input:focus{outline:none;border-color:#4a5561}
.sb-section{margin-top:10px}
.sb-label{font-size:11px;color:#8b939c;padding:4px 9px 2px;letter-spacing:.02em}
.sb-empty{font-size:12px;color:#8b939c;padding:8px 9px}
.sb-resize{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize}
.sb-resize:hover{background:#3d454e}
.newchat{width:100%;background:transparent;border:1px solid var(--sidebar-line);
  color:var(--sidebar-ink)}
.newchat:hover{background:#2a3038;border-color:#3d454e}
.convlist{margin-top:12px;overflow-y:auto;flex:1;min-height:0}
.conv{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:7px;
  font-size:13px;color:#b9c0c8;cursor:pointer;min-width:0}
.conv .pin{display:none;font-size:11px}
.conv.pinned .pin{display:inline}
.conv .cmeta{font-size:11px;color:#7b838c;white-space:nowrap}
.conv .busy-dot{display:none;width:7px;height:7px;border-radius:50%;background:#3fb6a6;animation:blink 1s steps(1) infinite}
.conv.busy .busy-dot{display:inline-block}
.conv .more{visibility:hidden;background:transparent;border:0;color:#aab2ba;
  font-size:16px;line-height:1;padding:0 4px;cursor:pointer;border-radius:4px}
.conv:hover .more,.conv.active .more{visibility:visible}
.conv .more:hover{background:#3a424b;color:#fff}
.conv .rename{flex:1;min-width:0;font:13px var(--sans);padding:3px 6px;border-radius:5px;
  border:1px solid #4a5561;background:#181c21;color:#fff}
.conv:hover{background:#2a3038;color:#fff}
.conv.active{background:#2f363f;color:#fff}
.conv .ct{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.conv .del{visibility:hidden;color:#8b939c;font-family:var(--mono);padding:0 3px}
.conv:hover .del{visibility:visible}
.conv .del:hover{color:#e5867a}
/* G5.1 slice 23: chat folders, Starred and Archive views, Select, Tidy, Sort with AI */
.sb-views,.sb-tools,.sb-bulk{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;flex:none}
.sb-views button,.sb-tools button,.sb-bulk button{font:12px var(--sans);padding:4px 8px;border-radius:6px;
  border:1px solid var(--sidebar-line);background:transparent;color:#b9c0c8;cursor:pointer}
.sb-views button{flex:1}
.sb-views button.on{background:#2f363f;color:#fff;border-color:#4a5561}
.sb-views button:hover,.sb-tools button:hover,.sb-bulk button:hover{background:#2a3038;color:#fff}
.sb-tools button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.sb-bulk{align-items:center;padding:6px;border:1px solid var(--sidebar-line);border-radius:7px}
.sb-bulk #bulkCount{flex:1 0 100%;font-size:12px;color:#d6dbe0}
.sb-bulk button.danger{color:#e5867a}
.sb-msg{margin-top:6px;font-size:12px;color:#d6dbe0;padding:4px 9px;border-radius:6px;background:#22282f;flex:none}
.conv .star{display:none;font-size:11px;color:#e3b341}
.conv.important .star{display:inline}
.conv .pick{margin:0;accent-color:var(--teal)}
.conv.picked{background:#2a3038}
.conv .arch{font-size:10px;color:#8b939c;border:1px solid #3d454e;border-radius:4px;padding:0 4px}
.fold{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:7px;font-size:13px;color:#d6dbe0;cursor:pointer}
.fold:hover{background:#2a3038}
.fold .caret{display:inline-block;width:10px;font-size:10px;transition:transform .12s}
.fold.open .caret{transform:rotate(90deg)}
.fold .fname{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fold .fcount{font-size:11px;color:#7b838c}
.fold .more{visibility:hidden;background:transparent;border:0;color:#aab2ba;font-size:16px;line-height:1;padding:0 4px;cursor:pointer;border-radius:4px}
.fold:hover .more{visibility:visible}
.fold-body{padding-left:12px}
.fold.drop,.sb-section.drop > .sb-label{outline:1px dashed var(--teal);outline-offset:-1px;border-radius:7px}
.org-modal .modal-card{max-width:520px}
.org-modal .btn.danger{background:var(--red);border-color:var(--red)}
.org-list{margin:8px 0 0;padding-left:18px;max-height:46vh;overflow:auto;font-size:13px}
.org-list li{margin:2px 0}
.org-list .why{color:var(--muted);font-size:12px}
.org-group{border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-top:8px}
.org-group label{display:flex;align-items:center;gap:8px}
.org-group input[type=text]{flex:1;min-width:0;font:13.5px var(--sans);padding:5px 8px;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);color:var(--ink)}
.org-group .chats{margin-top:4px;font-size:12px;color:var(--muted)}
.org-field{width:100%;box-sizing:border-box;font:13.5px var(--sans);padding:7px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);color:var(--ink)}
.sidebar-foot{border-top:1px solid var(--sidebar-line);padding-top:10px;
  display:flex;flex-direction:column;gap:8px}
.gw-row{display:flex;align-items:center;gap:7px;padding:0 4px}
.float-toggle{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;
  border:1px solid var(--sidebar-line);background:transparent;color:var(--sidebar-ink);
  font:13px var(--sans);cursor:pointer;user-select:none}
.float-toggle:hover{background:#2a3038}
.float-toggle input{margin:0;cursor:pointer;flex:none}
.float-toggle.disabled{opacity:.5;cursor:not-allowed}
.float-toggle.disabled input{cursor:not-allowed}
.settings-btn{width:100%;text-align:left;font:13px var(--sans);padding:8px 10px;border-radius:7px;
  border:1px solid var(--sidebar-line);background:transparent;color:var(--sidebar-ink);cursor:pointer}
.settings-btn:hover{background:#2a3038}
.sb-build{font:11px var(--mono);color:#8b939c;padding:0 4px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.settings-btn .gear{display:inline-block;margin-right:4px}
.dropdown.up{top:auto;bottom:calc(100% + 6px);left:0;right:auto;min-width:240px;padding:8px}
/* the settings menu opens upward from the sidebar foot: cap it at the window and scroll,
   so a short laptop screen never hides the top entries or the bottom buttons */
.dropdown.up{max-height:calc(100vh - 72px);overflow-y:auto}
.dropdown .dp-block[hidden]{display:none}
.menu-label{font-size:11px;color:var(--muted);margin:6px 2px 4px}
.seg{display:flex;gap:4px;margin-bottom:2px}
.seg button{flex:1;font:12px var(--sans);padding:5px 6px;border-radius:6px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer}
.seg button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin:2px 2px 4px}
.swatches button{position:relative;height:24px;border-radius:7px;cursor:pointer;padding:0;
  border:1px solid rgba(0,0,0,.12);background:linear-gradient(135deg,var(--sw) 0%,var(--sw2,var(--sw)) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25);transition:transform .12s ease,box-shadow .12s ease}
.swatches button:hover{transform:translateY(-1px)}
.swatches button.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--sw);border-color:transparent}
.swatches button.on::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.menu-check{display:flex;align-items:center;gap:8px;font:13px var(--sans);padding:5px 2px;color:var(--ink);cursor:pointer}
.menu-check input{accent-color:var(--teal)}
.dropdown .menu-item{font:13px var(--sans)}
.dot{width:9px;height:9px;border-radius:50%}
.dot.up{background:#3fb6a6} .dot.down{background:#c2554a}

.ctx,.dropdown{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px;z-index:50;min-width:170px}
.ctx{position:fixed}
.ctx button,.dropdown button{display:block;width:100%;text-align:left;font:13px var(--sans);
  padding:7px 10px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--ink)}
.ctx button:hover,.dropdown button:hover{background:var(--teal-wash)}
.ctx button.danger{color:var(--red)}
.menu-wrap{position:relative}
.dropdown{top:calc(100% + 4px);right:0}
.bar-right{display:flex;gap:8px;align-items:center}

/* CENTER */
.center{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:0 14px}
.bar{display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--line)}
.bar-left{display:flex;gap:8px}
.guide{background:var(--teal-wash);color:var(--teal-ink);border:1px solid var(--teal-line);
  border-radius:8px;padding:8px 12px;margin:10px 0 2px;font-size:13.5px;font-weight:500}
.guide:empty{display:none}
.steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.step{font-size:12px;padding:2px 9px;border-radius:12px;border:1px solid var(--teal-line);
  background:var(--card);color:var(--muted)}
.step.done{background:var(--teal);color:#fff;border-color:var(--teal)}
.step.current{color:var(--teal-ink);border-color:var(--teal);font-weight:600;
  box-shadow:0 0 0 2px var(--teal-line)}
.step-msg{font-weight:500}

.controls{display:flex;flex-wrap:wrap;gap:10px 14px;padding:12px 0;align-items:end}
.field{display:flex;flex-direction:column;gap:4px}
.field>span{font-size:12px;color:var(--muted)}
.field.grow{flex:1 1 300px;min-width:240px}
/* the Model line: the label, then "Show all" / "Check again" as small links; wraps on a phone */
.model-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.model-head #modelLabel{overflow-wrap:anywhere}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--teal);cursor:pointer;text-decoration:underline}
.linkbtn:disabled{color:var(--muted);cursor:default;text-decoration:none}
.linkbtn[hidden]{display:none}
.field.key{flex:1 1 220px}
select,input[type=text],input[type=password],#modelFilter{
  font:14px var(--sans);padding:7px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--card);color:var(--ink);width:100%}
#purpose{min-width:200px;font-weight:500}
#model{font-family:var(--mono);font-size:12.5px}
.modelrow,.keyrow{display:flex;gap:6px}
.modelrow #modelFilter{max-width:120px}
.modelrow select{flex:1} .keyrow input{flex:1}

.output{flex:1;min-height:0;overflow-y:auto;padding:14px 0 6px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.empty{color:var(--muted);text-align:center;margin:12vh auto 0;max-width:44ch}

.turn{margin-bottom:18px}
.who{font-size:12px;color:var(--muted);margin-bottom:4px}
.turn.user .bubble{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--teal);border-radius:8px;padding:9px 12px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.turn.ai .bubble{overflow-wrap:anywhere}
.turn.ai .bubble p{margin:.45em 0}
/* Reform B: a long prompt folds to its first lines; the button under it toggles */
.turn.user .bubble.foldable.folded{max-height:7.6em;overflow:hidden;position:relative}
.turn.user .bubble.foldable.folded::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;
  background:linear-gradient(to bottom,transparent,var(--card));pointer-events:none}
.turn.user .fold{display:block;margin:4px 0 0 auto;font:11px var(--mono);color:var(--muted);
  background:none;border:1px solid var(--line);border-radius:5px;padding:2px 8px;cursor:pointer}
.turn.user .fold:hover{background:var(--line)}
/* G5.2 part 2: Copy under each answer, and on his own message when the pointer is over it */
.turn .msgacts{display:flex;gap:6px;margin-top:5px}
.turn.user .msgacts{justify-content:flex-end;opacity:0;transition:opacity .15s}
.turn.user:hover .msgacts,.turn.user .msgacts:focus-within{opacity:1}
.turn .copybtn{font:11px var(--mono);color:var(--muted);background:none;border:1px solid var(--line);
  border-radius:5px;padding:2px 8px;cursor:pointer}
.turn .copybtn:hover{background:var(--line);color:var(--ink)}
/* G5.2 part 10: Read aloud under an answer; Pause or Resume and Stop while it is read */
.turn .ps-ctl{display:inline-flex;gap:6px}
.turn .ps-ctl.ps-on .copybtn{border-color:var(--accent,var(--ink));color:var(--ink)}
/* G5.2 part 8: Edit turns his message into a box with Cancel and Send */
.turn.user.editing .bubble,.turn.user.editing .fold,.turn.user.editing .msgacts{display:none}
.turn .editbox{display:flex;flex-direction:column;gap:6px}
.turn .editarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;line-height:1.45;padding:9px 12px;
  background:var(--card);color:var(--ink);border:1px solid var(--teal);border-radius:8px}
.turn .editnote{margin:0;font-size:12px;color:var(--muted)}
.turn .editnote:empty{display:none}
.turn .editbtns{display:flex;gap:6px;justify-content:flex-end}
.md h2,.md h3,.md h4{margin:.9em 0 .35em;line-height:1.3}
.md h2{font-size:1.2em} .md h3{font-size:1.08em} .md h4{font-size:1em}
.md ul,.md ol{margin:.35em 0 .6em;padding-left:1.4em}
.md li{margin:.18em 0}
.md li>ul,.md li>ol{margin:.15em 0 .2em}
.md blockquote{margin:.5em 0;padding:.3em .9em;border-left:3px solid var(--teal);color:var(--muted);background:var(--card)}
.md hr{border:0;border-top:1px solid var(--line);margin:.9em 0}
.md table{border-collapse:collapse;margin:.6em 0;font-size:.95em;max-width:100%;display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--line);padding:5px 9px;text-align:left;vertical-align:top}
.md th{background:var(--card2);font-weight:600}
.md a{color:var(--teal-ink)}
.md strong{font-weight:650}
.turn.ai .bubble img{max-width:100%;border-radius:8px;border:1px solid var(--line)}
.turn .tokens{font:11px var(--mono);color:var(--muted);margin-top:5px}
.caret{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;
  background:var(--teal);animation:blink 1s steps(1) infinite}

/* file card in chat (code itself lives in the Files pane) */
.filechip{display:flex;align-items:center;gap:8px;margin:8px 0;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--card)}
.filechip .ficon{font-size:15px}
.filechip .fname{font:600 13px var(--mono)}
.filechip .fmeta{color:var(--muted);font-size:12px;flex:1}
.filechip .fbtns{display:flex;gap:6px}
.filechip button{font:11px var(--mono);padding:3px 8px;border-radius:5px;
  border:1px solid var(--line);background:var(--card2);cursor:pointer;color:var(--ink)}
.filechip button:hover{background:var(--line)}
.filechip.pending{border-style:dashed;color:var(--muted)}
/* Reform B: the answer delivered as a real .pdf/.docx/.xlsx/.pptx */
.filechip.realfile .ficon{font-size:17px}
.filechip.realfile a.dl{font:11px var(--mono);padding:3px 10px;border-radius:5px;text-decoration:none;
  color:#fff;background:var(--teal);border:1px solid var(--teal)}
.filechip.realfile a.dl:hover{filter:brightness(1.1)}

/* code block card */
.code{margin:10px 0;border:1px solid #2a3138;border-radius:8px;overflow:hidden}
.code-head{display:flex;align-items:center;justify-content:space-between;
  background:#1b2026;color:#c7ced6;padding:5px 10px;font:12px var(--mono)}
.code-head .lang{color:#8fb8b3}
.code-head .cbtns{display:flex;gap:6px}
.code-head button{font:11px var(--mono);padding:3px 8px;border-radius:5px;
  border:1px solid #3a434c;background:#232a31;color:#cfd6dd;cursor:pointer}
.code-head button:hover{background:#2c343c}
.code pre{margin:0;background:#14181c;color:#e6edf3;padding:12px;overflow-x:auto;
  font:13px/1.5 var(--mono)}
.turn.ai code{font-family:var(--mono);font-size:13px;background:var(--code-inline);
  padding:1px 5px;border-radius:4px}
.turn.ai pre code{background:none;padding:0}

.errbox{border:1px solid var(--err-line);background:var(--err-bg);color:var(--red);
  border-radius:8px;padding:9px 12px;font:13px var(--mono);
  white-space:pre-wrap;overflow-wrap:anywhere}
.genwait{padding:10px 12px;border:1px dashed var(--line);border-radius:8px;background:var(--card);line-height:1.6}
.genwait .caret{margin-right:6px}
.errbox .hint{font-family:var(--sans);font-size:13.5px;color:var(--ink);margin-bottom:8px}
.errbox .raw{opacity:.85}
.errbox details{margin-top:8px}
.errbox summary{cursor:pointer;font-family:var(--sans);font-size:12.5px;color:var(--ink)}
.errbox pre{margin:6px 0 0;max-height:240px;overflow:auto;font-size:11.5px;background:var(--code-inline);color:var(--ink);padding:8px;border-radius:6px;white-space:pre-wrap}
.errbtns{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.notice{background:var(--notice-bg);border:1px solid var(--notice-line);color:var(--notice-ink);
  border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:10px}

/* finance row + dataset chips */
.finrow{display:flex;gap:6px;align-items:center;padding:6px 0 0;flex-wrap:wrap}
.finrow > input{flex:1 1 260px;min-width:200px}
.finrow > select{width:auto}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:18px 22px;
  max-width:680px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-head h2{margin:0;font-size:17px}
.modal-card .dico{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer}
.modal-card p{margin:6px 0 12px}
.prop-row{display:flex;gap:8px;align-items:center;margin:6px 0 10px}
.prop-row label.inline{display:flex;align-items:center;gap:8px;flex:1;font-size:12.5px;color:var(--muted)}
.prop-row label.inline select{flex:1;height:34px}
.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
.prop-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.prop-grid label.wide{grid-column:1/-1}
.prop-grid input,.prop-grid select{height:34px;width:100%;flex:none;font:13.5px var(--sans);padding:6px 9px;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)}
.prop-grid input:focus,.prop-grid select:focus{outline:none;border-color:var(--teal)}
.modal-btns{display:flex;align-items:center;gap:8px;margin-top:14px}
.modal-btns .grow{flex:1}
@media (max-width:600px){ .prop-grid{grid-template-columns:1fr} }
.fincheck{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.fincheck input{accent-color:var(--teal)}
.datasets{display:flex;gap:6px;flex-wrap:wrap}
.dset{display:inline-flex;align-items:center;gap:6px;font:12px var(--mono);padding:4px 8px;border-radius:14px;
  border:1px solid var(--teal-line);background:var(--teal-wash);color:var(--teal-ink)}
.dset .x{cursor:pointer;opacity:.8}
.dset .x:hover{opacity:1}

/* attachments */
.attach{display:flex;align-items:center;gap:10px;padding:8px 0}
.attach .muted{flex:1}
.attach-actions{display:flex;gap:6px}
.thumbs{display:flex;gap:6px}
.thumb{position:relative;width:40px;height:40px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .x{position:absolute;top:-1px;right:-1px;background:#000a;color:#fff;
  font:11px var(--mono);width:15px;height:15px;line-height:15px;text-align:center;
  cursor:pointer;border-bottom-left-radius:5px}

/* composer — --petai-bottom-inset (bottom-inset.js) is the strip of this window that falls
   behind the OS taskbar, which CSS can't see; reserving it keeps the box and Send reachable
   in a window that isn't maximised. It is 0 when nothing is covered. */
.composer{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:8px 0 calc(14px + var(--petai-bottom-inset,0px))}
#prompt{flex:1;resize:none;font-family:var(--sans);font-size:var(--fs);line-height:1.5;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);
  max-height:200px}
#prompt:focus{outline:none;border-color:var(--teal)}
.composer-btns{display:flex;flex-direction:column;gap:6px;width:120px}
.composer-btns .btn{width:100%}

/* RIGHT artifacts pane */
.artpane{display:none}
.layout.show-art .artpane{display:flex}
.artpane{background:var(--card);border-left:1px solid var(--line);
  flex-direction:column;min-width:0;overflow:hidden}
.art-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px;border-bottom:1px solid var(--line);font-weight:600;font-size:13px}
.art-head .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.art-head>div{display:flex;gap:6px;flex-shrink:0}
.artlist{overflow-y:auto;overflow-x:hidden;padding:10px;display:flex;flex-direction:column;gap:10px}
.artcard{border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0}
.artcard .top{display:flex;gap:6px;align-items:center;padding:7px 8px;background:var(--card2)}
.artcard .fname{flex:1;font:12px var(--mono);padding:4px 6px;border:1px solid var(--line);
  border-radius:5px;background:var(--card);color:var(--ink);min-width:0}
.artcard pre{margin:0;max-height:180px;overflow:auto;background:#14181c;color:#e6edf3;
  padding:10px;font:12px/1.45 var(--mono)}
.art-empty{color:var(--muted);font-size:13px;padding:8px}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}

@media (max-width:900px){
  .layout,.layout.show-art{grid-template-columns:1fr}
  .sidebar{display:none}
  .layout.show-art .artpane{position:fixed;inset:0 0 0 auto;width:min(92vw,360px);
    z-index:20;box-shadow:-8px 0 24px rgba(0,0,0,.15)}
}

.tools-toggle{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none;margin-right:6px}
.tools-toggle input{accent-color:var(--teal)}
.tools-toggle.disabled{opacity:.45;cursor:not-allowed}

.tools-used{font-size:11.5px;color:var(--teal-ink);margin-bottom:5px}

.sym-wrap{position:relative;display:inline-block}
.sym-list{position:absolute;bottom:calc(100% + 4px);left:0;min-width:240px;background:var(--card,#151a21);border:1px solid var(--line,#2a3138);border-radius:8px;z-index:100;box-shadow:0 -8px 24px rgba(0,0,0,.35);display:block}
.sym-item{padding:7px 10px;cursor:pointer;font-size:13px}
.sym-item:hover,.sym-item.on{background:var(--teal-wash,#123)}
.sym-item .s{font-weight:600}
.sym-item .n{color:var(--muted,#8b98a5);font-size:11.5px}

.sym-list::-webkit-scrollbar{width:9px}.sym-list::-webkit-scrollbar-thumb{background:#3a4552;border-radius:6px}

/* jump-to-latest button (floats at the bottom of the chat while scrolled up) */
#scrollDown{position:fixed;z-index:60;transform:translateX(-50%);width:36px;height:36px;
  border-radius:50%;display:none;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:var(--card,#1e2329);color:var(--fg,#e6e6e6);border:1px solid var(--line,#333);
  box-shadow:0 2px 10px rgba(0,0,0,.35);transition:background .15s,opacity .15s}
#scrollDown.show{display:flex}
#scrollDown:hover{background:var(--card2,#2a2f36)}

/* live option chain: OTM shading, ATM row, and value-change flash */
.oc-table{width:100%;border-collapse:collapse;font-size:12px}
.oc-table th,.oc-table td{border:1px solid var(--line,#2e353d);padding:3px 8px;text-align:right;white-space:nowrap}
.oc-table th{background:var(--card2,#252a31)}
.oc-strike{font-weight:700;text-align:center !important;background:var(--card2,#252a31)}
.oc-otm{background:rgba(150,164,173,.12)}            /* out-of-the-money side, muted */
.oc-atm td{background:rgba(42,157,146,.16);font-weight:600}   /* at-the-money row */
.oc-up{animation:ocFlashUp 1.1s ease-out}
.oc-dn{animation:ocFlashDn 1.1s ease-out}
@keyframes ocFlashUp{0%{background:rgba(59,165,93,.75)}100%{background:transparent}}
@keyframes ocFlashDn{0%{background:rgba(224,71,60,.75)}100%{background:transparent}}

/* collapsible setup/settings (top) and finance toolbar/attach (bottom) for more chat space */
main.center.hide-top #guide,
main.center.hide-top .controls { display:none !important; }
main.center.hide-bottom #finRow,
main.center.hide-bottom .attach { display:none !important; }
#collapseTop, #collapseBottom { white-space:nowrap; }

/* let the [hidden] attribute win over .tools-toggle's display (Tools shows in Finance only) */
.tools-toggle[hidden]{display:none !important;}

/* settings dropdown (default browser picker) */
.menu-select{width:100%;margin:2px 0 4px;padding:6px 8px;border-radius:8px;
  background:var(--card,#1e2329);color:var(--ink,#e6e6e6);border:1px solid var(--line,#333);
  font:13px var(--sans,system-ui);cursor:pointer}

/* inline up/down/flat marks (SVG, encoding- & font-independent) */
.mk{display:inline-block;vertical-align:-1px;margin:0 1px}

/* settings menu separator (above the Reset button) */
.menu-sep{height:1px;background:var(--line,#333);margin:8px 0}

/* auto-switch on stall control (model row) */
.autofb{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted,#8a8f98);white-space:nowrap;cursor:pointer}
.autofb input[type="number"]{width:44px;padding:2px 4px;font-size:12px}

/* prompt preset dropdown (composer) */
.preset-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
#promptPreset{max-width:340px;padding:4px 8px;font-size:13px;border-radius:8px;
  background:var(--panel,#1a1c22);color:var(--text,#e6e6e6);border:1px solid var(--line,#333)}
.preset-note{font-size:12px;color:var(--muted,#8a8f98);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}

/* the saved-skill picker: its own full-width line above the box, so picking a skill never
   narrows the prompt. Same tokens as the rest of the console, so it follows the theme. */
#skillRow,#kbRow{width:100%}
#skillPick,#kbPick{max-width:340px;padding:4px 8px;font-size:13px;border-radius:8px;
  background:var(--card);color:var(--ink);border:1px solid var(--line)}

/* local AI engine install log (settings) */
.menu-log{max-height:120px;overflow:auto;margin-top:6px;padding:6px 8px;border-radius:6px;
  background:#0c0e12;color:#9aa4b2;font:11px/1.4 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap}

/* PetAi brand at the top of the sidebar */
.sb-brand{padding:12px 14px 6px}
.sb-brand .brand{font-weight:800;font-size:20px;letter-spacing:.2px;
  background:linear-gradient(90deg,#facc15,#f59e0b);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#f59e0b;user-select:none}

/* OmniRoute's last words when a gateway start fails - shown under the guide strip */
.gw-diag{margin:8px 0 0;padding:10px 12px;border:1px solid #b45309;border-radius:8px;
  background:#1c1917;color:#fcd34d;font-size:12px;line-height:1.5;white-space:pre-wrap;
  word-break:break-word;max-height:220px;overflow:auto}

/* The gateway's own extra routers, listed under the guide strip when Services is clicked.
   Same tokens as every other card, so it follows the theme and palette he has chosen. */
.gw-svc{margin:8px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);font-size:13px;line-height:1.5;
  max-height:45vh;min-height:min(160px,8vh);overflow:auto}   /* scrolls inside itself: the page never does, so a
                                         list taller than the window pushed the prompt box
                                         off-screen and the chat out of sight (the "274px"
                                         note he reported) */
.gw-svc .svc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-bottom:6px}
.gw-svc .svc-row{padding:8px 0;border-top:1px solid var(--line)}
.gw-svc .svc-row:first-of-type{border-top:0}
.gw-svc .svc-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gw-svc .svc-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.gw-svc .svc-dot.on{background:var(--teal)}
.gw-svc .svc-dot.half{background:var(--notice-line)}
.gw-svc .svc-blurb{color:var(--muted);margin:2px 0 6px}
.gw-svc .svc-name .svc-blurb{margin:0}
.gw-svc .svc-note{margin:2px 0 6px}
.gw-svc .svc-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.gw-svc pre.svc-log{margin:6px 0 0;padding:8px;border-radius:6px;background:var(--code-inline);
  color:var(--ink);font-size:11px;white-space:pre-wrap;max-height:180px;overflow:auto}

/* G5.1 slice 17: a model's thinking, collapsed above its answer ("▸ Thinking") */
.thinkbox{margin:0 0 8px;padding:2px 0 2px 10px;border-left:2px solid var(--line);color:var(--muted);font-size:13px}
.thinkbox>summary{cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none}
.thinkbox>summary::-webkit-details-marker{display:none}
.thinkbox>summary::before{content:"\25B8\00a0"}
.thinkbox[open]>summary::before{content:"\25BE\00a0"}
.thinkbox .thinktext{white-space:pre-wrap;margin-top:6px;max-height:320px;overflow:auto;line-height:1.45}