/* ════════ VOLURR AGI room (agc-*) — flagship AGI workspace ════════
   "The companion that SEES the market live." Warm, premium, human. Dark default + FULL light
   variant at the end. Scoped strictly to #v-ai. Existing functional classes (.msgs/.msg/.aip-modes/
   .aip-cards/.mcopy/.ava) are restyled here under the #v-ai scope. */

/* ── immersive chrome: ticker + topbar merge into the room (same owner pattern as gold/market) ── */
body[data-view=ai] .topbar .hdrL,
body[data-view=ai] .topbar .hdr-status,
body[data-view=ai] #btnSearch,
body[data-view=ai] #btnBell,
body[data-view=ai] #btnMail,
body[data-view=ai] #btnMore{display:none}
html:not(.wco-on) body[data-view=ai] .ticker{display:none}
html:not(.wco-on) body[data-view=ai] .app{padding-top:0}
html:not(.wco-on) body[data-view=ai] .side{top:0}
html:not(.wco-on) body[data-view=ai] .topbar{top:0}
html:not(.wco-on) body[data-view=ai] .sidetog{top:19px}
@media (min-width:901px){
  html:not(.wco-on) body[data-view=ai] .topbar{display:none}
  html:not(.wco-on) body[data-view=ai] .sidetog{top:10px}
}
@media (max-width:900px){ #v-ai .agc-hact .agc-hbtn:nth-child(n+3){display:none} }   /* mobile keeps the slim topbar controls */

#v-ai .agcwrap{
  --agb:#07090f; --agp:#0c111b; --agl:rgba(255,255,255,.08);
  --agtx:#f2f5fa; --agmut:#8b95a7; --agac:#e23b3b; --agac2:#ff6b6b;
  --agup:var(--up); --agdn:var(--down);   /* W1: ONE direction-color system — chat column = rail cards = global tokens */
  /* A CEILING, NOT JUST A FLOOR. Every height in this column was a min-height, so the panel had a
     floor and nothing above it: measured at 1280x800 with the real bubble markup, 1 message gave a
     760px box, 8 gave 988, and 20 gave 2187 — 2.7x the viewport — while .msgs reported
     scrollHeight === clientHeight the whole way, meaning its overflow:auto never engaged once. The
     card grew and the PAGE scrolled, which is the "box keeps getting bigger" the owner is pointing at.
     A fixed height here is what lets the inner scroller do its job. */
  /* 100vh, then 100dvh. vh is the LARGE viewport: on any browser with collapsing chrome it measures
     the window as if the address bar were gone, so the last row of a full-height panel — here the
     status footer — sits under it and gets cut. The owner circled exactly that: a green dot and two
     separators with the text sheared off at the bottom edge. dvh tracks the viewport that is actually
     visible right now. vh stays first as the fallback for engines without dvh. */
  display:flex;flex-direction:column;gap:var(--sp-4,10px);
  height:calc(100vh - 40px);height:calc(100dvh - 40px);min-height:520px;
  background:
    radial-gradient(900px 340px at 50% -60px, rgba(226,59,59,.07), transparent 60%),
    var(--agb);
  border-radius:var(--rad-lg,14px);padding:var(--sp-5,12px);color:var(--agtx);
}
#v-ai .agcwrap .up{color:var(--agup)}
#v-ai .agcwrap .down{color:var(--agdn)}

/* ── head ── */
#v-ai .agc-head{display:flex;align-items:center;gap:14px;padding:6px 8px;flex-wrap:wrap}
#v-ai .agc-brand{display:flex;align-items:center;gap:11px;min-width:0}
#v-ai .agc-logo{position:relative;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  font-size:12px;font-weight:900;color:#fff;letter-spacing:.5px;
  background:radial-gradient(circle at 32% 28%, #ff7b6b, var(--agac) 55%, #7d1220);
  box-shadow:0 0 14px rgba(226,59,59,.35), inset 0 1px 0 rgba(255,255,255,.25)}
/* W1: the breathers now animate a pseudo-layer's OPACITY (compositor) instead of the element's
   box-shadow (continuous repaint) — same visual pulse, no per-frame paint. */
