/* "Warm", the default look (body.warm is always on; kept as a layer so the diff vs. the earlier instrument style is legible).
   Changes: labels → sentence-case sans; mono → only addresses/hashes; Doto → wordmark + hero total only;
   state words → soft pills; type +1px; agent glyphs → character emoji; a touch of warmth in the darks. */

body.warm {
  --bg: #121114; --side: #16151a; --panel: #1a191e; --raised: #212026; --hover: #26252c; --line: #29282f; --line2: #38363f;
  --text: #f5f3f8; --body: #d3d0da; --muted: #979399; --quiet: #6b6772;
  --fs-0: 11px; --fs-1: 12px; --fs-2: 13.5px; --fs-3: 15px; --fs-4: 17px; --fs-5: 22px; --fs-6: 30px;
  --r1: 6px; --r2: 10px;
  font-size: 15px;
}

/* 1. Labels: sentence case, sans, readable */
body.warm .lbl, body.warm .top .sub, body.warm .day, body.warm .nowf .nxt, body.warm .risk small, body.warm .slider, body.warm .gate .or {
  font: 500 12px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted);
}
body.warm .top .sub { margin-top: 2px; }
body.warm .lbl.live::before { vertical-align: 0; }

/* 2. Mono only where it's an identifier */
body.warm .num, body.warm .agval, body.warm .kv b, body.warm .evr time, body.warm .evr .amt, body.warm .mtime, body.warm .actl small,
body.warm .hl .r b, body.warm .tag, body.warm .thread time, body.warm .notif time, body.warm .setrow .val, body.warm .navbtn .cnt,
body.warm .alloc .amt, body.warm .coin, body.warm .strip .v.disp small, body.warm .choice .r, body.warm .coachtip .row small, body.warm .phone .cap {
  font-family: var(--sans); letter-spacing: 0; text-transform: none;
}
body.warm .evr time, body.warm .mtime, body.warm .actl small, body.warm .thread time, body.warm .notif time { font-size: 12px; }
body.warm .tag { font-size: 12px; padding: 4px 9px; }
body.warm .kv b { font-weight: 500; font-size: 13px; }
body.warm .addr, body.warm .advbody .kv b, body.warm .setrow .val { font-family: var(--mono); }

/* 3. Doto: wordmark + hero total only */
body.warm .strip .v.disp.md, body.warm .mbody .v { font-family: var(--sans); letter-spacing: -0.03em; font-weight: 600; }
body.warm .strip .v.disp { font-family: var(--disp); }
body.warm .gate .art h2, body.warm .mtop b, body.warm .brandname { font-family: var(--disp); }
body.warm .dotfield { opacity: 0.35; }

/* 4. State words → soft pills, sentence case */
body.warm .state { font: 500 12px/1 var(--sans); letter-spacing: 0; text-transform: none; padding: 5px 10px; border-radius: 999px; background: var(--acbg, var(--raised)); }
body.warm .state.think { background: var(--vbg); }
body.warm .state.watch { background: var(--gbg); }
body.warm .state.rest { background: var(--raised); color: var(--muted); }
body.warm .state.paused { background: var(--abg); }
body.warm .state.error { background: var(--rbg); }
body.warm .state::first-letter { text-transform: uppercase; }
body.warm .state { text-transform: lowercase; }

/* 5. Agents as characters, not glyphs */
body.warm .av { border-radius: 50%; border-color: transparent; background: color-mix(in srgb, var(--ac, var(--violet)) 22%, var(--panel)); font-size: 15px; }
body.warm .av::before { border: 0; background: none; clip-path: none; transform: none !important; width: auto; height: auto; }
body.warm .av.g1::before { content: '🌊'; }
body.warm .av.g2::before { content: '🌿'; }
body.warm .av.g3::before { content: '🦦'; }
body.warm .av.g4::before { content: '🦉'; }
body.warm .av.sm { font-size: 12px; }
body.warm .av.lg { font-size: 24px; }
body.warm .av.xl { font-size: 36px; }
body.warm .dotp { border-color: var(--bg); }

