/* ===== Apex · Agent Payment Infrastructure — design system (ported from Claude Design handoff) ===== */
:root{
  --bg: oklch(0.984 0.004 280);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.976 0.005 280);
  --ink: oklch(0.255 0.02 282);
  --muted: oklch(0.52 0.02 282);
  --faint: oklch(0.66 0.018 282);
  --line: oklch(0.918 0.006 282);
  --line-strong: oklch(0.86 0.008 282);
  --accent: oklch(0.53 0.19 283);
  --accent-ink: oklch(0.985 0.01 283);
  --accent-weak: oklch(0.955 0.025 285);
  --accent-weak-line: oklch(0.9 0.04 285);
  --assistant-bg: oklch(0.968 0.008 285);
  --amber-bg: oklch(0.975 0.03 80);
  --amber-line: oklch(0.88 0.06 75);
  --amber-ink: oklch(0.52 0.1 58);
  --term-bg: oklch(0.205 0.012 280);
  --term-line: oklch(0.3 0.015 280);
  --term-dim: oklch(0.58 0.02 280);
  --term-green: oklch(0.82 0.15 152);
  --term-text: oklch(0.9 0.01 280);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px oklch(0.4 0.02 282 / 0.05), 0 1px 3px oklch(0.4 0.02 282 / 0.04);
  --shadow-md: 0 4px 16px oklch(0.4 0.02 282 / 0.07), 0 1px 3px oklch(0.4 0.02 282 / 0.05);
  --ui-font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ font-family:var(--ui-font); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:oklch(0.53 0.19 283 / 0.18); }
.app{ height:100%; display:grid; grid-template-rows:auto 1fr; min-height:0; }

.scroll{ overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.scroll::-webkit-scrollbar{ width:10px; }
.scroll::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:3px solid var(--surface); }
.term .scroll::-webkit-scrollbar-thumb, .term-body::-webkit-scrollbar-thumb{ background:var(--term-line); border-color:var(--term-bg); }

/* ---------- header ---------- */
.hdr{ display:flex; align-items:center; gap:18px; padding:0 26px; height:64px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--accent-ink);
  background:linear-gradient(145deg, var(--accent), oklch(0.46 0.2 290)); box-shadow:0 2px 8px oklch(0.53 0.19 283 / 0.35); }
.brand-mark svg{ display:block; }
.brand-name{ font-size:15.5px; font-weight:700; letter-spacing:-0.01em; }
.brand-sep{ color:var(--faint); font-weight:400; margin:0 2px; }
.brand-sub{ font-weight:600; color:var(--ink); }
.hdr-spacer{ flex:1; }
.scenario-wrap{ display:flex; align-items:center; gap:12px; }
.scenario-lbl{ font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:0.01em; }
.sel{ position:relative; display:flex; }
.sel select{ appearance:none; -webkit-appearance:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; padding:9px 38px 9px 14px; min-width:240px;
  cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s; }
.sel select:hover{ border-color:oklch(0.78 0.02 282); }
.sel select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px oklch(0.53 0.19 283 / 0.16); }
.sel .chev{ position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; display:grid; place-items:center; }
.btn-ghost{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; padding:9px 15px; box-shadow:var(--shadow-sm); transition:all .15s; }
.btn-ghost:hover{ color:var(--ink); border-color:oklch(0.78 0.02 282); background:var(--surface-2); }
.btn-ghost svg{ color:var(--faint); } .btn-ghost:hover svg{ color:var(--muted); }
.mandate-chip{ font:600 12.5px var(--ui-font); color:var(--accent); background:var(--accent-weak); border:1px solid var(--accent-weak-line);
  padding:7px 13px; border-radius:99px; }

/* ---------- columns ---------- */
.cols{ display:grid; grid-template-columns:1.18fr 0.95fr 0.92fr; grid-template-rows:minmax(0,1fr); min-height:0; }
.col{ display:grid; grid-template-rows:auto 1fr; min-height:0; min-width:0; border-right:1px solid var(--line); background:var(--surface); }
.col.term{ border-right:none; }
.col-hdr{ display:flex; align-items:center; gap:10px; padding:0 22px; height:54px; border-bottom:1px solid var(--line); background:var(--surface); }
.col-hdr .ttl{ font-size:14px; font-weight:700; letter-spacing:-0.005em; }
.col-hdr .ic{ color:var(--accent); display:grid; place-items:center; }
.col-hdr-spacer{ flex:1; }