#v-ai .agc-logo::before,#v-ai .agc-orb::before{content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 26px rgba(226,59,59,.6);opacity:.35;animation:agcbreathe 3.2s ease-in-out infinite}
@keyframes agcbreathe{0%,100%{opacity:.3;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
#v-ai .agc-ttl{font-size:17px;font-weight:900;letter-spacing:.5px;display:flex;align-items:center;gap:10px;white-space:nowrap}
#v-ai .agc-ttl b{color:var(--agac)}
#v-ai .agc-on{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:900;letter-spacing:1.2px;color:var(--agup);border:1px solid rgba(0,208,132,.35);border-radius:var(--rad-pill,999px);padding:3px 9px;background:rgba(0,208,132,.07)}
#v-ai .agc-on i{width:5px;height:5px;border-radius:50%;background:var(--agup);box-shadow:0 0 7px var(--agup);animation:agcpulse 1.6s infinite}
/* The badge carries a real service state now (core: _agiNetSet). Green is reserved for a service
   that actually answered; every other state has to LOOK different, or a coloured dot that never
   changes is the same lie the hardcoded label was. This says nothing about market freshness —
   that is a separate indicator fed by the server's freshness contract. */
#v-ai .agc-on-connecting{color:var(--agmut);border-color:var(--agl);background:rgba(255,255,255,.03)}
#v-ai .agc-on-connecting i{background:var(--agmut);box-shadow:none}
/* READY: configured and reachable, but the model has not answered yet. It must not borrow ONLINE's
   pulse — a steady dot for a steady claim, and the animation stays reserved for a service that has
   actually replied. */
#v-ai .agc-on-ready{color:var(--agup);border-color:rgba(0,208,132,.28);background:rgba(0,208,132,.06);opacity:.9}
#v-ai .agc-on-ready i{background:var(--agup);box-shadow:none;animation:none}
#v-ai .agc-on-limited{color:#e8932a;border-color:rgba(232,147,42,.38);background:rgba(232,147,42,.08)}
#v-ai .agc-on-limited i{background:#e8932a;box-shadow:0 0 7px rgba(232,147,42,.6);animation:none}
#v-ai .agc-on-offline{color:var(--agdn,#e23b3b);border-color:rgba(226,59,59,.38);background:rgba(226,59,59,.08)}
#v-ai .agc-on-offline i{background:var(--agdn,#e23b3b);box-shadow:none;animation:none}
@keyframes agcpulse{0%,100%{opacity:1}50%{opacity:.35}}
#v-ai .agc-sub{font-size:10.5px;font-weight:700;color:var(--agmut);margin-top:2px}
#v-ai .agc-ctx{flex:1;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-width:0}
/* The memory chip is a <button> now (it opens «What VOLURR remembers»). A button does NOT inherit
   font-family and gets the UA cursor, so without these three the chip would silently render in the
   browser default face next to four identical-looking spans. font-size/weight were already explicit;
   the family was the one that would have drifted. */
#v-ai .agc-cchip{display:inline-flex;align-items:center;gap:4px;font-family:inherit;font-size:10.5px;font-weight:800;color:var(--agmut);border:1px solid var(--agl);border-radius:var(--rad-pill,999px);padding:4px 10px;background:rgba(255,255,255,.02);white-space:nowrap;appearance:none;-webkit-appearance:none}
/* A STATUS chip is information, not an offer. It must not look pressable — a chip that reads like a
   button and does nothing costs the user a tap to discover, which is the failure this wave exists to
   remove. Muted, no pointer, no hover lift. */
#v-ai .agc-cchip-st{opacity:.72;cursor:default;border-style:dashed}
#v-ai .agc-cchip-st:hover{border-color:var(--agl)}
#v-ai button.agc-cchip{cursor:pointer}
/* Keyboard reachability: the chips are real buttons, so they are already in the tab order — but a
   focus ring that is invisible against the chip background is the same as not having one. */
#v-ai button.agc-cchip:focus-visible{outline:2px solid var(--agac,#e23b3b);outline-offset:2px}
#v-ai button.agc-cchip:hover{border-color:rgba(255,255,255,.24)}
#v-ai .agc-cchip.on{color:var(--agup);border-color:rgba(0,208,132,.35);background:rgba(0,208,132,.06)}
#v-ai .agc-hact{display:flex;gap:6px;flex:none}
#v-ai .agc-hbtn{appearance:none;height:32px;min-width:32px;padding:0 8px;border-radius:9px;border:1px solid var(--agl);background:rgba(255,255,255,.02);color:var(--agmut);display:flex;align-items:center;gap:5px;justify-content:center;cursor:pointer}
#v-ai .agc-hbtn:hover{color:var(--agtx);border-color:rgba(255,255,255,.22)}
#v-ai .agc-hbtn b{font-size:10px;font-weight:900}
#v-ai .agc-new{color:#fff;background:linear-gradient(135deg,var(--agac),#b81e26);border-color:rgba(226,59,59,.5)}
#v-ai .agc-new:hover{color:#fff;filter:brightness(1.1)}
#v-ai .agc-why{color:var(--agac2);border-color:rgba(226,59,59,.45);background:rgba(226,59,59,.07)}
#v-ai .agc-why:hover{color:#fff;background:rgba(226,59,59,.2);border-color:rgba(226,59,59,.7)}
#v-ai .agc-ic-moon{display:none}
html[data-theme="light"] #v-ai .agc-ic-moon{display:flex}
html[data-theme="light"] #v-ai .agc-ic-sun{display:none}

/* ── body: chat + rail ── */
#v-ai .agc-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--sp-4,10px);min-height:0}
/* min-height:60vh here fought the ceiling above: a flex/grid child cannot shrink below its content
   unless it is allowed to, and 60vh + a full message list is how the column pushed past the
   viewport. The wrapper now sets the height; this only has to fill it. */
#v-ai .agc-chat{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;
  background:linear-gradient(180deg,rgba(12,17,27,.92),rgba(7,9,15,.96));
  border:1px solid var(--agl);border-radius:var(--rad-xl,18px);padding:var(--sp-5,12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--el-3,0 16px 44px rgba(0,0,0,.45))}
/* min-height:280px is precisely what stopped overflow:auto from ever firing — a flex item will not
   shrink below its min-height, so the scroller could never become smaller than its content and
   therefore never had anything to scroll. min-height:0 is the flexbox requirement for a child
   that scrolls; the empty-state room it was protecting now comes from the wrapper's own height. */
#v-ai .msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-4,10px);padding:4px 4px 10px;min-height:0}
/* W1: entrance micro-animation — only the NEWEST child animates (renderAI rebuilds the whole list;
   animating every bubble on each rebuild would strobe). Reduced-motion safe below. */
#v-ai .msgs>:last-child{animation:agcin var(--dur-3,.3s) var(--ease,cubic-bezier(.2,.9,.3,1)) both}
@keyframes agcin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* W1: jump-to-latest pill (shown by JS when scrolled up >300px) */
#v-ai .agc-jump{position:absolute;inset-inline-end:18px;bottom:150px;z-index:5;appearance:none;
  border:1px solid rgba(226,59,59,.4);background:rgba(12,17,27,.92);color:var(--agtx);
  font:inherit;font-size:11.5px;font-weight:800;border-radius:var(--rad-pill,999px);padding:7px 14px;cursor:pointer;
  box-shadow:var(--el-2,0 8px 22px rgba(0,0,0,.4));backdrop-filter:blur(6px);
  transition:transform var(--dur-2,.18s) var(--ease,ease),border-color var(--dur-2,.18s)}