/* Softer surfaces, warmer composer, roomier rows */
body.warm .btn, body.warm .input, body.warm .send, body.warm .evi, body.warm .newbtn, body.warm .chip { border-radius: var(--r1); }
body.warm .bub, body.warm .comp, body.warm .modal, body.warm .styles, body.warm .ways, body.warm .act { border-radius: var(--r2); }
body.warm .bub { padding: 14px 18px; }
body.warm .comp { padding: 8px 8px 8px 18px; box-shadow: 0 24px 60px -30px rgba(167, 139, 250, 0.45); }
body.warm .comp input { height: 40px; font-size: 16px; }
body.warm .send { width: 42px; height: 42px; }
body.warm .nowc { padding: 8px 26px 12px 24px; border-left-width: 3px; }
body.warm .nowc p, body.warm .ev .t, body.warm .bub { font-size: 15px; }
body.warm .ev { padding: 18px 0; }
body.warm .ev p, body.warm .nowt small, body.warm .agtxt small { font-size: 13px; }
body.warm .sh h3 { font-size: 18px; }
body.warm .askhead h2 { font-size: 24px; }
body.warm .strip .v { font-size: 32px; }
body.warm .agval { font-weight: 500; }
body.warm .agbtn { padding: 10px 10px; }
body.warm .top h1 { font-size: 16px; }
body.warm .attn { border-radius: var(--r2); padding: 14px 18px; }
body.warm .sysbar { border-radius: 0; }
body.warm .actl { padding: 10px 14px; }
body.warm .actl .ok { color: var(--green); }
body.warm .risk i { height: 4px; border-radius: 2px; }
body.warm .steps span { height: 3px; border-radius: 2px; }
body.warm .coachtip { border-radius: var(--r1); }