/* status pill */
.status{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:99px; border:1px solid var(--line-strong); color:var(--muted); background:var(--surface-2); }
.status .dot{ width:7px; height:7px; border-radius:99px; background:var(--faint); }
.status.idle .dot{ background:oklch(0.7 0.015 282); }
.status.armed{ color:oklch(0.5 0.1 58); border-color:var(--amber-line); background:var(--amber-bg); }
.status.armed .dot{ background:oklch(0.7 0.14 65); }
.status.busy{ color:var(--accent); border-color:var(--accent-weak-line); background:var(--accent-weak); }
.status.busy .dot{ background:var(--accent); animation:pulse 1.1s ease-in-out infinite; }
.status.ok{ color:oklch(0.46 0.13 152); border-color:oklch(0.84 0.07 152); background:oklch(0.96 0.04 152); }
.status.ok .dot{ background:oklch(0.6 0.15 152); }
.status.bad{ color:oklch(0.5 0.16 25); border-color:oklch(0.85 0.08 25); background:oklch(0.96 0.04 25); }
.status.bad .dot{ background:oklch(0.6 0.19 25); }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(.8);} }

/* ---------- chat ---------- */
.chat{ display:grid; grid-template-rows:1fr auto; min-height:0; }
.thread{ padding:24px 22px 12px; display:flex; flex-direction:column; gap:16px; min-height:0; }
.thread > *{ flex:0 0 auto; } /* keep natural heights so the thread overflows & scrolls (don't shrink the pay-card) */
.msg{ max-width:84%; font-size:14.5px; line-height:1.55; }
.msg.assistant{ align-self:flex-start; background:var(--assistant-bg); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); border-top-left-radius:5px; padding:13px 17px; }
.msg.user{ align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-radius:var(--radius);
  border-bottom-right-radius:5px; padding:12px 17px; box-shadow:0 2px 10px oklch(0.53 0.19 283 / 0.22); font-weight:500; }
.msg strong{ font-weight:700; } .msg em{ color:var(--muted); font-style:italic; } .msg.user em{ color:oklch(0.92 0.04 285); }
.note{ align-self:center; max-width:82%; text-align:center; background:var(--amber-bg); border:1px solid var(--amber-line);
  color:var(--amber-ink); border-radius:13px; padding:11px 18px; font-size:13px; line-height:1.5; }
.note .tag{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:oklch(0.6 0.11 62); margin-bottom:5px; }
.note .tag .pip{ width:5px; height:5px; border-radius:99px; background:oklch(0.68 0.14 65); }
.msg-enter{ animation:rise .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 6px; }
.chip{ border:1px solid var(--line-strong); background:var(--surface); border-radius:99px; padding:6px 12px; font-size:12.5px; color:var(--muted); cursor:pointer; }
.chip:hover{ border-color:var(--accent); color:var(--accent); }

/* composer */
.composer{ border-top:1px solid var(--line); padding:16px 18px; background:var(--surface); display:flex; gap:11px; align-items:center; }
.composer .field{ flex:1; position:relative; }
.composer input{ width:100%; font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:12px; padding:13px 16px; transition:border-color .15s, box-shadow .15s; }
.composer input::placeholder{ color:var(--faint); }
.composer input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px oklch(0.53 0.19 283 / 0.16); }
.btn-send{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--accent-ink);
  background:var(--accent); border:none; border-radius:12px; padding:13px 20px; box-shadow:0 2px 10px oklch(0.53 0.19 283 / 0.3); transition:filter .15s, transform .05s; }
.btn-send:hover{ filter:brightness(1.06); } .btn-send:active{ transform:translateY(1px); }

/* ---------- agent console ---------- */
.console-body{ padding:22px; min-height:0; }
.empty{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; color:var(--faint); }
.empty .ring{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--faint); }
.empty .et{ font-size:14px; font-weight:600; color:var(--muted); }
.empty .es{ font-size:13px; max-width:240px; line-height:1.5; }
/* live run steps */
.apx-step{ font-size:13px; color:var(--muted); display:flex; align-items:flex-start; gap:8px; padding:5px 0; line-height:1.5; }
.apx-assess{ display:flex; align-items:flex-start; gap:8px; font-size:13px; padding:9px 12px; border-radius:11px; border:1px solid var(--line); margin:6px 0; line-height:1.45; }
.apx-assess.match{ background:oklch(0.97 0.03 152); border-color:oklch(0.86 0.06 152); color:oklch(0.42 0.12 152); }
.apx-assess.reject{ background:oklch(0.97 0.025 25); border-color:oklch(0.88 0.05 25); color:oklch(0.47 0.14 25); }
.apx-railrow{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.apx-railchip{ font:600 12px var(--ui-font); padding:6px 11px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface); display:flex; gap:6px; align-items:center; }
.apx-railchip.trying{ border-color:var(--amber-line); background:var(--amber-bg); color:var(--amber-ink); }
.apx-railchip.ok{ border-color:oklch(0.84 0.07 152); background:oklch(0.96 0.04 152); color:oklch(0.44 0.12 152); }
.apx-railchip.fail{ border-color:oklch(0.85 0.08 25); background:oklch(0.96 0.04 25); color:oklch(0.5 0.15 25); text-decoration:line-through; }
/* receipt → mandate-style card */
.apx-receipt{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); margin-top:14px; animation:rise .32s cubic-bezier(.2,.7,.2,1) both; }
.apx-receipt-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 17px; border-bottom:1px solid var(--line); background:var(--surface-2); font-weight:700; font-size:14px; }
.apx-receipt-h span{ font-family:var(--mono); font-weight:600; }
.apx-receipt-b{ padding:4px 17px; }
.apx-receipt-b div{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:600; }
.apx-receipt-b div:last-child{ border-bottom:none; }
.apx-receipt-b b{ color:var(--muted); font-weight:500; font-size:12.5px; }

