/* ============================================================
   remix-tape.css — NEYN-12112 · Archetype F "TAPE-FIRST"
   Loaded AFTER final.css + remix.css; every rule scoped under
   body.remix-tape so it expresses ONLY the delta from B (the
   sticky-swap remix). Equal-specificity rules win by source order
   (this file loads last).
   THESIS — the feed IS the hero. The project's core bet is "fuse
   the feed + the tape + the agent — screeners structurally won't";
   this archetype commits fully:
     · the page is a live stream of everything the token is doing —
       trades, casts, deploys interleaved — with market chrome
       DOCKED around it, not above it
     · market data compressed into ONE full-width strip: price +
       delta + sparkline (the chart hero, shrunk — hooks intact) +
       MCap/Vol/Liq/Holders + the trust chips; data-chart=expanded
       grows the sparkline to 140px on its own row
     · THE TAPE: B's fixed feed as a tall (560px) terminal-calm
       hero. Agent-authored cast rows are tagged .agentrow by a
       page-local script and styled as first-class events — accent
       left border, accent avatar, larger UNCLAMPED text — so the
       agent is visibly TALKING amid compact mono trade rows
     · rail (40%): swap (verbatim) → Safety → compact Agent context
       card ("View in tape" anchors into the stream)
     · agent axis: fc/x rows vanish (inherited gating) and the tape
       header honestly swaps "trades · casts · deploys" → "on-chain
       only"; the strip is market data, unaffected
   MOBILE: strip wraps (price+stats row → sparkline row) and serves
   as the vitals block (B's .mstats dropped — no double stats);
   tape ≤60vh; rail hidden; docked Trade pill as usual.
   ============================================================ */

/* ---------- F1 · MARKET STRIP (full-width, dense but airy) ---------- */
body.remix-tape .mktstrip{ display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 14px; padding:12px var(--pgpad); border-bottom:1px solid var(--line); }
body.remix-tape .mktstrip .ch-price{ flex-shrink:0; flex-direction:column;
  align-items:flex-start; gap:3px; }
body.remix-tape .ch-val{ font-size:22px; }
body.remix-tape .ch-chg{ font-size:11px; }

/* sparkline = the chart hero, shrunk to a strip element (svg + hooks intact) */
body.remix-tape .charthero{ flex:1 1 150px; min-width:120px; margin:0; padding:0;
  border:none; border-radius:0; }
body.remix-tape .charthero .chartbg{ height:56px; border-radius:4px; background:none; }
body.remix-tape .charthero .chartbg polyline{ stroke-width:1.5; }
body.remix-tape .ch-axis{ display:none; margin-top:4px; }

/* inline vitals (the strip doubles as the mobile stats block) */
body.remix-tape .mkt-stats{ display:flex; gap:14px; flex-shrink:0; flex-wrap:wrap; }
body.remix-tape .mkt-stats .rs{ gap:2px; }
body.remix-tape .mkt-stats .rs .k{ font-size:10.5px; }
body.remix-tape .mkt-stats .rs .v{ font-size:13px; }

/* trust chips, right-aligned */
body.remix-tape .mkt-trust{ display:flex; gap:4px; flex-wrap:wrap; align-items:center;
  margin-left:auto; }
body.remix-tape .mkt-trust .mhbadge{ font-size:10.5px; padding:2px 4px; gap:4px;
  cursor:default; }

/* range switcher lives at the strip's right edge (stays wired to final-ix) */
body.remix-tape .chartlabel{ display:inline-flex; position:static; margin:0; }
body.remix-tape .chartlabel .range{ gap:2px; }
body.remix-tape .chartlabel .range span{ padding:2px 5px; font-size:11px; }

/* chart axis: Tall ⇒ the sparkline takes its own full-width row at 140px */
body[data-chart="expanded"].remix-tape .charthero{ flex:1 1 100%; order:10; }
body[data-chart="expanded"].remix-tape .charthero .chartbg{ height:140px; }
body[data-chart="expanded"].remix-tape .ch-axis{ display:flex; }
body[data-chart="expanded"].remix-tape .chartlabel{ order:11; margin-left:auto; }

/* ---------- F2 · SPLIT 60/40 (tape left, console right) ---------- */
body.remix-tape .body{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }

/* ---------- F3 · THE TAPE (the hero) ---------- */
body.remix-tape #tape{ scroll-margin-top:calc(var(--navh) + var(--sliverh) + 14px); }
body.remix-tape .activity.fixed{ border:1px solid var(--line); border-radius:12px;
  padding:14px 16px 4px; }
