/* =========================================================
   CONTEXT 1.1 — BLOOMBERG TERMINAL AESTHETIC
   Dark panel | Cyan + Amber accents | Dense data UI
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Core palette */
  --bg:            #03040a;
  --bg-deep:       #010206;
  --panel:         rgba(8, 10, 18, 0.92);
  --panel-solid:   #080a12;
  --panel-border:  rgba(0, 200, 255, 0.12);

  /* Text */
  --text:          #d4dbe8;
  --text-bright:   #eef2fa;
  --dim:           #4a5568;
  --dim-2:         #2d3748;

  /* Accents */
  --cyan:          #00eaff;
  --cyan-dim:      rgba(0, 234, 255, 0.15);
  --cyan-glow:     rgba(0, 234, 255, 0.35);
  --amber:         #f5a623;
  --amber-dim:     rgba(245, 166, 35, 0.15);
  --amber-glow:    rgba(245, 166, 35, 0.4);

  /* Status */
  --green:         #00e676;
  --green-dim:     rgba(0, 230, 118, 0.15);
  --red:           #ff1744;
  --red-dim:       rgba(255, 23, 68, 0.15);
  --yellow:        #ffea00;

  /* Surfaces (elevation layers for theme swapping) */
  --surface-0:     #03040a;         /* page background */
  --surface-1:     #080a12;         /* cards, panels */
  --surface-2:     #0d1020;         /* elevated panels, modals */
  --surface-3:     #131830;         /* popups, tooltips */
  --surface-glass: rgba(8, 10, 18, 0.92); /* glass/blur panels */

  /* Shadows (none for terminal, soft for iOS-style skin) */
  --shadow-sm:     none;
  --shadow-md:     none;
  --shadow-lg:     none;

  /* Sizing */
  --radius-sm:     2px;
  --radius:        4px;
  --radius-md:     6px;
  --radius-lg:     12px;

  /* Typography */
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;
  --font-display:  'Space Mono', monospace;
  --font-size-xs:  12px;
  --font-size-sm:  13px;
  --font-size-md:  17px;
  --font-size-lg:  21px;
  --font-size-xl:  26px;

  /* Spacing scale */
  --space-xs:      4px;
  --space-sm:      8px;
  --space-md:      16px;
  --space-lg:      24px;
  --space-xl:      32px;

  /* Transitions */
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:  150ms var(--ease-soft);
  --transition-med:   250ms var(--ease-soft);
  --transition-slow:  400ms var(--ease-soft);
}

/* =========================================================
   GLOBAL RESET
========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Crisp borders on HiDPI — never blur sub-pixel edges */
  -webkit-backface-visibility: hidden;
}

html {
  width: 100%;
  height: 100%;
  /* Force GPU compositing for entire page — smoother on 4K */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  overflow: hidden;
  font-size: 17px;
  letter-spacing: 0.3px;
  line-height: 1.55;
  /* Sharper text on dark backgrounds */
  -webkit-text-stroke: 0.2px rgba(212, 219, 232, 0.08);
  font-variant-ligatures: none;
  /* Prevent layout shift from web fonts */
  font-display: swap;
}

/* =========================================================
   4K / HiDPI RENDERING ENHANCEMENTS
========================================================= */

/* Sharper 1px borders on Retina/4K displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root {
    --panel-border:  rgba(0, 200, 255, 0.14);
    --border-fine:   0.5px;
  }

  /* Use hairline borders where supported */
  #context-header,
  #ticker,
  .lh-row-brand,
  .lh-pill,
  .lh-session-tag,
  #command-bar,
  .message-row.user .message-bubble,
  .message-row.assistant .message-bubble,
  .card,
  .analysis-section {
    border-width: 0.5px;
  }

  /* Crisp tab indicators */
  .lh-tab.active::after {
    height: 1.5px;
  }

  /* Sharper dividers */
  .lh-divider, .lh-divider-v {
    width: 0.5px;
  }

  .ticker-item {
    border-right-width: 0.5px;
  }

  .lh-tab {
    border-right-width: 0.5px;
  }
}

/* Ultra-sharp rendering hints for 4K+ (3x, 4x pixel ratio) */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  body {
    -webkit-text-stroke: 0;  /* remove stroke boost, native rendering is sharp enough */
    font-size: 17.5px;       /* slightly bump for density */
  }
}

/* GPU-accelerated elements for buttery-smooth scrolling */
#chat-window,
#ticker-track,
#analysis-panel,
.tab-panel {
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

/* Image rendering: high-quality smooth downscaling (was crisp-edges, which is for
   pixel-art and made downscaled logos like the header skull jagged). 2026-07-22 */
img, svg, canvas {
  image-rendering: auto;
}

/* Sharper focus rings */
:focus-visible {
  outline: 1.5px solid var(--cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.12);
}

/* Selection color matching terminal theme */
::selection {
  background: rgba(0, 234, 255, 0.22);
  color: var(--text-bright);
}

::-moz-selection {
  background: rgba(0, 234, 255, 0.22);
  color: var(--text-bright);
}

/* Sharper scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 234, 255, 0.12);
  border-radius: 3px;
  border: 1px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 234, 255, 0.25);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* =========================================================
   SCANLINE OVERLAY
========================================================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;  /* blends more naturally on HiDPI */
}

/* Reduce scanline intensity on HiDPI — individual lines are already very fine */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body::after {
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.04) 1px,
      rgba(0, 0, 0, 0.04) 2px
    );
  }
}

/* Subtle grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,234,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,234,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: -3;
}

/* =========================================================
   BACKGROUND CANVAS
========================================================= */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.14;
}

/* =========================================================
   CONTEXT HEADER — TWO ROW BLOOMBERG STYLE
========================================================= */
#context-header {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--panel-border);
  /* Frosted glass depth on 4K */
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* ---- SHARED ROW ---- */
.lh-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* ---- ROW 1: Brand + status pills + clock ---- */
.lh-row-brand {
  height: 42px;
  padding: 0 14px;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 234, 255, 0.06);
  justify-content: space-between;
}

.lh-brand-block {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.lh-brand {
  font-family: var(--font-display);
  font-size: 19.5px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 3.5px;
  text-transform: uppercase;
  text-shadow:
    0 0 18px var(--cyan-glow),
    0 0 2px rgba(0, 234, 255, 0.5);   /* tight inner glow = crisp edges */
  /* GPU layer for silky-smooth glow */
  transform: translateZ(0);
}

.lh-version-badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #000;
  background: var(--cyan);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.8px;
  align-self: center;
  margin-top: 1px;
  box-shadow: 0 0 6px rgba(0, 234, 255, 0.4);
}

.lh-divider {
  width: 1px;
  height: 14px;
  background: var(--dim-2);
  flex-shrink: 0;
}

.lh-divider-v {
  width: 1px;
  height: 12px;
  background: var(--dim-2);
  flex-shrink: 0;
}

.lh-sub {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 2.5px;
  color: var(--dim);
  text-transform: uppercase;
}

/* Pills group */
.lh-brand-center {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0 16px;
}

.lh-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--dim-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text);
  background: rgba(255,255,255,0.02);
  text-transform: uppercase;
  white-space: nowrap;
}

.lh-pill-label {
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  margin-right: 1px;
}

.lh-pill.live {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 230, 118, 0.08);
}

.lh-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow:
    0 0 4px var(--green),
    0 0 10px rgba(0, 230, 118, 0.4);
  animation: pulse-dot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.65); }
}

/* Right: session + clock */
.lh-brand-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.lh-session-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--cyan);
  border: 1px solid rgba(0,234,255,0.25);
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  background: rgba(0,234,255,0.05);
}

.lh-clock {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 2.5px;
  text-shadow:
    0 0 12px var(--amber-glow),
    0 0 2px rgba(245, 166, 35, 0.45);
  min-width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;  /* prevent clock digits from shifting */
}

/* ---- ROW 2: Nav tabs + right stats ---- */
.lh-row-nav {
  height: 28px;
  padding: 0 0 0 4px;
  justify-content: space-between;
  background: rgba(0,0,0,0.3);
}

.lh-nav-tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.lh-tab {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.8px;
  color: var(--dim);
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.04);
  text-transform: uppercase;
  transition: color 0.15s, background 0.15s, text-shadow 0.15s;
  position: relative;
  user-select: none;
}

.lh-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

.lh-tab.active {
  color: var(--cyan);
  font-weight: 600;
  background: rgba(0,234,255,0.06);
  text-shadow: 0 0 6px rgba(0, 234, 255, 0.3);
}

.lh-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 8px var(--cyan-glow), 0 0 2px var(--cyan);
}

.lh-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}

.lh-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.8px;
}

.lh-stat-label {
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.lh-stat-val {
  color: var(--text);
  font-weight: 600;
}

.lh-stat-val.green { color: var(--green); }

/* =========================================================
   HIDE OLD TOP-BAR (replaced by context-header)
========================================================= */
#top-bar {
  display: none;
}

/* =========================================================
   TICKER STRIP
========================================================= */
#ticker {
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
  height: 26px;
  z-index: 190;
  overflow: hidden;

  background: rgba(4, 5, 10, 0.97);
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#ticker-track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  font-size: 14.5px;
  letter-spacing: 0.5px;
  border-right: 1px solid var(--dim-2);
}

.ticker-symbol {
  color: var(--text-bright);
  font-weight: 700;
  letter-spacing: 1.8px;
}

.ticker-up   { color: var(--green); text-shadow: 0 0 4px rgba(0, 230, 118, 0.3); }
.ticker-down { color: var(--red); text-shadow: 0 0 4px rgba(255, 23, 68, 0.3); }

/* Pulse animation for tickers moving > 0.5% */
.ticker-pulse {
  animation: tickerPulse 1.2s ease-out;
}
@keyframes tickerPulse {
  0%   { text-shadow: 0 0 8px currentColor; transform: scale(1.08); }
  100% { text-shadow: none; transform: scale(1); }
}

/* =========================================================
   TAB CONTENT AREA — wraps all panels
========================================================= */
#tab-content {
  position: fixed;
  top: 136px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: transparent;
}

/* Only analysis panel needs a solid background */
#analysis-panel {
  background: var(--bg);
}

/* =========================================================
   CHAT WINDOW
========================================================= */
#chat-window {
  position: fixed !important;
  top: 136px !important;
  bottom: 72px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(980px, 96vw);
  overflow-y: auto;
  padding: 16px 4px 8px;
  flex-direction: column;
  gap: 0;
  height: auto !important;
}

#chat-window.active {
  display: flex !important;
}

/* ── Canvas brand lockup (2026-07-21) — same quiet skull + wordmark as the
   charts. position:fixed inside the scroll container pins it to the viewport;
   messages carry their own backgrounds and glide over it. ── */
#chat-window::before {
  content: '';
  position: fixed;
  top: 46%; left: 50%;
  width: 210px; height: 210px;
  transform: translate(-50%, -72%);
  background: url('/static/ctx-watermark.svg') center/contain no-repeat;
  opacity: 0.032;
  pointer-events: none;
  z-index: 0;
}
#chat-window::after {
  content: 'CONTEXT';
  position: fixed;
  top: 46%; left: 50%;
  transform: translate(-50%, 120%);
  /* Inter is not loaded in the chat canvas either — same silent fallback. */
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 34px; font-weight: 700; letter-spacing: .26em; margin-right: -.26em;
  color: rgba(255,255,255,0.032);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}

/* ── Suggestion pills anchor to the bottom of the empty canvas (2026-07-21) —
   they used to float mid-void, detached from both the welcome card and the
   input. flex margin-top:auto docks them just above the command bar. ── */
#suggestion-pills {
  margin-top: auto;
  padding-top: 22px;
  padding-bottom: 6px;
}

/* ── Windows color-emoji buttons rendered as bright white blobs in the dark
   command bar (the 📰 especially). Mute them to monochrome glyphs. ── */
#news-read-btn, #chat-attach-btn {
  filter: grayscale(1) brightness(1.55);
  opacity: 0.7;
  transition: opacity .15s, filter .15s;
}
#news-read-btn:hover, #chat-attach-btn:hover {
  opacity: 1;
  filter: grayscale(0) brightness(1);
}

/* =========================================================
   ANALYSIS PANEL
========================================================= */
#analysis-panel {
  position: absolute;
  inset: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 96vw);
  overflow-y: auto;
  z-index: 1;
}

/* =========================================================
   MESSAGE ROWS
========================================================= */
.message-row {
  display: flex;
  width: 100%;
  padding: 3px 0;
  animation: msg-in 0.18s ease-out both;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* USER */
.message-row.user {
  justify-content: flex-end;
}

.message-row.user .message-bubble {
  background: rgba(20, 24, 36, 0.9);
  border: 1px solid rgba(245, 166, 35, 0.2);
  color: var(--text);
}

.message-row.user .message-bubble::before {
  content: "YOU // ";
  color: var(--amber);
  font-size: 13px;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 4px;
  opacity: 0.7;
}

/* ASSISTANT */
.message-row.assistant {
  justify-content: flex-start;
}

.message-row.assistant .message-bubble {
  background: rgba(8, 10, 18, 0.88);
  border: 1px solid var(--panel-border);
  border-left: 2px solid var(--cyan);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 30px rgba(0, 234, 255, 0.015),
    0 0 14px rgba(0, 234, 255, 0.04);
}

.message-row.assistant .message-bubble::before {
  content: "CONTEXT // ";
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 6px;
  opacity: 0.8;
  text-shadow: 0 0 8px var(--cyan-glow);
}

/* =========================================================
   MESSAGE BUBBLE
========================================================= */
.message-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.6;
  color: #e6edf8;
  position: relative;
}

/* =========================================================
   TYPING CURSOR
========================================================= */
.typing::after {
  content: "█";
  margin-left: 2px;
  color: var(--cyan);
  animation: blink 0.9s step-start infinite;
  font-size: 14.5px;
  vertical-align: middle;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* =========================================================
   MARKDOWN RICH-TEXT IN ASSISTANT MESSAGES
   Premium chat aesthetic — glowing cyan headers, neon accents,
   subtle text-shadow on emphasis. Applies inside any message
   bubble so /brief, /scan, vision analysis, /deep all benefit.
========================================================= */

/* Headers — cyan glow + left-side accent bar */
.message-bubble h1,
.message-bubble h2,
.message-bubble h3,
.message-bubble h4,
.message-bubble h5,
.message-bubble h6 {
  color: var(--cyan);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow:
    0 0 8px rgba(0, 234, 255, 0.55),
    0 0 18px rgba(0, 234, 255, 0.25);
  border-left: 3px solid rgba(0, 234, 255, 0.55);
  padding: 2px 0 2px 10px;
  margin: 16px 0 8px 0;
  background: linear-gradient(90deg,
    rgba(0, 234, 255, 0.08) 0%,
    rgba(0, 234, 255, 0.02) 35%,
    transparent 80%);
  border-radius: 0 4px 4px 0;
}

/* Size scale — H2 most prominent (vision analysis uses H2 by default) */
.message-bubble h1 { font-size: 23.5px; line-height: 1.4; }
.message-bubble h2 { font-size: 19.5px; line-height: 1.4; }
.message-bubble h3 { font-size: 17.5px; line-height: 1.4;
  text-shadow: 0 0 6px rgba(0, 234, 255, 0.4);    /* slightly softer for H3 */
}
.message-bubble h4,
.message-bubble h5,
.message-bubble h6 { font-size: 16px; }

/* First header in a bubble: no top margin (avoids gap above) */
.message-bubble > h1:first-child,
.message-bubble > h2:first-child,
.message-bubble > h3:first-child { margin-top: 4px; }

/* Strong / bold — soft warm accent, slight glow */
.message-bubble strong,
.message-bubble b {
  color: #eaf1fb;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.18);
}

/* Italics — subtle muted accent */
.message-bubble em,
.message-bubble i {
  color: #aab9d9;
}

/* Inline code — neon teal in a recessed pill */
.message-bubble code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1.2em;
  color: #00ffd1;
  background: rgba(0, 255, 209, 0.08);
  border: 1px solid rgba(0, 255, 209, 0.22);
  padding: 1px 6px;
  border-radius: 3px;
  text-shadow: 0 0 4px rgba(0, 255, 209, 0.35);
}

/* Code blocks — full glass panel */
.message-bubble pre {
  background: rgba(0, 12, 20, 0.7);
  border: 1px solid rgba(0, 234, 255, 0.18);
  border-left: 3px solid rgba(0, 234, 255, 0.5);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 10px 0;
  overflow-x: auto;
  box-shadow: inset 0 0 12px rgba(0, 234, 255, 0.06);
}
.message-bubble pre code {
  background: none;
  border: none;
  padding: 0;
  color: #c8d6e5;
  text-shadow: none;
}

/* Blockquotes — soft amber pull-quote */
.message-bubble blockquote {
  margin: 10px 0;
  padding: 6px 12px;
  border-left: 3px solid rgba(245, 166, 35, 0.6);
  background: rgba(245, 166, 35, 0.05);
  color: #d8c896;
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

/* Lists — neon bullets + tighter rhythm */
.message-bubble ul,
.message-bubble ol {
  margin: 6px 0 10px 0;
  padding-left: 22px;
}
.message-bubble li {
  margin: 3px 0;
  padding-left: 4px;
  line-height: 1.55;
}
.message-bubble ul li::marker {
  color: var(--cyan);
  font-size: 1.49em;
}
.message-bubble ol li::marker {
  color: var(--cyan);
  font-weight: 600;
  text-shadow: 0 0 4px rgba(0, 234, 255, 0.4);
}

/* Tables — glassy with cyan headers */
.message-bubble table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
  font-size: 15.5px;
}
.message-bubble th,
.message-bubble td {
  padding: 6px 10px;
  border: 1px solid rgba(0, 234, 255, 0.12);
  text-align: left;
}
.message-bubble th {
  background: rgba(0, 234, 255, 0.08);
  color: var(--cyan);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 234, 255, 0.4);
  letter-spacing: 0.3px;
}
.message-bubble tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

