/* =============================================================
   build/dyno.css — Arc-Tuning dyno styling (perf + eco themes)
   Matches the rest of the Arc-Tuning app's dark thriller / sunny field
   themes via body.perf / body.eco class. NO scanner-mockup purples.
   ============================================================= */

:root, body.perf {
  --bg: #060606; --bg-soft: #0f1215; --bg-raised: #1a1a1a;
  --bg-card: #14161b; --bg-card-hi: #1d2027; --bg-paper: #fafafa;
  --ink: #e8e6e0; --ink-dim: rgba(232, 230, 224, 0.55); --ink-faint: rgba(232, 230, 224, 0.15);
  --accent: #c8ff5a; --accent-bg: rgba(200,255,90,0.10); --accent-bd: rgba(200,255,90,0.5); --accent-ink: #060606;
  --hp-line: #c8ff5a;
  --tq-line: #5bb8ff;
  --afr-line: #ff9500;
  --warn: #ff9500; --danger: #ff4545; --good: #3fb950; --info: #5b9fe0;
  --teach: #5bb8ff;
  --knock: #ff2a18;
  --gauge-bg: #0a0c10;
  --gauge-rim: rgba(255,255,255,0.18);
  --gauge-tick: rgba(255,255,255,0.55);
  --gauge-needle: #ff2a18;
  --gauge-arc: rgba(200,255,90,0.55);
  --font-sans: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 6px; --radius-lg: 10px;
}
body.eco {
  --bg: #0a1308; --bg-soft: #102013; --bg-raised: #182a1c;
  --bg-card: #14241b; --bg-card-hi: #1c3024;
  --ink: #eaf3df; --ink-dim: rgba(234,243,223,0.6); --ink-faint: rgba(234,243,223,0.15);
  --accent: #f5c542; --accent-bg: rgba(245,197,66,0.12); --accent-bd: rgba(245,197,66,0.55); --accent-ink: #0a1308;
  --hp-line: #f5c542;
  --tq-line: #82c8ee;
  --afr-line: #92d04f;
  --gauge-bg: #0a1408;
  --gauge-rim: rgba(245,197,66,0.25);
  --gauge-arc: rgba(245,197,66,0.6);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); min-height: 100vh; }

/* ---- Top bar ---- */
.topbar { position: sticky; top: 0; z-index: 30; height: 52px; padding: 10px 18px; border-bottom: 0.5px solid var(--ink-faint); background: rgba(0,0,0,0.78); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px; color: var(--ink-dim); text-transform: uppercase; display: flex; align-items: center; }
.brand b { color: var(--ink); font-weight: 500; }
.brand-room { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--ink-faint); color: var(--accent); }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.theme-toggle { display: inline-flex; border: 1px solid var(--ink-faint); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.tt-btn { background: transparent; border: 0; color: var(--ink-dim); padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; font-weight: 600; }
.tt-btn:hover { color: var(--ink); }
.tt-btn.active { background: var(--accent); color: var(--accent-ink); }
.tt-btn + .tt-btn { border-left: 1px solid var(--ink-faint); }
.skip-link, .top-btn { background: transparent; border: 0.5px solid var(--ink-faint); color: var(--ink-dim); padding: 6px 12px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.15s; }
.skip-link:hover, .top-btn:hover { color: var(--ink); border-color: var(--ink); }

/* ---- Stage container ---- */
.dyno-stage { max-width: 1280px; margin: 0 auto; padding: 16px 18px 60px; }

/* ---- Weather strip (top) ---- */
.dyno-weather { display: flex; gap: 16px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--ink-faint); border-radius: var(--radius); margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; flex-wrap: wrap; justify-content: space-between; }
.dyno-weather .w-item { display: flex; align-items: baseline; gap: 6px; }
.dyno-weather .w-item .k { font-size: 9px; letter-spacing: 1.5px; color: var(--ink-dim); text-transform: uppercase; }
.dyno-weather .w-item .v { color: var(--ink); font-weight: 500; }
.dyno-weather .w-item .v.good { color: var(--accent); }
.dyno-weather .w-item .v.warn { color: var(--warn); }

