/* css/theme.css · LIGHT MODE [redesign v3 · loaded LAST so it outranks every layer]
   html[data-theme="light"] re-values the same token names tokens.css defines,
   plus a bridge for the legacy variable namespaces (--tg-* grid shell, style.css
   inks) so existing views stay readable when the toggle flips. Warm paper, ink
   text, the same orange carrying the brand at light-safe contrast. */

html[data-theme="light"] {
  --brand: #ea580c;
  --brand-hi: #f97316;
  --brand-lo: #c2410c;
  --brand-soft: rgba(234, 88, 12, .1);
  --brand-line: rgba(234, 88, 12, .3);
  --brand-grad: linear-gradient(135deg, #f97316, #ea580c);
  --on-brand: #ffffff;

  --bg-0: #f7f5f1;
  --bg-1: #ffffff;
  --bg-2: #f0ede7;
  --bg-3: #e7e3da;
  --card: #ffffff;
  --panel: rgba(26, 22, 15, .03);
  --panel-2: rgba(26, 22, 15, .055);
  --input-bg: #f4f1ea;
  --line: rgba(26, 22, 15, .11);
  --line-2: rgba(26, 22, 15, .2);
  --scrim: rgba(26, 22, 15, .42);
  --glass: rgba(250, 248, 243, .82);

  --ink: #1a160f;
  --ink-2: #454036;
  --ink-3: #6e675c;
  --ink-4: #857e6d;  /* AA on paper */

  --up: #0e7a46;
  --down: #c62f45;
  --warn: #a16207;

  --ember-card: linear-gradient(168deg, #fff8f2 0%, #ffffff 55%, #fdfbf7 100%);
  --ember-line: rgba(234, 88, 12, .32);
  --shadow-ember: 0 20px 55px rgba(26, 22, 15, .1), 0 8px 30px rgba(234, 88, 12, .1), inset 0 1px 0 #fff;
  --ground-glow-a: rgba(234, 88, 12, .06);
  --ground-glow-b: rgba(0, 82, 255, .04);
  --grain-op: .028;

  --shadow-1: 0 1px 2px rgba(26,22,15,.08);
  --shadow-2: 0 16px 44px rgba(26,22,15,.12);
  --shadow-glow: 0 10px 32px rgba(234,88,12,.16);

  /* ---- legacy bridge · the terminal grid shell ---- */
  --tg-bg: #f7f5f1;
  --tg-panel: #ffffff;
  --tg-panel-2: #f0ede7;
  --tg-panel-3: #e7e3da;
  --tg-txt: #1a160f;
  --tg-dim: #6e675c;
  --tg-faint: #97907f;
  --tg-line: rgba(26, 22, 15, .13);

  /* ---- legacy bridge · style.css inks (best-effort common names) ---- */
  --txt-1: #1a160f; --txt-2: #454036; --txt-3: #6e675c;
  --text: #1a160f; --muted: #6e675c; --accent: #ea580c; --accent-2: #f97316;
}

/* the few places the new shell paints outside token vars */
html[data-theme="light"] body.new-shell{color:var(--ink);}
html[data-theme="light"] body.new-shell .topbar,
html[data-theme="light"] body.new-shell .botnav{background:var(--glass);}
html[data-theme="light"] body.new-shell::after{mix-blend-mode:multiply;}
html[data-theme="light"] body.new-shell .c-ember .c-stat__label{color:var(--ink-3);}
html[data-theme="light"] body.new-shell .c-ember .c-stat__value{color:var(--ink);}
html[data-theme="light"] body.new-shell .sw-title{color:var(--ink);}
html[data-theme="light"] body.new-shell .sw-amt{color:var(--ink);}
html[data-theme="light"] body.new-shell .sw-amt[readonly]{color:var(--ink-2);}
html[data-theme="light"] body.new-shell .sw-amt::placeholder{color:var(--ink-4);}
html[data-theme="light"] body.new-shell .sw-tokbtn{color:var(--ink);background:var(--panel-2);border-color:var(--line);}
html[data-theme="light"] body.new-shell .sw-panel-top{color:var(--ink-4);}
html[data-theme="light"] body.new-shell .sw-flip{border-color:var(--bg-1);background:var(--bg-2);}
html[data-theme="light"] body.new-shell .bn-item.bn-mid .bn-ico{color:#fff;}
html[data-theme="light"] body.new-shell .ticker-track{filter:invert(1) hue-rotate(180deg);opacity:.9;}
/* Legacy cards + modals are designed DARK with hardcoded light text and white
   rgba borders (20+ injected-style files). Rather than reflow all of them, in
   light mode we present them as intentional dark surfaces so their text/borders
   stay correct. A dark card on a light page reads as a deliberate widget. */
html[data-theme="light"] body.new-shell .msg-agent .msg-bubble,
html[data-theme="light"] body.new-shell .cvg-card,
html[data-theme="light"] body.new-shell .settings-body,
html[data-theme="light"] body.new-shell .settings-sheet,
html[data-theme="light"] body.new-shell .cs-box,
html[data-theme="light"] body.new-shell .ui-modal,
html[data-theme="light"] body.new-shell .drawer{
  background:#17151a !important; color:#f2f0ee !important;
  border-color:rgba(255,255,255,.12) !important;}
/* keep the user's own chat bubble light-on-brand (it is short text, not a card) */
html[data-theme="light"] body.new-shell .msg-user .msg-bubble{
  background:var(--brand) !important; color:#fff !important; filter:none;}
/* modal scrims stay dark either way */
html[data-theme="light"] body.new-shell .settings-backdrop,
html[data-theme="light"] body.new-shell .cvg-bg{background:rgba(10,8,6,.6) !important;}
/* legacy card inner text that hardcodes near-white stays readable on the dark card;
   inner rgba-white fills already work against #17151a. */

/* ================= FRAME PAINT, BOTH THEMES =================
   The legacy layers (style.css INTELLIGENCE ground, corvo-grid pane paint,
   premium's thread override) repaint the frame after shell.css. This file
   loads LAST, so the shell chrome is asserted here, tokens only, both themes. */
body.new-shell{
  background:
    radial-gradient(900px 480px at 88% -10%, var(--ground-glow-a), transparent 62%),
    radial-gradient(700px 420px at -6% 108%, var(--ground-glow-b), transparent 60%),
    var(--bg-0) !important;
  color:var(--ink);}
body.new-shell .tg-grid,body.new-shell #app,body.new-shell .chat-surface{background:transparent !important;}
body.new-shell .chat-thread{background:transparent !important;}
body.new-shell .topbar{
  background:var(--glass) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);}
body.new-shell .mkt-pane{
  background:linear-gradient(180deg, var(--panel), transparent 30%), var(--bg-0) !important;
  border-right:1px solid var(--line) !important;}
body.new-shell .botnav{
  background:var(--glass) !important;
  border-top:1px solid var(--line) !important;
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);}
body.new-shell .composer{background:transparent !important;border-top:1px solid var(--line) !important;}
body.new-shell .ticker{background:var(--bg-0) !important;border-bottom:1px solid var(--line) !important;}
body.new-shell .topbar .brand-name,body.new-shell .topbar-right .iconbtn{color:var(--ink-2);}
body.new-shell #composer-input{color:var(--ink) !important;background:transparent !important;}
body.new-shell .composer-inner{
  background:linear-gradient(var(--bg-1),var(--bg-1)) padding-box,
             linear-gradient(120deg, var(--brand-line), var(--line-2) 40%, rgba(0,82,255,.3)) border-box !important;
  border:1px solid transparent !important;}
html[data-theme="light"] body.new-shell #composer-input::placeholder{color:var(--ink-4);}
html[data-theme="light"] body.new-shell .nr-item{color:var(--ink-3);}
html[data-theme="light"] body.new-shell .nr-item:hover{color:var(--ink);}
html[data-theme="light"] body.new-shell .topbar .brand-name{color:var(--ink);}

/* light topbar: the legacy chrome paints it dark with its own weight */
html[data-theme="light"] body.new-shell .topbar{background:var(--glass) !important;border-bottom:1px solid var(--line) !important;}
html[data-theme="light"] body.new-shell .topbar .brand-name{color:var(--ink) !important;}
html[data-theme="light"] body.new-shell .topbar-right .iconbtn{color:var(--ink-2) !important;background:transparent !important;border-color:transparent !important;}
html[data-theme="light"] body.new-shell .topbar-right .iconbtn:hover{background:var(--panel-2) !important;}
html[data-theme="light"] body.new-shell #topsearch,
html[data-theme="light"] body.new-shell .topsearch,
html[data-theme="light"] body.new-shell .topsearch input{background:var(--bg-1) !important;color:var(--ink) !important;border-color:var(--line) !important;}
html[data-theme="light"] body.new-shell .topsearch input::placeholder{color:var(--ink-4) !important;}
html[data-theme="light"] body.new-shell .status-pill{background:var(--panel) !important;border-color:var(--line) !important;color:var(--ink-2) !important;}
html[data-theme="light"] body.new-shell .composer-foot,
html[data-theme="light"] body.new-shell .composer-foot *{color:var(--ink-4) !important;}

/* legacy heading paint (gradient-clip fills, dark text-shadows) must never
   style page content; pages set their own ink */
body.new-shell .chat-thread :is(h1,h2,h3){
  color:var(--ink);text-shadow:none !important;background:none !important;
  -webkit-text-fill-color:currentColor !important;}
body.new-shell .chat-thread h1 span{-webkit-text-fill-color:currentColor !important;}
/* tiny screens: the contextual chip stack occludes page content */
@media (max-width:380px){
  body.new-shell #agent-ctx-chips{display:none !important;}
}

/* ================= LEFT RAIL v3 + RIGHT CONTEXT RAIL ================= */
/* The rail items are <a> tags, so the legacy `a{color:blue}` rule was painting
   EVERY label blue. Colors here are forced with !important to win that cascade,
   and read only from tokens so both themes brand correctly. */
body.new-shell .mkt-pane{padding:12px 10px;gap:2px;
  background:linear-gradient(180deg, var(--panel), transparent 22%), var(--bg-0) !important;}
body.new-shell .nr-svg{width:19px;height:19px;display:block;}
body.new-shell .nr-item{position:relative;gap:12px;min-height:40px;border-radius:11px;
  font:600 13px/1 var(--font);letter-spacing:-.005em;border:1px solid transparent;
  text-decoration:none !important;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);}
body.new-shell .nr-item,body.new-shell .nr-item .nr-lbl{color:var(--ink-2) !important;}
body.new-shell .nr-item .nr-ico{width:19px;display:grid;place-items:center;color:var(--ink-4);transition:color var(--dur-1) var(--ease);}
body.new-shell .nr-item:hover{background:var(--panel-2);}
body.new-shell .nr-item:hover,body.new-shell .nr-item:hover .nr-lbl{color:var(--ink) !important;}
body.new-shell .nr-item:hover .nr-ico{color:var(--brand-hi);}
/* premium active: ember-tinted pill, brand icon, glowing flush accent bar */
body.new-shell .nr-item.active{
  background:linear-gradient(135deg, rgba(249,115,22,.17), rgba(234,88,12,.07));
  border-color:var(--brand-line);
  box-shadow:0 4px 16px rgba(249,115,22,.14), inset 0 1px 0 rgba(255,255,255,.05);}
body.new-shell .nr-item.active,body.new-shell .nr-item.active .nr-lbl{color:var(--brand-hi) !important;font-weight:700;}
body.new-shell .nr-item.active .nr-ico{color:var(--brand);}
body.new-shell .nr-item.active::before{content:"";position:absolute;left:5px;top:9px;bottom:9px;width:3px;
  border-radius:3px;background:var(--brand-grad);box-shadow:0 0 10px rgba(249,115,22,.5);}
body.new-shell .nr-label{padding:16px 12px 6px;
  font:700 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4) !important;}