/* Hyperlinks — animated underline glow on hover */
.message-bubble a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 234, 255, 0.4);
  transition: text-shadow 160ms ease, border-color 160ms ease;
}
.message-bubble a:hover {
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
  border-bottom-color: rgba(0, 234, 255, 0.85);
}

/* =========================================================
   THESIS OUTPUT — premium formatting for /thesis command
   Scenario blocks, bias badges, key levels get special treatment
========================================================= */

/* Thesis container inherits all message-bubble styles above,
   plus adds scenario-specific polish */
.thesis-output {
  line-height: 1.65;
}

/* Main thesis title (## SPY — Thesis for...) */
.thesis-output > h2:first-child {
  font-size: 21px;
  letter-spacing: 0.8px;
  border-left-width: 4px;
  padding: 6px 0 6px 12px;
  margin-bottom: 14px;
  background: linear-gradient(90deg,
    rgba(0, 234, 255, 0.12) 0%,
    rgba(0, 234, 255, 0.03) 40%,
    transparent 80%);
}

/* Scenario headers (Scenario A/B/C) — color-coded */
.thesis-output strong:first-child {
  display: inline-block;
}

/* If/Then Game Plan section — visually separate */
.thesis-output h3 {
  margin-top: 20px;
}

/* Scenario block visual treatment — detected by bold Scenario A/B/C pattern */
.thesis-output p > strong:only-child {
  display: block;
  font-size: 17px;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  margin: 14px 0 6px 0;
  border-radius: 4px;
  border-left: 3px solid;
}

/* Scenario A — green (primary/bullish scenario) */
.thesis-output p > strong:only-child:first-of-type {
  color: var(--green);
  border-left-color: rgba(0, 230, 118, 0.6);
  background: var(--green-dim);
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.3);
}

/* Key levels section — make support/resistance/pivot stand out */
.thesis-output li strong {
  color: var(--cyan);
  letter-spacing: 0.2px;
}

/* Bias line (BULLISH/BEARISH/RANGE-BOUND) — make it punch */
.thesis-output h3 + p > strong:first-child {
  font-size: 17px;
  letter-spacing: 0.5px;
}

/* Indented sub-items under scenarios (Expected path, Action, Target, Stop) */
.thesis-output ul ul,
.thesis-output ol ul {
  margin-left: 8px;
  border-left: 2px solid rgba(0, 234, 255, 0.1);
  padding-left: 14px;
}

/* ── Devil's Advocate banner + styling ─────────────────── */
.da-banner {
  font-family: var(--font-display, sans-serif);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
  margin-bottom: 16px;
  color: #ff6b35;
  background: linear-gradient(135deg,
    rgba(255, 107, 53, 0.08) 0%,
    rgba(255, 59, 48, 0.12) 50%,
    rgba(255, 107, 53, 0.08) 100%);
  border: 1px solid rgba(255, 107, 53, 0.25);
  border-radius: 6px;
  text-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
  animation: da-glow 3s ease-in-out infinite;
}
@keyframes da-glow {
  0%, 100% { border-color: rgba(255, 107, 53, 0.25); box-shadow: none; }
  50% { border-color: rgba(255, 107, 53, 0.45); box-shadow: 0 0 15px rgba(255, 107, 53, 0.1); }
}
.thesis-output.devil-advocate > h2:first-of-type,
.thesis-output.devil-advocate > h2:nth-of-type(1) {
  border-left-color: rgba(255, 107, 53, 0.6);
  color: #ff6b35;
  text-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
}
.thesis-output.devil-advocate h2:last-of-type {
  border-left-color: rgba(255, 59, 48, 0.7);
  color: #ff3b30;
  text-shadow: 0 0 10px rgba(255, 59, 48, 0.4);
  background: linear-gradient(90deg,
    rgba(255, 59, 48, 0.08) 0%,
    transparent 60%);
  margin-top: 24px;
  padding: 8px 0 8px 12px;
}

/* Invalidation section — red accent to draw attention */
.thesis-output h3:last-of-type {
  border-left-color: rgba(255, 23, 68, 0.55);
  color: #ff6b6b;
  text-shadow: 0 0 8px rgba(255, 23, 68, 0.4);
  background: linear-gradient(90deg,
    rgba(255, 23, 68, 0.06) 0%,
    transparent 60%);
}

/* Horizontal rule separator — subtle glow line */
.thesis-output hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0, 234, 255, 0.4) 0%,
    rgba(0, 234, 255, 0.1) 50%,
    transparent 100%);
  margin: 18px 0;
}

/* Probability badges in scenario text */
.thesis-output em {
  color: var(--amber);
  font-style: normal;
  text-shadow: 0 0 4px rgba(245, 166, 35, 0.3);
}

/* ── Thesis Loading Indicator ── */
.thesis-loading {
  padding: 20px 0;
  text-align: center;
}
.thesis-loading-phase {
  font-family: var(--font-display, sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cyan, #00eaff);
  margin-bottom: 8px;
  animation: thesis-pulse 2s ease-in-out infinite;
}
.thesis-loading-sub {
  font-size: 13px;
  letter-spacing: 0.8px;
  color: var(--dim, #556);
  font-family: var(--font-mono, monospace);
}
@keyframes thesis-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; text-shadow: 0 0 12px rgba(0, 234, 255, 0.4); }
}

/* ── Thesis Follow-Up Action Buttons ── */
.thesis-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 234, 255, 0.12);
  transition: opacity 0.4s, max-height 0.4s;
}
.thesis-followups.used {
  opacity: 0.3;
  pointer-events: none;
}
.thesis-followup-btn {
  background: rgba(0, 234, 255, 0.06);
  border: 1px solid rgba(0, 234, 255, 0.2);
  color: var(--cyan, #00eaff);
  font-family: var(--font-display, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.thesis-followup-btn:hover {
  background: rgba(0, 234, 255, 0.15);
  border-color: rgba(0, 234, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 234, 255, 0.15);
  color: #fff;
}
.thesis-followup-btn:active {
  transform: scale(0.97);
}
@media (max-width: 600px) {
  .thesis-followups { gap: 6px; }
  .thesis-followup-btn { font-size: 11.5px; padding: 6px 10px; letter-spacing: 0.8px; }
}

/* ── Thesis Feedback Row ── */
.thesis-feedback-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 0 4px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  transition: opacity 0.4s;
}
.thesis-feedback-label {
  font-size: 11.5px;
  color: var(--dim, #888);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.thesis-feedback-actions {
  display: flex;
  gap: 6px;
}
.thesis-fb-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.thesis-fb-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  transform: scale(1.1);
}
.thesis-feedback-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  animation: fadeIn 0.3s ease;
}
.thesis-topic-btn {
  background: rgba(0,234,255,0.05);
  border: 1px solid rgba(0,234,255,0.15);
  color: var(--cyan, #00eaff);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.thesis-topic-btn:hover {
  background: rgba(0,234,255,0.12);
  border-color: rgba(0,234,255,0.4);
}
.thesis-topic-btn.selected {
  background: rgba(0,234,255,0.2);
  border-color: var(--cyan, #00eaff);
  color: #fff;
  box-shadow: 0 0 8px rgba(0,234,255,0.2);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .thesis-feedback-row { gap: 6px; }
  .thesis-topic-btn { font-size: 10px; padding: 4px 8px; }
}

/* Horizontal rule — gradient divider */
.message-bubble hr {
  border: none;
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 234, 255, 0.4) 25%,
    rgba(0, 234, 255, 0.4) 75%,
    transparent 100%);
}

/* =========================================================
   ░░ PREMIUM POLISH PASS — "LIVING TERMINAL" MOTIF ░░
   Calm by default. Glows when data flows. Breathes on
   persistent indicators. Flashes on transient events.
   One color (cyan), one easing curve, one glow ramp.
========================================================= */

/* ── Easing curve & glow shorthand ──────────────────────── */
:root {
  /* --ease-soft defined in main :root above */
  --glow-1:     0 0 6px rgba(0, 234, 255, 0.30);
  --glow-2:     0 0 12px rgba(0, 234, 255, 0.50);
  --glow-3:     0 0 22px rgba(0, 234, 255, 0.75);
  --glow-green: 0 0 12px rgba(0, 230, 118, 0.55);
  --glow-red:   0 0 12px rgba(255, 23, 68, 0.55);
}

/* ── 1. TICK FLASH — brief glow on data update ────────────
   Add `tick-up` or `tick-down` class on element when value
   changes (JS hook); class auto-removes via animation-end. */
@keyframes tickFlashGreen {
  0%   { box-shadow: 0 0 0 rgba(0,230,118,0); background: transparent; }
  18%  { box-shadow: var(--glow-green); background: rgba(0,230,118,0.12); }
  100% { box-shadow: 0 0 0 rgba(0,230,118,0); background: transparent; }
}
@keyframes tickFlashRed {
  0%   { box-shadow: 0 0 0 rgba(255,23,68,0); background: transparent; }
  18%  { box-shadow: var(--glow-red); background: rgba(255,23,68,0.10); }
  100% { box-shadow: 0 0 0 rgba(255,23,68,0); background: transparent; }
}
.tick-up   { animation: tickFlashGreen 700ms var(--ease-soft); border-radius: 3px; }
.tick-down { animation: tickFlashRed   700ms var(--ease-soft); border-radius: 3px; }

/* ── 2. STREAMING BUBBLE PULSE — while assistant types ──── */
@keyframes bubblePulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 234, 255, 0.20),
      0 0 14px rgba(0, 234, 255, 0.10);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 234, 255, 0.45),
      0 0 22px rgba(0, 234, 255, 0.28);
  }
}
.message-bubble.streaming,
.message-row.assistant .message-bubble:has(.typing) {
  animation: bubblePulse 1.6s var(--ease-soft) infinite;
}

/* ── 3. LOADING SHIMMER — for any element with .shimmering */
@keyframes shimmerSweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmering {
  position: relative;
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 234, 255, 0.18) 45%,
    rgba(0, 234, 255, 0.45) 50%,
    rgba(0, 234, 255, 0.18) 55%,
    transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: shimmerSweep 1.8s linear infinite;
}

/* ── 4. BUTTON TACTILE — inset glow + scale + cyan ring ── */
button:not(:disabled),
.btn,
[role="button"]:not(:disabled) {
  transition:
    transform 120ms var(--ease-soft),
    box-shadow 180ms var(--ease-soft),
    background-color 180ms var(--ease-soft),
    border-color 180ms var(--ease-soft);
}
button:not(:disabled):hover,
.btn:hover,
[role="button"]:not(:disabled):hover {
  box-shadow: var(--glow-1);
}
button:not(:disabled):active,
.btn:active,
[role="button"]:not(:disabled):active {
  transform: scale(0.97);
  box-shadow:
    inset 0 0 8px rgba(0, 234, 255, 0.35),
    0 0 14px rgba(0, 234, 255, 0.45);
}

/* Click pulse — brief outward ring on tap */
@keyframes clickPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 234, 255, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(0, 234, 255, 0); }
}
.click-pulsed { animation: clickPulse 500ms var(--ease-soft); }

/* ── 5. FOCUS RINGS — soft cyan glow on inputs/textareas ─ */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(0, 234, 255, 0.65),
    0 0 12px rgba(0, 234, 255, 0.40);
  border-color: rgba(0, 234, 255, 0.65) !important;
}

/* ── 6. STATUS BADGE PULSE — for LIVE indicators, dots ─── */
@keyframes badgeBreath {
  0%, 100% {
    opacity: 0.85;
    box-shadow: 0 0 5px rgba(0, 230, 118, 0.40);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.85);
  }
}
.live-pulse,
.status-dot.live,
.dot.live {
  animation: badgeBreath 2.2s var(--ease-soft) infinite;
}

/* Cyan variant for non-status pulses */
@keyframes cyanBreath {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 5px rgba(0,234,255,0.40); }
  50%      { opacity: 1;    box-shadow: 0 0 14px rgba(0,234,255,0.85); }
}
.cyan-pulse { animation: cyanBreath 2.2s var(--ease-soft) infinite; }

/* ── 7. CUSTOM SCROLLBARS — slim cyan, hover glow ───────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 234, 255, 0.30) transparent;
}
*::-webkit-scrollbar              { width: 8px; height: 8px; }
*::-webkit-scrollbar-track        { background: rgba(0, 0, 0, 0.25); }
*::-webkit-scrollbar-thumb        {
  background: rgba(0, 234, 255, 0.30);
  border-radius: 4px;
  border: 1px solid rgba(0, 234, 255, 0.10);
}
*::-webkit-scrollbar-thumb:hover  {
  background: rgba(0, 234, 255, 0.55);
  box-shadow: inset 0 0 6px rgba(0, 234, 255, 0.5);
}
*::-webkit-scrollbar-corner       { background: transparent; }

/* ── 8. ACCENT-ON-DATA — magnitude-based glow utility ──── */
/* Apply via class: .glow-pos / .glow-neg / .glow-strong   */
.glow-pos    { color: var(--green); text-shadow: 0 0 6px rgba(0, 230, 118, 0.45); }
.glow-neg    { color: var(--red);   text-shadow: 0 0 6px rgba(255, 23, 68, 0.45); }
.glow-strong-pos {
  color: var(--green);
  text-shadow:
    0 0 8px rgba(0, 230, 118, 0.7),
    0 0 18px rgba(0, 230, 118, 0.35);
  font-weight: 600;
}
.glow-strong-neg {
  color: var(--red);
  text-shadow:
    0 0 8px rgba(255, 23, 68, 0.7),
    0 0 18px rgba(255, 23, 68, 0.35);
  font-weight: 600;
}
.glow-cyan {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.55);
}

/* ── 9. GRAIN OVERLAY — subtle texture on body ───────────
   SVG noise as data-URI; ~2% opacity, fixed position so it
   doesn't move on scroll. Adds analog warmth to flat black. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
}

/* ── 10. SECTION-REVEAL ANIMATIONS — tabs/panels fade-up ── */
@keyframes panelReveal {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.tab-panel.active,
.panel-reveal,
[data-reveal] {
  animation: panelReveal 220ms var(--ease-soft);
}

/* =========================================================
   COMMAND BAR
========================================================= */
#command-bar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, 96vw);
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(8, 10, 18, 0.95);
  border: 1px solid rgba(0, 234, 255, 0.20);
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 100;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 4px 28px rgba(0,0,0,0.6),
    0 0 24px rgba(0, 234, 255, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.03);   /* subtle top highlight = depth */
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

/* ── Composer eye (2026-07-27) ────────────────────────────────────────────
   Was: #command-bar::before { content: ">" } — a static glyph that could never
   say anything. Now a live <ctx-skull id="cmd-eye"> in the same slot, and the
   BAR itself carries the state colour. Sizes from --ctx-skull-size (the
   component ignores width/height on the host).
   The idle values below are deliberately identical to #command-bar's own base
   border and glow, so the resting state is a no-op rather than a second
   competing look. ── */
#cmd-eye {
  --ctx-skull-size: 26px;
  margin: 0 10px 0 12px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity .35s var(--ease-soft, ease);
}
#command-bar {
  transition: border-color .45s var(--ease-soft, ease),
              box-shadow  .45s var(--ease-soft, ease);
}
/* COMPOSER STATE RING — why each state paints its border twice (2026-07-28).
   The cascade here is CORRECT and was proven mechanically: every border-color
   declaration across styles.css + mobile-premium.css + ctx-brand.css was
   enumerated for #command-bar and these !important (1,1,1) rules win in every
   theme/viewport combination. (`html[data-theme] #command-bar` at ~4852 only
   sets `transition` — the old note blaming it was wrong. The 0.8px computed
   border-width is just Chrome snapping a 1px border at 125% display scaling.)
   Yet on the glass skin the drawn border never changed: `.theme-glass
   #command-bar` puts `backdrop-filter` on the bar, and Chromium fails to
   repaint a backdrop-filtered element's border on border-color-only changes
   (box-shadow changes DO repaint — which is exactly the split we observed).
   So each state also paints its ring as `inset 0 0 0 1px <state colour>`
   inside box-shadow — the paint path that provably updates. border-color is
   kept for themes without backdrop-filter. The idle state carries neither,
   so the resting bar stays fully themeable. */
html #command-bar.ctx-thinking {
  border-color: rgba(123, 92, 255, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 4px 28px rgba(0,0,0,0.6),
              0 0 34px rgba(123, 92, 255, 0.22),
              inset 0 1px 0 rgba(255,255,255,0.03),
              inset 0 0 0 1px rgba(123, 92, 255, 0.45);
}
html #command-bar.ctx-thinking #cmd-eye { opacity: 1; }
html #command-bar.ctx-lock {
  border-color: rgba(0, 234, 255, 0.90) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 4px 28px rgba(0,0,0,0.6),
              0 0 46px rgba(0, 234, 255, 0.38),
              inset 0 1px 0 rgba(255,255,255,0.03),
              inset 0 0 0 1px rgba(0, 234, 255, 0.90);
}
html #command-bar.ctx-bull {
  border-color: rgba(0, 230, 118, 0.38) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 4px 28px rgba(0,0,0,0.6),
              0 0 28px rgba(0, 230, 118, 0.14),
              inset 0 1px 0 rgba(255,255,255,0.03),
              inset 0 0 0 1px rgba(0, 230, 118, 0.38);
}
html #command-bar.ctx-bear {
  border-color: rgba(255, 23, 68, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 4px 28px rgba(0,0,0,0.6),
              0 0 28px rgba(255, 23, 68, 0.12),
              inset 0 1px 0 rgba(255,255,255,0.03),
              inset 0 0 0 1px rgba(255, 23, 68, 0.35);
}

#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 400;
  padding: 12px 0;
  letter-spacing: 0.4px;
  caret-color: var(--cyan);
  caret-shape: bar;
}