/* ---- Persistent Professor panel ---- */
.dyno-prof { display: flex; gap: 12px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--ink-faint); border-radius: var(--radius); margin-bottom: 14px; transition: border-color 0.2s; }
.dyno-prof.warning { border-color: rgba(255,149,0,0.5); background: linear-gradient(135deg, rgba(255,149,0,0.06), var(--bg-card)); }
.dyno-prof.running { border-color: var(--accent-bd); background: linear-gradient(135deg, rgba(200,255,90,0.04), var(--bg-card)); }
.dyno-prof-avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ink-faint); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ink-dim); font-size: 14px; flex-shrink: 0; }
.dyno-prof.warning .dyno-prof-avatar { border-color: var(--warn); color: var(--warn); }
.dyno-prof.running .dyno-prof-avatar { border-color: var(--accent); color: var(--accent); }
.dyno-prof-body { flex: 1; font-size: 13px; line-height: 1.55; }
.dyno-prof-body .name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; margin-bottom: 3px; }
.dyno-prof.warning .dyno-prof-body .name { color: var(--warn); }

/* ---- Main 2-column layout ---- */
.dyno-main { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dyno-main { grid-template-columns: 1fr; } }

/* ---- LEFT panel: build summary (idle) OR gauge cluster (running) ---- */
.dyno-left { background: var(--bg-card); border: 1px solid var(--ink-faint); border-radius: var(--radius-lg); overflow: hidden; }
.dyno-left-head { padding: 10px 14px; border-bottom: 1px solid var(--ink-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--ink-dim); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.dyno-left-head .run-badge { color: var(--accent); font-weight: 500; }
.dyno-left.running .dyno-left-head .run-badge { animation: pulse 1s infinite; }

.dyno-build { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dyno-build .car { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }
.dyno-build .eng { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); line-height: 1.5; letter-spacing: 0.3px; }
.dyno-build .eng .v { color: var(--ink); }

.dyno-parts-mini { margin-top: 6px; border-top: 1px solid var(--ink-faint); padding-top: 10px; }
.dyno-parts-mini .pm-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11px; gap: 8px; }
.dyno-parts-mini .pm-row .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--ink-dim); text-transform: uppercase; min-width: 80px; flex-shrink: 0; }
.dyno-parts-mini .pm-row .v { text-align: right; flex: 1; min-width: 0; font-size: 11px; }
.dyno-parts-mini .pm-row.stock .v { color: var(--ink-dim); font-style: italic; }

.dyno-totals { margin-top: 6px; border-top: 1px solid var(--ink-faint); padding-top: 10px; }
.dyno-totals .t-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11px; }
.dyno-totals .t-row .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--ink-dim); text-transform: uppercase; }
.dyno-totals .t-row .v { font-family: var(--font-mono); color: var(--accent); font-weight: 500; }

/* ---- LEFT panel: GAUGE CLUSTER (visible when .running) ---- */
.dyno-gauges { padding: 14px; display: none; flex-direction: column; gap: 10px; }
.dyno-left.running .dyno-gauges { display: flex; }
.dyno-left.running .dyno-build { display: none; }

.gauge-analog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gauge-analog { background: var(--gauge-bg); border: 1px solid var(--ink-faint); border-radius: var(--radius); padding: 10px 8px 6px; text-align: center; position: relative; }
.gauge-analog svg { width: 100%; height: auto; display: block; }
.gauge-analog-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--ink-dim); text-transform: uppercase; margin-top: -4px; }
.gauge-analog-label small { display: block; font-size: 8px; opacity: 0.6; letter-spacing: 0.8px; margin-top: 1px; }
.gauge-analog-value { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--accent); margin-top: 3px; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-analog-value.warn { color: var(--warn); }
.gauge-analog-value.danger { color: var(--danger); }

.gauge-digital-row { display: grid; grid-template-columns: 1fr 1fr 0.6fr; gap: 8px; }
.gauge-digi { background: var(--gauge-bg); border: 1px solid var(--ink-faint); border-radius: var(--radius); padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 70px; }
.gauge-digi-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.2px; color: var(--ink-dim); text-transform: uppercase; text-align: center; }
.gauge-digi-label small { display: block; font-size: 7px; opacity: 0.6; letter-spacing: 0.5px; margin-top: 1px; }
.gauge-digi-value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-digi-value.good { color: var(--good); }
.gauge-digi-value.warn { color: var(--warn); }