body.remix-tape .activity.fixed .actlist{ height:560px; }
body.remix-tape .acthead{ flex-wrap:wrap; gap:10px 14px; }

/* LIVE header + pulsing dot */
body.remix-tape .livehdr{ display:inline-flex; align-items:center; gap:8px; }
body.remix-tape .livehdr b{ font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.09em; color:var(--ink); }
body.remix-tape .livesub{ font-size:11px; color:var(--t888); }
body.remix-tape .livedot{ width:8px; height:8px; border-radius:50%; background:var(--pos);
  flex-shrink:0; animation:tape-pulse 1.7s ease-in-out infinite; }
@keyframes tape-pulse{
  0%,100%{ box-shadow:0 0 0 0 var(--pos-bg); }
  50%{ box-shadow:0 0 0 6px var(--pos-bg); opacity:.75; }
}
/* agent axis ⇒ no social presence ⇒ the tape is honestly on-chain only */
body.remix-tape .live-chain{ display:none; }
body.remix-tape[data-agent="noagent"] .live-on,
body.remix-tape[data-agent="v1locked"] .live-on{ display:none; }
body.remix-tape[data-agent="noagent"] .live-chain,
body.remix-tape[data-agent="v1locked"] .live-chain{ display:inline; }

/* trades stay compact mono rows (tape/terminal register) */
body.remix-tape .actlist .row{ padding-left:11px; }
body.remix-tape .actlist .row[data-kind~="trade"] .txt span:not(.time){
  font-family:var(--mono); font-size:12px; }

/* AGENT ROWS — the agent talking, first-class in the stream
   (.agentrow is tagged by the page-local script: cast rows authored
   by clanker/tokenbot; class-only, remix-ix expansion untouched) */
body.remix-tape .actlist .row.agentrow{ border-left:2px solid var(--acc); padding-left:9px; }
body.remix-tape .actlist .row.agentrow .sq{ border-radius:6px; background:var(--acc-bg);
  border:1px solid var(--acc-br); }
body.remix-tape .actlist .row.agentrow .txt{ white-space:normal; overflow:visible;
  text-overflow:clip; font-size:13.5px; line-height:1.45; padding:2px 0; }
body.remix-tape .actlist .row.agentrow .txt b{ color:var(--acc); }
body.remix-tape .actlist .row.agentrow .txt span:not(.time){ color:var(--t333); }

/* ---------- F4 · RAIL (swap → Safety → Agent context) ---------- */
body.remix-tape .railwrap{ gap:16px; }
body.remix-tape .agmini{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
body.remix-tape .agav{ width:34px; height:34px; border-radius:8px; background:var(--acc-bg);
  border:1px solid var(--acc-br); flex-shrink:0; }
body.remix-tape .agid{ display:flex; flex-direction:column; gap:2px; min-width:0; }
body.remix-tape .agid b{ font-size:13.5px; font-weight:700; color:var(--ink); }
body.remix-tape .agid .agsub{ font-size:11px; color:var(--t888); }
body.remix-tape .aglive{ margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:500; color:var(--pos); white-space:nowrap; }
body.remix-tape .agline{ font-size:12.5px; margin-bottom:6px; }
body.remix-tape #rail-agent .kv{ min-height:0; padding:4px 0; }
body.remix-tape .tapejump{ display:inline-block; margin-top:10px; font-size:12px;
  font-weight:600; color:var(--acc); }
body.remix-tape .tapejump:hover{ text-decoration:underline; }
body.remix-tape[data-agent="noagent"] #rail-agent,
body.remix-tape[data-agent="v1locked"] #rail-agent{ border-style:dashed;
  border-color:var(--t888); }

/* ---------- F5 · MOBILE (strip wraps; tape ≤60vh; rail hidden by final.css) ---------- */
@media (max-width:900px){
  body.remix-tape .mktstrip{ gap:10px 16px; padding:10px var(--pgpad) 12px; }
  body.remix-tape .charthero{ flex:1 1 100%; order:10; }
  body.remix-tape .chartlabel{ order:11; margin-left:auto; }
  body.remix-tape .mkt-trust{ margin-left:0; }
  body.remix-tape .activity.fixed{ padding:12px 12px 2px; }
  body.remix-tape .activity.fixed .actlist{ height:auto; max-height:60vh; }
}