#chat-input::placeholder {
  color: var(--dim);
  font-size: 15.5px;
  letter-spacing: 0.8px;
}

/* Divider */
#command-bar::after {
  content: "";
  width: 1px;
  height: 22px;
  background: var(--dim-2);
  flex-shrink: 0;
}

#send-btn {
  padding: 12px 20px;
  border: none;
  border-left: 1px solid rgba(0,234,255,0.1);
  background: rgba(0, 234, 255, 0.06);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, text-shadow 0.2s;
  text-shadow: 0 0 6px rgba(0, 234, 255, 0.3);
  flex-shrink: 0;
}

#send-btn:hover {
  background: var(--cyan);
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(0, 234, 255, 0.4);
}

#send-btn:active {
  transform: scale(0.97);
  box-shadow: 0 0 6px rgba(0, 234, 255, 0.6);
}

#send-btn.stop-mode {
  background: rgba(255, 59, 48, 0.12);
  color: var(--red, #ff3b30);
  border-left-color: rgba(255, 59, 48, 0.2);
  text-shadow: 0 0 6px rgba(255, 59, 48, 0.3);
  animation: stop-pulse 1.5s ease-in-out infinite;
}
#send-btn.stop-mode:hover {
  background: var(--red, #ff3b30);
  color: #fff;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.4);
}
@keyframes stop-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

#chat-attach-btn {
  padding: 10px 12px;
  border: none;
  border-left: 1px solid rgba(0,234,255,0.08);
  background: transparent;
  color: var(--cyan);
  font-size: 19.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
#chat-attach-btn:hover {
  background: rgba(0, 234, 255, 0.1);
  color: #fff;
}
#chat-attach-btn.active {
  background: rgba(0, 234, 255, 0.25);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,234,255,0.6), 0 0 10px rgba(0,234,255,0.4);
  animation: visionPulse 1.6s ease-in-out infinite;
}

@keyframes visionPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(0,234,255,0.6), 0 0 8px rgba(0,234,255,0.3); }
  50%      { box-shadow: inset 0 0 0 1px rgba(0,234,255,0.9), 0 0 16px rgba(0,234,255,0.6); }
}

/* Command bar glow while vision/library is armed */
#command-bar.vision-armed {
  box-shadow: 0 0 0 1px rgba(0,234,255,0.5), 0 0 14px rgba(0,234,255,0.25) !important;
  background: rgba(0, 234, 255, 0.035) !important;
}

/* Chat window drop-target highlight when dragging a file over it */
#chat-window.drop-target {
  outline: 2px dashed rgba(0, 230, 184, 0.55);
  outline-offset: -8px;
  background: rgba(0, 230, 184, 0.04);
  transition: background 80ms ease, outline-color 80ms ease;
}

/* Save-to-library button hover */
#chat-attach-save:hover {
  background: rgba(0, 255, 180, 0.22) !important;
  box-shadow: 0 0 8px rgba(0, 230, 184, 0.4);
}

/* Attachment preview strip — make it unmistakable */
#chat-attach-preview {
  display: none;
  /* Anchor directly above the floating #command-bar pill (which is
     position: fixed; bottom: 12px; with ~52px height). Match its width
     and centering so the strip visually attaches to it. */
  position: fixed;
  bottom: 68px;                    /* 12px gap + ~52px command-bar height + 4px breathing */
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, 96vw);
  z-index: 99;                     /* just below #command-bar (z-index: 100) */
  padding: 8px 12px !important;
  background: linear-gradient(90deg, rgba(0,234,255,0.10), rgba(0,234,255,0.04)) !important;
  border: 1px solid rgba(0,234,255,0.4) !important;
  border-radius: var(--radius);
  font-size: 13px;
  color: #9acfd9;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5),
              0 0 18px rgba(0,234,255,0.20);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
#chat-attach-preview #chat-attach-thumb {
  box-shadow: 0 0 8px rgba(0,234,255,0.4);
}

/* =========================================================
   MODE TOGGLE — inside command bar
========================================================= */
#mode-toggle {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  padding: 0 6px;
  border-left: 1px solid rgba(0,234,255,0.1);
  border-right: 1px solid rgba(0,234,255,0.1);
}

#mode-toggle button {
  background: transparent;
  border: 1px solid var(--dim-2);
  color: var(--dim);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  white-space: nowrap;
}

#mode-toggle button:hover {
  border-color: rgba(0,234,255,0.4);
  color: var(--text);
}

#mode-toggle button.active {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 8px rgba(0,234,255,0.15);
}

/* =========================================================
   TIMELINE RAIL
========================================================= */
#timeline-rail {
  position: fixed;
  left: 8px;
  top: 100px;
  bottom: 110px;
  width: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  z-index: 100;
  overflow: hidden;
}

.timeline-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.timeline-dot:hover {
  transform: scale(1.5);
}

.timeline-dot.user {
  background: var(--amber);
  box-shadow: 0 0 4px var(--amber-glow);
}

.timeline-dot.assistant {
  background: var(--cyan);
  box-shadow: 0 0 4px var(--cyan-glow);
}

/* =========================================================
   DATA PANELS (trade cards in chat)
========================================================= */
.trade-card {
  background: rgba(4, 6, 12, 0.97);
  border: 1px solid rgba(0, 255, 200, 0.2);
  border-top: 2px solid var(--green);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14.5px;
  margin-top: 6px;
}

.trade-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--dim-2);
  padding-bottom: 4px;
}

.symbol {
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 1.5px;
}

.bias.long  { color: var(--green); }
.bias.short { color: var(--red); }

/* =========================================================
   CHAT WINDOW SCROLLBAR (Bloomberg thin style)
========================================================= */
#chat-window::-webkit-scrollbar {
  width: 3px;
}

#chat-window::-webkit-scrollbar-track {
  background: transparent;
}

#chat-window::-webkit-scrollbar-thumb {
  background: rgba(0, 234, 255, 0.2);
  border-radius: 2px;
}

#chat-window::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 234, 255, 0.45);
}

/* Global scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(100,120,150,0.25); }

/* =========================================================
   STATUS ROW (inline, between header and ticker gap)
========================================================= */
#status-row {
  position: fixed;
  top: 36px;
  left: 0;
  right: 0;
  height: 26px;
  z-index: 189;
  /* sits behind ticker */
}

/* =========================================================
   FOCUS GLOW (chat input)
========================================================= */
#command-bar:focus-within {
  border-color: rgba(0, 234, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 4px 24px rgba(0,0,0,0.5),
    0 0 24px rgba(0, 234, 255, 0.12);
}

/* =========================================================
   FLASH ANIMATION (header on data update)
========================================================= */
@keyframes header-flash {
  0%   { border-bottom-color: var(--cyan); }
  100% { border-bottom-color: var(--panel-border); }
}

/* =========================================================
   RESPONSIVE: tighten on mobile
========================================================= */
@media (max-width: 640px) {
  .lh-sub      { display: none; }
  .lh-center   { gap: 4px; }
  .lh-pill     { padding: 2px 5px; font-size: 11.5px; }
  .message-bubble { max-width: 92%; font-size: 15.5px; }
  #mode-toggle { top: 38px; right: 6px; }
}

/* =========================================================
   TAB PANEL SYSTEM
========================================================= */
.tab-panel {
  display: none;
  width: 100%;
  height: 100%;
}

#analysis-panel.active {
  display: block;
  overflow-y: auto;
  padding: 0 0 20px;
}

/* =========================================================
   ANALYSIS PANEL
========================================================= */
#analysis-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  padding: 16px 4px;
  min-height: 100%;
  align-items: start;
}

#analysis-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analysis-section-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 2px;
  color: var(--dim);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dim-2);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropzone {
  border: 1px dashed rgba(0,234,255,0.25);
  border-radius: var(--radius);
  background: rgba(0,234,255,0.02);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--cyan);
  background: rgba(0,234,255,0.05);
}
.dropzone-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
}
.dropzone-icon { font-size: 36.5px; color: var(--cyan); opacity: 0.5; line-height: 1; }
.dropzone-text { font-size: 15.5px; color: var(--dim); text-align: center; }
.dropzone-link { color: var(--cyan); cursor: pointer; text-decoration: underline; }
.dropzone-sub  { font-size: 13px; color: var(--dim-2); letter-spacing: 1px; }

.dropzone-preview { width: 100%; height: 100%; position: relative; display: none; }
.dropzone-preview img {
  width: 100%; max-height: 220px; object-fit: contain;
  display: block; border-radius: var(--radius-sm);
}

#chart-clear-btn {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.7); border: 1px solid var(--dim-2);
  color: var(--dim); font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 1px; padding: 3px 7px; cursor: pointer;
  border-radius: var(--radius-sm);
}
#chart-clear-btn:hover { border-color: var(--red); color: var(--red); }

.analysis-meta-row { display: flex; flex-direction: column; gap: 6px; }
.analysis-field    { display: flex; flex-direction: column; gap: 3px; }
.analysis-field-label { font-size: 11.5px; letter-spacing: 1.5px; color: var(--dim); text-transform: uppercase; }

.analysis-input {
  background: rgba(8,10,18,0.95); border: 1px solid var(--dim-2);
  border-radius: var(--radius-sm); color: var(--text-bright);
  font-family: var(--font-mono); font-size: 15.5px; padding: 6px 10px;
  outline: none; transition: border-color 0.15s; width: 100%;
}
.analysis-input:focus { border-color: var(--cyan); }
select.analysis-input {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5568'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}

.analysis-textarea {
  background: rgba(8,10,18,0.95); border: 1px solid var(--dim-2);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-mono); font-size: 15.5px; line-height: 1.5;
  padding: 8px 10px; outline: none; resize: vertical;
  min-height: 80px; width: 100%; transition: border-color 0.15s;
}
.analysis-textarea:focus { border-color: var(--cyan); }
.analysis-textarea::placeholder { color: var(--dim-2); font-size: 14.5px; }

.analysis-checks { display: flex; flex-direction: column; gap: 5px; }
.analysis-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; color: var(--dim); cursor: pointer; letter-spacing: 0.5px;
}
.analysis-check input[type="checkbox"] { accent-color: var(--cyan); cursor: pointer; }
.analysis-check:hover { color: var(--text); }

#analysis-run-btn {
  margin-top: 8px; width: 100%; padding: 12px;
  background: rgba(0,234,255,0.08); border: 1px solid var(--cyan);
  border-radius: var(--radius); color: var(--cyan);
  font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  letter-spacing: 2px; cursor: pointer;
  transition: background 0.15s, color 0.15s; text-transform: uppercase;
}
#analysis-run-btn:hover:not(:disabled) { background: var(--cyan); color: #000; }
#analysis-run-btn:disabled { opacity: 0.4; cursor: not-allowed; }

#analysis-right { display: flex; flex-direction: column; gap: 8px; }
#analysis-ticker-display { color: var(--cyan); font-size: 14.5px; letter-spacing: 1.5px; margin-left: 4px; }

#analysis-output {
  flex: 1; background: var(--panel);
  border: 1px solid var(--panel-border); border-left: 2px solid var(--cyan);
  border-radius: var(--radius); padding: 16px 18px; overflow-y: auto;
  font-size: 17px; line-height: 1.65; min-height: 400px;
  box-shadow: inset 0 0 30px rgba(0,234,255,0.02);
}
#analysis-output h2, #analysis-output h3 {
  color: var(--cyan); font-family: var(--font-display);
  letter-spacing: 1.5px; font-size: 14.5px; text-transform: uppercase;
  margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--dim-2);
}
#analysis-output h2:first-child, #analysis-output h3:first-child { margin-top: 0; }
#analysis-output strong { color: var(--text-bright); }
#analysis-output ul, #analysis-output ol { padding-left: 18px; }
#analysis-output li { margin-bottom: 4px; color: var(--text); }
#analysis-output code {
  background: rgba(0,234,255,0.08); border: 1px solid rgba(0,234,255,0.15);
  border-radius: 2px; padding: 1px 5px; font-size: 14.5px; color: var(--cyan);
}

#analysis-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; min-height: 300px;
  gap: 12px; opacity: 0.3;
}
.placeholder-icon { font-size: 47px; color: var(--cyan); }
.placeholder-text {
  font-size: 15.5px; color: var(--dim); text-align: center;
  max-width: 260px; line-height: 1.6; letter-spacing: 0.5px;
}

.analysis-typing::after {
  content: "█"; color: var(--cyan);
  animation: blink 0.9s step-start infinite; font-size: 14.5px;
}

#analysis-output::-webkit-scrollbar { width: 3px; }
#analysis-output::-webkit-scrollbar-thumb { background: rgba(0,234,255,0.2); border-radius: 2px; }

#analysis-model-warning {
  background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.3);
  border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: 14.5px; color: var(--amber); letter-spacing: 0.3px;
  line-height: 1.5; display: none;
}
#analysis-model-warning.visible { display: block; }

/* =========================================================
   ANALYSIS BUTTON ROW
========================================================= */
.analysis-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.analysis-btn-row #analysis-run-btn {
  flex: 1;
  margin-top: 0;
}

#analysis-stop-btn {
  padding: 12px 16px;
  background: rgba(255, 23, 68, 0.08);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--red);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

#analysis-stop-btn:hover:not(:disabled) {
  background: var(--red);
  color: #fff;
}

#analysis-stop-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* =========================================================
   ANALYSIS FOLLOW-UP CHAT
========================================================= */
.analysis-chat-hidden {
  display: none;
}

.analysis-chat-visible {
  display: block;
}

#analysis-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 8px;
  padding-right: 2px;
}

#analysis-chat-messages::-webkit-scrollbar { width: 3px; }
#analysis-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0,234,255,0.2); border-radius: 2px;
}

/* Message bubbles */
.achat-row {
  display: flex;
  animation: msg-in 0.15s ease-out both;
}

.achat-row.user {
  justify-content: flex-end;
}

.achat-row.assistant {
  justify-content: flex-start;
}

.achat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 15.5px;
  line-height: 1.55;
  font-family: var(--font-mono);
}

.achat-row.user .achat-bubble {
  background: rgba(20, 24, 36, 0.9);
  border: 1px solid rgba(245,166,35,0.2);
  color: var(--text);
}

.achat-row.user .achat-bubble::before {
  content: "YOU // ";
  color: var(--amber);
  font-size: 11.5px;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 3px;
  opacity: 0.7;
}

.achat-row.assistant .achat-bubble {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 2px solid var(--cyan);
  color: var(--text);
}

.achat-row.assistant .achat-bubble::before {
  content: "CONTEXT // ";
  color: var(--cyan);
  font-size: 11.5px;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 3px;
  opacity: 0.8;
}

/* Typing cursor */
.achat-typing::after {
  content: "█";
  color: var(--cyan);
  animation: blink 0.9s step-start infinite;
  font-size: 13px;
}

/* Input bar */
#analysis-chat-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel-solid);
  border: 1px solid rgba(0,234,255,0.18);
  border-radius: var(--radius);
  overflow: hidden;
}

.analysis-chat-prompt {
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 17px;
  padding: 0 10px;
  opacity: 0.7;
  flex-shrink: 0;
}

#analysis-chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 15.5px;
  padding: 10px 0;
  caret-color: var(--cyan);
}

#analysis-chat-input::placeholder {
  color: var(--dim);
  font-size: 14.5px;
}

#analysis-chat-send {
  padding: 10px 16px;
  border: none;
  border-left: 1px solid rgba(0,234,255,0.1);
  background: rgba(0,234,255,0.06);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

#analysis-chat-send:hover:not(:disabled) {
  background: var(--cyan);
  color: #000;
}

#analysis-chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#analysis-chat-bar:focus-within {
  border-color: rgba(0,234,255,0.4);
}

/* =========================================================
   INLINE CHAT CHARTS
========================================================= */
.chat-chart-wrap {
  background: rgba(4, 8, 16, 0.95);
  border: 1px solid rgba(0,234,255,0.15);
  border-left: 2px solid var(--cyan);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 8px 0;
  max-width: 100%;
}

.chat-chart-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.9;
}

.chat-chart-canvas {
  max-height: 220px;
  width: 100% !important;
}

.chat-chart-note {
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--dim);
  margin-top: 8px;
  line-height: 1.5;
  border-top: 1px solid var(--dim-2);
  padding-top: 6px;
}

.chat-chart-note strong {
  color: var(--cyan);
  font-weight: 600;
}

.levels-map-wrap {
  border-left-color: #ab47bc;
}

.levels-map-wrap .chat-chart-canvas {
  max-height: 280px;
}

/* =========================================================
   #1 — SLASH COMMAND HINT
========================================================= */
#cmd-hint {
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 17px;
  padding: 0 8px 0 12px;
  opacity: 0.5;
  flex-shrink: 0;
  cursor: default;
  transition: opacity 0.2s;
}

#cmd-hint:hover {
  opacity: 1;
}

/* Tooltip via title attribute is native — enhanced via CSS */
#cmd-hint[title] {
  position: relative;
}

/* =========================================================
   #2 — CHAR COUNTER
========================================================= */
#char-counter {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim-2);
  padding: 0 6px;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
  transition: color 0.2s;
}

#char-counter.warn  { color: var(--amber); }
#char-counter.limit { color: var(--red);   }

/* =========================================================
   #3 — COPY BUTTON ON MESSAGE BUBBLES
========================================================= */
.message-bubble {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(8,10,18,0.9);
  border: 1px solid var(--dim-2);
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-size: 13px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  z-index: 10;
}

.message-bubble:hover .copy-btn {
  opacity: 1;
}

.copy-btn:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.copy-btn.copied {
  color: var(--green);
  border-color: var(--green);
  opacity: 1;
}

/* =========================================================
   #4 — RAG INDICATOR ON BUBBLES
========================================================= */
.rag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  color: var(--cyan);
  opacity: 0.6;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.rag-badge::before {
  content: "◈";
  font-size: 13px;
}