/* Ask-Corvo foot: premium ember CTA */
body.new-shell .nr-ask{border:1px solid var(--brand-line);
  background:linear-gradient(135deg, rgba(249,115,22,.12), rgba(234,88,12,.05));
  box-shadow:0 6px 22px rgba(249,115,22,.1);border-radius:14px;padding:12px;align-items:flex-start;}
body.new-shell .nr-ask,body.new-shell .nr-ask *{color:var(--ink-2) !important;}
body.new-shell .nr-ask b{color:var(--brand-hi) !important;font-weight:700;}
body.new-shell .nr-ask .nr-ico{color:var(--brand) !important;}
body.new-shell .nr-ask .nr-svg{width:17px;height:17px;}

/* bottom nav icons */
body.new-shell .bn-item .bn-ico{display:grid;place-items:center;}
body.new-shell .bn-item .bn-ico .nr-svg{width:19px;height:19px;}
body.new-shell .bn-item.bn-mid .bn-ico .nr-svg{width:20px;height:20px;}

/* right context rail, desktop only: live density where the terminal pane was */
@media (min-width:1280px){
  body.new-shell{--tg-side:308px;}
  body.new-shell .side-pane{
    display:flex !important;flex-direction:column;gap:12px;
    padding:14px 12px calc(14px + env(safe-area-inset-bottom));
    overflow-y:auto;scrollbar-width:thin;
    background:linear-gradient(180deg, var(--panel), transparent 26%), var(--bg-0) !important;
    border-left:1px solid var(--line) !important;}
}
body.new-shell .cx-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow-1);}
body.new-shell .cx-head{display:flex;align-items:center;gap:7px;
  font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);}