#v-ai .agc-jump:hover{transform:translateY(-1px);border-color:rgba(226,59,59,.7)}

/* hero welcome */
#v-ai .agc-hero{margin:auto;text-align:center;max-width:620px;padding:26px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}
#v-ai .agc-orb{position:relative;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:900;color:#fff;letter-spacing:1px;
  background:radial-gradient(circle at 32% 28%, #ff7b6b, var(--agac) 55%, #7d1220);
  box-shadow:0 0 26px rgba(226,59,59,.4), inset 0 2px 0 rgba(255,255,255,.25)}
#v-ai .agc-orb::before{inset:-4px;box-shadow:0 0 44px rgba(226,59,59,.6)}
#v-ai .agc-h1{font-size:24px;font-weight:900;letter-spacing:.3px}
#v-ai .agc-h2{font-size:13.5px;font-weight:600;line-height:1.75;color:var(--agmut);max-width:560px}
#v-ai .agc-hlive{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:11.5px;font-weight:700;color:var(--agmut);border:1px solid var(--agl);border-radius:12px;padding:8px 14px;background:rgba(255,255,255,.02);min-height:20px}
#v-ai .agc-hlive b{color:var(--agtx);font-weight:900}
#v-ai .agc-hlive i{font-style:normal;font-weight:900}
#v-ai .agc-dot{color:var(--agmut);opacity:.5}
#v-ai .agc-h3{font-size:11.5px;font-weight:600;color:var(--agmut)}

/* messages */
#v-ai .msga{display:flex;gap:9px;align-items:flex-start;max-width:92%}
#v-ai .ava{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%, #ff7b6b, var(--agac) 60%, #7d1220);color:#fff;box-shadow:0 0 10px rgba(226,59,59,.35)}
#v-ai .ava svg{width:16px;height:16px}
#v-ai .msg{border-radius:var(--rad-lg,14px);padding:10px 13px;font-size:13.5px;line-height:1.75;min-width:0;text-align:start}
#v-ai .msg.a{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid var(--agl);color:var(--agtx);width:fit-content;max-width:100%;box-shadow:var(--el-1,0 4px 12px rgba(0,0,0,.32));border-start-start-radius:var(--rad-xs,6px)}
#v-ai .msg.u{align-self:flex-end;max-width:78%;background:linear-gradient(180deg,rgba(226,59,59,.16),rgba(226,59,59,.09));border:1px solid rgba(226,59,59,.3);color:var(--agtx);border-start-end-radius:var(--rad-xs,6px)}
#v-ai .msg.a.err{border-color:rgba(226,59,59,.4);background:linear-gradient(180deg,rgba(226,59,59,.09),rgba(226,59,59,.04))}
/* W1: subtle bubble timestamps (dir=ltr, muted, HH:MM, tabular) */
#v-ai .mtime{font-size:10.5px;font-weight:700;color:var(--agmut);opacity:.75;font-variant-numeric:tabular-nums;direction:ltr}
#v-ai .msg.u .mtime{display:block;text-align:end;margin-top:4px}
#v-ai .macts .mtime{margin-inline-start:auto;align-self:center}
/* W1: number discipline — hero live line + bubble digits + idea timestamps render tabular */
#v-ai .agc-hlive b,#v-ai .agc-hlive i,#v-ai .msg .mtx,#v-ai .agc-idea-h span[dir=ltr]{font-variant-numeric:tabular-nums}
/* W4: thinking-transparency row — collapsed to one line, tap wraps it open */
#v-ai .agc-src{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden;min-width:0;margin-top:8px;padding-top:7px;border-top:1px dashed var(--agl);cursor:pointer}
#v-ai .agc-src.open{flex-wrap:wrap;overflow:visible}
#v-ai .agc-srclbl{font-size:10.5px;font-weight:900;color:var(--agmut);white-space:nowrap;flex:none}
#v-ai .agc-srcchip{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;color:var(--agmut);border:1px solid var(--agl);border-radius:var(--rad-pill,999px);padding:2px 8px;white-space:nowrap;background:rgba(255,255,255,.02)}
#v-ai .agc-srcchip b{color:var(--agtx);font-variant-numeric:tabular-nums}
/* mixed-language chat: every paragraph/line self-directs (Arabic RTL, English LTR, numbers stable) */
#v-ai .msg .mtx .mp,#v-ai .msg .mtx .mh,#v-ai .msg .mtx li,#v-ai .msg.u{unicode-bidi:plaintext}
#v-ai .msg .mtx .mh{font-weight:900;margin:8px 0 4px;color:var(--agtx)}
#v-ai .msg .mtx .mp{margin:3px 0}
#v-ai .msg .mtx .mul,#v-ai .msg .mtx .mol{margin:4px 0;padding-inline-start:20px}
#v-ai .msg .mtx code.mcode{background:rgba(255,255,255,.07);border-radius:5px;padding:1px 6px;font-size:12px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
#v-ai .macts{display:flex;gap:5px;margin-top:8px}
/* ONE METADATA LINE. The sources strip and the action buttons both describe the answer, and stacking
   them put 8+29+8+24 = 69px of chrome under a one-line greeting whose text is 28px — more than twice
   the height of the thing it annotates, which is exactly what reads as an oversized box. When both
   exist the actions sit at the bubble's end corner, ON the sources line, and the strip reserves room
   for them. With no sources the row still lays out normally, unchanged. */