/* =========================================================
   #6 — TIMESTAMP ON BUBBLE HOVER
========================================================= */
.msg-timestamp {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim-2);
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  letter-spacing: 0.5px;
  text-align: right;
}

.message-row.user .msg-timestamp {
  text-align: right;
}

.message-row.assistant .msg-timestamp {
  text-align: left;
}

.message-row:hover .msg-timestamp {
  opacity: 1;
}

/* =========================================================
   #7 — /price SLASH COMMAND RESULT BUBBLE
========================================================= */
.price-card {
  background: rgba(4,8,16,0.97);
  border: 1px solid rgba(0,234,255,0.2);
  border-left: 2px solid var(--cyan);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 15.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.price-card-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}

.price-card-sym {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--cyan);
  font-weight: 600;
}

.price-card-val {
  font-size: 19.5px;
  color: var(--text-bright);
  font-weight: 600;
}

.price-card-chg {
  font-size: 13px;
  letter-spacing: 0.5px;
}

.price-card-chg.up   { color: var(--green); }
.price-card-chg.down { color: var(--red);   }

/* =========================================================
   HISTORY SIDEBAR
========================================================= */

/* Toggle button in header */
#history-toggle-btn {
  background: transparent;
  border: 1px solid var(--dim-2);
  color: var(--dim);
  font-size: 18px;
  width: 28px;
  height: 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

#history-toggle-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Sidebar panel */
#history-sidebar {
  position: fixed;
  top: 40px;
  left: 0;
  width: 280px;
  height: calc(100vh - 40px);
  background: rgba(4, 6, 12, 0.98);
  border-right: 1px solid var(--panel-border);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0,0,0,0.5);
}

#history-sidebar.sidebar-open {
  transform: translateX(0);
}

/* Dark overlay behind sidebar */
#history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

#history-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* Sidebar header */
#history-header {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-border);
  gap: 8px;
  flex-shrink: 0;
  margin-top: 0;
  height: 70px;
}

.history-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  letter-spacing: 2px;
  color: var(--cyan);
  flex: 1;
  text-transform: uppercase;
}

#history-new-btn {
  background: rgba(0,234,255,0.08);
  border: 1px solid rgba(0,234,255,0.3);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}

#history-new-btn:hover {
  background: var(--cyan);
  color: #000;
}

#history-close-btn {
  background: transparent;
  border: 1px solid var(--dim-2);
  color: var(--dim);
  font-size: 14.5px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  padding: 0;
}

#history-close-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Session list */
#history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

#history-list::-webkit-scrollbar { width: 3px; }
#history-list::-webkit-scrollbar-thumb {
  background: rgba(0,234,255,0.15);
  border-radius: 2px;
}

/* Section labels (Pinned / Recent) */
.history-section-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--dim-2);
  text-transform: uppercase;
  padding: 10px 14px 4px;
}

/* Individual session item */
.history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
}

.history-item:hover {
  background: rgba(0,234,255,0.04);
  border-left-color: rgba(0,234,255,0.3);
}

.history-item.active {
  background: rgba(0,234,255,0.07);
  border-left-color: var(--cyan);
}

.history-item.pinned {
  border-left-color: var(--amber);
}

.history-item.pinned:hover {
  border-left-color: var(--amber);
  background: rgba(245,166,35,0.05);
}

/* Session info */
.history-item-info {
  flex: 1;
  min-width: 0;
}

.history-item-title {
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.history-item-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Pin icon */
.history-pin-btn {
  background: transparent;
  border: none;
  color: var(--dim-2);
  font-size: 14.5px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}

.history-item:hover .history-pin-btn {
  opacity: 1;
}

.history-pin-btn.pinned {
  color: var(--amber);
  opacity: 1;
}

.history-pin-btn:hover {
  color: var(--amber);
}

/* Delete button */
.history-del-btn {
  background: transparent;
  border: none;
  color: var(--dim-2);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}

.history-item:hover .history-del-btn {
  opacity: 1;
}

.history-del-btn:hover {
  color: var(--red);
}

/* Empty state */
.history-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--dim-2);
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.8;
}

/* =========================================================
   TRADINGVIEW LIGHTWEIGHT CHARTS
========================================================= */
.tv-wrap {
  padding: 10px 12px 12px;
}

.tv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.tv-controls {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.tv-interval-btn {
  background: transparent;
  border: 1px solid var(--dim-2);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.12s;
}

.tv-interval-btn:hover {
  border-color: var(--cyan);
  color: var(--text);
}

.tv-interval-btn.active {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Chat chart tools (2026-07-30) ─────────────────────────────────────
   Volume + indicator toggles on the chat's candle charts. Deliberately the
   same four indicators, the same colours and the same "VWAP is intraday-only"
   behaviour as /charts, so the two surfaces do not disagree about what EMA9
   means. Off by default: clean chart first, tools one click away. */
.tv-toolbar {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 2px;
}
.tv-tool-btn {
  background: transparent;
  border: 1px solid var(--dim-2);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.12s;
}
.tv-tool-btn:hover { border-color: var(--cyan); color: var(--text); }
.tv-tool-btn.active { color: #050810; border-color: transparent; }
/* Each toggle wears its own series colour when on, so the button IS the
   legend — no second key to read, and no chance of the two disagreeing. */
.tv-tool-btn.active[data-ind="vol"]   { background: rgba(126,142,168,0.85); }
.tv-tool-btn.active[data-ind="ema9"]  { background: #00eaff; }
.tv-tool-btn.active[data-ind="ema21"] { background: #7b5cff; color: #eaf1fb; }
.tv-tool-btn.active[data-ind="sma50"] { background: #ffab00; }
.tv-tool-btn.active[data-ind="vwap"]  { background: rgba(234,241,251,0.8); }
/* LVL had no active-state background, so the default active styling (near-
   black text, transparent border) rendered it INVISIBLE while on — which is
   its default state. Korey: "theres just a gap, only when you turn it off it
   shows." (2026-07-30) */
.tv-tool-btn.active[data-ind="lvl"]   { background: rgba(0,234,255,0.55); color: #050810; }
.tv-tool-btn.dead {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--dim-2);
  color: var(--dim);
  background: transparent;
}
.tv-tool-sep {
  width: 1px; height: 12px; margin: 0 4px;
  background: rgba(255,255,255,0.12);
}

/* Entry-zone band. Two lines with a label each said "somewhere in here";
   a shaded band says it in one read. pointer-events off so the crosshair
   still works through it. */
.tv-zone-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.tv-zone {
  position: absolute;
  left: 0;
  border-top: 1px dashed currentColor;
  border-bottom: 1px dashed currentColor;
  background: currentColor;
  opacity: 0.13;
}
.tv-zone-label {
  position: absolute;
  left: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(6,8,16,0.82);
  transform: translateY(-50%);
}

.tv-price-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}

.tv-price {
  font-size: 23.5px;
  font-weight: 600;
  color: var(--text-bright);
}

.tv-chg {
  font-size: 15.5px;
  font-weight: 600;
}

.tv-chg.up   { color: var(--green); }
.tv-chg.down { color: var(--red);   }

.tv-meta {
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.5px;
}

.tv-chart-container {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tv-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 14.5px;
  letter-spacing: 1px;
  opacity: 0.6;
}

.tv-loading::after {
  content: "█";
  color: var(--cyan);
  animation: blink 0.9s step-start infinite;
  margin-left: 4px;
}

.tv-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 14.5px;
}

/* =========================================================
   CREATIVE TAB
========================================================= */
#creative-panel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 96vw);
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
}

#creative-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 16px 4px;
  min-height: 100%;
  align-items: start;
}

#creative-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mode grid */
#creative-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.creative-mode-btn {
  background: rgba(8,10,18,0.95);
  border: 1px solid var(--dim-2);
  border-radius: var(--radius);
  padding: 10px 10px 8px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.15s;
}

.creative-mode-btn:hover {
  border-color: rgba(123,92,255,0.5);
  background: rgba(123,92,255,0.05);
}

.creative-mode-btn.active {
  border-color: #7b5cff;
  background: rgba(123,92,255,0.1);
  box-shadow: 0 0 12px rgba(123,92,255,0.15);
}

.cmb-icon  { font-size: 21px; line-height: 1; }
.cmb-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  color: var(--text-bright);
  margin-top: 2px;
}
.cmb-desc  {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: 0.3px;
}

.creative-mode-btn.active .cmb-label { color: #a78bff; }

/* Length buttons */
#creative-length-row {
  display: flex;
  gap: 4px;
}

.creative-len-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--dim-2);
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  padding: 5px 0;
  cursor: pointer;
  transition: all 0.12s;
}

.creative-len-btn:hover { border-color: #7b5cff; color: var(--text); }
.creative-len-btn.active {
  border-color: #7b5cff;
  background: rgba(123,92,255,0.12);
  color: #a78bff;
}

/* Run button */
#creative-run-btn {
  width: 100%;
  padding: 12px;
  background: rgba(123,92,255,0.1);
  border: 1px solid #7b5cff;
  border-radius: var(--radius);
  color: #a78bff;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#creative-run-btn:hover:not(:disabled) {
  background: #7b5cff;
  color: #fff;
}

#creative-run-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Right panel */
#creative-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#creative-mode-label {
  color: #a78bff;
  font-size: 14.5px;
}

#creative-output {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 2px solid #7b5cff;
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-y: auto;
  font-size: 17px;
  line-height: 1.75;
  min-height: 400px;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  box-shadow: inset 0 0 30px rgba(123,92,255,0.02);
}

#creative-output h1, #creative-output h2, #creative-output h3 {
  color: #a78bff;
  font-family: var(--font-display);
  letter-spacing: 1.5px;
  font-size: 14.5px;
  text-transform: uppercase;
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dim-2);
}

#creative-output strong { color: var(--text-bright); }

/* Actions row */
#creative-actions {
  display: flex;
  gap: 8px;
}

#creative-copy-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--dim-2);
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.12s;
}

#creative-copy-btn:hover { border-color: var(--cyan); color: var(--cyan); }

#creative-again-btn {
  flex: 1;
  padding: 8px;
  background: rgba(123,92,255,0.08);
  border: 1px solid rgba(123,92,255,0.4);
  border-radius: var(--radius-sm);
  color: #a78bff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.12s;
}

#creative-again-btn:hover { background: #7b5cff; color: #fff; }

/* Streaming cursor */
.creative-typing::after {
  content: "█";
  color: #7b5cff;
  animation: blink 0.9s step-start infinite;
  font-size: 14.5px;
}

/* =========================================================
   IMAGE GENERATION CARDS
========================================================= */
.image-gen-card {
  background: rgba(4,8,16,0.97);
  border: 1px solid rgba(0,234,255,0.15);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 560px;
}

.image-gen-img {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(0,234,255,0.1);
}

.image-gen-caption {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  padding: 8px 12px 4px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  font-style: italic;
}

.image-gen-download {
  display: inline-block;
  margin: 4px 12px 10px;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--cyan);
  text-decoration: none;
  border: 1px solid rgba(0,234,255,0.3);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}

.image-gen-download:hover {
  background: var(--cyan);
  color: #000;
}

/* =========================================================
   COMFY PILL
========================================================= */
#comfy-pill {
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

#comfy-pill:hover {
  border-color: rgba(0,234,255,0.5);
}

#comfy-pill.comfy-on {
  border-color: var(--green);
  background: rgba(0,230,118,0.08);
}

#comfy-pill.comfy-on #comfy-status {
  color: var(--green);
}

#comfy-pill.comfy-off #comfy-status {
  color: var(--dim);
}

#comfy-pill.comfy-starting #comfy-status {
  color: var(--amber);
  animation: blink 0.9s step-start infinite;
}

/* =========================================================
   WATCHLIST TAB
========================================================= */
#watchlist-panel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 96vw);
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
}

#watchlist-layout {
  padding: 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#watchlist-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#watchlist-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

#watchlist-add-input {
  background: var(--panel);
  border: 1px solid var(--dim-2);
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 14.5px;
  padding: 5px 10px;
  width: 140px;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#watchlist-add-input:focus {
  border-color: var(--cyan);
}

#watchlist-add-btn, #watchlist-refresh-btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.12s;
}

#watchlist-add-btn {
  background: rgba(0,234,255,0.08);
  border: 1px solid rgba(0,234,255,0.3);
  color: var(--cyan);
}

#watchlist-add-btn:hover {
  background: var(--cyan);
  color: #000;
}

#watchlist-refresh-btn {
  background: transparent;
  border: 1px solid var(--dim-2);
  color: var(--dim);
}

#watchlist-refresh-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Watchlist grid */
#watchlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

/* Individual ticker card */
.wl-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 14px 16px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  overflow: hidden;
}

.wl-card:hover {
  border-color: rgba(0,234,255,0.35);
  background: rgba(0,234,255,0.03);
}

.wl-card.up   { border-left: 2px solid var(--green); }
.wl-card.down { border-left: 2px solid var(--red);   }
.wl-card.flat { border-left: 2px solid var(--dim-2); }

/* Card header */
.wl-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wl-symbol {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-bright);
}

.wl-remove {
  background: transparent;
  border: none;
  color: var(--dim-2);
  font-size: 14.5px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.wl-card:hover .wl-remove {
  opacity: 1;
}

.wl-remove:hover { color: var(--red); }

/* Price */
.wl-price {
  font-family: var(--font-mono);
  font-size: 28.5px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: 4px;
}

/* Change */
.wl-change {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.wl-change.up   { color: var(--green); }
.wl-change.down { color: var(--red);   }
.wl-change.flat { color: var(--dim);   }

/* Sparkline */
.wl-sparkline {
  margin-top: 10px;
  height: 40px;
  width: 100%;
}

/* Loading state */
.wl-card.loading .wl-price {
  color: var(--dim);
  animation: blink 0.9s step-start infinite;
}

/* Chart click hint */
.wl-chart-hint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim-2);
  letter-spacing: 1px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}

.wl-card:hover .wl-chart-hint {
  opacity: 1;
}

/* =========================================================
   PLAYBOOK PANEL
========================================================= */
#playbook-btn {
  background: rgba(245,166,35,0.1);
  border: 1px solid rgba(245,166,35,0.35);
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

#playbook-btn:hover {
  background: var(--amber);
  color: #000;
}

#playbook-btn.has-data {
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(245,166,35,0.2);
}

/* Panel */
#playbook-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 100vh;
  background: rgba(4,6,12,0.98);
  border-left: 1px solid var(--panel-border);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.5);
}

#playbook-panel.playbook-open {
  transform: translateX(0);
}

/* Overlay */
#playbook-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

#playbook-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* Header */
#playbook-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.playbook-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.playbook-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  letter-spacing: 2px;
  color: var(--amber);
  text-transform: uppercase;
}

#playbook-active-badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 2px;
  background: rgba(0,230,118,0.12);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 1px 7px;
  border-radius: 2px;
  display: none;
}

#playbook-active-badge.visible {
  display: inline;
}

.playbook-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.3px;
  line-height: 1.5;
}

/* Body */
#playbook-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#playbook-body::-webkit-scrollbar { width: 3px; }
#playbook-body::-webkit-scrollbar-thumb {
  background: rgba(245,166,35,0.2);
  border-radius: 2px;
}

.playbook-section-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--amber);
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.8;
}

.playbook-field {
  width: 100%;
  min-height: 90px;
  background: rgba(8,10,18,0.9);
  border: 1px solid var(--dim-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.6;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  letter-spacing: 0.2px;
}

.playbook-field:focus {
  border-color: rgba(245,166,35,0.5);
}

.playbook-field::placeholder {
  color: var(--dim-2);
  font-size: 13px;
  line-height: 1.6;
}
.playbook-field--short { min-height: 80px; }

/* Footer */
#playbook-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--panel-border);
  flex-shrink: 0;
}

#playbook-status {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 8px;
  min-height: 16px;
}

#playbook-status.saved { color: var(--green); }
#playbook-status.saving { color: var(--amber); }
#playbook-status.error  { color: var(--red); }

#playbook-btn-row {
  display: flex;
  gap: 8px;
}

#playbook-clear-btn {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--dim-2);
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.12s;
}

#playbook-clear-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

#playbook-save-btn {
  flex: 1;
  padding: 9px;
  background: rgba(245,166,35,0.1);
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

#playbook-save-btn:hover {
  background: var(--amber);
  color: #000;
}

#playbook-save-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* =========================================================
   COMMAND PALETTE BUTTON + POPUP
========================================================= */
#cmd-palette-btn {
  background: transparent;
  border: 1px solid var(--dim-2);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 17px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  padding: 0;
  margin: 0 4px;
}

#cmd-palette-btn:hover,
#cmd-palette-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,234,255,0.06);
}

#cmd-palette-popup {
  position: fixed;
  bottom: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 96vw);
  background: rgba(4,6,12,0.98);
  border: 1px solid rgba(0,234,255,0.2);
  border-radius: var(--radius);
  box-shadow: 0 -4px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
  z-index: 300;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#cmd-palette-popup.open {
  display: flex;
}

.cp-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--panel-border);
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--cyan);
}

.cp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--panel-border);
  max-height: 400px;
  overflow-y: auto;
}

.cp-grid::-webkit-scrollbar { width: 3px; }
.cp-grid::-webkit-scrollbar-thumb { background: rgba(0,234,255,0.2); border-radius: 2px; }

.cp-item {
  background: rgba(4,6,12,0.98);
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cp-item:hover {
  background: rgba(0,234,255,0.06);
}

.cp-item:active {
  background: rgba(0,234,255,0.12);
}

.cp-cmd {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.5px;
}

.cp-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.3px;
  line-height: 1.4;
}

.cp-category {
  background: rgba(4,6,12,0.98);
  grid-column: 1 / -1;
  padding: 6px 14px 4px;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--amber);
  border-bottom: 1px solid var(--panel-border);
}

.cp-footer {
  padding: 7px 14px;
  border-top: 1px solid var(--panel-border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim-2);
  letter-spacing: 0.5px;
}