/* ---------- terminal ---------- */
.term-body{ background:var(--term-bg); min-height:0; padding:18px 20px; font-family:var(--mono); font-size:12.5px; line-height:1.85; }
.tline{ display:flex; gap:10px; color:var(--term-text); white-space:pre-wrap; word-break:break-word; border-left:2px solid transparent; padding-left:12px; margin-left:-14px; animation:fadein .25s ease both; }
.tline .ts{ color:var(--term-dim); flex:none; white-space:nowrap; }
.tline .lvl{ font-weight:600; flex:none; white-space:nowrap; min-width:62px; }
.tline.sys{ border-left-color:var(--term-line); } .tline.sys .lvl{ color:oklch(0.72 0.04 280); }
.tline.think{ border-left-color:oklch(0.5 0.12 283); } .tline.think .lvl{ color:oklch(0.72 0.13 285); }
.tline.act{ border-left-color:oklch(0.5 0.1 200); } .tline.act .lvl{ color:oklch(0.78 0.1 205); }
.tline.pay{ border-left-color:var(--term-green); } .tline.pay .lvl{ color:var(--term-green); }
.tline.warn{ border-left-color:oklch(0.6 0.13 65); } .tline.warn .lvl{ color:oklch(0.82 0.13 70); }
.tline.err{ border-left-color:oklch(0.6 0.18 25); } .tline.err .lvl{ color:oklch(0.74 0.16 28); }
.tline .body{ color:var(--term-text); }
.cursor{ display:inline-block; width:8px; height:15px; background:var(--term-green); vertical-align:-2px; margin-left:2px; animation:blink 1.05s step-end infinite; }
@keyframes blink{ 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }

/* ---------- modal (authorization, rail ceremonies, top-up) ---------- */
.apx-overlay{ position:fixed; inset:0; background:oklch(0.255 0.02 282 / 0.42); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; backdrop-filter:blur(2px); }
.apx-modal{ background:var(--surface); border-radius:var(--radius); width:460px; max-width:100%; max-height:92vh; overflow:auto; box-shadow:0 20px 60px oklch(0.2 0.02 282 / 0.3); }
.apx-modal-h{ padding:20px 24px 14px; font-size:16px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
.apx-modal-x{ margin-left:auto; border:0; background:transparent; font-size:15px; color:var(--faint); cursor:pointer; line-height:1; padding:5px 8px; border-radius:8px; }
.apx-modal-x:hover{ background:var(--surface-2); color:var(--ink); }
.apx-modal-b{ padding:0 24px 8px; }
.apx-modal-b label{ display:block; font-size:12px; color:var(--muted); margin:12px 0 5px; }
.apx-modal-b input{ width:100%; border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; }
.apx-modal-b input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px oklch(0.53 0.19 283 / 0.14); }
.apx-modal-actions{ display:flex; gap:10px; padding:16px 24px 22px; }
.apx-btn{ flex:1; border:0; border-radius:11px; padding:13px; font-weight:700; cursor:pointer; font-size:14.5px; transition:filter .15s, transform .05s; }
.apx-btn.primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 2px 10px oklch(0.53 0.19 283 / 0.3); }
.apx-btn.primary:hover{ filter:brightness(1.06); } .apx-btn.primary:active{ transform:translateY(1px); }
.apx-btn.sub{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line-strong); }
.apx-btn.sub:hover{ background:oklch(0.95 0.006 282); }