body.new-shell .cx-dot{width:7px;height:7px;border-radius:50%;background:var(--up);
  box-shadow:0 0 8px rgba(52,211,153,.6);animation:cx-pulse 2.2s ease-in-out infinite;}
@keyframes cx-pulse{50%{opacity:.45}}
body.new-shell .cx-majors{display:flex;flex-direction:column;gap:5px;}
body.new-shell .cx-major{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;}
body.new-shell .cx-sym{font:700 11px/1 var(--mono);color:var(--ink-3);width:30px;}
body.new-shell .cx-px{font:600 13px/1 var(--font);color:var(--ink);margin-left:auto;}
body.new-shell .cx-chg{font:600 11px/1 var(--mono);min-width:52px;text-align:right;}
body.new-shell .cx-chg.up{color:var(--up);} body.new-shell .cx-chg.down{color:var(--down);}
body.new-shell .cx-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  background:none;border:none;border-radius:10px;padding:7px 8px;margin:0 -2px;cursor:pointer;
  color:var(--ink);text-decoration:none;text-align:left;font-family:var(--font);}
body.new-shell .cx-row:hover{background:var(--brand-soft);}
body.new-shell .cx-row-main{min-width:0;display:flex;align-items:baseline;gap:6px;}
body.new-shell .cx-row-main b{font:700 12.5px/1.2 var(--font);letter-spacing:-.01em;}
body.new-shell .cx-row-main i{font-style:normal;font-size:10px;color:var(--ink-4);}
body.new-shell .cx-row-end{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font:500 11.5px/1.2 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums;flex:none;}
body.new-shell .cx-more{font:600 11.5px/1 var(--font);color:var(--brand);text-decoration:none;padding:3px 8px 1px;}
body.new-shell .cx-more:hover{text-decoration:underline;}
body.new-shell .cx-empty{font-size:11.5px;color:var(--ink-4);padding:4px 8px;}
body.new-shell .cx-cta p{margin:0;font-size:12px;line-height:1.45;color:var(--ink-3);}
@media (prefers-reduced-motion: reduce){ body.new-shell .cx-dot{animation:none;} }
@media (min-width:1280px){ body.new-shell .side-pane{padding-bottom:64px;} }