#v-ai .msg.a{position:relative}
/* MARGIN, NOT PADDING, and MEASURED not guessed. overflow:hidden clips at the border box, so a
   reserved *padding* strip did not stop chips running under the buttons. And the reservation itself
   was 104px against a row that measures 122 — three 27px buttons plus the 26px timestamp — so the
   chips overlapped by 18px with eight sources, which is an ordinary answer. 138 = 122 + a real gap.
   ONLY WHERE THERE IS ROOM: below 900px the bubble is too narrow to give up 138px, so the actions
   stack underneath exactly as before. Merging everywhere would trade one crowded layout for another. */
@media (min-width:900px){
  #v-ai .macts.inrow{position:absolute;inset-block-end:10px;inset-inline-end:13px;margin:0}
  #v-ai .agc-src.withacts{margin-inline-end:138px}
  #v-ai .agc-src.withacts.open{margin-inline-end:0}
  #v-ai .agc-src.withacts.open ~ .macts.inrow{position:static;margin-top:8px}
}
#v-ai .mcopy{appearance:none;border:1px solid var(--agl);background:rgba(255,255,255,.02);color:var(--agmut);border-radius:7px;min-width:26px;height:24px;padding:0 5px;font:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  opacity:.6;transition:opacity var(--dur-2,.18s),color var(--dur-1,.12s),border-color var(--dur-1,.12s)}
/* RESTING OPACITY WAS .3, AND "faintly visible for touch" was not what it produced. Measured on
   the light theme: the glyph and the border both land at 1.96:1 against the bubble — under the 3.0
   floor at which a control still reads as a control. The row reserves 32px of permanent height
   either way, so a short answer showed a block of what looked like dead space under the sources
   line, which is exactly how the owner read it. .6 is the MINIMUM that clears 3.0 in BOTH themes
   (light 4.4, dark 3.05; .5 clears light at 3.43 but leaves dark at 2.76). Hover still goes to 1. */
#v-ai .msga:hover .mcopy,#v-ai .mcopy:focus-visible{opacity:1}
#v-ai .mcopy:hover{color:var(--agtx);border-color:rgba(255,255,255,.25)}
#v-ai .mcopy.agc-retry{width:auto;color:var(--agac2);border-color:rgba(226,59,59,.35);opacity:1}
#v-ai .tdots i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--agmut);margin:0 2px;animation:agcty 1.1s infinite}
#v-ai .tdots i:nth-child(2){animation-delay:.18s}#v-ai .tdots i:nth-child(3){animation-delay:.36s}
@keyframes agcty{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* live suggestions */
#v-ai .agc-sugg{display:flex;gap:7px;flex-wrap:wrap;padding:8px 2px 2px}
#v-ai .agc-sg{appearance:none;border:1px solid rgba(226,59,59,.3);background:rgba(226,59,59,.06);color:var(--agtx);
  font-size:11.5px;font-weight:700;border-radius:999px;padding:7px 13px;cursor:pointer;transition:all .15s;max-width:100%;text-align:start}
#v-ai .agc-sg:hover{background:rgba(226,59,59,.14);border-color:rgba(226,59,59,.5)}

/* modes (restyle of the existing row) */
#v-ai .aip-modes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 2px 2px}
#v-ai .aip-modlbl{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--agmut);text-transform:uppercase}
#v-ai .aip-mode{appearance:none;border:1px solid var(--agl);background:rgba(255,255,255,.02);color:var(--agmut);font-size:11px;font-weight:800;border-radius:9px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
#v-ai .aip-mode:hover{color:var(--agtx)}
#v-ai .aip-mode.on{color:#fff;background:linear-gradient(180deg,var(--agac),#b81e26);border-color:rgba(226,59,59,.6);box-shadow:0 0 14px rgba(226,59,59,.3)}

/* composer */
#v-ai .agc-input{display:flex;gap:8px;align-items:center;margin-top:8px;
  border:1px solid var(--agl);border-radius:14px;padding:6px 6px 6px 14px;background:rgba(255,255,255,.03);
  transition:border-color .2s, box-shadow .2s}
#v-ai .agc-input:focus-within{border-color:rgba(226,59,59,.55);box-shadow:0 0 0 3px rgba(226,59,59,.12)}
#v-ai .agc-input input{flex:1;background:none;border:0;outline:0;color:var(--agtx);font:inherit;font-size:13.5px;min-width:0}
#v-ai .agc-input input::placeholder{color:var(--agmut)}
#v-ai .aip-mic{appearance:none;border:1px solid var(--agl);background:rgba(255,255,255,.02);color:var(--agmut);border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:14px}
#v-ai .aip-mic.rec{color:#fff;background:var(--agdn);border-color:var(--agdn);animation:agcpulse 1s infinite}
#v-ai .agc-send{appearance:none;border:0;border-radius:var(--rad-md,10px);padding:0 16px;height:36px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--agac),#b81e26);box-shadow:0 6px 18px rgba(226,59,59,.35);
  transition:transform var(--dur-1,.12s) var(--ease,ease),filter var(--dur-1,.12s),opacity var(--dur-2,.18s)}
