/* ============================================================
   remix-console.css — NEYN-12112 · Variation D "AGENT CONSOLE"
   Loaded AFTER final.css + remix.css. Every rule scoped under
   body.remix-console, so it only expresses the DELTA from B
   (remix.css) — B's engine + layout are inherited for free.
   The move (Antimo's critique: "a chart and a big fat swap UI
   don't signify an agent — what stands out is what an agent DOES,
   which is talk"): the chart hero is DEMOTED to a slim market bar,
   and the hero slot goes to a CONSOLE — the agent's conversation
   stream, chat-style, with a live composer at the bottom. The
   reference is a messaging/assistant surface with market chrome,
   not a trading site. Conversation → action: agent replies can
   prefill the rail swap.
   ============================================================ */

/* ---------- D1 · MARKET BAR — B's chart hero collapsed to a strip ----------
   All shared hooks survive (.ch-price, .chartlabel [data-range], .chartbg,
   .charea, .ch-axis); .ch-head goes display:contents so price / stats /
   sparkline / range tabs sit on ONE grid row. */
body.remix-console .charthero{ display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center; gap:12px 22px;
  padding:12px 16px; margin-bottom:20px; }
body.remix-console .charthero .ch-head{ display:contents; }
body.remix-console .ch-price{ grid-column:1; grid-row:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
body.remix-console .ch-val{ font-size:21px; }
body.remix-console .ch-chg{ font-size:11.5px; }
body.remix-console .mb-stats{ grid-column:2; grid-row:1; display:flex; gap:18px;
  padding-left:22px; border-left:1px solid var(--line); }
body.remix-console .mb-stats .rs .v{ font-size:13px; }
body.remix-console .charthero .chartbg{ grid-column:3; grid-row:1;
  height:64px; background:none; border-radius:0; }
body.remix-console .charthero .chartlabel{ grid-column:4; grid-row:1; }
body.remix-console .charthero .ch-axis{ display:none; margin-top:0; }
/* Chart axis "Tall" restores a real chart: full-width row under the bar */
body.remix-console[data-chart="expanded"] .charthero .chartbg{
  grid-column:1/-1; grid-row:2; height:180px; border-radius:8px;
  background:repeating-linear-gradient(to bottom, transparent 0 45px, var(--line) 45px 46px); }
body.remix-console[data-chart="expanded"] .charthero .ch-axis{
  display:flex; grid-column:1/-1; grid-row:3; }

/* ---------- D2 · THE CONSOLE — the agent's stream is the hero ----------
   .console is display:block (final.css agent-block gating sets it);
   head / thread / composer stack in normal flow. */
body.remix-console .console{ border:1px solid var(--line); border-radius:12px;
  margin-bottom:22px; overflow:hidden; }

/* head: avatar + handle + live dot + agent tag — the identity is a SPEAKER */
body.remix-console .con-head{ display:flex; align-items:center; gap:11px;
  padding:12px 16px; border-bottom:1px solid var(--line); }
body.remix-console .con-av{ width:30px; height:30px; border-radius:50%;
  background:var(--acc-bg); border:1px solid var(--acc-br); flex-shrink:0; }
body.remix-console .con-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
body.remix-console .con-name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.remix-console .con-name b{ font-size:14px; font-weight:700; color:var(--ink); }
body.remix-console .con-live{ display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:500; color:var(--pos); }
body.remix-console .con-live .dot{ width:7px; height:7px; border-radius:50%;
  background:var(--pos); animation:conpulse 1.8s ease-out infinite; }
body.remix-console .con-tag{ font-size:10px; font-weight:600; font-family:var(--mono);
  letter-spacing:.05em; text-transform:uppercase; color:var(--acc);
  background:var(--acc-bg); border:1px solid var(--acc-br); border-radius:4px;
  padding:1px 6px; line-height:14px; }
body.remix-console .con-sub{ font-size:11.5px; color:var(--t666);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.remix-console .con-meta{ font-size:11px; color:var(--t999);
  font-family:var(--mono); white-space:nowrap; flex-shrink:0; }

/* thread: chat bubbles, newest at the bottom, internal scroll */
body.remix-console .con-thread{ max-height:420px; overflow-y:auto;
  overscroll-behavior:contain; padding:16px;
  display:flex; flex-direction:column; gap:14px; }
body.remix-console .msg{ display:flex; gap:9px; max-width:78%; }
body.remix-console .msg.agent{ align-self:flex-start; }
body.remix-console .msg.other{ align-self:flex-start; }
body.remix-console .msg.user{ align-self:flex-end; flex-direction:row-reverse; }
body.remix-console .m-av{ width:24px; height:24px; border-radius:50%;
  background:var(--chipbg); flex-shrink:0; margin-top:2px; }
body.remix-console .msg.agent .m-av{ background:var(--acc-bg); border:1px solid var(--acc-br); }
body.remix-console .msg.user .m-av{ display:none; }
body.remix-console .m-bubble{ min-width:0; background:var(--navfill);
  border-radius:12px; padding:10px 12px; }
body.remix-console .msg.agent .m-bubble{ border-top-left-radius:4px; }
body.remix-console .msg.other .m-bubble{ background:var(--bg);
  border:1px solid var(--line); border-top-left-radius:4px; }
body.remix-console .msg.user .m-bubble{ background:var(--cta); border-top-right-radius:4px; }
body.remix-console .m-head{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  font-size:11px; color:var(--t666); margin-bottom:4px; }
body.remix-console .m-head b{ font-size:12px; font-weight:700; color:var(--ink); }
body.remix-console .m-h{ color:var(--t888); }
body.remix-console .m-t{ color:var(--t999); }
body.remix-console .m-re{ font-size:10.5px; color:var(--t999); }
body.remix-console .m-body{ font-size:13px; line-height:1.5; color:var(--t333);
  white-space:normal; overflow-wrap:break-word; }
body.remix-console .msg.user .m-head,
body.remix-console .msg.user .m-head b,
body.remix-console .msg.user .m-t{ color:var(--cta-ink); }
body.remix-console .msg.user .m-head{ opacity:.75; }
body.remix-console .msg.user .m-body{ color:var(--cta-ink); }
body.remix-console .m-eng{ display:flex; gap:12px; flex-wrap:wrap; margin-top:7px;
  font-family:var(--mono); font-size:10.5px; color:var(--t888);
  font-variant-numeric:tabular-nums; }
body.remix-console .m-eng b{ font-weight:500; color:var(--ink); }
body.remix-console .m-mock{ font-size:9px; font-weight:600; font-family:var(--mono);
  letter-spacing:.06em; text-transform:uppercase; color:var(--t999);
  border:1px solid var(--line); border-radius:3px; padding:0 4px; line-height:13px; }

/* the money moment: conversation → action chip inside an agent bubble */
body.remix-console .m-chip{ display:inline-flex; align-items:center; gap:6px;
  margin-top:9px; font-size:12px; font-weight:600; color:var(--acc);
  background:var(--acc-bg); border:1px solid var(--acc-br); border-radius:6px;
  padding:6px 11px; cursor:pointer; }
body.remix-console .m-chip:hover{ border-color:var(--acc); }

/* typing indicator */
body.remix-console .msg.typing .m-bubble{ display:flex; align-items:center; gap:4px;
  padding:13px 14px; }
body.remix-console .tdot{ width:6px; height:6px; border-radius:50%;
  background:var(--t888); animation:conblink 1s ease-in-out infinite; }
body.remix-console .tdot:nth-child(2){ animation-delay:.15s; }
body.remix-console .tdot:nth-child(3){ animation-delay:.3s; }

/* composer pinned at the card's bottom */
body.remix-console .con-composer{ display:flex; gap:10px; padding:12px 16px;
  border-top:1px solid var(--line); background:var(--bg); }
body.remix-console .con-input{ flex:1; min-width:0; height:40px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg);
  padding:0 12px; font-size:13px; color:var(--ink); }
body.remix-console .con-input::placeholder{ color:var(--t888); }
body.remix-console .con-input:focus{ outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-bg); }
body.remix-console .con-send{ font-size:13px; font-weight:600; color:var(--cta-ink);
  background:var(--cta); border:none; border-radius:8px; padding:0 20px; }