/* balance card in the context rail */
body.new-shell .cx-balcard{gap:6px;background:var(--ember-card);border-color:var(--ember-line);box-shadow:var(--shadow-ember);}
body.new-shell .cx-tabs{margin-left:auto;display:flex;gap:2px;background:var(--input-bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px;}
body.new-shell .cx-tab{font:700 9px/1 var(--mono);letter-spacing:.06em;color:var(--ink-4);background:none;border:none;border-radius:var(--r-pill);padding:4px 8px;cursor:pointer;}
body.new-shell .cx-tab.on{background:var(--brand-grad);color:var(--on-brand);}
body.new-shell .cx-bal-total{font:800 26px/1.1 var(--font);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;}
body.new-shell .cx-bal-delta{font:600 12px/1 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px;min-height:13px;}
body.new-shell .cx-bal-delta.up{color:var(--up);} body.new-shell .cx-bal-delta.down{color:var(--down);}
body.new-shell .cx-bal-delta b{font-weight:700;}
body.new-shell .cx-bal-delta i{font-style:normal;color:var(--ink-4);font-weight:500;}
body.new-shell .cx-chart{width:100%;height:54px;display:block;margin:2px 0;}
body.new-shell .cx-bal-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;}

/* ================= MOBILE APP PASS [new_shell · v3] ================= */
@media (max-width:880px){
  /* the ticker is desktop chrome; an app tab view does not carry a marquee */
  body.new-shell{--tg-tick:0px;}
  body.new-shell .ticker{display:none !important;}
  /* topbar: brand + a tight action cluster, app-bar height */
  body.new-shell .topbar{padding:0 12px !important;}
  body.new-shell .topbar-right{gap:2px;}
  body.new-shell .topbar-right .iconbtn{width:40px;height:40px;}
  body.new-shell .topsearch,body.new-shell #topsearch{display:none !important;}
  /* the page surface: full-width feel, room for the fixed composer + tab bar */
  body.new-shell .chat-thread{max-width:100% !important;padding:12px 14px calc(158px + env(safe-area-inset-bottom)) !important;}
  body.new-shell .c-card{border-radius:18px;}
  /* tables scroll cleanly with a touch feel and a right-edge fade hint */
  body.new-shell .c-tablewrap{-webkit-overflow-scrolling:touch;position:relative;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);}
  body.new-shell .c-table th,body.new-shell .c-table td{padding:10px 12px;font-size:12.5px;}
  /* support fab clears the composer + tab bar */
  body.new-shell ~ .cs-fab,.cs-fab{bottom:calc(env(safe-area-inset-bottom,0px) + 164px) !important;right:12px !important;}
  /* the tab bar: real app bottom nav, bigger targets, safe area */
  body.new-shell .botnav{padding:8px 6px calc(6px + env(safe-area-inset-bottom));min-height:calc(58px + env(safe-area-inset-bottom));}
  body.new-shell .bn-item{gap:4px;font-size:10.5px;padding:2px 0;}
  body.new-shell .bn-item .bn-ico .nr-svg{width:21px;height:21px;}
  body.new-shell .bn-item.bn-mid .bn-ico{width:46px;height:46px;margin:-16px auto 3px;box-shadow:0 8px 22px rgba(249,115,22,.4);}
  body.new-shell .bn-item.bn-mid .bn-ico .nr-svg{width:22px;height:22px;}
  /* the Ask bar: floats just above the tab bar like a chat composer */
  body.new-shell .composer{padding-bottom:calc(env(safe-area-inset-bottom) + 4px);}
  body.new-shell .composer-inner{margin:6px 10px;}
  /* hero + chips tuned for the phone */
  body.new-shell .chat-thread h1{font-size:26px !important;}
  body.new-shell .nl-chips{display:flex !important;gap:8px;overflow-x:auto;flex-wrap:nowrap !important;
    justify-content:flex-start !important;scrollbar-width:none;padding-bottom:4px;margin:0 -2px;}
  body.new-shell .nl-chips::-webkit-scrollbar{display:none;}
  body.new-shell .nl-chips .c-chip{flex:none;}
}
@media (max-width:480px){
  body.new-shell .chat-thread h1{font-size:23px !important;}
}

