:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1c2230;
  --border: #2a3340;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
  --green: #3fb950;
  --amber: #d29922;
  --red: #f85149;
  --bull: #3fb950;
  --bear: #f85149;
  --up: #3fb950;
  --down: #f85149;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }

/* Top bar + search */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.brand span { color: var(--muted); font-weight: 400; font-size: 12px; }
.market-filters { display: flex; gap: 8px; flex-shrink: 0; }
.market-filters select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 8px; font-size: 13px; max-width: 180px;
}
.market-filters select:focus { outline: none; border-color: var(--accent); }
.market-filters select:disabled { opacity: 0.5; cursor: not-allowed; }
.search { position: relative; flex: 1; max-width: 620px; }
.search input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px;
}
.search input:focus { outline: none; border-color: var(--accent); }
.suggestions {
  position: absolute; z-index: 30; left: 0; right: 0; top: 42px; margin: 0; padding: 4px;
  list-style: none; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; max-height: 320px; overflow: auto; display: none;
}
.suggestions.show { display: block; }
.suggestions li { padding: 8px 10px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.suggestions li:hover, .suggestions li.active { background: #28324433; background: var(--accent); color: #08111f; }
.suggestions .sym { font-weight: 700; }
.suggestions .exch { color: var(--muted); font-size: 12px; }
.suggestions li.active .exch { color: #08111f; }
.suggestions mark { background: transparent; color: var(--accent); font-weight: 700; }
.suggestions li.active mark { color: #08111f; text-decoration: underline; }

/* Chart */
.chart-card { margin: 16px 20px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.quote { display: flex; align-items: baseline; gap: 12px; }
#quote-symbol { font-size: 20px; font-weight: 700; }
#quote-last { font-size: 18px; }
.change.up { color: var(--green); } .change.down { color: var(--red); }
.ranges button {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px;
}
.ranges button:hover { color: var(--text); }
.ranges button.active { background: var(--accent); color: #08111f; }
.chart-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Indicator panel (search + active chips) */
.ind-panel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ind-search-box { position: relative; display: flex; align-items: center; }
.ind-search-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--muted); pointer-events: none;
}
#ind-search {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 5px 10px 5px 28px; font-size: 12px; width: 155px; outline: none;
}
#ind-search:focus { border-color: var(--accent); }
#ind-search::placeholder { color: var(--muted); }

/* Indicator suggestion dropdown */
.ind-sug {
  display: none; position: absolute; top: calc(100% + 5px); left: 0;
  min-width: 300px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; list-style: none; margin: 0; padding: 4px 0;
  box-shadow: 0 10px 28px #00000070; z-index: 300; max-height: 300px; overflow-y: auto;
}
.ind-sug.show { display: block; }
.ind-sug li {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  cursor: pointer; font-size: 12px; transition: background .1s;
}
.ind-sug li.hover, .ind-sug li:hover { background: var(--panel-2); }
.ind-sug li.is-active { opacity: .65; }
.is-name  { font-weight: 700; min-width: 46px; font-size: 12px; }
.is-label { flex: 1; color: var(--muted); font-size: 11px; }
.is-badge {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
}
.is-action { font-size: 11px; color: var(--accent); min-width: 58px; text-align: right; }

/* Active indicator chips */
.active-inds { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.ind-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: color-mix(in srgb, var(--chip-color) 12%, transparent);
  color: var(--chip-color);
  border: 1px solid color-mix(in srgb, var(--chip-color) 35%, transparent);
  border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 700; line-height: 1.4;
}
.ind-chip-x {
  background: none; border: none; color: inherit; cursor: pointer;
  padding: 0 0 0 2px; font-size: 14px; line-height: 1; opacity: .55;
}
.ind-chip-x:hover { opacity: 1; }

#tv-chart { height: 420px; }

/* Controls */
.controls { display: flex; align-items: center; gap: 18px; margin: 0 20px 8px; flex-wrap: wrap; }
.controls label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.controls select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.controls .analysts span { display: flex; gap: 12px; }
.controls .analysts label { color: var(--text); }
#run {
  background: var(--green); color: #08130a; border: none; padding: 9px 18px;
  border-radius: 8px; font-weight: 700; cursor: pointer;
}
#run:disabled { background: #30363d; color: var(--muted); cursor: not-allowed; }
.pill { font-size: 12px; color: var(--muted); padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px; }

/* Main split */
.main { display: grid; grid-template-columns: 47% 53%; gap: 16px; margin: 8px 20px 24px; align-items: start; }
.graph-card, .output-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
#graph { width: 100%; height: 600px; overflow: visible; }

/* Graph nodes (enlarged "brackets" with avatars) */
.node rect { fill: var(--panel-2); stroke: var(--border); stroke-width: 1.5; transition: stroke .3s, fill .3s; }
.node .name { fill: var(--text); font-size: 13px; font-weight: 700; }
.node .role { fill: var(--muted); font-size: 11px; font-weight: 400; }
.node .avatar-disc { fill: #0d1117; stroke: var(--border); stroke-width: 1.5; transition: stroke .3s; }
.node .avatar { font-size: 19px; }
/* Dim pending nodes WITHOUT group opacity — a translucent node would let the
   connector edges drawn behind it bleed through the box (looked like a notch
   cut into the right edge). Keep the rect fully opaque; dim the labels only. */
.node.pending rect { fill: var(--panel-2); stroke: var(--border); }
.node.pending .name { fill: var(--muted); }
.node.pending .role { fill: #5b6675; }
.node.pending .avatar-disc { stroke: var(--border); opacity: .85; }
.node.in_progress rect { stroke: var(--amber); fill: #2a2410; }
.node.in_progress .avatar-disc { stroke: var(--amber); }
.node.in_progress { animation: pulse 1.1s ease-in-out infinite; }
.node.completed rect, .node.completed .avatar-disc { stroke: var(--green); }
.node.bull.completed rect, .node.bull.completed .avatar-disc { stroke: var(--bull); }
.node.bear.completed rect, .node.bear.completed .avatar-disc { stroke: var(--bear); }
.node.judge rect { stroke-width: 2.5; }
@keyframes pulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(210,153,34,0)); } 50% { filter: drop-shadow(0 0 8px rgba(210,153,34,.75)); } }
.edge { stroke: var(--border); stroke-width: 1.5; fill: none; }
.edge.lit { stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--accent)); }
.electron { fill: var(--accent); filter: drop-shadow(0 0 7px var(--accent)); }
.flow-label { fill: var(--accent); font-size: 11px; font-weight: 600; }