/* Sub-menu expandable sections */
.cp-submenu-toggle:hover {
  background: rgba(0,234,255,0.04);
}
.cp-submenu-toggle:hover .cp-chevron {
  color: var(--cyan) !important;
}
.cp-submenu {
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--panel-border);
}
.cp-sub-item {
  background: rgba(2,4,10,0.98) !important;
}
.cp-sub-item:hover {
  background: rgba(0,234,255,0.06) !important;
}

/* =========================================================
   MODEL SWITCHER
========================================================= */
#model-pill {
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

#model-pill:hover {
  border-color: rgba(0,234,255,0.5);
  background: rgba(0,234,255,0.06);
}

#model-pill.active {
  border-color: var(--cyan);
}

#model-switcher-popup {
  position: fixed;
  top: 36px;
  right: 8px;
  width: 480px;
  background: rgba(4,6,14,0.99);
  border: 1px solid rgba(0,234,255,0.2);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.5);
  z-index: 600;
  display: none;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

#model-switcher-popup.open {
  display: flex;
}

.ms-header {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,234,255,0.12);
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,234,255,0.04);
}

#ms-list {
  display: flex;
  flex-direction: column;
  max-height: 380px;
  overflow-y: auto;
}

#ms-list::-webkit-scrollbar { width: 3px; }
#ms-list::-webkit-scrollbar-thumb {
  background: rgba(0,234,255,0.2);
  border-radius: 2px;
}

.ms-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}

.ms-item:hover { background: rgba(0,234,255,0.05); }

.ms-item.active-model {
  background: rgba(0,234,255,0.08);
  border-left: 2px solid var(--cyan);
}

.ms-item.not-pulled { opacity: 0.45; }

.ms-item-left { flex: 1; min-width: 0; }

.ms-label {
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.5px;
}

.ms-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.ms-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.ms-vram {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
}

.ms-speed {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
}

.ms-badge {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border-radius: 2px;
}

.ms-badge.flagship   { background: rgba(0,234,255,0.15);  color: var(--cyan); border: 1px solid rgba(0,234,255,0.3); }
.ms-badge.recommended { background: rgba(0,230,118,0.15); color: var(--green); border: 1px solid rgba(0,230,118,0.3); }
.ms-badge.fast       { background: rgba(245,166,35,0.12); color: var(--amber); border: 1px solid rgba(245,166,35,0.3); }
.ms-badge.reasoning  { background: rgba(156,39,176,0.15); color: #ce93d8; border: 1px solid rgba(156,39,176,0.3); }
.ms-badge.vision     { background: rgba(255,23,68,0.1);   color: var(--red); border: 1px solid rgba(255,23,68,0.2); }

.ms-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--cyan);
}

.ms-pull-hint {
  font-size: 11.5px;
  color: var(--dim-2);
  font-family: var(--font-mono);
}

.ms-footer {
  padding: 7px 14px;
  border-top: 1px solid var(--panel-border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim-2);
}

.ms-footer code {
  color: var(--cyan);
  background: rgba(0,234,255,0.08);
  padding: 1px 4px;
  border-radius: 2px;
}

/* =========================================================
   TOAST NOTIFICATIONS (TOS Alerts)
========================================================= */
#toast-container {
  position: fixed;
  top: 90px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: 420px;
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--text);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 20px rgba(0,234,255,0.08);
  animation: toastSlideIn 0.35s ease-out;
  position: relative;
  overflow: hidden;
}
.toast::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.toast.toast-long::before  { background: var(--green); }
.toast.toast-short::before { background: var(--red); }
.toast.toast-flat::before  { background: var(--dim); }

.toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.toast-signal {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}
.toast-long .toast-signal  { color: var(--green); }
.toast-short .toast-signal { color: var(--red); }

.toast-symbol {
  font-size: 17px;
  font-weight: 600;
  color: var(--cyan);
}
.toast-price {
  color: var(--text-bright);
  font-weight: 500;
}
.toast-time {
  color: var(--dim);
  font-size: 11.5px;
}
.toast-body {
  color: var(--dim);
  font-size: 13px;
  line-height: 1.5;
}
.toast-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.toast-btn {
  background: rgba(0,234,255,0.1);
  border: 1px solid rgba(0,234,255,0.3);
  color: var(--cyan);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
}
.toast-btn:hover {
  background: rgba(0,234,255,0.2);
  border-color: var(--cyan);
}
.toast-dismiss {
  position: absolute;
  top: 6px; right: 8px;
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 15.5px;
  line-height: 1;
}
.toast-dismiss:hover { color: var(--text); }

.toast-fade-out {
  animation: toastFadeOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastFadeOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* =========================================================
   LIVE P&L OVERLAY (header widget)
========================================================= */
#pnl-widget {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 2px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.3);
}
#pnl-widget.active { display: inline-flex; }
#pnl-widget .pnl-label { color: var(--dim); font-weight: 600; }
#pnl-widget .pnl-value { font-weight: 700; }
#pnl-widget .pnl-value.pnl-up   { color: var(--green); }
#pnl-widget .pnl-value.pnl-down { color: var(--red); }
#pnl-widget .pnl-value.pnl-flat { color: var(--dim); }
#pnl-widget .pnl-pos {
  color: var(--cyan);
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pnl-widget .pnl-time {
  color: var(--dim);
  font-size: 11.5px;
}

/* =========================================================
   THEME TOGGLE
========================================================= */
#theme-toggle {
  cursor: pointer;
  background: none;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 2px 8px;
  letter-spacing: 1px;
  transition: all 0.2s;
}
#theme-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* =========================================================
   LIGHT THEME — comprehensive overrides
   Every hardcoded dark color needs a light-mode equivalent
========================================================= */
html[data-theme="light"] {
  /* Core palette — cool frosted tech aesthetic */
  --bg:            #f0f2f8;
  --bg-deep:       #e6e9f2;
  --panel:         rgba(255, 255, 255, 0.85);
  --panel-solid:   #f8f9fc;
  --panel-border:  rgba(100, 120, 180, 0.10);

  /* Text — slate blue hierarchy, never pure black */
  --text:          #2a3650;
  --text-bright:   #1e2c45;
  --dim:           #6a7a96;
  --dim-2:         #a8b4c8;

  /* Accents — electric but refined */
  --cyan:          #0088cc;
  --cyan-dim:      rgba(0, 136, 204, 0.08);
  --cyan-glow:     rgba(0, 136, 204, 0.20);
  --amber:         #d48800;
  --amber-dim:     rgba(212, 136, 0, 0.08);
  --amber-glow:    rgba(212, 136, 0, 0.20);

  /* Status — clean, confident */
  --green:         #00a856;
  --green-dim:     rgba(0, 168, 86, 0.08);
  --red:           #e02848;
  --red-dim:       rgba(224, 40, 72, 0.08);
  --yellow:        #c89800;
}

/* Disable decorative overlays */
html[data-theme="light"] #bg-canvas { display: none; }
html[data-theme="light"] body::after { display: none; }  /* scanlines */
html[data-theme="light"] body::before { opacity: 0.3; }  /* faint grid */

/* Kill dark-mode text stroke */
html[data-theme="light"] body {
  -webkit-text-stroke: 0;
  color-scheme: light;
}

/* ── Header ── */
html[data-theme="light"] #context-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(0, 80, 120, 0.10);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .lh-row-brand {
  border-bottom-color: rgba(0, 80, 120, 0.06);
}

html[data-theme="light"] .lh-row-nav {
  background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .lh-brand {
  text-shadow: none;
}

html[data-theme="light"] .lh-version-badge {
  box-shadow: 0 0 4px rgba(0, 119, 170, 0.25);
}

html[data-theme="light"] .lh-clock {
  text-shadow: none;
}

html[data-theme="light"] .lh-session-tag {
  border-color: rgba(0, 119, 170, 0.20);
  background: rgba(0, 119, 170, 0.06);
}

html[data-theme="light"] .lh-pill {
  border-color: var(--dim-2);
  background: rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .lh-pill.live {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 137, 74, 0.06);
}

html[data-theme="light"] .lh-pill .dot {
  background: var(--green);
  box-shadow: 0 0 4px var(--green);
}

/* ── Tabs ── */
html[data-theme="light"] .lh-tab {
  color: var(--dim);
  border-right-color: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .lh-tab:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .lh-tab.active {
  color: var(--cyan);
  background: rgba(0, 119, 170, 0.06);
  text-shadow: none;
}

html[data-theme="light"] .lh-tab.active::after {
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 4px var(--cyan-glow);
}

/* ── Ticker strip ── */
html[data-theme="light"] #ticker {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 80, 120, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="light"] .ticker-item {
  border-right-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .ticker-up   { text-shadow: none; }
html[data-theme="light"] .ticker-down { text-shadow: none; }

/* ── Chat bubbles ── */
html[data-theme="light"] .message-row.user .message-bubble {
  background: rgba(0, 119, 170, 0.04);
  border: 1px solid rgba(192, 120, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .message-row.assistant .message-bubble {
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(0, 80, 120, 0.10);
  border-left: 2px solid var(--cyan);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .message-row.assistant .message-bubble::before {
  text-shadow: none;
}

/* ── Command bar ── */
html[data-theme="light"] #command-bar {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 80, 120, 0.15);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] #command-bar::after {
  background: rgba(0, 80, 120, 0.10);
}

html[data-theme="light"] #chat-input {
  color: var(--text-bright);
}

html[data-theme="light"] #send-btn {
  border-left-color: rgba(0, 80, 120, 0.10);
  background: rgba(0, 119, 170, 0.05);
  text-shadow: none;
}

html[data-theme="light"] #send-btn:hover {
  background: var(--cyan);
  color: #fff;
  box-shadow: 0 0 8px rgba(0, 119, 170, 0.3);
}

/* ── Mode toggle buttons ── */
html[data-theme="light"] .mode-btn {
  border-color: rgba(0, 80, 120, 0.10);
  color: var(--dim);
}

html[data-theme="light"] .mode-btn.active {
  background: rgba(0, 119, 170, 0.08);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Theme toggle button ── */
html[data-theme="light"] #theme-toggle {
  border-color: rgba(0, 80, 120, 0.15);
  color: var(--dim);
}

html[data-theme="light"] #theme-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Analysis panel ── */
html[data-theme="light"] #analysis-panel {
  background: var(--bg);
}

html[data-theme="light"] .analysis-section-label {
  border-bottom-color: rgba(0, 80, 120, 0.10);
}

/* ── Performance cards ── */
html[data-theme="light"] .perf-card {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 80, 120, 0.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .perf-card:hover {
  border-color: rgba(0, 119, 170, 0.20);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .perf-card-value.positive { text-shadow: none; }
html[data-theme="light"] .perf-card-value.negative { text-shadow: none; }

html[data-theme="light"] #perf-equity-chart {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 80, 120, 0.10);
}

/* ── Performance range buttons ── */
html[data-theme="light"] .perf-range-btn {
  border-color: rgba(0, 80, 120, 0.12);
  color: var(--dim);
  background: transparent;
}

html[data-theme="light"] .perf-range-btn.active,
html[data-theme="light"] .perf-range-btn:hover {
  background: rgba(0, 119, 170, 0.08);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Journal ── */
html[data-theme="light"] #journal-table th {
  background: rgba(245, 247, 250, 0.98);
  border-bottom-color: rgba(0, 80, 120, 0.10);
}

html[data-theme="light"] #journal-table td {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] #journal-table tr:hover td {
  background: rgba(0, 119, 170, 0.03);
}

html[data-theme="light"] .journal-btn {
  border-color: rgba(0, 80, 120, 0.12);
  color: var(--dim);
}

/* ── Toast notifications ── */
html[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 80, 120, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  color: var(--text);
}

/* ── Watchlist cards ── */
html[data-theme="light"] .watchlist-card,
html[data-theme="light"] .card {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(0, 80, 120, 0.10);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ── Playbook panel ── */
html[data-theme="light"] #playbook-panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 80, 120, 0.12);
}

/* ── Scrollbars ── */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 60, 100, 0.14);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 60, 100, 0.25);
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent;
}

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL LIGHT THEME — Page-Level Overrides
   Catches hardcoded dark borders, backgrounds, and text colors
   across all page inline <style> blocks (pulse, scanner, touch, etc.)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Body & Background ── */
html[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme="light"] body::before {
  display: none !important;
}

/* ── Kill all text-shadow & dark-mode glow globally ── */
html[data-theme="light"] * {
  text-shadow: none !important;
}

/* ── Frosted glass card mixin — the signature light-theme look ── */
html[data-theme="light"] .pulse-widget,
html[data-theme="light"] .touch-card,
html[data-theme="light"] .cockpit-panel,
html[data-theme="light"] .edge-card,
html[data-theme="light"] .wizard-step,
html[data-theme="light"] .wizard-panel,
html[data-theme="light"] .bt-result-card,
html[data-theme="light"] .replay-card,
html[data-theme="light"] .news-card,
html[data-theme="light"] .digest-card,
html[data-theme="light"] .mi-card,
html[data-theme="light"] .mo-card,
html[data-theme="light"] .action-card,
html[data-theme="light"] .scan-row,
html[data-theme="light"] .scan-card,
html[data-theme="light"] .flow-row,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .overlay-panel,
html[data-theme="light"] .ctx-chart-panel {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(100, 120, 180, 0.08) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  box-shadow: 0 1px 4px rgba(40, 60, 100, 0.06), 0 0 0 1px rgba(100, 120, 180, 0.04) !important;
}

/* Hover lift on interactive cards */
html[data-theme="light"] .mo-card:hover,
html[data-theme="light"] .action-card:hover,
html[data-theme="light"] .scan-row:hover,
html[data-theme="light"] .scan-card:hover,
html[data-theme="light"] .flow-row:hover {
  background: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 4px 16px rgba(40, 60, 100, 0.10), 0 0 0 1px rgba(0, 136, 204, 0.12) !important;
  border-color: rgba(0, 136, 204, 0.15) !important;
}

/* ── Section Headers ── */
html[data-theme="light"] .section-header {
  color: var(--text-bright) !important;
  border-bottom-color: transparent !important;
}

html[data-theme="light"] .section-desc {
  color: var(--dim) !important;
}

/* ── Pulse ── */
html[data-theme="light"] .pulse-body {
  background: var(--bg) !important;
}

html[data-theme="light"] .pw-header {
  border-bottom-color: rgba(100, 120, 180, 0.06) !important;
}

html[data-theme="light"] .pw-title {
  color: var(--text) !important;
}

html[data-theme="light"] .pw-action {
  color: var(--cyan) !important;
}

html[data-theme="light"] .pw-loading,
html[data-theme="light"] .pw-body {
  color: var(--text) !important;
}

/* ── Inputs / Selects / Textareas (exclude range sliders + checkboxes) ── */
html[data-theme="light"] input:not([type="range"]):not([type="checkbox"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--text) !important;
  border-color: rgba(100, 120, 180, 0.15) !important;
}
html[data-theme="light"] input[type="range"] {
  background: rgba(100, 120, 180, 0.15) !important;
}
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb {
  background: #0088cc !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.10) !important;
}

html[data-theme="light"] input::placeholder {
  color: var(--dim-2) !important;
}

/* ── Buttons — slate default, cyan accent ── */
html[data-theme="light"] button {
  color: var(--text) !important;
}

html[data-theme="light"] button:hover {
  background: rgba(0, 136, 204, 0.06) !important;
}

/* ── Tables ── */
html[data-theme="light"] th {
  background: rgba(100, 120, 180, 0.04) !important;
  color: var(--dim) !important;
  border-bottom-color: rgba(100, 120, 180, 0.08) !important;
  font-weight: 600;
}

html[data-theme="light"] td {
  border-bottom-color: rgba(100, 120, 180, 0.04) !important;
  color: var(--text) !important;
}

html[data-theme="light"] tr:hover td {
  background: rgba(0, 136, 204, 0.03) !important;
}

/* ── Setup page — FORCE light on dark inline-styled cards ── */
html[data-theme="light"] .setup-section,
html[data-theme="light"] .settings-group,
html[data-theme="light"] [class*="gate-card"],
html[data-theme="light"] [class*="risk-gate"],
html[data-theme="light"] [class*="rg-card"] {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(100, 120, 180, 0.10) !important;
  color: var(--text) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Force ALL divs with dark inline backgrounds to go light */
html[data-theme="light"] div[style*="background: #0"],
html[data-theme="light"] div[style*="background:#0"],
html[data-theme="light"] div[style*="background: rgb("],
html[data-theme="light"] div[style*="background:rgb("],
html[data-theme="light"] div[style*="background: rgba(0"],
html[data-theme="light"] div[style*="background: rgba(5"],
html[data-theme="light"] div[style*="background: rgba(8"],
html[data-theme="light"] div[style*="background: rgba(10"],
html[data-theme="light"] div[style*="background-color: #0"],
html[data-theme="light"] div[style*="background-color:#0"] {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--text) !important;
}

/* Drop zones, file upload areas */
html[data-theme="light"] [class*="drop-zone"],
html[data-theme="light"] [class*="dropzone"],
html[data-theme="light"] [class*="upload-area"] {
  background: rgba(0, 136, 204, 0.03) !important;
  border-color: rgba(0, 136, 204, 0.15) !important;
  color: var(--dim) !important;
}

/* ── Badges & Tags ── */
html[data-theme="light"] [class*="badge"],
html[data-theme="light"] [class*="tag"],
html[data-theme="light"] [class*="chip"] {
  text-shadow: none !important;
}

/* ── Contextual Chart ── */
html[data-theme="light"] .ctx-chart-header {
  border-bottom-color: rgba(100, 120, 180, 0.06) !important;
}

/* ── Pre/Code ── */
html[data-theme="light"] pre,
html[data-theme="light"] code {
  background: rgba(100, 120, 180, 0.05) !important;
  color: var(--text) !important;
  border-color: rgba(100, 120, 180, 0.08) !important;
}

/* ── Links ── */
html[data-theme="light"] a {
  color: var(--cyan);
}