.gauge-led-cell { background: var(--gauge-bg); border: 1px solid var(--ink-faint); border-radius: var(--radius); padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 70px; }
.gauge-led-bulb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,69,69,0.4), rgba(80,20,20,0.8) 60%, rgba(30,8,8,0.9)); border: 2px solid rgba(255,69,69,0.2); box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); transition: all 0.2s; }
.gauge-led-bulb.armed { background: radial-gradient(circle at 35% 35%, rgba(255,100,100,0.9), rgba(255,69,69,1) 55%, rgba(160,20,20,0.95)); border-color: var(--danger); box-shadow: 0 0 14px rgba(255,69,69,0.7), 0 0 28px rgba(255,69,69,0.35), inset 0 2px 4px rgba(0,0,0,0.3); animation: led-flash 0.4s infinite; }
@keyframes led-flash { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.gauge-led-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.3px; color: var(--ink-dim); text-transform: uppercase; text-align: center; line-height: 1.2; }
.gauge-led-label small { display: block; font-size: 7px; opacity: 0.6; letter-spacing: 0.5px; }

.dyno-phase-pill { margin-top: 4px; text-align: center; padding: 6px 10px; background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; }

/* ---- RIGHT panel: chart + controls ---- */
.dyno-right { background: var(--bg-card); border: 1px solid var(--ink-faint); border-radius: var(--radius-lg); overflow: hidden; }
.dyno-chart-head { padding: 12px 16px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink-faint); gap: 12px; flex-wrap: wrap; }
.dyno-chart-head h2 { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }
.dyno-chart-head .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--ink-dim); }
.dyno-status { padding: 3px 9px; border-radius: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.dyno-status.idle { background: rgba(232,230,224,0.05); color: var(--ink-dim); border: 1px solid var(--ink-faint); }
.dyno-status.running { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-bd); animation: pulse 1s infinite; }
.dyno-status.done { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); }
.dyno-status.stopped { background: rgba(255,69,69,0.1); color: var(--danger); border: 1px solid var(--danger); animation: pulse 0.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---- Run dots row (R0-R5) ---- */
.dyno-runs { display: flex; gap: 6px; padding: 10px 16px; flex-wrap: wrap; }
.dyno-run-dot { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--bg-soft); border: 1px solid var(--ink-faint); border-radius: 3px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.3px; color: var(--ink-dim); text-transform: uppercase; transition: all 0.15s; }
.dyno-run-dot .run-idx { font-size: 11px; font-weight: 600; color: var(--ink); padding: 1px 5px; border-radius: 2px; background: rgba(0,0,0,0.3); }
.dyno-run-dot.done { background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent); }
.dyno-run-dot.done .run-idx { color: var(--accent-ink); background: var(--accent); }
.dyno-run-dot.current { background: rgba(200,255,90,0.18); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dyno-run-dot.current .run-idx { background: var(--accent); color: var(--accent-ink); }

/* ---- Run toggles (show/hide on chart) ---- */
.dyno-toggles { display: flex; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); align-items: center; flex-wrap: wrap; }
.dyno-toggles .t-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--ink-dim); text-transform: uppercase; padding-right: 6px; }
.dyno-toggle { display: flex; align-items: center; gap: 5px; padding: 3px 8px; background: transparent; border: 1px solid var(--ink-faint); border-radius: 3px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); cursor: pointer; transition: all 0.12s; user-select: none; }
.dyno-toggle .t-led { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.dyno-toggle.on { border-color: var(--accent); color: var(--accent); }
.dyno-toggle.on .t-led { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dyno-toggle.no-data { opacity: 0.3; cursor: not-allowed; }
.dyno-toggle.disabled-during-pull { opacity: 0.45; cursor: wait; }

/* ---- Chart (white-paper, like a real DynoJet printout) ---- */
.dyno-chart-wrap { padding: 14px 16px; background: rgba(0,0,0,0.18); }
.dyno-chart-area { position: relative; background: var(--bg-paper); border-radius: 4px; padding: 30px 16px 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.dyno-chart-title { position: absolute; top: 10px; left: 18px; font-family: var(--font-mono); font-size: 10px; color: #555; letter-spacing: 0.5px; }
.dyno-chart-title strong { color: #111; font-weight: 600; }
.dyno-chart-legend { position: absolute; top: 10px; right: 18px; display: flex; gap: 12px; font-family: var(--font-mono); font-size: 10px; color: #333; }
.dyno-chart-legend .leg-row { display: flex; align-items: center; gap: 5px; }
.dyno-chart-legend .leg-dot { width: 10px; height: 2px; border-radius: 1px; }
.dyno-chart-svg { width: 100%; height: auto; display: block; }

/* ---- Bottom metrics + run button ---- */
.dyno-bottom { padding: 12px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--ink-faint); }
.dyno-metrics { display: flex; gap: 24px; flex: 1; }
.dyno-metric .m-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--ink-dim); text-transform: uppercase; }
.dyno-metric .m-value { font-family: var(--font-mono); font-size: 20px; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.dyno-metric .m-delta { font-size: 11px; color: var(--ink-dim); font-family: var(--font-mono); margin-left: 4px; }
.dyno-metric .m-delta.up { color: var(--good); }
.dyno-metric .m-delta.down { color: var(--danger); }

.dyno-run-btn { padding: 11px 22px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.dyno-run-btn:hover:not(:disabled) { transform: translateY(-1px); }
.dyno-run-btn:disabled { opacity: 0.35; cursor: not-allowed; background: var(--bg-card); color: var(--ink-dim); border-color: var(--ink-faint); }
.dyno-run-btn.running { background: transparent; color: var(--accent); border-color: var(--accent); animation: pulse 1s infinite; }

.dyno-clear-btn { padding: 7px 12px; background: transparent; border: 1px solid var(--ink-faint); color: var(--ink-dim); border-radius: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; cursor: pointer; text-transform: uppercase; }
.dyno-clear-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.dyno-clear-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---- Scarecrow pre-pull setup card (Scanner-style) ---- */
.dyno-setup-card { padding: 14px 16px; background: linear-gradient(135deg, var(--accent-bg), transparent); border-top: 1px solid var(--ink-faint); border-left: 3px solid var(--accent); display: flex; gap: 12px; align-items: flex-start; }
.dyno-setup-icon { color: var(--accent); font-weight: 700; font-size: 13px; background: var(--accent-bg); padding: 4px 8px; border-radius: 3px; flex-shrink: 0; font-family: var(--font-mono); letter-spacing: 1px; }
.dyno-setup-body { flex: 1; font-size: 12px; line-height: 1.55; color: var(--ink); }
.dyno-setup-body .head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; margin-bottom: 4px; }
.dyno-setup-body b { color: var(--ink); }
.dyno-setup-body .targets { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); }
.dyno-setup-body .targets b { color: var(--ink); }

/* ---- Bottom action bar ---- */
.dyno-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 0.5px solid var(--ink-faint); }
.dyno-btn { padding: 11px 22px; border-radius: var(--radius); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid; transition: all 0.15s; }
.dyno-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dyno-btn.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.dyno-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; background: var(--bg-card); color: var(--ink-dim); border-color: var(--ink-faint); }
.dyno-btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink-faint); }
.dyno-btn.ghost:hover { border-color: var(--ink); }