/* Thought bubbles above nodes */
.bubble { transition: opacity .25s; pointer-events: none; }
.bubble-box { fill: #1b2230; stroke: var(--accent); stroke-width: 1.4; filter: drop-shadow(0 4px 10px #00000060); }
.bubble-tail { fill: #1b2230; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; }
.bubble.show { animation: bubble-pop .25s ease-out; }
@keyframes bubble-pop { from { transform-box: fill-box; transform-origin: bottom center; transform: scale(.6); } to { transform: scale(1); } }
.bubble-text {
  font: 11px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text); overflow: hidden; height: 100%;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.bubble-text.thinking::after { content: "…"; animation: dots 1.2s steps(4) infinite; }
.bubble-text.countering { color: var(--amber); font-weight: 700; }
.bubble-text.countering::after { content: "…"; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "·"; } 50% { content: "··"; } 75% { content: "···"; } 100% { content: "···"; } }
.bubble.countering .bubble-box, .node.in_progress + .bubble .bubble-box { stroke: var(--amber); }

/* Debate window */
.debate-panel { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.debate-head { display: flex; align-items: center; justify-content: space-between; }
.debate-head h3 { margin: 0; font-size: 13px; }
.debate-status { font-size: 11px; color: var(--amber); font-weight: 700; }
.debate { max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.debate-turn { max-width: 88%; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; }
.debate-turn.bull { align-self: flex-start; border-left: 3px solid var(--bull); background: color-mix(in srgb, var(--bull) 8%, transparent); }
.debate-turn.bear { align-self: flex-end; border-right: 3px solid var(--bear); background: color-mix(in srgb, var(--bear) 8%, transparent); }
.dt-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; }
.debate-turn.bull .dt-side { color: var(--bull); }
.debate-turn.bear .dt-side { color: var(--bear); }
.dt-round { color: var(--muted); }
.dt-summary { font-style: italic; color: var(--text); font-size: 12px; margin: 2px 0; }
.dt-body { font-size: 12px; }
.dt-body :where(ul) { margin: 4px 0; padding-left: 18px; }
.consensus { margin-top: 8px; font-size: 12px; }
.consensus-banner { font-weight: 800; padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; }
.consensus-banner.yes { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.consensus-banner.no { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }

/* Output: report tabs + single report view */
.report-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.report-tab {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.report-tab:hover { color: var(--text); }
.report-tab.active { background: var(--accent); color: #08111f; border-color: var(--accent); }
.report-view { max-height: 520px; overflow: auto; }
.report-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.report-head .agent-tag { color: var(--accent); font-weight: 700; }
.report-head .topic { color: var(--muted); font-size: 12px; text-align: right; }
.report-empty { color: var(--muted); font-style: italic; }
.report-body :where(h1,h2,h3) { font-size: 14px; margin: 10px 0 4px; }
.report-body table { border-collapse: collapse; width: 100%; font-size: 12px; }
.report-body th, .report-body td { border: 1px solid var(--border); padding: 4px 6px; }
.report-body hr { border: none; border-top: 1px dashed var(--border); margin: 12px 0; }

/* Tree-of-Thoughts chain rows */
.report-body .tot-line { line-height: 1.9; }
.tot-thought {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: #ff8585; border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius: 6px; padding: 1px 7px; font-weight: 600;
}
.tot-arrow { color: var(--amber); font-weight: 800; display: inline-block; margin: 2px 0; }
.tot-prob {
  display: inline-block; color: #6ad; font-weight: 700; font-size: 11px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 5px; padding: 0 6px; margin: 2px 0;
}

/* Activity log (collapsed by default) */
.log-wrap { margin-top: 14px; }
.log-wrap summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.output { max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.log { color: var(--muted); font-size: 12px; font-style: italic; padding: 2px 4px; }
.verdict { margin-top: 14px; }
.verdict .scoreboard { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.verdict .scoreboard th, .verdict .scoreboard td { border: 1px solid var(--border); padding: 5px 7px; text-align: left; }
.verdict .rating { font-size: 18px; font-weight: 800; }
.rating.buy, .rating.overweight { color: var(--green); }
.rating.sell, .rating.underweight { color: var(--red); }
.rating.hold { color: var(--amber); }
.bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--red), #30363d, var(--green)); position: relative; margin-top: 6px; }
.bar .mark { position: absolute; top: -3px; width: 3px; height: 14px; background: var(--text); border-radius: 2px; }

/* ===================== Dashboard ===================== */
.view-tabs { display: flex; gap: 6px; padding: 10px 20px 0; }
.view-tabs button {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  border-bottom: none; padding: 8px 16px; border-radius: 8px 8px 0 0;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.view-tabs button:hover { color: var(--text); }
.view-tabs button.active { color: var(--text); background: var(--panel); border-color: var(--border); }

.view { display: none; }
.view.active { display: block; }
#view-dashboard { padding: 16px 20px 28px; }

.dash-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.dash-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dash-head h2 { margin: 0; }
.dash-sub { color: var(--muted); font-size: 12px; flex: 1; }
.ghost-btn { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; }
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }
.dash-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }

/* Economy grid */
.econ-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.econ-group h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.econ-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.econ-card-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.econ-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.econ-label { font-size: 11px; color: var(--muted); }
.econ-val { font-size: 20px; font-weight: 700; margin: 4px 0 2px; }
.econ-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.econ-chg { font-size: 11px; font-weight: 600; }
.econ-chg.good { color: var(--up); }
.econ-chg.bad { color: var(--down); }
.econ-asof { font-size: 10px; color: var(--muted); }
.spark { width: 64px; height: 22px; }

/* News + chat row */
.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-row .dash-card { margin-bottom: 0; display: flex; flex-direction: column; min-height: 460px; }

.news-list { overflow-y: auto; max-height: 520px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.news-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.news-item { display: flex; gap: 10px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.news-item:hover { background: var(--panel-2); border-color: var(--border); }
.news-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--panel-2); }
.news-thumb.ph { background: linear-gradient(135deg, var(--panel-2), var(--border)); }
.news-body { min-width: 0; }
.news-title { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-meta { display: flex; gap: 10px; color: var(--muted); font-size: 11px; margin-top: 3px; }

/* News page — dark-blue, filterable, full-height scrolling feed */
#page-news.active { display: flex; flex: 1; min-height: 0; }
.nx-card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nx-filters { display: flex; gap: 10px; align-items: center; margin: 14px 0 6px; flex-wrap: wrap; }
.nx-select, .nx-input { background: #0f1830; border: 1px solid #243150; color: var(--text); border-radius: 9px; padding: 9px 13px; font-size: 13px; }
.nx-select { cursor: pointer; }
.nx-symwrap { flex: 1; min-width: 220px; position: relative; }
.nx-symwrap .suggestions { right: auto; left: 0; width: 100%; top: 40px; }
.nx-input { width: 100%; }
.nx-input::placeholder { color: #5e7099; }
.nx-input:focus, .nx-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px #3b82f633; }
.nx-scope { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.nx-scope b { color: #9ec5ff; }
.nx-scope a { color: #3b82f6; cursor: pointer; }
.nx-scope a:hover { text-decoration: underline; }

.nx-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 6px; }
.nx-item { display: flex; gap: 14px; padding: 12px; border-radius: 12px; background: #0e1830; border: 1px solid #1e2c4a; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s, transform .1s; }
.nx-item:hover { background: #13203c; border-color: #3b82f6; transform: translateY(-1px); }
.nx-thumb { width: 132px; height: 86px; object-fit: cover; border-radius: 9px; flex-shrink: 0; background: #16213c; }
.nx-thumb.ph { display: flex; align-items: center; justify-content: center; font-size: 24px; background: linear-gradient(135deg, #16213c, #0e1830); }
/* Brand-logo thumbnails: contained + extra padding so every logo renders at a
   small, uniform size in the box (Yahoo, Reuters, Investing.com, …). */
.nx-thumb.nx-logo { object-fit: contain; padding: 10px 14px; background: #0e1830; }
.nx-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.nx-title { font-size: 15px; font-weight: 650; line-height: 1.32; color: #e8eefc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-sum { font-size: 12.5px; color: #9fb0d0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-meta { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #7e90b4; margin-top: auto; flex-wrap: wrap; }
.nx-src { color: #aab8d8; font-weight: 600; }
.nx-imp { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; }
.nx-imp.high { color: #ff6b6b; background: #ff6b6b22; }
.nx-imp.med { color: #f5b942; background: #f5b94222; }
.nx-imp.low { color: #7e90b4; background: #7e90b422; }
.nx-tk { font-size: 11px; font-weight: 700; color: #9ec5ff; background: #1c2c4d; border: 1px solid #2d4068; border-radius: 5px; padding: 2px 7px; }

/* Chat — OpenClaw-style: fills the whole region right of the sidebar */
#page-ai { padding: 0; }
#page-ai.active { display: flex; flex: 1; min-height: 0; }
.chat-card { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0;
  margin: 0; border-radius: 0; padding: 16px 22px; }
/* Beat the glass `.dash-card { border ... !important }` so the chat is full-bleed. */
#page-ai .chat-card { border: none !important; border-radius: 0 !important; }
.chat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.chat-title { display: flex; align-items: center; gap: 13px; }
.chat-title h2 { font-size: 21px; margin: 0; line-height: 1.15; }
.chat-title .dash-sub { font-size: 13px; }
.chat-ava-sm { width: 56px; height: 56px; object-fit: contain; background: transparent; }
.chat-actions { display: flex; gap: 8px; }
/* Override the fixed 28x28 icon-button size — these are text buttons. */
.chat-actions .ghost-btn { display: inline-flex; align-items: center; gap: 5px; width: auto; height: auto;
  padding: 7px 12px; font-size: 12px; white-space: nowrap; }
.chat-actions .ghost-btn i { width: 14px; height: 14px; }

.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding-right: 6px; scroll-behavior: smooth; }
.chat-msg { display: flex; gap: 12px; align-items: flex-start; }
.chat-msg.user { justify-content: flex-end; }
.chat-ava { width: 60px; height: 60px; object-fit: contain; background: transparent; flex-shrink: 0; }
/* The user's standard avatar is a silhouette, so it keeps a disc background. */
.chat-ava-user { width: 44px; height: 44px; margin-top: 4px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.chat-ava-user svg { width: 58%; height: 58%; }
.msg-col { display: flex; flex-direction: column; gap: 5px; max-width: 80%; min-width: 0; }
.chat-msg.user .msg-col { align-items: flex-end; }
.msg-meta { font-size: 11px; color: var(--muted); }
.msg-meta b { color: var(--text); font-weight: 600; }
.chat-msg .bubble { padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.chat-msg.user .bubble { background: var(--accent); color: #08111f; border-top-right-radius: 4px; }
.chat-msg.ai .bubble { background: var(--panel-2); border: 1px solid var(--border); border-top-left-radius: 4px; }
.chat-msg.ai .bubble :first-child { margin-top: 0; }
.chat-msg.ai .bubble :last-child { margin-bottom: 0; }
.chat-msg.ai .bubble table { border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.chat-msg.ai .bubble th, .chat-msg.ai .bubble td { border: 1px solid var(--border); padding: 3px 8px; }
.chat-msg.thinking .bubble { color: var(--muted); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.chat-suggest.hidden { display: none; }
.chat-suggest button { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 14px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.chat-suggest button:hover { color: var(--text); border-color: var(--accent); }

.chat-input { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--border); padding-top: 12px; }
.chat-input textarea { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; line-height: 1.5; resize: none; max-height: 160px; overflow-y: auto; }
.chat-input textarea:focus { outline: none; border-color: var(--accent); }
.chat-input button { padding: 10px 18px; border-radius: 10px; border: none; background: var(--accent); color: #08111f; font-weight: 600; cursor: pointer; }
.chat-input button:disabled { opacity: .5; cursor: not-allowed; }

/* History dropdown */
.chat-history-panel { position: absolute; right: 16px; top: 56px; width: 320px; max-height: 60vh; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px; background: #141c2e; border: 1px solid var(--glass-border);
  border-radius: 10px; box-shadow: var(--glass-shadow); z-index: 60; }
.chat-history-panel.hidden { display: none; }
.chat-hist-item { padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.chat-hist-item:hover { background: var(--glass-soft); }
.chat-hist-item .chi-title { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-hist-item .chi-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.chat-hist-empty { padding: 16px; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 900px) {
  .econ-grid, .dash-row { grid-template-columns: 1fr; }
}

/* ============================================================= */
/* ============== DASHBOARD v2 — app shell ===================== */
/* ============================================================= */
.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 272px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 16px 12px; gap: 8px; position: sticky; top: 0; height: 100vh; }
.logo { font-size: 17px; font-weight: 800; padding: 6px 8px 14px; }
.logo span { background: linear-gradient(90deg, var(--accent), #a371f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 11px; background: transparent; border: none; color: var(--muted);
  font-size: 13.5px; font-weight: 600; padding: 9px 12px; border-radius: 9px; cursor: pointer; text-align: left; width: 100%; }
.nav-item .ico { width: 18px; text-align: center; font-size: 14px; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.market-status { margin-top: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.ms-head { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.ms-dot { font-size: 11px; font-weight: 700; }
.ms-dot.open { color: var(--up); } .ms-dot.closed { color: var(--muted); }
.ms-spark { width: 100%; height: 30px; margin: 8px 0; }
.ms-label { font-size: 11px; color: var(--muted); }
.ms-clock { display: flex; gap: 6px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-clock b { color: var(--muted); font-weight: 400; }
.ms-units { display: flex; gap: 18px; font-size: 9px; color: var(--muted); letter-spacing: .12em; margin-top: 2px; }
.user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #08111f; display: grid; place-items: center; font-weight: 700; }
.uname { font-size: 13px; font-weight: 700; } .uplan { font-size: 11px; color: var(--muted); }

/* Content + topbar override */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 40; }
.topbar .search { flex: 1; max-width: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-primary { background: var(--accent); color: #08111f; border: none; padding: 9px 16px; border-radius: 9px; font-weight: 700; cursor: pointer; }
.btn-primary:disabled { background: #30363d; color: var(--muted); cursor: not-allowed; }

/* Pages */
.page { display: none; padding: 18px 20px 28px; }
.page.active { display: block; }
.placeholder { text-align: center; color: var(--muted); padding: 80px 20px; font-size: 16px; }

/* Dashboard grid: center + right rail */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 18px; align-items: start; }
.col-center { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 78px; }

/* Quote header */
.quote-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.quote-symbol-row { display: flex; align-items: center; gap: 4px; }
.quote-symbol { font-size: 26px; font-weight: 800; letter-spacing: .02em; }
.quote-name { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.quote-name .tag { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.quote-price { display: flex; align-items: baseline; gap: 10px; }
.q-last { font-size: 30px; font-weight: 800; }
.q-change { font-size: 14px; font-weight: 700; }
.q-change.up { color: var(--up); } .q-change.down { color: var(--down); }
.quote-stats { display: grid; grid-template-columns: repeat(6, auto); gap: 22px; margin-left: auto; }
.quote-stats > div { display: flex; flex-direction: column; gap: 2px; }
.quote-stats label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.quote-stats span { font-size: 14px; font-weight: 700; }

/* Chart card overrides */
.chart-card { margin: 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.chart-toolbar { justify-content: space-between; margin-bottom: 8px; }
#tv-chart { height: 380px; }

/* Analysis card + sub-tabs */
.analysis-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 0; overflow: hidden; }
.atabs { display: flex; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.atabs button { background: transparent; border: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.atabs button:hover { color: var(--text); }
.atabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.atab-panel { display: none; padding: 16px; }
.atab-panel.active { display: block; }

/* Agent analysis 3-column */
.agent-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.ag-box { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.ag-box h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; }
.ag-box #graph { width: 100%; height: 340px; }

/* Consensus gauge */
.consensus-box { display: flex; flex-direction: column; }
.gauge-wrap { position: relative; width: 100%; max-width: 220px; margin: 0 auto; }
#consensus-gauge { width: 100%; }
.gauge-center { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.gauge-pct { font-size: 30px; font-weight: 800; }
.gauge-label { font-size: 12px; color: var(--muted); }
.cons-verdict { text-align: center; font-weight: 800; padding: 6px; border-radius: 8px; margin: 8px 0; }
.cons-verdict.good { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.cons-verdict.bad { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.cons-verdict.mid { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.cons-bars { display: flex; flex-direction: column; gap: 6px; }
.cbar { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.cbar-lab { width: 52px; color: var(--muted); }
.cbar-track { flex: 1; height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.cbar-fill { height: 100%; border-radius: 4px; }
.cbar-n { width: 14px; text-align: right; font-weight: 700; }

/* Key signals */
.key-signals { display: flex; flex-direction: column; gap: 8px; }
.sig-row { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; }
.sig-ico { font-size: 15px; }
.sig-body { flex: 1; min-width: 0; }
.sig-label { font-size: 12px; font-weight: 600; }
.sig-val { font-size: 11px; color: var(--muted); }
.sig-badge { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; }
.sig-badge.bullish { color: var(--up); background: color-mix(in srgb, var(--up) 16%, transparent); }
.sig-badge.bearish { color: var(--down); background: color-mix(in srgb, var(--down) 16%, transparent); }
.sig-badge.neutral { color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.data-pre { white-space: pre-wrap; font-size: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow-x: auto; }
/* Structured key/value table (Fundamentals tab, etc.) */
.kv-consensus { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.kv-consensus .dim { color: var(--muted); font-size: 12px; }
.kv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.kv-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.kv-table tr:last-child td { border-bottom: none; }
.kv-table tbody tr:hover { background: var(--glass-soft); }
.kv-table .kv-metric { color: var(--muted); }
.kv-table .kv-value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Right rail cards */
.rail-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rail-head h3 { font-size: 13px; margin: 0; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 700; }
.beta { font-size: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ov-cell { background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px; }
.ov-cell label { font-size: 10px; color: var(--muted); display: block; }
.ov-val { font-size: 15px; font-weight: 700; }
.ov-val.up { color: var(--up); } .ov-val.down { color: var(--down); }
.ov-range { margin-top: 12px; }
.ov-range > label { font-size: 11px; color: var(--muted); }
.range-bar { position: relative; height: 8px; border-radius: 4px; margin: 8px 0 4px;
  background: linear-gradient(90deg, var(--down), var(--amber), var(--up)); }
.range-dot { position: absolute; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--bg); transform: translateX(-50%); }
.range-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }

/* AI insights */
.insights { display: flex; flex-direction: column; gap: 12px; }
.ins-row { display: flex; gap: 11px; align-items: flex-start; }
.ins-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-2); flex-shrink: 0; }
.ins-t { font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.ins-d { font-size: 11px; color: var(--muted); line-height: 1.4; }
.tag-bull, .tag-bear, .tag-neutral { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 5px; font-style: normal; }
.tag-bull { color: var(--up); background: color-mix(in srgb, var(--up) 16%, transparent); }
.tag-bear { color: var(--down); background: color-mix(in srgb, var(--down) 16%, transparent); }
.tag-neutral { color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.ins-conf { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.conf-bar { flex: 1; height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.conf-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), #a371f7); }
.ins-conf > span { font-size: 10px; color: var(--muted); }
.news-list.compact { max-height: 360px; }
.news-list.compact .news-thumb { width: 52px; height: 40px; }

/* Controls bar tweaks under the new layout */
.controls { margin: 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }

@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: 1fr; }
  .col-rail { position: static; }
  .agent-grid { grid-template-columns: 1fr; }
  .quote-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .sidebar { display: none; }
}

/* ============================================================= */
/* ========== GLASS / FLOATING THEME (light-blue) ============== */
/* ============================================================= */
:root {
  --bg: #070c18;
  --glass: rgba(22, 30, 48, 0.62);
  --glass-soft: rgba(28, 38, 60, 0.5);
  --glass-border: rgba(140, 180, 255, 0.16);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
body { background: #070c18; position: relative; }
/* Floating, blurred light-blue ambiance (Apple-style). Fixed behind everything. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(40% 38% at 18% 20%, rgba(88, 166, 255, 0.30), transparent 70%),
    radial-gradient(36% 40% at 82% 18%, rgba(120, 200, 255, 0.22), transparent 70%),
    radial-gradient(46% 46% at 70% 86%, rgba(163, 113, 247, 0.20), transparent 72%),
    radial-gradient(40% 40% at 25% 88%, rgba(56, 189, 248, 0.18), transparent 72%),
    linear-gradient(160deg, #0a1022, #070c18 60%);
  filter: saturate(1.05);
  animation: floatbg 26s ease-in-out infinite alternate;
}
@keyframes floatbg {
  0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
  100% { background-position: 6% 8%, 92% 6%, 88% 92%, 8% 90%, 0 0; }
}

/* Frost only TOP-LEVEL surfaces. Nesting backdrop-filter inside another
   backdrop-filter element renders garbled/warped in Chrome, so inner panels
   (.ag-box, dropdowns) get a translucent background WITHOUT their own blur. */
.sidebar, .topbar, .quote-card, .chart-card, .analysis-card, .controls,
.rail-card, .dash-card, .modal-card {
  background: var(--glass) !important;
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.sidebar { border-radius: 0 18px 18px 0; }
.topbar { background: rgba(12, 18, 32, 0.62) !important; }
/* Nested panels: translucent fill, no backdrop-filter. */
.ag-box, .ov-cell, .sig-row { background: var(--glass-soft) !important; border: 1px solid var(--glass-border) !important; }
/* Dropdowns sit over content — keep them near-solid for readability. */
.suggestions, .ind-sug { background: #141c2e !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow); }

/* Floating active nav item */
.nav-item { transition: transform .15s, box-shadow .15s, background .15s; }
.nav-item.active {
  background: linear-gradient(120deg, rgba(88,166,255,0.28), rgba(163,113,247,0.20)) !important;
  color: #dbeafe; transform: translateX(3px);
  box-shadow: 0 6px 18px rgba(56, 132, 255, 0.30), 0 0 0 1px rgba(140,180,255,0.25) inset;
}
.nav-item:hover { transform: translateX(2px); }

/* Cards lift slightly on hover for the floating feel */
.quote-card, .rail-card, .ag-box { transition: transform .18s, box-shadow .18s; }
.rail-card:hover, .ag-box:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,0.4); }

/* Watchlist star */
.star-btn { background: none; border: none; color: #6b7689; font-size: 22px; cursor: pointer; vertical-align: middle; margin-left: 8px; line-height: 1; transition: color .15s, transform .1s; }
.star-btn:hover { color: #9aa6bd; transform: scale(1.1); }
.star-btn.on, .star-btn.on:hover { color: #ffd23f; text-shadow: 0 0 10px rgba(255,210,63,0.55); }

/* Watchlist rows */
.wl-list, .wl-table { display: flex; flex-direction: column; gap: 4px; }
.wl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.wl-row:hover { background: rgba(140,180,255,0.10); }
.wl-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wl-sym { font-weight: 700; font-size: 13px; }
.wl-name { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-spark { width: 70px; height: 26px; flex-shrink: 0; }
.wl-px { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; }
.wl-last { font-weight: 700; font-size: 13px; }
.wl-chg { font-size: 11px; font-weight: 600; }
.wl-chg.up { color: var(--up); } .wl-chg.down { color: var(--down); }
.wl-rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.wl-rm:hover { color: var(--down); }

/* Clickable economy cards */
.econ-card-item.clickable { cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.econ-card-item.clickable:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px rgba(56,132,255,0.25); }

/* Modal + line chart */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(4, 8, 18, 0.6); backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
.modal-card { width: min(820px, 92vw); border-radius: 16px; padding: 18px 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; }
.modal-title { font-size: 18px; font-weight: 800; }
.modal-sub { font-size: 12px; color: var(--muted); }
.modal-stat { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 12px; }
.em-val { font-size: 28px; font-weight: 800; }
.em-chg { font-size: 13px; font-weight: 700; }
.em-chg.up { color: var(--up); } .em-chg.down { color: var(--down); }
#em-chart { width: 100%; height: 340px; }
.em-ranges { display: flex; gap: 4px; margin: 4px 0 10px; }
.em-ranges button {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  padding: 4px 11px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px;
}
.em-ranges button:hover { color: var(--text); }
.em-ranges button.active { background: var(--accent); color: #08111f; }

/* ============================================================= */
/* ====== Sidebar v3 — bull logo + lucide nav (snippet) ======== */
/* ============================================================= */
.logo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 6px 4px 14px; }
.logo-img { width: 240px; height: 240px; object-fit: contain; border-radius: 18px; flex-shrink: 0;
  filter: drop-shadow(0 4px 18px rgba(88, 166, 255, 0.4)); }
.logo-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; align-items: center; }
.logo-name { font-size: 17px; font-weight: 800;
  background: linear-gradient(90deg, var(--accent), #a371f7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.logo-tag { font-size: 10.5px; color: var(--muted); font-weight: 500; white-space: normal; line-height: 1.3; }

.nav-head { padding: 10px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: #64748b; text-transform: uppercase; }

.nav-item { gap: 14px; padding: 11px 14px; border-radius: 12px; font-weight: 500;
  position: relative; overflow: hidden; }
.nav-item .ico { display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; color: #64748b; font-size: 0;
  transition: color .2s, transform .2s; }
.nav-item .ico svg { width: 20px; height: 20px; }
.nav-item:hover { background: rgba(20, 27, 45, 0.7) !important; color: #cbd5e1; transform: translateX(2px); box-shadow: none; }
.nav-item:hover .ico { color: #94a3b8; transform: scale(1.05); }
.nav-item.active { background: rgba(30, 41, 59, 0.85) !important; color: #fff; transform: translateX(4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(140, 180, 255, 0.10) inset; }
.nav-item.active .ico { color: #818cf8; }
/* left indigo indicator bar */
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px;
  width: 3px; border-radius: 0 4px 4px 0; background: #6366f1; }
/* ambient internal light reflection */
.nav-item.active::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent); pointer-events: none; }

/* ===================== Smart-money tracker ===================== */
.sm-search { display: flex; gap: 8px; margin-left: auto; position: relative; }
/* Anchor the autosuggest under the ticker input (not the Track button). */
.sm-search .suggestions { right: auto; width: 260px; top: 38px; }
.sm-search input {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 6px 12px; font-size: 12px; width: 260px; outline: none;
}
.sm-search input:focus { border-color: var(--accent); }
.sm-search button {
  background: var(--accent); color: #08111f; border: none; border-radius: 8px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sm-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .sm-grid, .sm-grid.two { grid-template-columns: 1fr; } }
.sm-col { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.sm-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sm-col-head i { width: 17px; height: 17px; color: var(--accent); }
.sm-col-head h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
/* Each section scrolls independently on hover/wheel, with no visible scrollbar. */
.sm-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 300px); min-height: 50vh; overflow-y: auto; padding-right: 4px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.sm-list::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Buy/sell flow histogram (shown when a specific ticker is selected) */
.sm-flow { width: 60%; margin: 4px auto 18px; padding: 14px 16px; border: 1px solid #1e2c4a; border-radius: 12px; background: #0e1830; }
@media (max-width: 1100px) { .sm-flow { width: 100%; } }
.sm-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sm-flow-head h3 { margin: 0; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; color: var(--text); }
.sm-flow-head h3 i { width: 16px; height: 16px; color: var(--accent); }
.sm-flow-range { display: flex; gap: 4px; }
.sm-flow-range button { background: #16213c; border: 1px solid #243353; color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer; }
.sm-flow-range button.active { background: var(--accent); border-color: var(--accent); color: #08111f; }
.sm-flow-chart { padding-top: 4px; }
.smf-plot { display: flex; gap: 8px; }
.smf-yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 140px; padding: 9px 0; flex-shrink: 0; min-width: 46px; text-align: right; font-size: 10px; color: var(--muted); }
.smf-main { flex: 1; min-width: 0; }
.smf-svg { width: 100%; height: 140px; display: block; overflow: visible; }
.smf-line { fill: none; stroke-width: 2.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.smf-line.buy { stroke: #10b981; }
.smf-line.sell { stroke: #ef4444; }
.smf-area { stroke: none; }
.smf-area.buy { fill: rgba(16,185,129,0.16); }
.smf-area.sell { fill: rgba(239,68,68,0.16); }
.smf-dot { stroke: #0e1830; stroke-width: 1; }
.smf-dot.buy { fill: #10b981; }
.smf-dot.sell { fill: #ef4444; }
.smf-xlabels { display: flex; justify-content: space-between; margin-top: 6px; gap: 4px; }
.smf-xlabels span { font-size: 10px; color: var(--muted); white-space: nowrap; }
.sm-flow-legend { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: 12px; }
.sm-flow-legend .lg { display: flex; align-items: center; gap: 6px; color: var(--text); }
.sm-flow-legend .lg::before { content: ""; width: 11px; height: 11px; border-radius: 3px; }
.sm-flow-legend .lg.buy::before { background: #10b981; }
.sm-flow-legend .lg.sell::before { background: #ef4444; }

/* Most-traded tickers leaderboard (bottom of the Smart Money page) */
.sm-most { margin-top: 16px; }
.sm-most:empty { display: none; }
.sm-most-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sm-most-head i { width: 17px; height: 17px; color: var(--accent); }
.sm-most-head h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.sm-most-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.sm-most-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  cursor: pointer; text-align: left; color: var(--text); transition: border-color .15s, background .15s; }
.sm-most-item:hover { border-color: var(--accent); background: var(--bg); }
.smm-sym { font-weight: 800; font-size: 13px; color: #9ec5ff; }
.smm-bar { height: 7px; background: #1c2c4d; border-radius: 5px; overflow: hidden; }
.smm-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #6aa3ff); }
.smm-ct { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.smm-bs { font-weight: 500; color: var(--muted); font-size: 11px; }
.sm-item { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; }
.sm-row { display: flex; align-items: center; gap: 7px; }
.sm-name { font-weight: 600; font-size: 13px; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.sm-sub.dim { opacity: .75; }
.sm-tag { font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.sm-tag.buy { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
.sm-tag.sell { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }
.sm-tag.hold { color: var(--muted); background: color-mix(in srgb, var(--muted) 18%, transparent); }
.sm-chamber { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.sm-chamber.senate { color: #d2a8ff; background: color-mix(in srgb, #d2a8ff 16%, transparent); }
.sm-chamber.house { color: #79c0ff; background: color-mix(in srgb, #79c0ff 16%, transparent); }