html[data-theme="light"] a:hover {
  color: #006699;
}

/* ── Heatmap ── */
html[data-theme="light"] .heatmap-wrap {
  border-color: rgba(100, 120, 180, 0.06) !important;
  border-radius: 8px;
}

html[data-theme="light"] .hm-tile {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Horizontal rules ── */
html[data-theme="light"] hr {
  border-color: rgba(100, 120, 180, 0.06) !important;
}

/* ── Selection highlight ── */
html[data-theme="light"] ::selection {
  background: rgba(0, 136, 204, 0.15);
  color: var(--text-bright);
}

/* ── Scrollbars — matching the cool palette ── */
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Kill gray horizontal lines from dark-mode borders ── */
html[data-theme="light"] [style*="border-bottom: 1px solid rgba"],
html[data-theme="light"] [style*="border-top: 1px solid rgba"] {
  border-color: rgba(100, 120, 180, 0.05) !important;
}

/* ════════════════════════════════════════════════════════════════════
   HOVER POPUPS, COPY BUTTONS, DROPDOWNS, TOOLTIPS — Light Theme
   Everything that appears on hover/click must match the premium skin.
   ════════════════════════════════════════════════════════════════════ */

/* Copy button on chat bubbles */
html[data-theme="light"] .copy-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(100, 120, 180, 0.15) !important;
  color: var(--dim) !important;
  box-shadow: 0 2px 8px rgba(40, 60, 100, 0.10) !important;
  backdrop-filter: blur(8px) !important;
}
html[data-theme="light"] .copy-btn:hover {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  background: #ffffff !important;
}
html[data-theme="light"] .copy-btn.copied {
  border-color: var(--green) !important;
  color: var(--green) !important;
}

/* Creative copy button */
html[data-theme="light"] #creative-copy-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(100, 120, 180, 0.15) !important;
  color: var(--dim) !important;
}

/* Command palette popup */
html[data-theme="light"] #cmd-palette-popup {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(100, 120, 180, 0.12) !important;
  box-shadow: 0 8px 32px rgba(40, 60, 100, 0.15) !important;
  backdrop-filter: blur(16px) !important;
  color: var(--text) !important;
}

/* Model switcher popup */
html[data-theme="light"] #model-switcher-popup {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(100, 120, 180, 0.12) !important;
  box-shadow: 0 8px 32px rgba(40, 60, 100, 0.15) !important;
  color: var(--text) !important;
}

/* Analysis panel */
html[data-theme="light"] #analysis-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(100, 120, 180, 0.10) !important;
  box-shadow: 0 4px 20px rgba(40, 60, 100, 0.10) !important;
  color: var(--text) !important;
}

/* Toast notifications */
html[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(100, 120, 180, 0.12) !important;
  box-shadow: 0 4px 20px rgba(40, 60, 100, 0.12) !important;
  color: var(--text) !important;
}

/* Command bar (chat input) */
html[data-theme="light"] #command-bar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(100, 120, 180, 0.15) !important;
  box-shadow: 0 -2px 12px rgba(40, 60, 100, 0.06), 0 0 0 1px rgba(100, 120, 180, 0.06) !important;
}

/* RAG badge */
html[data-theme="light"] .rag-badge {
  color: var(--cyan) !important;
}

/* Any popup/dropdown with dark hardcoded background */
html[data-theme="light"] [class*="popup"],
html[data-theme="light"] [class*="dropdown"] {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(100, 120, 180, 0.10) !important;
  color: var(--text) !important;
}

/* Popup/dropdown items on hover */
html[data-theme="light"] [class*="popup"] [class*="item"]:hover,
html[data-theme="light"] [class*="dropdown"] [class*="item"]:hover {
  background: rgba(0, 136, 204, 0.06) !important;
}

/* Surface variable override for any element using it */
html[data-theme="light"] [style*="var(--surface)"] {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE-LEVEL DARK BACKGROUND OVERRIDES
   Catches hardcoded rgba(0-10,...) backgrounds across edge, workspace,
   scanner, touch, backtest, and any other page with inline dark styles.
   ════════════════════════════════════════════════════════════════════ */

/* Force :root dark variables to light when theme is active */
html[data-theme="light"] {
  --surface: rgba(255, 255, 255, 0.85) !important;
}

/* Any element with a hardcoded dark background via inline style */
html[data-theme="light"] [style*="background: rgba(7,"],
html[data-theme="light"] [style*="background: rgba(8,"],
html[data-theme="light"] [style*="background: rgba(2,"],
html[data-theme="light"] [style*="background: rgba(0,0,0"],
html[data-theme="light"] [style*="background:rgba(7,"],
html[data-theme="light"] [style*="background:rgba(8,"],
html[data-theme="light"] [style*="background:rgba(2,"],
html[data-theme="light"] [style*="background:rgba(0,0,0"],
html[data-theme="light"] [style*="background: #02"],
html[data-theme="light"] [style*="background: #03"],
html[data-theme="light"] [style*="background: #08"],
html[data-theme="light"] [style*="background: #0a"],
html[data-theme="light"] [style*="background:#02"],
html[data-theme="light"] [style*="background:#03"],
html[data-theme="light"] [style*="background:#08"],
html[data-theme="light"] [style*="background:#0a"] {
  background: rgba(255, 255, 255, 0.80) !important;
  color: var(--text) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Edge page — performance cards, strength bars, coach panels */
html[data-theme="light"] .edge-welcome,
html[data-theme="light"] .perf-snapshot,
html[data-theme="light"] .strength-card,
html[data-theme="light"] .coach-card,
html[data-theme="light"] .pattern-card {
  background: rgba(255, 255, 255, 0.80) !important;
  border-color: rgba(100, 120, 180, 0.08) !important;
  color: var(--text) !important;
}

/* Workspace page — module panels, toolbar, picker */
html[data-theme="light"] .ws-toolbar,
html[data-theme="light"] .ws-picker,
html[data-theme="light"] .ws-module,
html[data-theme="light"] .ws-panel,
html[data-theme="light"] .ws-saved-panel,
html[data-theme="light"] .ws-rename-box,
html[data-theme="light"] .module-header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(100, 120, 180, 0.08) !important;
  color: var(--text) !important;
}

/* Workspace modal overlays */
html[data-theme="light"] .ws-modal-overlay,
html[data-theme="light"] .ws-layout-modal {
  background: rgba(240, 242, 248, 0.92) !important;
}

/* Workspace module content areas */
html[data-theme="light"] .ws-module-body {
  background: rgba(255, 255, 255, 0.75) !important;
  color: var(--text) !important;
}

/* Workspace input fields */
html[data-theme="light"] .ws-toolbar input,
html[data-theme="light"] .ws-picker input,
html[data-theme="light"] .ws-rename-input {
  background: #ffffff !important;
  color: var(--text) !important;
  border-color: rgba(100, 120, 180, 0.15) !important;
}

/* Tooltip labels */
html[data-theme="light"] [class*="tooltip"],
html[data-theme="light"] [class*="Tooltip"] {
  background: rgba(42, 54, 80, 0.9) !important;
  color: #ffffff !important;
}

/* ── Selection color ── */
html[data-theme="light"] ::selection {
  background: rgba(0, 119, 170, 0.18);
  color: var(--text-bright);
}

/* ── Command palette modal ── */
html[data-theme="light"] .cmd-palette-overlay {
  background: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .cmd-palette {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 80, 120, 0.15);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .cmd-palette-item:hover,
html[data-theme="light"] .cmd-palette-item.selected {
  background: rgba(0, 119, 170, 0.06);
}

/* ── Journal modals ── */
html[data-theme="light"] #journal-modal-content,
html[data-theme="light"] #journal-close-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 80, 120, 0.12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

/* ── Inputs & selects in light mode (exclude range/checkbox) ── */
html[data-theme="light"] input:not([type="range"]):not([type="checkbox"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: rgba(245, 247, 250, 0.9);
  border-color: rgba(0, 80, 120, 0.12);
  color: var(--text);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 119, 170, 0.12);
}

html[data-theme="light"] input::placeholder {
  color: var(--dim);
}

/* ── Focus rings in light mode ── */
html[data-theme="light"] :focus-visible {
  outline-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 119, 170, 0.10);
}

/* ── Command palette in light mode ── */
html[data-theme="light"] #cmd-palette-popup {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 80, 120, 0.15);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .cp-item {
  border-color: rgba(0, 80, 120, 0.06);
}

html[data-theme="light"] .cp-item:hover {
  background: rgba(0, 119, 170, 0.05);
}

/* ── Smooth theme transitions ── */
html[data-theme] body,
html[data-theme] #context-header,
html[data-theme] #ticker,
html[data-theme] #command-bar,
html[data-theme] .lh-tab,
html[data-theme] .lh-brand,
html[data-theme] .lh-clock,
html[data-theme] .message-bubble,
html[data-theme] .perf-card,
html[data-theme] .toast,
html[data-theme] #theme-toggle,
html[data-theme] #send-btn,
html[data-theme] #cmd-palette-popup {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

/* =========================================================
   GLOBAL MICRO-INTERACTIONS & POLISH
========================================================= */

/* Smooth skeleton loader for async content */
@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

.loading-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

html[data-theme="light"] .loading-skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.03) 25%,
    rgba(0,0,0,0.06) 50%,
    rgba(0,0,0,0.03) 75%
  );
  background-size: 200px 100%;
}

/* Subtle scale on interactive cards */
.perf-card,
.watchlist-card,
.cp-item {
  transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s;
}

.perf-card:active,
.watchlist-card:active {
  transform: scale(0.98);
}

/* Smooth panel entrance */
@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-panel.active {
  animation: panel-fade-in 0.2s ease-out;
}

/* Empty state styling */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--dim);
  font-size: 15.5px;
  letter-spacing: 0.5px;
  line-height: 1.6;
  min-height: 200px;
}

.empty-state-icon {
  font-size: 41.5px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* =========================================================
   PERFORMANCE TAB
========================================================= */
#performance-panel {
  padding: 20px;
  overflow-y: auto;
}
.perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.perf-card {
  background: rgba(8, 10, 18, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 2px 12px rgba(0,0,0,0.3);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.perf-card:hover {
  border-color: rgba(0, 200, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 2px 12px rgba(0,0,0,0.3),
    0 0 16px rgba(0, 234, 255, 0.06);
}
.perf-card-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--dim);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.perf-card-value {
  font-family: var(--font-display);
  font-size: 28.5px;
  font-weight: 700;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}
.perf-card-value.positive { color: var(--green); text-shadow: 0 0 8px rgba(0, 230, 118, 0.25); }
.perf-card-value.negative { color: var(--red); text-shadow: 0 0 8px rgba(255, 23, 68, 0.25); }
.perf-card-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 4px;
}

#perf-equity-chart {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  height: 300px;
  position: relative;
}

/* CONTEXT watermark on chart areas */
.context-watermark {
  position: relative;
}
#perf-r-chart {
  position: relative;
}
#perf-equity-chart::after,
#perf-r-chart::after,
.dropzone-preview::after {
  content: 'CONTEXT';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 14px;
  color: rgba(0, 234, 255, 0.06);
  pointer-events: none;
  z-index: 5;
  user-select: none;
  white-space: nowrap;
}

/* Date range selector active state */
.perf-range-btn.active {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 234, 255, 0.15);
}

#perf-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.perf-breakdown-section {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px;
}
.perf-breakdown-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--cyan);
  margin-bottom: 10px;
}
.perf-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.perf-breakdown-row:last-child { border-bottom: none; }

/* =========================================================
   JOURNAL TAB
========================================================= */
#journal-layout {
  padding: 12px 16px;
}

#journal-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

#journal-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.journal-btn {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  white-space: nowrap;
}
.journal-btn:hover {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
}
.journal-btn.accent {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
}
.journal-btn.accent:hover {
  background: rgba(0, 234, 255, 0.25);
}

/* Journal view toggle (TRADES | STATS) */
#journal-view-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
}
.journal-view-btn {
  padding: 6px 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-mono);
}
.journal-view-btn:first-child {
  border-radius: 4px 0 0 4px;
}
.journal-view-btn:last-child {
  border-radius: 0 4px 4px 0;
  border-left: none;
}
.journal-view-btn.active {
  border-color: rgba(0,234,255,0.2);
  background: rgba(0,234,255,0.08);
  color: var(--cyan);
}
.journal-view-btn:hover:not(.active) {
  background: rgba(255,255,255,0.04);
}

/* News symbol filter buttons */
.news-sym-btn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: var(--dim);
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
}
.news-sym-btn.active {
  border-color: rgba(0,234,255,0.2);
  background: rgba(0,234,255,0.08);
  color: var(--cyan);
}
.news-sym-btn:hover:not(.active) {
  background: rgba(255,255,255,0.04);
}

/* Summary strip */
#journal-summary {
  display: flex;
  gap: 16px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.journal-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}
.journal-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--dim);
}
.journal-stat span:last-child {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-bright);
}

/* Trade table */
#journal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
}

#journal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--font-mono);
  white-space: nowrap;
}
#journal-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel-solid);
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
  z-index: 2;
}
#journal-table tbody td {
  padding: 6px 10px;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  vertical-align: middle;
}
#journal-table tbody tr:hover {
  background: rgba(0, 234, 255, 0.04);
}

/* Status badges */
.j-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.j-status.open {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(245,166,35,0.3);
}
.j-status.closed {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(0,234,255,0.2);
}

/* Direction badges */
.j-dir {
  font-weight: 700;
  font-size: 13px;
}
.j-dir.long { color: var(--green); }
.j-dir.short { color: var(--red); }

/* P&L coloring */
.j-pnl-pos { color: var(--green); font-weight: 600; }
.j-pnl-neg { color: var(--red); font-weight: 600; }
.j-pnl-flat { color: var(--dim); }

/* Compliance */
.j-compliance {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 11.5px;
  font-weight: 600;
}
.j-compliance.high { background: var(--green-dim); color: var(--green); }
.j-compliance.med  { background: var(--amber-dim); color: var(--amber); }
.j-compliance.low  { background: var(--red-dim); color: var(--red); }

/* Action buttons in table */
.j-action-btn {
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}
.j-action-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
}
.j-action-btn.close-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-dim);
}

/* Empty state */
#journal-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--dim);
}
#journal-empty .placeholder-icon {
  font-size: 31px;
  letter-spacing: 6px;
  margin-bottom: 8px;
  color: var(--dim-2);
}
#journal-empty code {
  color: var(--cyan);
  background: var(--cyan-dim);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 13px;
}

/* Modals */
.journal-modal-hidden {
  display: none;
}
#journal-modal:not(.journal-modal-hidden),
#journal-close-modal:not(.journal-modal-hidden) {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#journal-modal-content,
#journal-close-content {
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  width: 90%;
  max-width: 600px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 80px rgba(0,234,255,0.05);
}
.journal-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--cyan);
}
.journal-modal-header button {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 18px;
  cursor: pointer;
  font-family: var(--font-mono);
}
.journal-modal-header button:hover {
  color: var(--red);
}
.journal-modal-body {
  padding: 16px;
}
.journal-form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.journal-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  flex: 1;
}
.journal-field label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--dim);
}

/* =========================================================
   HULL ALIGNMENT STRIP
========================================================= */
#hull-strip {
  display: none;
  padding: 6px 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.3);
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hull-label {
  color: rgba(255,255,255,0.3);
  font-weight: 700;
}
.hull-tf {
  color: var(--dim);
}
.hull-badge {
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
  color: var(--dim);
}
.hull-scan-age {
  color: rgba(255,255,255,0.2);
  margin-left: auto;
}

/* =========================================================
   NEWS & SENTIMENT PANEL
========================================================= */
#news-layout {
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--mono);
}
.news-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.news-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.news-header-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--dim);
}
#news-overall-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 1px;
}
.news-sym-group {
  display: flex;
  gap: 6px;
}
#news-sentiment-bar {
  height: 4px;
  background: #ffffff08;
  border-radius: 2px;
  margin-bottom: 16px;
  overflow: hidden;
}
#news-sentiment-fill {
  height: 100%;
  width: 50%;
  background: var(--dim);
  border-radius: 2px;
  transition: all 0.5s;
}
#news-feed {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.news-loading {
  color: var(--dim);
  text-align: center;
  padding: 40px;
  font-size: 14.5px;
}

/* =========================================================
   RISK DASHBOARD
========================================================= */
#risk-layout {
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--mono);
}
.risk-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.risk-header-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--dim);
}
.risk-refresh-btn {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 12px;
  border: 1px solid rgba(0,234,255,0.2);
  background: transparent;
  color: var(--cyan);
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 1px;
}
#risk-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.risk-card {
  background: rgba(4,6,14,0.9);
  border: 1px solid #ffffff10;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.risk-card-label {
  color: var(--dim);
  font-size: 10.5px;
  letter-spacing: 1.5px;
}
.risk-card-value {
  font-size: 23.5px;
  font-weight: 700;
  margin-top: 6px;
}
.risk-card-value--lg {
  font-size: 26px;
}
.risk-card-sub {
  color: var(--dim);
  font-size: 13px;
  margin-top: 2px;
}
.risk-section {
  background: rgba(4,6,14,0.9);
  border: 1px solid #ffffff10;
  border-radius: 8px;
  padding: 14px;
}
.risk-section-title {
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.risk-budget-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--dim);
  margin-bottom: 6px;
}
.risk-budget-track {
  height: 8px;
  background: #ffffff08;
  border-radius: 4px;
  overflow: hidden;
}
#risk-budget-bar {
  height: 100%;
  width: 0%;
  background: var(--green);
  border-radius: 4px;
  transition: all 0.5s;
}
.risk-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
#risk-rolling-pnl {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 80px;
}