#v-ai .agc-send:hover{filter:brightness(1.1)}
#v-ai .agc-send:active:not(:disabled){transform:translateY(1px) scale(.98)}
#v-ai .agc-send:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;filter:saturate(.6)}
/* W1: honest "chart attached" indicator — rendered ONLY when a real snapshot will ride along */
#v-ai .agc-att{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:10.5px;font-weight:800;color:var(--agac2);
  border:1px solid rgba(226,59,59,.3);background:rgba(226,59,59,.06);border-radius:var(--rad-pill,999px);padding:4px 9px;white-space:nowrap;cursor:help}
#v-ai .agc-input.busy{opacity:.8}
#v-ai .agc-input input:disabled{opacity:.55;cursor:progress}

/* ── rail: live pulse cards + ideas vault ── */
#v-ai .agc-rail{display:flex;flex-direction:column;gap:var(--sp-3,8px);min-width:0}
#v-ai .agc-tabs{display:flex;gap:4px;border:1px solid var(--agl);border-radius:11px;padding:3px;background:rgba(255,255,255,.02)}
#v-ai .agc-tab{flex:1;appearance:none;border:0;background:transparent;color:var(--agmut);font:inherit;font-size:11px;font-weight:900;border-radius:8px;padding:7px 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
  transition:background var(--dur-2,.18s) var(--ease,ease),color var(--dur-2,.18s)}   /* W1: tab-switch micro-transition */
#v-ai .agc-tab.on{color:#fff;background:linear-gradient(180deg,var(--agac),#b81e26)}
#v-ai .agc-tab b{font-size:10.5px;opacity:.85}
#v-ai .aip-cards{display:flex;flex-direction:column;gap:var(--sp-3,8px);overflow-y:auto;max-height:calc(100vh - 190px);padding-inline-end:2px}
#v-ai .aip-card{background:linear-gradient(180deg,rgba(12,17,27,.92),rgba(7,9,15,.96));border:1px solid var(--agl);border-radius:var(--rad-lg,14px);padding:11px 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform var(--dur-2,.18s) var(--ease,ease),box-shadow var(--dur-2,.18s),border-color var(--dur-2,.18s)}
#v-ai .aip-card:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--el-2,0 8px 22px rgba(0,0,0,.4))}   /* W1: rail card hover elevation */
#v-ai .aip-ch{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:900;letter-spacing:1.1px;color:var(--agmut);text-transform:uppercase;margin-bottom:8px}
#v-ai .aip-cico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--agac);background:rgba(226,59,59,.1);border:1px solid rgba(226,59,59,.3)}
#v-ai .aip-clink,#v-ai .aip-cbtn,#v-ai .aip-clinkq{appearance:none;background:none;border:0;color:var(--agac2);font:inherit;font-size:11px;font-weight:800;cursor:pointer;padding:0;margin-top:8px;display:inline-block}
#v-ai .aip-cardclick{cursor:pointer;transition:border-color .15s}
#v-ai .aip-cardclick:hover{border-color:rgba(226,59,59,.4)}
/* W1: purple → crimson-consistent card-load / card-error inside the room (trading-rooms.css owns the modal look) */
#v-ai .aip-cload{grid-column:auto;display:grid;place-items:center;padding:26px;background:transparent;border:0}
#v-ai .aip-cerr{grid-column:auto;background:linear-gradient(180deg,rgba(12,17,27,.92),rgba(7,9,15,.96));border:1px solid var(--agl);border-radius:var(--rad-lg,14px);color:var(--agmut)}
#v-ai .aip-cerr button{font:inherit;font-size:12px;font-weight:800;color:var(--agac2);background:rgba(226,59,59,.06);border:1px solid rgba(226,59,59,.35);border-radius:var(--rad-sm,9px);padding:6px 14px;cursor:pointer;transition:background var(--dur-1,.12s)}
#v-ai .aip-cerr button:hover{background:rgba(226,59,59,.15)}
/* W1: shimmer skeletons (scoped replica of the .sk primitive) — context chips · suggestion pills · rail cards */
#v-ai .agc-skc,#v-ai .agc-skp,#v-ai .agc-skl{display:inline-block;border-radius:var(--rad-pill,999px);
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));
  background-size:200% 100%;animation:agcshim 1.3s infinite}
@keyframes agcshim{to{background-position:-200% 0}}
#v-ai .agc-skc{width:88px;height:22px}
#v-ai .agc-skp{width:170px;height:31px;max-width:44%}
#v-ai .agc-skl{display:block;height:12px;border-radius:6px;margin:9px 0}
#v-ai .agc-skl.w60{width:60%}#v-ai .agc-skl.w75{width:75%}#v-ai .agc-skl.w90{width:90%}
#v-ai .agc-skcard{background:linear-gradient(180deg,rgba(12,17,27,.92),rgba(7,9,15,.96));border:1px solid var(--agl);border-radius:var(--rad-lg,14px);padding:12px 13px}
/* vault */
#v-ai .agc-vault{display:flex;flex-direction:column;gap:var(--sp-3,8px);overflow-y:auto;max-height:calc(100vh - 190px);padding-inline-end:2px}
#v-ai .agc-idea{background:linear-gradient(180deg,rgba(12,17,27,.92),rgba(7,9,15,.96));border:1px solid var(--agl);border-radius:13px;padding:10px 12px}
#v-ai .agc-idea-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:800;color:var(--agmut);margin-bottom:6px}
#v-ai .agc-idea-x{display:flex;gap:4px}
#v-ai .agc-idea-x button{appearance:none;border:1px solid var(--agl);background:rgba(255,255,255,.02);color:var(--agmut);border-radius:6px;width:22px;height:20px;font-size:10px;cursor:pointer}
#v-ai .agc-idea-x button:hover{color:var(--agtx)}
#v-ai .agc-idea-q{font-size:11px;font-weight:800;color:var(--agac2);margin-bottom:5px;line-height:1.5}
#v-ai .agc-idea-a{font-size:11.5px;line-height:1.7;color:var(--agtx)}
#v-ai .agc-vempty{text-align:center;color:var(--agmut);font-size:12px;line-height:2;padding:34px 14px;border:1px dashed var(--agl);border-radius:13px}