/* movers: table on desktop, tappable rows on mobile */
body.new-shell .mv-list{display:none;}
@media (max-width:880px){
  body.new-shell .mv-table{display:none;}
  body.new-shell .mv-list{display:flex;flex-direction:column;gap:8px;}
}

/* ================= ANTI-FOUC (refresh flash) =================
   The inline head script sets html[data-theme] and, for returning users,
   html.shell-boot BEFORE stylesheets paint. We pre-paint the on-brand ground
   and hide the legacy terminal chrome until shell.js mounts the new shell and
   removes .shell-boot. A brief on-brand blank replaces the legacy-UI flash. */
html.shell-boot, html.shell-boot body{background:var(--bg-0) !important;}
html.shell-boot .topbar, html.shell-boot .ticker, html.shell-boot .mkt-pane,
html.shell-boot .side-pane, html.shell-boot .work-tabs, html.shell-boot .chat-thread,
html.shell-boot .botnav, html.shell-boot .composer, html.shell-boot #corvo-promo-rail{
  visibility:hidden !important;}
/* once the new shell is mounted the class is gone and everything reveals */

/* ================= ACCESSIBILITY ================= */
body.new-shell .skip-link, .skip-link{position:fixed;left:-9999px;top:8px;z-index:5000;
  background:var(--brand);color:var(--on-brand,#fff);padding:10px 16px;border-radius:10px;font:600 13px/1 var(--font);text-decoration:none;}
.skip-link:focus{left:12px;}
/* restore a visible focus ring everywhere the legacy layers stripped it, in the new shell */
body.new-shell a:focus-visible, body.new-shell button:focus-visible, body.new-shell [tabindex]:focus-visible,
body.new-shell input:focus-visible, body.new-shell select:focus-visible, body.new-shell .c-tab:focus-visible,
body.new-shell .nr-item:focus-visible, body.new-shell .bn-item:focus-visible, body.new-shell .c-row:focus-visible,
body.new-shell .px-long:focus-visible, body.new-shell .px-short:focus-visible{
  outline:2px solid var(--brand) !important;outline-offset:2px;border-radius:8px;}
body.new-shell .nr-item[aria-current="page"], body.new-shell .bn-item[aria-current="page"]{}

/* ================= MOBILE BOTTOM STACK: brand + compact ================= */
/* botnav items are <a>, so legacy a{color} painted them blue like the rail was */
body.new-shell .bn-item, body.new-shell .bn-item *{color:var(--ink-3) !important;text-decoration:none !important;}
body.new-shell .bn-item .bn-ico{color:var(--ink-4) !important;}
body.new-shell .bn-item.active, body.new-shell .bn-item.active *{color:var(--brand) !important;}
body.new-shell .bn-item.active .bn-ico{color:var(--brand) !important;}
body.new-shell .bn-item.bn-mid, body.new-shell .bn-item.bn-mid *{color:#fff !important;}

@media (max-width:880px){
  /* reclaim vertical space: hide the composer footer line, shrink the bar + tab bar */
  body.new-shell .composer-foot{display:none !important;}
  body.new-shell .composer{padding:4px 0 calc(env(safe-area-inset-bottom) + 2px) !important;border-top:1px solid var(--line) !important;}
  body.new-shell .composer-inner{margin:4px 10px !important;min-height:0;}
  body.new-shell #composer-input{min-height:40px;}
  body.new-shell .composer-send{width:40px !important;height:40px !important;}
  body.new-shell .answer-depth{height:40px;}
  /* tab bar: tighter, smaller labels, less padding */
  body.new-shell .botnav{min-height:calc(52px + env(safe-area-inset-bottom)) !important;padding:5px 4px calc(4px + env(safe-area-inset-bottom)) !important;}
  body.new-shell .bn-item{gap:2px;font-size:9.5px;letter-spacing:.01em;}
  body.new-shell .bn-item .bn-ico .nr-svg{width:19px;height:19px;}
  body.new-shell .bn-item.bn-mid .bn-ico{width:40px;height:40px;margin:-13px auto 2px;}
  body.new-shell .bn-item.bn-mid .bn-ico .nr-svg{width:19px;height:19px;}
  /* give page content the reclaimed room */
  body.new-shell .chat-thread{padding-bottom:calc(128px + env(safe-area-inset-bottom)) !important;}
}

/* composer: compact + single-line on mobile (input was wrapping to 2 lines) */
@media (max-width:880px){
  body.new-shell #palette-toggle, body.new-shell .composer-icon{display:none !important;}
  body.new-shell .answer-depth{display:block !important;max-width:60px;font-size:9px;padding:6px 3px;flex:0 0 auto;}
  body.new-shell #composer-input{font-size:15px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:38px;padding-top:9px;}
  body.new-shell .composer-inner{padding:2px 4px 2px 14px !important;gap:6px;}
  body.new-shell .chat-thread{padding-bottom:calc(118px + env(safe-area-inset-bottom)) !important;}
}

/* composer controls: the injected .answer-depth carries hardcoded dark colors
   that vanish on light paper. Re-theme via tokens so both modes are legible. */
body.new-shell .answer-depth{background:var(--input-bg) !important;color:var(--ink-2) !important;
  border:1px solid var(--line) !important;}
body.new-shell .answer-depth option{color:var(--ink);background:var(--bg-1);}
body.new-shell #palette-toggle{color:var(--brand) !important;background:transparent !important;border-color:transparent !important;}
body.new-shell #palette-toggle:hover{background:var(--panel-2) !important;}
body.new-shell .composer-foot, body.new-shell .composer-foot *{color:var(--ink-4) !important;}
body.new-shell .composer-foot .kbd{background:var(--panel-2) !important;border:1px solid var(--line) !important;color:var(--ink-3) !important;}