/* =========================================================
   PERFORMANCE / STATS SECTION
========================================================= */
.perf-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0 4px;
}
.perf-range-controls {
  display: flex;
  gap: 4px;
  align-items: center;
}
.perf-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.1);
  margin: 0 6px;
}
.schwab-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: #888;
  cursor: pointer;
}
.schwab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #666;
  display: inline-block;
}
.perf-small-btn {
  font-size: 10.5px;
  letter-spacing: 1px;
  opacity: 0.7;
}
.perf-small-btn--danger {
  color: #ff1744;
}
#perf-r-chart {
  height: 160px;
  margin-bottom: 8px;
}
.heatmap-wrap {
  margin-bottom: 12px;
  overflow-x: auto;
}
#heatmap-grid {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  min-height: 80px;
  padding: 4px 0;
}
.heatmap-empty {
  color: var(--dim);
  font-size: 13px;
  padding: 20px;
  text-align: center;
  width: 100%;
}
#heatmap-legend {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--dim);
  letter-spacing: 0.5px;
}
.heatmap-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.heatmap-swatch--loss-dark   { background: #ff1744; opacity: 0.9; }
.heatmap-swatch--loss-light  { background: #ff1744; opacity: 0.4; }
.heatmap-swatch--neutral     { background: #ffffff10; }
.heatmap-swatch--win-light   { background: #00e676; opacity: 0.4; }
.heatmap-swatch--win-dark    { background: #00e676; opacity: 0.9; }
.breakdown-empty {
  color: var(--dim);
}

/* =========================================================
   CHAT ATTACHMENT PREVIEW
========================================================= */
#chat-attach-preview {
  display: none;
  padding: 6px 10px;
  background: rgba(0,255,255,0.04);
  border-top: 1px solid rgba(0,255,255,0.15);
  font-size: 13px;
  color: #9acfd9;
  align-items: center;
  gap: 10px;
}
#chat-attach-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 1px solid rgba(0,255,255,0.3);
  border-radius: 3px;
}
#chat-attach-icon {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  font-size: 28.5px;
  border: 1px solid rgba(0,255,255,0.3);
  border-radius: 3px;
}
#chat-attach-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chat-attach-mode-label {
  color: #00e6d6;
  font-weight: 600;
}
#chat-attach-save {
  background: rgba(0,255,180,0.12);
  border: 1px solid rgba(0,255,180,0.4);
  color: #00e6b8;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 2px;
  font-weight: 600;
}
#chat-attach-clear {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #ccc;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 2px;
}

/* =========================================================
   MOBILE BOTTOM NAV — MORE MENU
========================================================= */
#bnav-more-menu {
  display: none;
}

/* =========================================================
   MISC INLINE STYLE EXTRACTIONS
========================================================= */
.section-label-mt { margin-top: 12px; }
.section-label-mt-sm { margin-top: 8px; }
.optional-hint { opacity: 0.4; font-size: 11.5px; }
.followup-hint { color: var(--dim); font-size: 11.5px; letter-spacing: 1px; }
.input-auto-width { width: auto; min-width: 90px; }
.field-flex-full { flex: 1; }
.form-row-right { justify-content: flex-end; gap: 8px; margin-top: 8px; }
.mobile-header-btn { display: none; }
.watchlist-empty-state { display: none; }
.lh-brand-link { text-decoration: none; color: inherit; }
.lh-pill--clickable { cursor: pointer; }
.tab-panel-hidden { display: none; }
.no-margin { margin: 0; }
.risk-section--spaced { margin-bottom: 16px; }
#risk-exposure { font-size: 13px; }
.risk-matrix-wrap { overflow-x: auto; font-size: 13px; }

/* Desktop: hide mobile-only elements */
#mobile-bottom-nav { display: none; }

/* =========================================================
   MOBILE RESPONSIVE — iOS / Android
   Polished terminal UX for touch devices
   Target: max-width 768px
========================================================= */
@media (max-width: 768px) {

  /* ── PERFORMANCE: disable GPU-heavy effects ── */
  #bg-canvas { display: none !important; }
  body::after { display: none !important; }   /* scanlines */
  body::before { display: none !important; }  /* grid overlay */

  /* Reduce backdrop-filter complexity on mobile */
  #context-header,
  #command-bar,
  .perf-card,
  .message-row.assistant .message-bubble {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     HEADER — hidden by default on mobile, toggle to reveal
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #context-header {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    background: rgba(8, 10, 18, 0.97);
    border-bottom: 1px solid rgba(0, 234, 255, 0.10);
    transform: translateY(-100%);
    transition: transform 0.25s ease;
    pointer-events: none;
    opacity: 0;
  }
  #context-header.mobile-visible {
    transform: translateY(0);
    pointer-events: auto;
    opacity: 1;
  }

  /* Toggle button to reveal top header on mobile */
  #mobile-header-toggle {
    display: flex !important;
    position: fixed;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 250;
    background: rgba(6, 8, 16, 0.92);
    border: 1px solid rgba(0, 234, 255, 0.12);
    border-radius: 0 0 8px 8px;
    border-top: none;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 3px 14px 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(8px);
    transition: opacity 0.2s;
  }
  #mobile-header-toggle .mht-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    margin-right: 4px;
    font-size: 8px;
  }
  #context-header.mobile-visible ~ #mobile-header-toggle .mht-arrow,
  body.mobile-header-open #mobile-header-toggle .mht-arrow {
    transform: rotate(180deg);
  }

  /* Adjust chat window top — no header visible by default */
  #chat-window {
    top: 84px !important;
  }
  body.mobile-header-open #chat-window {
    top: 136px !important;
  }

  /* ---- ALERT SUMMARY CARD (mobile) ---- */
  .alert-summary-card {
    font-family: var(--font-mono);
    font-size: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 234, 255, 0.12);
    border-radius: 6px;
    overflow: hidden;
  }
  .alert-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .alert-summary-header:active { background: rgba(0,234,255,0.04); }
  .alert-summary-count {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--amber);
  }
  .alert-summary-expand {
    font-size: 10px;
    color: var(--dim);
    letter-spacing: 1px;
  }
  .alert-summary-expand .chevron {
    display: inline-block;
    transition: transform 0.2s;
    margin-left: 4px;
  }
  .alert-summary-card.expanded .alert-summary-expand .chevron {
    transform: rotate(180deg);
  }
  .alert-summary-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .alert-summary-card.expanded .alert-summary-body {
    max-height: 2000px;
  }
  .alert-summary-item {
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .alert-summary-item .asi-sym {
    color: var(--cyan);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    min-width: 48px;
  }
  .alert-summary-item .asi-dir {
    font-weight: 700;
    font-size: 14px;
  }
  .alert-summary-item .asi-sig {
    font-size: 11px;
    color: var(--text);
  }
  .alert-summary-item .asi-price {
    margin-left: auto;
    color: var(--dim);
    font-size: 11px;
  }

  .lh-row-brand {
    height: auto;
    min-height: 44px;
    padding: 6px 12px;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
    align-items: center;
  }

  .lh-brand-block {
    gap: 6px;
    flex-shrink: 0;
  }

  .lh-brand {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-shadow:
      0 0 12px var(--cyan-glow),
      0 0 2px rgba(0, 234, 255, 0.4);
  }

  /* Hide non-essential elements */
  .lh-sub          { display: none !important; }
  .lh-divider      { display: none !important; }
  .lh-divider-v    { display: none !important; }
  .lh-brand-center { display: none !important; }
  .lh-version-badge { display: none !important; }
  #pnl-widget      { display: none !important; }

  .lh-brand-right {
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
  }

  .lh-session-tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    padding: 3px 7px;
    border-radius: 3px;
    border-color: rgba(0, 234, 255, 0.2);
    background: rgba(0, 234, 255, 0.06);
  }

  .lh-clock {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1.5px;
    min-width: auto;
    text-shadow:
      0 0 8px var(--amber-glow),
      0 0 2px rgba(245, 166, 35, 0.35);
  }

  #theme-toggle {
    font-size: 21px;
    padding: 6px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #playbook-btn {
    display: none !important;
  }

  /* Model pill for mobile — sits in brand-right */
  #model-pill-mobile {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid rgba(0, 234, 255, 0.15);
    border-radius: 3px;
    background: rgba(0, 234, 255, 0.04);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.5px;
    color: var(--cyan);
    user-select: none;
    transition: all 0.15s;
  }
  #model-pill-mobile:hover {
    border-color: rgba(0, 234, 255, 0.4);
    background: rgba(0, 234, 255, 0.08);
  }
  #model-pill-mobile .mpm-label {
    color: var(--dim);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* Adjust model switcher popup for mobile */
  #model-switcher-popup {
    top: 44px;
    left: 8px;
    right: 8px;
    width: auto;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     NAV TABS — horizontally scrollable, pill-style
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .lh-row-nav {
    height: auto;
    min-height: 40px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(0, 234, 255, 0.06);
    gap: 0;
  }

  .lh-nav-tabs {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    gap: 2px;
    padding: 0 2px;
  }
  .lh-nav-tabs::-webkit-scrollbar { display: none; }

  .lh-tab {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    padding: 0 14px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: none;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .lh-tab:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .lh-tab.active {
    color: var(--cyan);
    font-weight: 600;
    background: rgba(0, 234, 255, 0.08);
    border: 1px solid rgba(0, 234, 255, 0.15);
    text-shadow: 0 0 6px rgba(0, 234, 255, 0.25);
  }

  .lh-tab.active::after {
    display: none;  /* use border instead of bottom bar on mobile */
  }

  .lh-nav-right { display: none !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TICKER STRIP — tighter, crisper
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #ticker {
    height: 24px;
    font-size: 13px;
    border-bottom-color: rgba(0, 234, 255, 0.08);
  }

  .ticker-item {
    padding: 0 14px;
    font-size: 13px;
    gap: 4px;
  }

  .ticker-symbol {
    font-weight: 700;
    letter-spacing: 1.2px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     CHAT WINDOW — edge-to-edge, optimized for thumb reach
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #chat-window {
    width: 100% !important;
    padding: 8px 8px 4px !important;
    transform: translateX(-50%) !important;
  }

  .message-bubble {
    max-width: 88%;
    padding: 10px 12px;
    font-size: 17.5px;
    line-height: 1.65;
    border-radius: 6px;
  }

  .message-row.user .message-bubble {
    border-radius: 6px 6px 2px 6px;
    background: rgba(20, 24, 36, 0.92);
    border: 1px solid rgba(245, 166, 35, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .message-row.user .message-bubble::before {
    font-size: 11.5px;
    letter-spacing: 2.5px;
    margin-bottom: 3px;
  }

  .message-row.assistant .message-bubble {
    border-radius: 6px 6px 6px 2px;
    border-left-width: 2px;
    box-shadow:
      inset 0 0 20px rgba(0, 234, 255, 0.012),
      0 2px 12px rgba(0, 0, 0, 0.35);
  }

  .message-row.assistant .message-bubble::before {
    font-size: 11.5px;
    letter-spacing: 2.5px;
    margin-bottom: 4px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     COMMAND BAR — floating, rounded, iOS-style
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #command-bar {
    bottom: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    border-radius: 12px;
    padding: 2px;
    gap: 0;
    border: 1px solid rgba(0, 234, 255, 0.15);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 8px 32px rgba(0, 0, 0, 0.6),
      0 0 24px rgba(0, 234, 255, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    background: rgba(8, 10, 18, 0.97);
  }

  #command-bar::before {
    /* prompt ">" character */
    padding: 0 10px 0 14px;
    font-size: 19.5px;
    opacity: 0.6;
  }

  #chat-input {
    font-size: 19.5px;
    min-height: 48px;
    padding: 14px 0;
    letter-spacing: 0.3px;
  }

  #chat-input::placeholder {
    font-size: 17px;
    letter-spacing: 0.5px;
    opacity: 0.6;
  }

  #mode-toggle { display: none !important; }

  #command-bar::after {
    /* divider before send */
    height: 24px;
    background: rgba(0, 234, 255, 0.08);
  }

  #send-btn {
    min-width: 64px;
    min-height: 48px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    border-radius: 0 10px 10px 0;
    border-left: 1px solid rgba(0, 234, 255, 0.08);
    background: rgba(0, 234, 255, 0.05);
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  #send-btn:active {
    background: var(--cyan);
    color: #000;
    transform: none;
  }

  #cmd-palette-btn {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TAB CONTENT — proper edge-to-edge spacing
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #tab-content {
    padding: 0;
  }

  .tab-panel {
    padding: 12px 10px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     ANALYSIS — stacked layout, crisp cards
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #analysis-panel {
    width: 100% !important;
    transform: none !important;
    left: 0 !important;
    padding: 10px;
  }

  #analysis-layout {
    flex-direction: column !important;
    gap: 10px;
  }
  #analysis-left, #analysis-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  .analysis-section-label {
    font-size: 11.5px;
    letter-spacing: 2.5px;
    font-weight: 600;
    padding-bottom: 5px;
    margin-bottom: 3px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     CREATIVE — stacked layout
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #creative-layout {
    flex-direction: column !important;
  }
  #creative-left, #creative-right {
    width: 100% !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TOAST NOTIFICATIONS — premium card style
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #toast-container {
    top: auto;
    bottom: 76px;     /* above command bar */
    right: 8px;
    left: 8px;
    z-index: 10000;
  }

  .toast {
    min-width: unset;
    max-width: 100%;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15.5px;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 16px rgba(0, 234, 255, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 234, 255, 0.12);
    background: rgba(8, 10, 18, 0.97);
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     PERFORMANCE DASHBOARD — mobile card grid
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .perf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .perf-card {
    padding: 12px 10px;
    border-radius: 8px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .perf-card-label {
    font-size: 10.5px;
    letter-spacing: 2px;
    margin-bottom: 4px;
  }

  .perf-card-value {
    font-size: 26px;
    font-weight: 700;
  }

  .perf-card-sub {
    font-size: 10.5px;
    margin-top: 3px;
  }

  #perf-breakdown {
    grid-template-columns: 1fr;
  }

  #perf-equity-chart {
    border-radius: 8px;
    padding: 12px;
  }

  /* Date range buttons */
  .perf-range-btn {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     JOURNAL — mobile-optimized layout
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #journal-header-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
  }

  #journal-controls {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    gap: 6px;
    padding-bottom: 2px;
  }
  #journal-controls::-webkit-scrollbar { display: none; }

  .journal-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    white-space: nowrap;
    border-radius: 6px;
    min-height: 38px;
    letter-spacing: 0.8px;
    -webkit-tap-highlight-color: transparent;
  }

  #journal-summary {
    gap: 6px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 8px;
  }

  .j-summary-item {
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(0, 234, 255, 0.03);
    border: 1px solid rgba(0, 234, 255, 0.08);
    text-align: center;
  }

  #journal-table-wrap {
    max-height: 55vh;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    margin: 0 4px;
  }

  /* Make table rows swipeable-feeling */
  #journal-table {
    font-size: 14.5px;
  }
  #journal-table th {
    font-size: 11.5px;
    letter-spacing: 1.5px;
    padding: 8px 6px;
    position: sticky;
    top: 0;
    background: var(--panel-solid);
    z-index: 2;
  }
  #journal-table td {
    padding: 8px 6px;
    white-space: nowrap;
  }

  /* Journal forms */
  .journal-form-row {
    flex-direction: column;
    gap: 8px;
  }

  .journal-field {
    min-width: unset;
  }

  .journal-field label {
    font-size: 11.5px;
    letter-spacing: 1.5px;
  }

  .journal-field input,
  .journal-field select {
    min-height: 42px;
    font-size: 18px;
    border-radius: 6px;
    padding: 8px 10px;
  }

  /* Modals — slide-up sheet style */
  #journal-modal-content,
  #journal-close-content {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
    padding: 20px 16px env(safe-area-inset-bottom, 16px);
    box-shadow:
      0 -8px 40px rgba(0, 0, 0, 0.6),
      0 0 24px rgba(0, 234, 255, 0.05);
    border: 1px solid rgba(0, 234, 255, 0.10);
    border-bottom: none;
  }

  /* Modal backdrop */
  .journal-modal-overlay {
    display: flex;
    align-items: flex-end;  /* bottom-sheet behavior */
    justify-content: center;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     WATCHLIST — responsive grid
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #watchlist-controls {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
  }

  .watchlist-card {
    border-radius: 6px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     PLAYBOOK — full width panel
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #playbook-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TAP TARGETS — 44px minimum (WCAG / Apple HIG)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  button,
  select,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  .lh-tab,
  .creative-mode-btn,
  .journal-btn,
  .perf-range-btn {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;  /* disable double-tap zoom */
  }

  select {
    font-size: 18px;
    border-radius: 6px;
    padding: 8px 10px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%234a5568'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
  }

  input[type="text"],
  input[type="number"],
  input[type="date"] {
    font-size: 21px;  /* >= 16px prevents iOS zoom on focus */
    border-radius: 6px;
    padding: 10px 12px;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     iOS SAFE AREAS — respect notch + home bar
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    #command-bar {
      bottom: calc(8px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }

    #chat-window {
      bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    #toast-container {
      bottom: calc(76px + env(safe-area-inset-bottom));
    }
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SMOOTH ANIMATIONS — respect reduced-motion
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     BOTTOM NAV BAR — replaces top tabs on mobile
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .lh-row-nav { display: none !important; }

  #mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: rgba(6, 8, 16, 0.97);
    border-top: 1px solid rgba(0, 234, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 4px 0;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }

  .bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
  }
  .bnav-item svg { transition: color 0.15s, transform 0.15s; }
  .bnav-item.active { color: var(--cyan); }
  .bnav-item.active svg { transform: scale(1.1); }
  .bnav-item:active { transform: scale(0.95); }

  /* "More" menu */
  #bnav-more-menu {
    position: fixed;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    right: 8px;
    z-index: 501;
    background: rgba(6, 8, 16, 0.98);
    border: 1px solid rgba(0, 234, 255, 0.15);
    border-radius: 10px;
    padding: 6px 0;
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
    min-width: 160px;
  }
  .bnav-more-header {
    padding: 6px 14px;
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 2px;
    color: var(--dim);
    border-bottom: 1px solid #ffffff08;
  }
  .bnav-more-item {
    display: block;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: none;
    color: var(--bright);
    font-family: var(--font-mono);
    font-size: 14.5px;
    letter-spacing: 1px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav-more-item:active { background: rgba(0,234,255,0.06); }

  /* Adjust content area for bottom nav */
  #command-bar {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  #chat-window {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 68px) !important;
  }
  #toast-container {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 76px) !important;
  }

  /* Tab panels responsive: stack grids on mobile */
  #risk-cards { grid-template-columns: repeat(2, 1fr) !important; }
  #risk-layout > div:nth-child(5) { grid-template-columns: 1fr !important; }
  #news-layout > div:first-child { flex-direction: column !important; gap: 8px !important; }
  .news-sym-btn { padding: 6px 8px !important; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* =========================================================
   SMALL MOBILE (max-width: 480px)
   Extra-compact for iPhone SE / small Androids
========================================================= */
@media (max-width: 480px) {
  .lh-brand {
    font-size: 15.5px;
    letter-spacing: 2px;
  }

  .lh-clock {
    font-size: 14.5px;
    letter-spacing: 1px;
  }

  .lh-tab {
    font-size: 11.5px;
    padding: 0 10px;
    letter-spacing: 1.2px;
  }

  #history-toggle-btn {
    font-size: 21px;
    min-width: 44px;
    min-height: 44px;
  }

  #chat-input {
    font-size: 18px;
  }

  .message-bubble {
    max-width: 92%;
    font-size: 17px;
    padding: 8px 10px;
  }

  .journal-btn {
    font-size: 11.5px;
    padding: 6px 10px;
    min-height: 36px;
  }

  #journal-summary {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .perf-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .perf-card {
    padding: 8px 6px;
    border-radius: 6px;
  }

  .perf-card-label {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .perf-card-value {
    font-size: 21px;
  }

  .toast {
    font-size: 14.5px;
    padding: 8px 12px;
    border-radius: 8px;
  }

  /* Tighten analysis sections */
  .analysis-section-label {
    font-size: 10.5px;
  }

  /* Hull alignment strip */
  #hull-strip {
    padding: 5px 10px !important;
    gap: 8px !important;
    font-size: 10.5px !important;
  }
  #hull-alignment {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
  }

}