/* footer */
#v-ai .agc-foot{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10.5px;font-weight:700;color:var(--agmut);padding:2px 6px;flex-wrap:wrap;text-align:center}
#v-ai .agc-foot b{font-variant-numeric:tabular-nums}
#v-ai .aip-fdot{width:6px;height:6px;border-radius:50%;background:var(--agup);box-shadow:0 0 7px var(--agup);animation:agcpulse 1.6s infinite}
/* The footer dot pulsed green unconditionally, next to the literal "AGI ANALYSIS ACTIVE" — a light
   that is always on reports nothing. When the AGI service is not answering it goes flat and grey:
   no glow, no pulse, no claim. (Grey, not red: red in this product means market direction.) */
#v-ai .aip-fdot.off{background:var(--agmut);box-shadow:none;animation:none}
#v-ai .aip-fsep{opacity:.35}

/* ── W1: keyboard focus rings (crimson, offset — visible on both themes) ── */
#v-ai .agc-hbtn:focus-visible,#v-ai .agc-sg:focus-visible,#v-ai .agc-tab:focus-visible,#v-ai .mcopy:focus-visible,
#v-ai .aip-mode:focus-visible,#v-ai .agc-send:focus-visible,#v-ai .aip-mic:focus-visible,#v-ai .agc-jump:focus-visible,
#v-ai .agc-idea-x button:focus-visible,#v-ai .aip-clink:focus-visible,#v-ai .aip-cbtn:focus-visible,
#v-ai .agv-btn:focus-visible,#v-ai .agv-orb:focus-visible{outline:2px solid var(--agac2,#ff6b6b);outline-offset:2px}
/* the composer input itself has no ring — its wrapper already glows via :focus-within */

/* ── W3: VOICE ORB overlay — crimson/white brand, real --vu drives ticks + orb scale (transform-only) ── */
#v-ai #aiVoiceOv{--agl:rgba(255,255,255,.08);--agtx:#f2f5fa;--agmut:#8b95a7;--agac:#e23b3b;--agac2:#ff6b6b;
  position:fixed;inset:0;z-index:var(--z-overlay,1000);display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(4,6,10,.72);backdrop-filter:blur(8px);animation:agvfade var(--dur-2,.18s) both}
@keyframes agvfade{from{opacity:0}to{opacity:1}}
#v-ai .agv-panel{display:flex;flex-direction:column;align-items:center;gap:var(--sp-7,16px);max-width:420px;width:100%;
  padding:28px 22px;border-radius:var(--rad-xl,18px);border:1px solid var(--agl);
  background:linear-gradient(180deg,rgba(12,17,27,.97),rgba(7,9,15,.99));box-shadow:var(--el-4,0 24px 70px rgba(0,0,0,.62));color:var(--agtx)}
#v-ai .agv-orbwrap{--vu:.05;position:relative;width:190px;height:190px;display:grid;place-items:center}
#v-ai .agv-ticks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  stroke:rgba(226,59,59,.55);stroke-width:2;stroke-linecap:round;
  transform:scale(calc(.94 + var(--vu)*.12));transition:transform .18s ease-out;will-change:transform}
#v-ai .agv-ring{position:absolute;inset:24px;border-radius:50%;border:1.5px solid rgba(226,59,59,.4);opacity:0;pointer-events:none;
  animation:agvring 2.4s ease-out infinite}
#v-ai .agv-ring.r2{animation-delay:1.2s}
@keyframes agvring{0%{transform:scale(.74);opacity:.5}70%{opacity:.12}100%{transform:scale(1.24);opacity:0}}
#v-ai .agv-orb{appearance:none;position:relative;width:112px;height:112px;border-radius:50%;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#ff7b6b,var(--agac) 55%,#7d1220);
  box-shadow:0 0 40px rgba(226,59,59,.45),inset 0 2px 0 rgba(255,255,255,.25);
  transform:scale(calc(.97 + var(--vu)*.09));transition:transform .18s ease-out;will-change:transform}
#v-ai .agv-tx{min-height:44px;max-height:110px;overflow-y:auto;text-align:center;font-size:14.5px;line-height:1.7;font-weight:700;color:var(--agtx);width:100%}
#v-ai .agv-int{opacity:.45;font-weight:600}
#v-ai .agv-note{font-size:11.5px;font-weight:700;line-height:1.7;color:var(--warn,#f59e0b);text-align:center;max-width:340px}
#v-ai .agv-ctl{display:flex;gap:var(--sp-3,8px);flex-wrap:wrap;justify-content:center}
#v-ai .agv-btn{appearance:none;border:1px solid var(--agl);background:rgba(255,255,255,.03);color:var(--agtx);
  font:inherit;font-size:12px;font-weight:800;border-radius:var(--rad-pill,999px);padding:9px 16px;cursor:pointer;
  transition:border-color var(--dur-1,.12s),background var(--dur-1,.12s)}