/* ---- Light variant (body.light), off-white paper, same structure ---- */
body.light {
  --bg: #f6f4f0; --side: #f0ede8; --panel: #ffffff; --raised: #ebe8e2; --hover: #e6e2db; --line: #e3dfd8; --line2: #cfcac1;
  --text: #17151c; --body: #3b3844; --muted: #6f6b78; --quiet: #9b97a3;
  --violet: #7c5cf5; --violet-hi: #6a48ee; --vbg: rgba(124, 92, 245, 0.1);
  --green: #1f9a4c; --gbg: rgba(31, 154, 76, 0.1); --amber: #b0791a; --abg: rgba(176, 121, 26, 0.12); --red: #d1403f; --rbg: rgba(209, 64, 63, 0.1);
}
body.light .btn.pri { background: var(--text); color: #fff; border-color: var(--text); }
body.light .btn.pri:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
body.light .send { color: #fff; }
body.light .coachtip { color: #fff; }
body.light .coachtip .row button { color: #fff; }
body.light .actl { background: #faf9f6; }
body.light .comp { box-shadow: 0 18px 40px -24px rgba(124, 92, 245, 0.35); }
body.light .brandname { background: linear-gradient(135deg, #3b7de0, #7c5cf5 45%, #d94d9a); -webkit-background-clip: text; background-clip: text; }
body.light .dotfield { background-image: radial-gradient(circle, rgba(124, 92, 245, 0.3) 1px, transparent 1.2px); }
body.light .gate .art .grid { background-image: radial-gradient(circle, rgba(124, 92, 245, 0.25) 1px, transparent 1.3px); }
body.light .mock { background: rgba(255, 255, 255, 0.92); }
body.light .phone { background: #1a1a1a; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.35); }
body.light .qr { border: 1px solid var(--line2); }
body.light .dotp { border-color: var(--side); }
body.light .state.think { color: #5b3fd6; }
body.light .sk::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent); }

/* fixes after first render */
body.warm .strip .v.disp { font-size: var(--fs-7); }

/* Agent messages are plain text (no bubble); only your messages get a bubble. */
.msg:not(.me) .bub, body.warm .msg:not(.me) .bub { background: none; border: 0; padding: 2px 0 0; color: var(--body); }
.msg:not(.me) { max-width: 760px; }
.msg:not(.me) .mtime { margin-top: 8px; }
.msg.me { max-width: 560px; }

/* Chat/Runs/Strategy scroll inside their pane; header + composer stay put. */
.vp { display: flex; flex-direction: column; }
.view.active { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view.active > .wrap { flex: none; }
.ws { flex: 1; min-height: 0; height: auto; }
.chatpane, .runs, .strat, .threads { overscroll-behavior: contain; }

/* ---- Agent rail: each section is a card with one clear header, not a run of hairlines ---- */
body.warm .rail { padding: 14px 14px 30px; background: var(--bg); }
body.warm .rc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: 14px 16px 15px; margin-bottom: 10px; }
body.warm .rc:last-of-type { border: 1px solid var(--line); }
/* the funds section stays open, as the rail's own header; the cards start below it */
body.warm .rail > .rc:first-child { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 2px 18px; margin-bottom: 14px; }
body.warm .rail > .rc:first-child .l .lbl { font: 500 12px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
body.warm .rail > .rc:first-child .v { font-size: 28px; margin-top: 6px; }
body.warm .rail > .rc:first-child .railbtns .btn { background: none; border-color: var(--line2); }
body.warm .rc .l { margin-bottom: 10px; min-height: 20px; }
body.warm .rc .l .lbl { font: 500 13px/1.2 var(--sans); color: var(--text); text-transform: none; letter-spacing: 0; }
body.warm .rc .l .btn.link { font-size: 12px; color: var(--muted); }
body.warm .rc .l .btn.link:hover { color: var(--violet); }
body.warm .rc .v { font-size: 24px; margin-top: 0; }
body.warm .rc .kv { padding: 8px 0; font-size: 12.5px; white-space: nowrap; }
body.warm .rc .kv b { white-space: nowrap; }
body.warm .claimrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px 8px 12px; background: var(--gbg); border-radius: var(--r1); font-size: 12.5px; color: var(--muted); }
body.warm .claimrow b { font-weight: 600; }
body.warm .claimrow .btn { background: var(--green); border-color: var(--green); color: #0e1a11; font-weight: 600; }
body.warm .claimrow .btn:hover { filter: brightness(1.08); }
body.warm .rc .kv:first-of-type, body.warm .rc .l + .kv, body.warm .rc .idrow + .kv { border-top: 0; }
body.warm .rc .hint { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
body.warm .railchart { margin: 8px 0 0; }
body.warm .recordrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
body.warm .rc .bar { margin-top: 14px; }
body.warm .railbtns { margin-top: 12px; }
body.warm .railbtns .btn { background: var(--raised); border-color: transparent; }
body.warm .rc .hl { padding: 10px 0; }
body.warm .rc .hl:last-of-type { padding-bottom: 2px; }
body.warm .rc .hl .hacts { background: linear-gradient(90deg, transparent, var(--panel) 25%); }
body.warm .rc .idrow { padding-bottom: 10px; }
body.warm .rc .idrow + .kv { border-top: 1px solid var(--line); }
body.warm .adv { padding: 10px 16px; border: 1px dashed var(--line); border-radius: var(--r2); color: var(--muted); }
body.warm .adv.open { border-radius: var(--r2) var(--r2) 0 0; border-bottom-color: transparent; }
body.warm .advbody { padding: 4px 16px 10px; border: 1px dashed var(--line); border-top: 0; border-radius: 0 0 var(--r2) var(--r2); }
body.warm .advbody .kv:first-child { border-top: 0; }
body.warm .advbody .kv { white-space: nowrap; font-size: 12.5px; }
body.warm .advbody .kv b { font-size: 12px; white-space: nowrap; }
body.warm .advbody .kv b.sans { font-family: var(--sans); }
body.light .rc { background: #fff; }