/* =========================================================
   ADDITIONAL MOBILE FIXES
========================================================= */
@media (max-width: 768px) {
  /* Schwab re-auth banner */
  #schwab-reauth-banner {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  /* Flow analysis modal */
  .flow-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px !important;
  }

  /* Ensure no horizontal overflow */
  body { overflow-x: hidden; }
  #tab-content { overflow-x: hidden; }
}


/* =========================================================
   iOS / GLASS SKIN  (Phase 6B)
   Apply: <html class="theme-glass"> or toggle via JS

   Rounded cards, backdrop-filter blur, system font stack,
   generous whitespace, subtle shadows, spring animations.
   Dark variant by default; .theme-glass.light for light mode.
========================================================= */

/* ── Dark Glass ─────────────────────────────────────────── */
.theme-glass {
  /* Override core palette */
  --bg:            #0a0a0f;
  --bg-deep:       #050508;
  --panel:         rgba(20, 20, 32, 0.72);
  --panel-solid:   #12121e;
  --panel-border:  rgba(255, 255, 255, 0.08);

  /* Text — slightly warmer */
  --text:          #e2e4ea;
  --text-bright:   #f5f5f8;
  --dim:           #6b7084;
  --dim-2:         #3a3d4e;

  /* Accents — softer, more iOS */
  --cyan:          #32d7ff;
  --cyan-dim:      rgba(50, 215, 255, 0.12);
  --cyan-glow:     rgba(50, 215, 255, 0.25);
  --amber:         #ffb340;
  --amber-dim:     rgba(255, 179, 64, 0.12);
  --amber-glow:    rgba(255, 179, 64, 0.3);

  /* Status — less neon, more balanced */
  --green:         #34d399;
  --green-dim:     rgba(52, 211, 153, 0.12);
  --red:           #f87171;
  --red-dim:       rgba(248, 113, 113, 0.12);
  --yellow:        #fbbf24;

  /* Surfaces — glassy layers */
  --surface-0:     #0a0a0f;
  --surface-1:     rgba(20, 20, 32, 0.72);
  --surface-2:     rgba(28, 28, 44, 0.78);
  --surface-3:     rgba(38, 38, 56, 0.82);
  --surface-glass: rgba(16, 16, 28, 0.65);

  /* Shadows — soft elevation */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.4);

  /* Radii — rounded everything */
  --radius-sm:     8px;
  --radius:        12px;
  --radius-md:     14px;
  --radius-lg:     20px;

  /* Typography — system font stack */
  --font-mono:     -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-display:  -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --font-size-xs:  10px;
  --font-size-sm:  12px;
  --font-size-md:  14px;
  --font-size-lg:  17px;
  --font-size-xl:  22px;

  /* Spacing — more generous */
  --space-xs:      6px;
  --space-sm:      10px;
  --space-md:      18px;
  --space-lg:      28px;
  --space-xl:      40px;

  /* Transitions — spring-like feel */
  --ease-soft:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast:  180ms var(--ease-soft);
  --transition-med:   320ms var(--ease-soft);
  --transition-slow:  500ms var(--ease-soft);
}

/* ── Glass card overrides ───────────────────────────────── */
.theme-glass .card,
.theme-glass .analysis-section,
.theme-glass .edit-section,
.theme-glass .summary-card,
.theme-glass .levels-card,
.theme-glass .message-row.assistant .message-bubble {
  background: var(--surface-1);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.theme-glass .message-row.user .message-bubble {
  background: linear-gradient(135deg, rgba(50, 215, 255, 0.14), rgba(50, 215, 255, 0.06));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(50, 215, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ── Header / nav glass bar ─────────────────────────────── */
.theme-glass #context-header,
.theme-glass .lh-row-brand {
  background: var(--surface-glass);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: var(--shadow-sm);
}

/* ── Tabs — pill shape instead of underline ─────────────── */
.theme-glass .lh-tab {
  border-radius: 10px;
  padding: 6px 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: var(--transition-fast);
}
.theme-glass .lh-tab.active {
  background: rgba(50, 215, 255, 0.12);
  color: var(--cyan);
}
.theme-glass .lh-tab.active::after {
  display: none; /* remove underline, use pill bg instead */
}
.theme-glass .lh-tab:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ── Buttons — larger touch targets, rounded ────────────── */
.theme-glass button,
.theme-glass .btn,
.theme-glass .option-btn,
.theme-glass .broker-btn,
.theme-glass .mode-toggle-btn {
  border-radius: var(--radius);
  min-height: 44px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all var(--transition-fast);
}

.theme-glass .btn-next,
.theme-glass .edit-save-btn {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.theme-glass .btn-next:hover,
.theme-glass .edit-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── Inputs — rounded, thicker padding ──────────────────── */
.theme-glass input[type="text"],
.theme-glass input[type="url"],
.theme-glass input[type="time"],
.theme-glass input[type="number"],
.theme-glass select,
.theme-glass textarea,
.theme-glass .time-input,
.theme-glass .webhook-input,
.theme-glass .broker-select {
  border-radius: var(--radius);
  padding: 10px 14px;
  border: 1px solid var(--panel-border);
  background: var(--surface-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.theme-glass input:focus,
.theme-glass select:focus,
.theme-glass textarea:focus {
  border-color: rgba(50, 215, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(50, 215, 255, 0.08);
}

/* ── Chips — pill-shaped ────────────────────────────────── */
.theme-glass .chip,
.theme-glass .style-tag,
.theme-glass .lh-pill,
.theme-glass .lh-session-tag {
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 500;
}

/* ── Command bar glass ──────────────────────────────────── */
.theme-glass #command-bar {
  background: var(--surface-glass);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ── Ticker strip glass ─────────────────────────────────── */
.theme-glass #ticker {
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--panel-border);
}

/* ── Toast — rounded, glass ─────────────────────────────── */
.theme-glass .toast,
.theme-glass .save-toast {
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
}

/* ── Scrollbar — softer ─────────────────────────────────── */
.theme-glass ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.theme-glass ::-webkit-scrollbar-track {
  background: transparent;
}
.theme-glass ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.theme-glass ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ── Hover spring animation on interactive cards ────────── */
.theme-glass .style-card,
.theme-glass .edit-style-card,
.theme-glass .layout-card,
.theme-glass .card {
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-fast);
}
.theme-glass .style-card:hover,
.theme-glass .edit-style-card:hover,
.theme-glass .layout-card:hover,
.theme-glass .card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: var(--shadow-lg);
}

/* ── Selection states — glow ring instead of hard border ── */
.theme-glass .style-card.selected,
.theme-glass .edit-style-card.selected,
.theme-glass .layout-card.selected,
.theme-glass .option-btn.selected {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(50, 215, 255, 0.15), var(--shadow-md);
}

.theme-glass .chip.selected {
  box-shadow: 0 0 0 2px rgba(50, 215, 255, 0.12);
}

/* ── Disable monospace text stroke for system fonts ─────── */
.theme-glass body,
.theme-glass * {
  -webkit-text-stroke: 0;
  font-variant-ligatures: normal;
}

/* ── Letter-spacing normalization for sans-serif ────────── */
.theme-glass {
  letter-spacing: 0;
}
.theme-glass .edit-section-title,
.theme-glass .label,
.theme-glass .step-title {
  letter-spacing: 0.8px;
}


/* ══════════════════════════════════════════════════════════
   LIGHT GLASS VARIANT
   Apply: <html class="theme-glass light">
   ═════════════════════════════════════════════════════════ */
.theme-glass.light {
  --bg:            #f2f2f7;
  --bg-deep:       #e8e8ee;
  --panel:         rgba(255, 255, 255, 0.72);
  --panel-solid:   #ffffff;
  --panel-border:  rgba(0, 0, 0, 0.06);

  --text:          #1c1c1e;
  --text-bright:   #000000;
  --dim:           #8e8e93;
  --dim-2:         #c7c7cc;

  --cyan:          #007aff;
  --cyan-dim:      rgba(0, 122, 255, 0.10);
  --cyan-glow:     rgba(0, 122, 255, 0.20);
  --amber:         #ff9500;
  --amber-dim:     rgba(255, 149, 0, 0.10);
  --amber-glow:    rgba(255, 149, 0, 0.20);

  --green:         #34c759;
  --green-dim:     rgba(52, 199, 89, 0.10);
  --red:           #ff3b30;
  --red-dim:       rgba(255, 59, 48, 0.10);
  --yellow:        #ffcc00;

  --surface-0:     #f2f2f7;
  --surface-1:     rgba(255, 255, 255, 0.72);
  --surface-2:     rgba(255, 255, 255, 0.85);
  --surface-3:     rgba(255, 255, 255, 0.92);
  --surface-glass: rgba(255, 255, 255, 0.60);

  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Light mode text adjustments */
.theme-glass.light body {
  color: var(--text);
}
.theme-glass.light .lh-tab:hover {
  background: rgba(0, 0, 0, 0.04);
}
.theme-glass.light .lh-tab.active {
  background: rgba(0, 122, 255, 0.10);
}
.theme-glass.light .message-row.user .message-bubble {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.10), rgba(0, 122, 255, 0.04));
  border-color: rgba(0, 122, 255, 0.10);
}
.theme-glass.light ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
.theme-glass.light ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.22);
}

/* ═══════════════════════════════════════════════════════════════
   MORNING NOTE — lined notebook paper card pinned in chat
   ═══════════════════════════════════════════════════════════════ */
.mn {
  max-width: 560px;
  margin: 12px auto;
  position: relative;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}
.mn-pin {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  z-index: 3; width: 22px; height: 22px;
}
.mn-pin-shadow {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e04040, #a02020);
  border: 1.5px solid #8a1a1a;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.mn-pin-dot {
  position: absolute; top: 5px; left: 7px;
  width: 5px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.mn-paper {
  background: #f5f3ee; border-radius: 2px;
  position: relative; overflow: hidden;
  border: 1px solid #d8d4cc;
}
.mn-tear {
  height: 10px;
  background: repeating-linear-gradient(90deg, #f5f3ee 0 6px, #e8e4dc 6px 7px);
  border-bottom: 1px solid #e0dcd4;
}
.mn-ruled {
  background-image: repeating-linear-gradient(0deg, transparent 0 23px, rgba(100,140,200,0.18) 23px 24px);
  background-size: 100% 24px;
}
.mn-margin {
  position: absolute; top: 0; bottom: 0; left: 52px;
  width: 1px; background: rgba(210,80,80,0.2);
}
.mn-content {
  position: relative; padding: 14px 20px 12px 64px;
}
.mn-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 4px; margin-bottom: 2px;
}
.mn-stamp {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
  color: #8a7a6a; text-transform: uppercase;
}
.mn-date {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px; color: #a89a88; letter-spacing: 1px;
}
.mn-bias-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0 2px; line-height: 24px;
}
.mn-sym {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 17px; font-weight: 700; color: #444; letter-spacing: 2px;
}
.mn-bias {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 26px; font-weight: 700; letter-spacing: 3px;
}
.mn-bias.bull { color: #1a8a3a; }
.mn-bias.bear { color: #c02020; }
.mn-bias.range { color: #b07010; }
.mn-conv {
  display: flex; align-items: center; gap: 8px; padding: 4px 0 10px;
}
.mn-conv-label {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9px; font-weight: 600; letter-spacing: 2px; color: #998a7a;
}
/* CONVICTION meter (2026-07-29) — three discrete segments, not a percentage
   bar. The old fill was driven by base_case_probability, which graded Brier
   0.2738 against 0.2470 for simply saying the base rate. A continuous bar
   implies a resolution the number never had; three steps match the three
   values the model actually produces. */
.mn-conv-meter { display: flex; gap: 3px; align-items: center; }
.mn-conv-seg {
  width: 18px; height: 5px; border-radius: 2px;
  background: #e8e4dc; border: 0.5px solid #d0ccc4;
}
.mn-conv-seg.on.bull  { background: #1a8a3a; border-color: #1a8a3a; }
.mn-conv-seg.on.bear  { background: #c02020; border-color: #c02020; }
.mn-conv-seg.on.range { background: #b07010; border-color: #b07010; }
.mn-conv-word {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #998a7a;
}
.mn-conv-word.bull  { color: #1a8a3a; }
.mn-conv-word.bear  { color: #c02020; }
.mn-conv-word.range { color: #b07010; }
.mn-divider { height: 1px; background: #ddd8d0; margin: 2px 0 6px; }
.mn-levels {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  margin: 4px 0; border: 0.5px solid #ddd8d0; border-radius: 3px;
  overflow: hidden; background: #efece6;
}
.mn-lvl { padding: 8px 10px; text-align: center; }
.mn-lvl:not(:last-child) { border-right: 0.5px solid #ddd8d0; }
.mn-lvl-label {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 8.5px; font-weight: 700; letter-spacing: 2px; margin-bottom: 3px;
}
.mn-lvl-label.r { color: #b03030; }
.mn-lvl-label.p { color: #5070a0; }
.mn-lvl-label.s { color: #1a7a3a; }
.mn-lvl-price {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 17px; font-weight: 700; color: #333; letter-spacing: 0.5px;
}
.mn-lvl-note {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9px; color: #998a7a; margin-top: 2px;
}
.mn-sc-title {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
  color: #8a7a6a; margin: 10px 0 6px; text-transform: uppercase;
}
.mn-sc {
  display: flex; align-items: flex-start; gap: 6px;
  margin-bottom: 6px; line-height: 24px;
}
.mn-sc-id {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 13px; font-weight: 700; color: #5070a0; min-width: 16px;
}
.mn-sc-body { flex: 1; }
.mn-sc-label {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11.5px; font-weight: 600; color: #444; letter-spacing: 0.3px;
}
/* .mn-sc-prob removed 2026-07-29 — per-scenario percentages are no longer
   rendered; the IF/THEN line carries the actionable part. */
.mn-sc-detail {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px; color: #887868; margin-top: 1px; line-height: 16px;
}
.mn-sc-kw {
  font-weight: 700; color: #5070a0; letter-spacing: 0.5px;
}
.mn-inv {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 4px; padding: 5px 8px;
  background: rgba(192,32,32,0.04); border-radius: 3px;
  border: 0.5px solid rgba(192,32,32,0.12);
}
.mn-inv-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #c02020; flex-shrink: 0;
}
.mn-inv-text {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px; color: #a04040; letter-spacing: 0.3px;
}
.mn-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 4px;
}
.mn-ts {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 9px; color: #bbb0a0; letter-spacing: 0.5px;
}
.mn-expand {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #5070a0; cursor: pointer; padding: 3px 8px;
  border: 0.5px solid #c0b8b0; border-radius: 2px;
  background: #efece6;
}
.mn-expand:hover { background: #e4e0d8; border-color: #5070a0; color: #3050a0; }
.mn-hole {
  position: absolute; top: 16px; left: 26px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #d8d0c8; border: 0.5px solid #c8c0b8;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.mn-coffee {
  position: absolute; bottom: 30px; right: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(140,100,60,0.08);
  background: transparent; opacity: 0.5;
}
.mn-coffee2 {
  position: absolute; bottom: 32px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(140,100,60,0.06);
}
/* Mobile morning note */
@media (max-width: 600px) {
  .mn { max-width: 100%; margin: 8px; }
  .mn-content { padding: 12px 12px 10px 48px; }
  .mn-margin { left: 38px; }
  .mn-hole { left: 18px; }
  .mn-bias { font-size: 21px; letter-spacing: 2px; }
  .mn-sym { font-size: 14.5px; }
  .mn-levels { grid-template-columns: 1fr 1fr 1fr; }
  .mn-lvl { padding: 6px; }
  .mn-lvl-price { font-size: 14.5px; }
}