#v-ai .agv-btn:hover{border-color:rgba(226,59,59,.5)}
#v-ai .agv-ok{background:linear-gradient(135deg,var(--agac),#b81e26);border-color:rgba(226,59,59,.5);color:#fff}
#v-ai .agv-auto.on{color:var(--agac2);border-color:rgba(226,59,59,.5);background:rgba(226,59,59,.08)}
#v-ai .agv-auto b{font-variant-numeric:tabular-nums}

/* ── W1/W8: reduced-motion — every #v-ai animation quiets down (incl. the converted breathers) ── */
@media (prefers-reduced-motion:reduce){
  #v-ai .agc-logo::before,#v-ai .agc-orb::before{animation:none;opacity:.45}
  #v-ai .agc-on i,#v-ai .aip-fdot,#v-ai .aip-mic.rec{animation:none}
  #v-ai .msgs>:last-child{animation:none}
  #v-ai .tdots i{animation:none;opacity:.6;transform:none}
  #v-ai .agc-skc,#v-ai .agc-skp,#v-ai .agc-skl{animation:none;background:rgba(255,255,255,.07)}
  html[data-theme="light"] #v-ai .agc-skc,html[data-theme="light"] #v-ai .agc-skp,html[data-theme="light"] #v-ai .agc-skl{background:rgba(16,24,40,.07)}
  #v-ai #aiVoiceOv{animation:none}
  #v-ai .agv-ring{animation:none;opacity:.2;transform:scale(1)}
  #v-ai .agv-ticks,#v-ai .agv-orb{transition:none;transform:none}
  #v-ai .aip-card,#v-ai .agc-jump,#v-ai .agc-send,#v-ai .agc-sg,#v-ai .agc-tab,#v-ai .mcopy{transition:none}
  #v-ai .aip-card:hover,#v-ai .agc-jump:hover,#v-ai .agc-send:active:not(:disabled){transform:none}
}

/* ── responsive ── */
@media (max-width:1100px){
  #v-ai .agc-body{grid-template-columns:1fr}
  #v-ai .agc-rail{order:2}
  #v-ai .aip-cards,#v-ai .agc-vault{max-height:none}
  #v-ai .agc-ctx{display:none}
}
@media (max-width:640px){
  #v-ai .agc-h1{font-size:19px}
  #v-ai .msga{max-width:100%}
  #v-ai .msg.u{max-width:92%}
}

/* ═══ LIGHT THEME — full white variant ═══ */
html[data-theme="light"] #v-ai .agcwrap{
  --agb:#f5f6f9; --agp:#ffffff; --agl:rgba(16,24,40,.12);
  --agtx:#1c2333; --agmut:#5c6675; --agac2:#c22525;   /* deeper crimson accent for AA on white */
  --agup:var(--up); --agdn:var(--down);   /* W1: same single direction system in light */
  background:radial-gradient(900px 340px at 50% -60px, rgba(226,59,59,.05), transparent 60%),#f5f6f9;
}
html[data-theme="light"] #v-ai .agc-chat,
html[data-theme="light"] #v-ai .aip-card,
html[data-theme="light"] #v-ai .agc-idea{background:linear-gradient(180deg,#ffffff,#f7f8fb);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 26px rgba(16,24,40,.07)}
html[data-theme="light"] #v-ai .aip-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--el-2,0 8px 22px rgba(40,55,90,.14))}
html[data-theme="light"] #v-ai .msg.a{background:#ffffff;border-color:rgba(16,24,40,.12)}
html[data-theme="light"] #v-ai .msg.u{background:rgba(226,59,59,.08);border-color:rgba(226,59,59,.28)}
html[data-theme="light"] #v-ai .msg.a.err{background:rgba(226,59,59,.06);border-color:rgba(226,59,59,.32)}
html[data-theme="light"] #v-ai .msg .mtx code.mcode{background:rgba(16,24,40,.06)}
html[data-theme="light"] #v-ai .agc-hlive,html[data-theme="light"] #v-ai .agc-cchip,
html[data-theme="light"] #v-ai .agc-input,html[data-theme="light"] #v-ai .agc-tabs,
html[data-theme="light"] #v-ai .aip-mode,html[data-theme="light"] #v-ai .mcopy,
html[data-theme="light"] #v-ai .agc-hbtn,html[data-theme="light"] #v-ai .aip-mic{background:rgba(16,24,40,.02)}
html[data-theme="light"] #v-ai .agc-sg{background:rgba(226,59,59,.05)}
html[data-theme="light"] #v-ai .agc-srcchip{background:rgba(16,24,40,.02)}
html[data-theme="light"] #v-ai .agc-jump{background:rgba(255,255,255,.94)}
html[data-theme="light"] #v-ai .agc-skc,html[data-theme="light"] #v-ai .agc-skp,html[data-theme="light"] #v-ai .agc-skl{
  background:linear-gradient(90deg,rgba(16,24,40,.05),rgba(16,24,40,.11),rgba(16,24,40,.05));background-size:200% 100%}