/* ---- Chat panel ---- */
.chat-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 220ms ease; z-index: 1049; }
.chat-overlay.show { opacity: 1; pointer-events: auto; backdrop-filter: blur(2px); }
.chat-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 92vw); background: #0c0d10; border-left: 1px solid rgba(255,255,255,0.12); box-shadow: -10px 0 36px rgba(0,0,0,0.6); transform: translateX(100%); transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1); z-index: 1050; display: flex; flex-direction: column; overflow: hidden; }
.chat-panel.open { transform: translateX(0); }
.chat-header { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, #14161b, #0c0d10); flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.chat-header-icon { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #c8ff5a, #5b9fe0); display: flex; align-items: center; justify-content: center; color: #060606; font-size: 16px; font-weight: 700; }
.chat-header-meta { display: flex; flex-direction: column; gap: 2px; }
.chat-header-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.chat-header-status { font-size: 9px; color: #3fb950; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
.chat-header-status::before { content: '\2022'; margin-right: 4px; }
.chat-close { margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--ink-dim); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg, .chat-msg-scarecrow, .chat-msg-user { max-width: 88%; padding: 9px 13px; border-radius: 12px; font-size: 12px; line-height: 1.55; }
.chat-msg-scarecrow { align-self: flex-start; background: #1a1d22; border: 1px solid rgba(255,255,255,0.08); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-msg-user { align-self: flex-end; background: linear-gradient(135deg, #c8ff5a, #95cc40); color: #060606; border-bottom-right-radius: 4px; }
.chat-footer { border-top: 1px solid rgba(255,255,255,0.10); padding: 12px 14px; background: #14161b; display: flex; gap: 8px; align-items: flex-end; }
.chat-input { flex: 1; background: #0c0d10; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 9px 12px; color: var(--ink); font-size: 12px; resize: none; min-height: 36px; max-height: 96px; }
.chat-send { background: var(--accent); border: none; color: var(--accent-ink); padding: 0 18px; height: 36px; border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer; }