/* authorize sheet */
.apx-auth-amount{ text-align:center; padding:6px 0 18px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.apx-auth-label{ font-size:12.5px; color:var(--muted); }
.apx-auth-figure{ font-size:36px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin:5px 0; color:var(--ink); }
.apx-auth-sub{ font-size:12.5px; color:var(--muted); }
.apx-auth-methods-h{ font:700 11px var(--ui-font); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px; }
.apx-tiles{ display:flex; flex-direction:column; gap:8px; }
.apx-tile{ display:flex; align-items:center; gap:12px; border:1px solid var(--line-strong); border-radius:12px; padding:12px 14px; background:var(--surface); transition:.15s; }
.apx-tile:hover{ border-color:oklch(0.78 0.02 282); box-shadow:var(--shadow-sm); }
.apx-tile .ic{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; font-weight:800; flex-shrink:0; }
.apx-tile .meta{ flex:1; min-width:0; } .apx-tile .meta b{ font-size:14px; display:block; } .apx-tile .meta p{ margin:1px 0 0; font-size:12px; color:var(--muted); }
.apx-tile .st{ font:600 12.5px var(--ui-font); color:oklch(0.46 0.13 152); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.apx-tile.authed{ border-color:oklch(0.84 0.07 152); background:oklch(0.97 0.03 152); }
.apx-tile button{ border:1px solid var(--line-strong); color:var(--ink); background:var(--surface); border-radius:8px; padding:7px 15px; font-weight:600; cursor:pointer; font-size:13px; transition:.15s; white-space:nowrap; }
.apx-tile button:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-weak); }
.ic-card{ background:#635bff; } .ic-crypto{ background:#f6851b; } .ic-paypal{ background:#003087; } .ic-alipay{ background:#1677ff; }
.apx-brandbar{ height:5px; border-radius:99px; margin-bottom:12px; } .bb-paypal{ background:#003087; } .bb-alipay{ background:#1677ff; } .bb-stripe{ background:#635bff; } .bb-crypto{ background:#f6851b; }
.apx-consent-row{ display:flex; gap:10px; padding:9px 0; font-size:13.5px; border-bottom:1px dashed var(--line); } .apx-consent-row b{ margin-left:auto; }
.apx-spin{ width:15px; height:15px; border:2px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- inline payment card (embedded in chat) ---------- */
.pay-card{ align-self:center; width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; }
.pay-card.done{ opacity:.66; } .pay-card.done .pay-foot{ display:none; }
.pay-head{ padding:16px 18px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); text-align:center; }
.pay-head.amber{ background:var(--amber-bg); border-color:var(--amber-line); }
.pay-amt-l{ font-size:12px; color:var(--muted); }
.pay-amt-f{ font-size:30px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.15; margin-top:2px; }
.pay-sub{ font-size:12px; color:var(--muted); margin-top:5px; }
.pay-methods-h{ font:700 11px var(--ui-font); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:14px 18px 8px; }
.pay-tiles{ padding:0 18px; display:flex; flex-direction:column; gap:8px; }
.pay-tile{ display:flex; align-items:center; gap:12px; border:1px solid var(--line-strong); border-radius:12px; padding:11px 13px; transition:.15s; background:var(--surface); }
.pay-tile .ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; font-weight:800; flex-shrink:0; }
.pay-tile .meta{ flex:1; min-width:0; } .pay-tile .meta b{ font-size:13.5px; display:block; } .pay-tile .meta p{ margin:1px 0 0; font-size:11.5px; color:var(--muted); }
.pay-tile .st{ font:600 12px var(--ui-font); color:oklch(0.46 0.13 152); white-space:nowrap; }
.pay-tile.authed{ border-color:oklch(0.84 0.07 152); background:oklch(0.97 0.03 152); }
.pay-tile-btn{ border:1px solid var(--line-strong); color:var(--ink); background:var(--surface); border-radius:8px; padding:6px 13px; font-weight:600; cursor:pointer; font-size:12.5px; white-space:nowrap; transition:.15s; }
.pay-tile-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-weak); }
.pay-tile.radio{ cursor:pointer; }
.pay-tile.radio .radio-dot{ width:18px; height:18px; border-radius:99px; border:2px solid var(--line-strong); flex-shrink:0; position:relative; transition:.15s; }
.pay-tile.radio:hover{ border-color:oklch(0.78 0.02 282); }
.pay-tile.radio.sel{ border-color:var(--accent); background:var(--accent-weak); }
.pay-tile.radio.sel .radio-dot{ border-color:var(--accent); }
.pay-tile.radio.sel .radio-dot::after{ content:''; position:absolute; inset:3px; border-radius:99px; background:var(--accent); }
.pay-foot{ padding:16px 18px; }
.pay-btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px; padding:13px; font-weight:700; font-size:14.5px; color:var(--accent-ink); background:var(--accent); box-shadow:0 2px 10px oklch(0.53 0.19 283 / 0.3); cursor:pointer; transition:filter .15s, transform .05s; }
.pay-btn:hover{ filter:brightness(1.06); } .pay-btn:active{ transform:translateY(1px); } .pay-btn:disabled{ opacity:.75; cursor:default; }