html[data-theme="light"] #v-ai .agc-skcard{background:linear-gradient(180deg,#ffffff,#f7f8fb)}
html[data-theme="light"] #v-ai .aip-cerr{background:linear-gradient(180deg,#ffffff,#f7f8fb)}
/* voice orb — light */
html[data-theme="light"] #v-ai #aiVoiceOv{--agl:rgba(16,24,40,.12);--agtx:#1c2333;--agmut:#5c6675;--agac2:#c22525;background:rgba(238,240,246,.78)}
html[data-theme="light"] #v-ai .agv-panel{background:linear-gradient(180deg,#ffffff,#f6f7fa)}
html[data-theme="light"] #v-ai .agv-btn{background:rgba(16,24,40,.03)}
html[data-theme="light"] #v-ai .agv-ticks{stroke:rgba(194,37,37,.6)}
html[data-theme="light"] #v-ai .agv-ring{border-color:rgba(194,37,37,.45)}

/* Stop replaces Send while a stream is in flight — a Send button that stays live during generation
   invites a second request the server has no way to associate with the first. */
#v-ai .agc-send.hide{display:none}
#v-ai .agc-stop{background:linear-gradient(135deg,#6b7280,#4b5563);border-color:rgba(107,114,128,.5)}
#v-ai .mstop{margin-top:6px;font-size:11px;font-weight:700;color:var(--agmut);border-top:1px dashed var(--agl);padding-top:5px}

/* Strategy draft card. Two visual rules carry meaning, not decoration:
   .warn marks what the engine could NOT resolve — that has to be as visible as what it could, or the
   card reads as a finished strategy; and .agstrat-n is always present, because a draft that has not
   been tested must say so on the card itself and not only in the conversation around it. */
#v-ai .agstrat{border:1px solid var(--agl);border-radius:12px;padding:12px 13px;background:rgba(255,255,255,.02)}
#v-ai .agstrat-h{font-size:12.5px;font-weight:900;margin-bottom:9px}
#v-ai .agstrat-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-bottom:9px}
#v-ai .agstrat-g div{background:var(--agbg2,rgba(255,255,255,.03));border-radius:8px;padding:5px 8px}
#v-ai .agstrat-g b{display:block;font-size:9.5px;color:var(--agmut);font-weight:800;letter-spacing:.3px}
#v-ai .agstrat-g span{font-size:12px;font-weight:700}
#v-ai .agstrat-s{margin-bottom:8px}
#v-ai .agstrat-s>b{font-size:10.5px;color:var(--agmut);font-weight:800;letter-spacing:.3px}
#v-ai .agstrat-s ul{margin:4px 0 0;padding-inline-start:16px;font-size:12px;line-height:1.65}
#v-ai .agstrat-s.warn>b{color:#e8932a}
/* Where each value in a strategy draft came from. The colour carries the meaning the owner asked
   for: what YOU said is neutral, what the AI chose for you is amber and must catch the eye, and what
   the engine could not read is red because it blocks approval outright. Brand law: these are STATE
   colours on a pill, never the green/red of market direction. */
#v-ai .agstrat-as{display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.2px;padding:1px 6px;
  border-radius:999px;margin-inline-end:6px;vertical-align:1px;white-space:nowrap}
#v-ai .agstrat-as-user_provided{color:var(--agmut);background:rgba(255,255,255,.05);border:1px solid var(--agl)}
#v-ai .agstrat-as-ai_inferred,
#v-ai .agstrat-as-defaulted{color:#e8932a;background:rgba(232,147,42,.10);border:1px solid rgba(232,147,42,.34)}
#v-ai .agstrat-as-unresolved,
#v-ai .agstrat-as-unsupported{color:#d9534f;background:rgba(217,83,79,.10);border:1px solid rgba(217,83,79,.34)}
#v-ai .agstrat-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--agl);padding-top:8px;margin-top:4px}
#v-ai .agstrat-b{font-size:10px;font-weight:900;padding:3px 8px;border-radius:999px}
#v-ai .agstrat-b.ok{color:var(--agup);background:rgba(0,208,132,.10);border:1px solid rgba(0,208,132,.32)}
#v-ai .agstrat-b.no{color:#e8932a;background:rgba(232,147,42,.10);border:1px solid rgba(232,147,42,.32)}
#v-ai .agstrat-n{font-size:10.5px;color:var(--agmut);font-weight:700}
#v-ai .agstrat-open{margin-top:10px;width:100%;background:var(--agbg2,rgba(255,255,255,.04));border:1px solid var(--agl);color:var(--agtx);border-radius:9px;padding:9px;font:inherit;font-weight:800;cursor:pointer}
#v-ai .agstrat-open:hover{border-color:rgba(255,255,255,.24)}

/* ── the owner's 3D mark in the two brand slots (ai.js:_aiMountMarks) ─────────────────────────
   When the mark holds a real WebGL context the host drops its flat radial + letters and becomes a
   transparent stage (the breathing ::before glow stays — it is the slot's ambient, and the mark's
   own halo rides it). Without WebGL nothing here applies and the disc renders exactly as before. */
#v-ai .agc-logo.agc-mark-on,#v-ai .agc-orb.agc-mark-on{background:none;box-shadow:none}
/* [owner: «بدون خلفيه»] the breathing ::before glow ring was the slot's old ambient — with the real
   mark in place it read as a background behind it. Nothing draws behind the mark now. */
#v-ai .agc-logo.agc-mark-on::before,#v-ai .agc-orb.agc-mark-on::before{display:none}
#v-ai .agc-mark-on .agc-logo-t,#v-ai .agc-mark-on .agc-orb-t{display:none}
#v-ai .agc-orb.agc-mark-on{width:140px;height:140px}