/* empty-state consoles (noagent / v1locked) — dashed, same slot */
body.remix-console .console-empty{ margin-bottom:22px; padding:20px; }
body.remix-console .console-empty .estitle{ font-size:14px; }
body.remix-console .console-empty .btn-primary{ width:auto; padding:11px 18px; }

/* keyframes can't nest under a scope — unique names keep them page-safe */
@keyframes conpulse{
  0%{ box-shadow:0 0 0 0 var(--pos-bg); }
  70%{ box-shadow:0 0 0 6px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
@keyframes conblink{
  0%, 80%, 100%{ opacity:.25; }
  40%{ opacity:1; }
}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  /* clear the docked Trade pill so the composer is never covered */
  body.remix-console{ padding-bottom:96px; }
  body.remix-console .charthero{ grid-template-columns:minmax(0,1fr) auto; row-gap:10px;
    padding:12px 14px; margin-bottom:16px; }
  body.remix-console .ch-price{ flex-direction:row; align-items:baseline; gap:8px; }
  body.remix-console .mb-stats{ display:none; }  /* .mstats strip carries vitals < 900px */
  body.remix-console .charthero .chartlabel{ grid-column:2; grid-row:1; justify-self:end; }
  body.remix-console .charthero .chartbg{ grid-column:1/-1; grid-row:2; height:56px; }
  body.remix-console[data-chart="expanded"] .charthero .chartbg{ height:160px; }
  body.remix-console .con-thread{ max-height:50vh; }
  body.remix-console .msg{ max-width:92%; }
  body.remix-console .con-meta{ display:none; }
}