/* ============================================================
   agentic_finance — Phase 1 stylesheet.

   Single-user research tool. Light theme, ChatGPT-shaped two-pane
   layout: sidebar on left (~280px), chat fills remaining width.
   No build step, no Tailwind, no custom-properties tricks beyond
   what makes the theme tweakable from one spot.
   ============================================================ */

:root {
  /* Color tokens — light, eye-friendly theme. Change these to retheme without
     touching the rest. */
  --bg:               #ffffff;   /* main / chat background */
  --bg-elevated:      #f3f4f6;   /* hover, cards, code */
  --bg-sidebar:       #f7f8fa;   /* rail + details column */
  --bg-bubble-user:   #2563eb;   /* user chat bubble (white text) */
  --bg-bubble-agent:  #f4f5f7;   /* agent bubble (dark text) */
  --bg-bubble-system: #f0f2f5;
  --bg-input:         #ffffff;

  --text:             #1c1e21;   /* near-black, softer than pure #000 */
  --text-muted:       #475569;   /* slate-600: ~7:1 on white, readable as body */
  --text-faint:       #64748b;   /* slate-500: timestamps / least-important meta */
  --text-on-primary:  #ffffff;
  --text-link:        #1a56c4;   /* a touch deeper for stronger link contrast */

  --border:           #e4e7eb;
  --border-strong:    #cdd2da;

  --accent:           #2563eb;
  --accent-soft:      rgba(37, 99, 235, 0.10);

  /* Semantic gains/losses — chosen for legibility on a white background. */
  --pos:              #15803d;
  --neg:              #dc2626;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  /* Sidebar = nav rail (58px) + the feature DETAIL column. RESPONSIVE:
     tracks 26vw so laptops keep room for the feed's middle column AND the
     right rail (Top agents / Who to follow), which a fixed 560px starved —
     at 1440px the old width left the rail ~130px. Bounds: never narrower
     than 280px (movers/news rows cramp below that), never wider than 400px
     (the detail views don't need more). */
  --sidebar-width: clamp(280px, 22vw, 400px);
  --market-panel-width: 320px;
  /* Max width of the chat content area (messages + input). The middle
     grid column still flexes wider — this cap is purely a readability
     convention; raise it for wider memos / tables, lower it for prose
     focus. Reference points:
       760px  ChatGPT-shaped, prose-focused (original default)
       960px  moderate — better for short tables
      1200px  wide-screen friendly (current default)
      100vw  uncapped, fills the column */
  --chat-max-width: 1200px;

  /* Inter — a screen/UI-optimized sans with tabular figures, the closest free
     match to Google Finance's Google Sans and Yahoo's YahooSans. Loaded from
     Google Fonts in index.html; falls back to the native system sans. */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ============================================================
   App shell — two columns, full viewport.
   ============================================================ */

.app {
  display: grid;
  /* Three visual sections: the categories rail + details panel live inside the
     sidebar (column 1), then the chat (column 2). The old right market panel
     is gone — Top Movers is now a category. */
  grid-template-columns: var(--sidebar-width) 1fr;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Mobile/tablet bar + backdrop — base styles (display toggled in media
   queries below). Defined BEFORE the media blocks so their display:flex
   override wins on source order. */
.mobile-bar {
  display: none;
  align-items: center; justify-content: space-between;
  height: 48px; padding: 0 10px;
  background: var(--bg-sidebar, #11151c);
  border-bottom: 1px solid var(--border, #2a2f3a);
  position: sticky; top: 0; z-index: 60;
}
.mobile-bar-title { font-size: 14px; font-weight: 600; color: var(--text); }
.mobile-bar-btn {
  background: none; border: none; color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 6px 8px;
}
.mobile-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 40;
}

/* Mid-width (tablet) — sidebar stays inline; the market panel becomes an
   off-canvas RIGHT drawer reachable from the mobile bar's 📊 button. */
@media (max-width: 1180px) {
  .app { grid-template-columns: var(--sidebar-width) 1fr; height: calc(100vh - 48px); }
  .mobile-bar { display: flex; }
  #mobile-sidebar-toggle { display: none; }   /* sidebar is inline at tablet */
  .market-panel {
    position: fixed; top: 48px; bottom: 0; right: 0;
    width: 360px; max-width: 86%; z-index: 50;
    display: flex; transform: translateX(100%);
    transition: transform .2s ease; max-height: none;
  }
  .market-panel.drawer-open { transform: translateX(0); }
  .mobile-backdrop:not([hidden]) { display: block; }
}

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-sidebar);
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

/* Sci-fi wordmark: gradient fill + soft glow + tight tracking. */
.brand-name {
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(95deg, #2563eb 0%, #06b6d4 45%, #7c3aed 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 18px rgba(37, 99, 235, 0.25);
  animation: brand-shimmer 8s ease-in-out infinite;
}

/* Glowing reactor dot that pulses gently. */
.brand-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 7px;
  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 55%, #7c3aed 100%);
  box-shadow: 0 1px 5px rgba(37, 99, 235, 0.35);
}
.brand-mark svg { width: 100%; height: 100%; display: block; }

@keyframes brand-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes brand-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-name, .brand-mark { animation: none; }
}

/* Match the mobile top-bar title to the wordmark. */
.mobile-bar-title {
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(95deg, #2563eb 0%, #06b6d4 45%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.icon-button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.icon-button:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text);
}

.sidebar-section { padding: 14px 12px 6px 12px; }

.sidebar-section-title {
  margin: 0 4px 2px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Section header with a section title on the left and an inline action
   button (e.g. "Generate") on the right. Only used today for the
   Reports section; the layout is generic so other sections can adopt
   it later. */
.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 4px 2px 4px;
}
.sidebar-section-header .sidebar-section-title {
  margin: 0;
}

/* Action buttons (Analyze, Add, Why moving?, Deep Dive, ＋ Watch). Styled as
   clear accent pills so they read as tappable actions instead of fading into
   the panel. */
.sidebar-action-btn {
  font-size: 12px;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sidebar-action-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.sidebar-action-btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* One-line subtitle under each section title — disambiguates intent
   (especially Themes vs Strategies) without adding visual weight. */
.sidebar-section-subtitle {
  margin: 0 4px 8px 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 0.7;
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-list-item {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-list-item:hover {
  background: var(--bg-elevated);
}
.sidebar-list-item.placeholder {
  cursor: default;
  color: var(--text-muted);
  font-style: italic;
}
.sidebar-list-item.placeholder:hover {
  background: transparent;
}
.sidebar-list-item.is-active {
  background: var(--accent-soft);
}
.sidebar-list-item.is-active .agent-name-text,
.sidebar-list-item.is-active span {
  color: var(--text);
}

.placeholder-text { opacity: 0.6; }

/* Mermaid SVG (pie chart of macro regime in memos, occasional flowchart).
   Mermaid replaces ```mermaid``` code blocks with <div class="mermaid">
   containing inline SVG. Constrain to bubble width and center it so the
   pie chart doesn't push the bubble wider than its sibling text. */
.chat-bubble div.mermaid,
.chat-bubble div.mermaid svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px auto;
}

/* "Show N more" / "Show fewer" toggle row that appears at the bottom of a
   sidebar list. Visually quieter than the data rows so it reads as an
   affordance rather than content — small, centered, no avatar gap. */
.sidebar-more-btn {
  justify-content: center;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
}
.sidebar-more-btn:hover {
  color: var(--text);
  background: var(--bg-elevated);
}
.sidebar-more-btn:focus-visible {
  outline: 2px solid var(--accent, var(--text-muted));
  outline-offset: -2px;
}

/* History / report / theme / strategy items all share the same
   two-line card layout: bold title row + muted meta row. We tag them
   with .history-item (existing) AND give the same affordances to the
   three sibling sidebar item kinds so the sidebar reads consistently. */
.history-item,
.report-item,
.theme-item,
.strategy-item {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}

/* Theme bookmark star (top-right of the theme row). */
.theme-item { position: relative; }
.theme-item .history-item-title { padding-right: 20px; }   /* room for the star */
.theme-fav-star {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.1s, transform 0.1s;
}
.theme-fav-star:hover { color: var(--text); transform: scale(1.15); }
.theme-fav-star.is-fav { color: #f3c623; }   /* gold filled star */

/* Edit button on custom theme rows (sits left of the delete ×). */
.theme-edit-btn {
  position: absolute;
  top: 6px;
  right: 26px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.1s;
}
.theme-edit-btn:hover { color: var(--accent, var(--text)); }
/* Custom-theme rows carry both edit + delete in the corner — give room. */
#user-themes-list .history-item-title { padding-right: 42px; }

/* Save bookmark button on history + report rows (top-right). */
.history-item, .report-item { position: relative; }
.history-item .history-item-title,
.report-item .history-item-title { padding-right: 20px; }
.saved-bookmark {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s;
}
.history-item:hover .saved-bookmark,
.report-item:hover .saved-bookmark { opacity: 0.6; }
.saved-bookmark:hover { opacity: 1; }

/* Watchlist recommendation rows ("Recommended for you"). */
.rec-item { display: flex; align-items: center; gap: 6px; }
.rec-item .rec-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.rec-add {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  background: var(--accent-soft, var(--bg-elevated));
  color: var(--accent, var(--text));
  border: 1px solid var(--accent, var(--border));
  border-radius: var(--radius-sm, 6px);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: filter 0.1s;
}
.rec-add:hover { filter: brightness(1.15); }
.rec-add:disabled { opacity: 0.5; cursor: progress; }

/* Saved hub list items (notes / chats / news). */
.saved-item { display: flex; align-items: flex-start; gap: 6px; }
.saved-item .saved-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.saved-item .history-item-meta { text-transform: capitalize; }
.saved-del {
  flex: 0 0 auto;
  background: transparent; border: none; color: var(--text-muted);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.saved-del:hover { color: var(--negative, #c75450); }

.history-item-title {
  font-size: 13px;
  color: var(--text);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
}

.history-item-active,
.theme-item-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.history-item-active .history-item-title {
  color: var(--text);
  font-weight: 500;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-muted);
}
.status-dot-ok { background: #2ecc71; }
.status-dot-error { background: #e74c3c; }
.status-dot-unknown { background: #f1c40f; }

/* ============================================================
   Main chat pane
   ============================================================ */

.chat {
  display: flex;
  flex-direction: column;
  /* fill the grid ROW, not the viewport — the topbar shrinks the app area,
     and a 100vh pane would overflow 46px past it (clipped content + panes
     colliding with the bar). */
  height: 100%;
  min-height: 0;
  background: var(--bg);
  overflow: hidden;
}

.chat-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 32px 0 16px 0;
  scroll-behavior: smooth;
}

.chat-messages {
  max-width: var(--chat-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chat-message {
  display: flex;
  flex-direction: column;
}

.chat-message-user .chat-bubble {
  background: var(--bg-bubble-user);
  color: var(--text-on-primary);
  align-self: flex-end;
  max-width: 80%;
}

.chat-message-agent .chat-bubble {
  background: var(--bg-bubble-agent);
  color: var(--text);
  align-self: flex-start;
  max-width: 100%;
}

.chat-message-system .chat-bubble {
  background: var(--bg-bubble-system);
  color: var(--text-muted);
  border: 1px dashed var(--border);
  max-width: 100%;
}

.chat-message-user { align-items: flex-end; }
.chat-message-agent, .chat-message-system { align-items: flex-start; }

.chat-bubble {
  padding: 12px 16px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-bubble p:first-child { margin-top: 0; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul, .chat-bubble ol {
  margin: 6px 0;
  padding-left: 20px;
}

.chat-bubble .typing-indicator {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--text-muted);
}
.chat-bubble .typing-indicator .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingDot 1.2s infinite ease-in-out;
}
.chat-bubble .typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-bubble .typing-indicator .dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes typingDot {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40%           { opacity: 1.0; transform: translateY(-2px); }
}

/* ============================================================
   Chat input
   ============================================================ */

.chat-input-form {
  flex: 0 0 auto;
  padding: 12px 24px 20px 24px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: var(--chat-max-width);
  margin: 0 auto;
  width: 100%;
}

.chat-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  padding: 12px 14px;
  resize: none;
  min-height: 44px;
  max-height: 180px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-input::placeholder { color: var(--text-muted); }

.chat-send-button {
  appearance: none;
  background: var(--accent);
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius);
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
.chat-send-button:hover { background: #1d4ed8; }
.chat-send-button:active { transform: scale(0.96); }
.chat-send-button:disabled {
  background: var(--border-strong);
  cursor: not-allowed;
}

/* ============================================================
   Tool-call cards (Phase 2) — rendered inline inside the agent
   bubble when the orchestrator calls a tool. Each card has a
   header line (spinner + tool name + status), optional args
   block, and a collapsible result <details> block after the
   tool returns.
   ============================================================ */

.tool-card {
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
}

.tool-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-card-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
}

.tool-card-status {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11.5px;
  font-style: italic;
}

.tool-card-running {
  border-color: rgba(241, 196, 15, 0.4);
}

.tool-card-ok {
  border-color: rgba(46, 204, 113, 0.35);
}
.tool-card-ok .tool-card-status::before {
  content: "✓ ";
  color: #2ecc71;
  font-style: normal;
}

.tool-card-error {
  border-color: rgba(231, 76, 60, 0.5);
  background: rgba(231, 76, 60, 0.06);
}
.tool-card-error .tool-card-status {
  color: #e74c3c;
}
.tool-card-error .tool-card-status::before {
  content: "✗ ";
  font-style: normal;
}

.tool-card-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(241, 196, 15, 0.4);
  border-top-color: #f1c40f;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Live progress line for work happening inside a sub-agent. */
.agent-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
  font-size: 0.88em;
  color: var(--text-muted, #8a8f98);
  font-style: italic;
}
.agent-progress-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(241, 196, 15, 0.4);
  border-top-color: #f1c40f;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
  flex: 0 0 auto;
}

/* Payment & Cost panel. */
.profile-cost { margin-top: 4px; }
.payment-method {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}
.cost-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.cost-amount {
  font-size: 1.6em;
  font-weight: 700;
}
.cost-meta {
  font-size: 0.85em;
  color: var(--text-muted, #8a8f98);
}

/* Admin people dashboard → AI usage & cost. */
.admin-usage {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}

/* ---- Debug logs viewer (Admin → System) ------------------------------ */
.admin-logs {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}
.admin-logs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.admin-logs-select {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
}
.admin-logs-filter {
  flex: 1 1 220px;
  min-width: 160px;
  padding: 5px 9px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
}
.admin-logs-auto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-muted, #8a8f98);
  white-space: nowrap;
}
.admin-logs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.admin-logs-tab {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.admin-logs-tab:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.admin-logs-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-primary);
}
.admin-logs-tab.is-self::before {
  content: "●";
  color: #3fb950;
  font-size: 9px;
  margin-right: 5px;
  vertical-align: middle;
}
.admin-logs-output {
  margin: 0;
  max-height: 460px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 8px;
  background: #0d1117;
  color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-logs-output .log-line { display: block; }
.admin-logs-output .log-time { color: #768390; }
.admin-logs-output .log-worker { color: #d2a8ff; }
.admin-logs-output .log-name { color: #58a6ff; }
.admin-logs-output .log-msg { color: #c9d1d9; }
.admin-logs-output .log-level { font-weight: 600; }
.admin-logs-output .log-level.log-debug { color: #768390; }
.admin-logs-output .log-level.log-info { color: #3fb950; }
.admin-logs-output .log-level.log-warning { color: #d29922; }
.admin-logs-output .log-level.log-error,
.admin-logs-output .log-level.log-critical { color: #f85149; }
.admin-usage-title {
  font-size: 1.05em;
  margin: 0 0 2px;
}
.admin-usage-total {
  font-size: 0.85em;
  color: var(--text-muted, #8a8f98);
  margin: 8px 0;
}
.usage-row {
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.usage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 4px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 0.9em;
}
.usage-head:hover { background: rgba(255, 255, 255, 0.03); }
.usage-caret { width: 12px; color: var(--text-muted, #8a8f98); }
.usage-user { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.usage-cost { font-weight: 700; }
.usage-tok { color: var(--text-muted, #8a8f98); min-width: 90px; text-align: right; }
.usage-detail { padding: 4px 4px 12px 26px; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 0.84em; }
.usage-table th, .usage-table td { padding: 4px 8px; text-align: left; }
.usage-table th { color: var(--text-muted, #8a8f98); font-weight: 600; }
.usage-table .r { text-align: right; }

/* Async-generated audio ("Listen" control under a memo reply). */
.listen-control {
  margin: 8px 0 2px;
}
.listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.88em;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  border-radius: 999px;
  background: transparent;
  color: var(--text, inherit);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.listen-btn:hover:not(:disabled) {
  background: rgba(241, 196, 15, 0.12);
  border-color: rgba(241, 196, 15, 0.5);
}
.listen-btn:disabled {
  cursor: default;
  opacity: 0.8;
}
.listen-control audio {
  height: 34px;
  max-width: 320px;
}

.tool-card-args,
.tool-card-detail > pre {
  margin: 6px 0 0 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
}

/* Tool-result visualizations — inline SVG charts under the tool card
   header, before the collapsed JSON details. Used by get_price_history
   for price-line + daily-returns histogram. */
.tool-viz {
  margin: 8px 0 4px 0;
  padding: 6px 4px 2px 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
}

.tool-viz-title {
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 2px 4px 4px 4px;
  letter-spacing: 0.02em;
}

.tool-viz-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}

.tool-viz-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;          /* allow SVG to shrink with the grid track */
}

.tool-viz-cell.tool-viz-empty {
  padding: 12px 6px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Memo price chart: render full-width in the card (no 2-col grid). */
.tool-viz-large {
  padding: 8px 6px 6px 6px;
}
.tool-viz-cell-full {
  width: 100%;
}
.tool-viz-cell-full svg {
  width: 100%;
  height: auto;
  display: block;
}

.viz-svg {
  width: 100%;
  height: auto;
  display: block;
  background: rgba(0, 0, 0, 0.015);
  border-radius: 3px;
}

.tool-viz-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

/* Narrow cards (e.g. nested in a deep DOM tree) — stack charts vertically. */
@media (max-width: 540px) {
  .tool-viz-charts { grid-template-columns: 1fr; }
}

.tool-card-detail { margin-top: 6px; font-size: 11.5px; }
.tool-card-detail summary {
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 0;
  user-select: none;
}
.tool-card-detail summary:hover {
  color: var(--text);
}
.tool-card-detail[open] summary {
  margin-bottom: 2px;
}

/* Streaming bubble subtle pulse so the user knows it's live. */
.chat-bubble.streaming {
  position: relative;
}
.chat-bubble.streaming::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%
  );
  animation: streamingPulse 1.6s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}
@keyframes streamingPulse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.inline-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.4);
  border-radius: var(--radius-sm);
  color: var(--neg);
  font-size: 13px;
}
/* Transient "model busy, try again" — informational, not an alarming red error. */
.inline-error.inline-error-soft {
  background: var(--bg-elevated, rgba(128, 128, 128, 0.1));
  border-color: var(--border, rgba(128, 128, 128, 0.3));
  color: var(--text-muted, #8a8f98);
}

.text-segment { display: block; }
.text-segment + .text-segment { margin-top: 6px; }

/* Markdown inside an agent bubble — make sure rendered <p>, <ul>,
   <table>, <pre>, etc. all look consistent with the bubble's spacing.
   The chat-bubble pre-wrap remains for the rare case marked.js
   isn't loaded and we fall back to escaped plain text. */

.text-segment > :first-child { margin-top: 0; }
.text-segment > :last-child  { margin-bottom: 0; }

.text-segment p {
  margin: 0 0 8px 0;
  white-space: normal;   /* Markdown <p> handles wrapping naturally */
}

.text-segment ul,
.text-segment ol {
  margin: 6px 0;
  padding-left: 22px;
}
.text-segment li { margin: 2px 0; }
.text-segment li > p { margin: 0; }

.text-segment h1, .text-segment h2, .text-segment h3,
.text-segment h4, .text-segment h5, .text-segment h6 {
  margin: 14px 0 8px 0;
  line-height: 1.25;
  font-weight: 600;
}
.text-segment h1 { font-size: 1.4em; }
.text-segment h2 { font-size: 1.25em; }
.text-segment h3 { font-size: 1.12em; }
.text-segment h4, .text-segment h5, .text-segment h6 { font-size: 1em; }

.text-segment a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-color: rgba(121, 184, 255, 0.4);
  text-underline-offset: 2px;
}
.text-segment a:hover { text-decoration-color: var(--text-link); }

.text-segment strong { color: var(--text); font-weight: 600; }
.text-segment em { color: var(--text); font-style: italic; opacity: 0.95; }

.text-segment code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}
.text-segment pre {
  margin: 8px 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.45;
}
.text-segment pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}

.text-segment blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.02);
}

.text-segment table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
  width: 100%;
  display: block;
  overflow-x: auto;
}
.text-segment th, .text-segment td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
.text-segment th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
}
.text-segment tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}

.text-segment hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* When rendered Markdown is inside a bubble, drop the bubble's
   pre-wrap so we don't double-collapse whitespace inside <p>. The
   bubble keeps pre-wrap for non-Markdown cases (user messages,
   plain-text fallback). */
.chat-bubble:has(.text-segment) {
  white-space: normal;
}

/* ============================================================
   Right market panel — top movers + latest headlines.
   Three-column app grid puts this on the right of the chat. Auto-
   refreshed every 5 min by JS; manual refresh via the ⟳ button.
   ============================================================ */

.market-panel {
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.market-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-sidebar);
  z-index: 1;
}

.market-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.market-section {
  padding: 12px 12px 4px 12px;
  border-bottom: 1px solid var(--border);
}
.market-section:last-child { border-bottom: none; }
/* Right-panel ticker inspector: Back button above the ticker detail. */
.ticker-back-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 10px 12px 2px 12px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--accent, #5a89d6);
  background: var(--accent-soft, rgba(90,137,214,0.12));
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 8px;
  cursor: pointer;
}
.ticker-back-btn:hover { background: var(--bg-elevated, #1b212b); }
/* `display: block` above would otherwise override the [hidden] attribute, so
   the button must explicitly hide when the JS sets hidden (glance state). */
.ticker-back-btn[hidden] { display: none; }
/* "New Chat" button under the Chats heading (moved out of the header). */
.new-chat-btn {
  display: block;
  width: 100%;
  margin: 4px 0 12px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.new-chat-btn:hover { background: var(--bg-elevated); }

/* On-demand translation: chat-bubble button + translation panel. */
.msg-translate-btn {
  margin-top: 8px;
  padding: 3px 9px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.msg-translate-btn:hover { color: var(--text); }
.msg-translate-btn:disabled { opacity: 0.6; cursor: default; }
.msg-translation {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* Animated "Translating…" indicator (pulsing globe + bouncing dots) so a slow
   translation/fetch obviously looks ALIVE, not hung. */
.translating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.translating-globe {
  display: inline-block;
  animation: brand-pulse 1.4s ease-in-out infinite;
}
.translating-dots { display: inline-flex; gap: 3px; align-items: flex-end; }
.translating-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: typingDot 1.2s infinite ease-in-out;
}
.translating-dots i:nth-child(2) { animation-delay: 0.15s; }
.translating-dots i:nth-child(3) { animation-delay: 0.30s; }
@media (prefers-reduced-motion: reduce) {
  .translating-globe, .translating-dots i { animation: none; }
}

/* Collapsible "Suggested themes" header (News tab). */
.themes-toggle { cursor: pointer; user-select: none; }
.themes-toggle:hover { opacity: 0.85; }
.themes-caret { display: inline-block; width: 1em; font-size: 0.85em; }
/* Detail sections (ticker dashboard, watchlist, news lists, digest, saved) now
   live inside the padded nav-view detail column — drop their own horizontal
   padding so content isn't double-indented, and keep a light separator. */
.nav-view .market-section { padding-left: 0; padding-right: 0; }
.nav-view .market-section:last-child { border-bottom: none; }

.market-section-title {
  margin: 0 4px 2px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.market-section-subtitle {
  margin: 0 4px 10px 4px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Movers — three sub-groups (gainers / losers / most active) with a
   tight stacked-row layout: ticker on the left, price + % on the right. */
.movers-group { margin: 0 0 10px 0; }
.movers-group:last-child { margin-bottom: 0; }

.movers-group-title {
  margin: 6px 6px 4px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.movers-group-title-gainers { color: var(--pos); }
.movers-group-title-losers  { color: var(--neg); }

.movers-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.mover-row:hover { background: var(--bg-elevated); }
/* Padding rows that keep each group a constant height when there aren't
   enough real gainers/losers. Inert: muted, no hover, not clickable. */
.mover-row-placeholder {
  cursor: default;
  opacity: 0.28;
  pointer-events: none;
}
.mover-row-placeholder:hover { background: transparent; }
/* Every change cell carries a compact "basis" badge ("15m" / "close") so it
   is always clear the number is delayed, not a live quote. (We deliberately
   avoid a pulsing "live" dot, which would imply real-time data we don't have.) */
.price-basis {
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  margin-left: 3px;
  vertical-align: super;
  color: var(--text-muted);
  opacity: 0.65;
  font-variant-numeric: normal;
  letter-spacing: 0.02em;
  cursor: help;
}
.mover-row-ticker { flex: 0 0 auto; min-width: 44px; }
/* Movers/watchlist rows show the symbol with the company name stacked beneath
   it. Scoped to rows that actually carry a .mover-row-symbol child so the
   portfolio rows (which reuse .mover-row-ticker inline) are untouched. */
.mover-row-ticker:has(.mover-row-symbol) {
  flex: 0 0 104px; width: 104px; max-width: 104px;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
}
/* "not covered" tag for watchlist names outside the S&P 500 + Nasdaq-100
   universe — muted, small, with a help cursor for the tooltip. */
.mover-row-uncovered-badge {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-tertiary, #8a8f98);
  background: var(--bg-elevated, rgba(128, 128, 128, 0.12));
  border-radius: var(--radius-sm, 4px);
  padding: 1px 4px;
  cursor: help;
  vertical-align: middle;
}
.watchlist-row-uncovered .mover-row-ticker { opacity: 0.85; }
/* Flexible sparkline: it GROWS to fill the space between the name and the
   right-aligned price, so the row has no dead gap. A min-width keeps it
   readable on the narrow (320px) market panel; the quote column sizes to its
   content (below), so the sparkline absorbs whatever width is left over. */
.mover-row-spark  { flex: 1 1 auto; min-width: 72px; display: flex; align-items: center; position: relative; }
.mover-row-spark .spark { width: 100%; height: 16px; display: block; opacity: 1; cursor: crosshair; }
/* Hover crosshair on the in-row sparkline: a dashed guide (in the SVG), an HTML
   dot snapped to the curve, and a small tooltip with the point's price/date. */
.spark-cross { stroke-width: 1; transition: opacity .08s ease; }
.spark-dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 1.5px var(--bg-sidebar, #fff); transition: opacity .08s ease;
}
.spark-tip {
  position: absolute; left: 0; top: 0; margin-top: -3px;
  transform: translate(-50%, -100%);
  display: flex; gap: 5px; align-items: baseline; white-space: nowrap;
  padding: 1px 5px; border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated, #1c1f26); color: var(--text);
  border: 0.5px solid var(--border, rgba(128, 128, 128, 0.3));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 10.5px; line-height: 1.3; pointer-events: none; z-index: 6;
  transition: opacity .08s ease;
}
.spark-tip .tip-when { color: var(--text-muted); }
.spark-tip .tip-price { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Yahoo-style right cell: price stacked over the change, right-aligned, pinned
   to the row's right edge so the sparkline takes the remaining middle space. */
.mover-row-quote {
  /* Size to the price/change content (no longer the flex-grower) so the
     sparkline to its left fills the row instead. Stays flush-right because the
     flexible sparkline pushes it to the row's right edge. */
  flex: 0 0 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}

.mover-row-symbol {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
/* Company name under the symbol — muted, single line, ellipsized so a long
   name never pushes the sparkline/price out of the row. */
.mover-row-name {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mover-row-price {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.mover-row-change {
  font-size: 11px;
  font-weight: 500;
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mover-row-change.positive { color: var(--pos); }
.mover-row-change.negative { color: var(--neg); }
.mover-row-change.neutral  { color: var(--text-muted); }

/* Per-tab Refresh button — pinned to the top-right of a nav-view, re-pulls
   that tab's prices / news on demand. */
.nav-view { position: relative; }
.view-refresh-btn {
  position: absolute;
  top: 0; right: 0;
  z-index: 3;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.view-refresh-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.view-refresh-btn:disabled { cursor: progress; opacity: 0.7; }
.view-refresh-btn .ref-ico { font-size: 15px; line-height: 1; display: inline-block; }
.view-refresh-btn.spinning .ref-ico { animation: spin 0.8s linear infinite; }

/* News list — single-line ellipsis title with feed name below. */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-row {
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: background 0.1s;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.news-row:not(:last-child) { border-bottom-color: var(--border); }
.news-row:hover { background: var(--bg-elevated); }
.news-row-main { flex: 1 1 auto; min-width: 0; }   /* text column */
/* Lead media thumbnail. */
.news-row-thumb-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 72px; height: 54px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elevated, #1b212b);
  display: block;
}
.news-row-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-row-thumb-empty { display: flex; align-items: center; justify-content: center; }
.news-row-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  background: rgba(0,0,0,0.32);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.news-row-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  text-decoration: none;
}
.news-row-title:hover { color: var(--text-link); }
/* Headline now opens a chat impact-analysis topic, so signal it's clickable. */
.news-row-title-clickable { cursor: pointer; }
/* Non-English readers: hide the (English) title until its translation lands so
   the original never flashes by. Reserves layout via min-height. */
.news-row-title.news-title-pending {
  visibility: hidden;
  min-height: 1.4em;
}

.news-row-meta {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
}
/* Action links in the meta row (analyze / save / translate / source). These are
   interactive, so make them stand out from the muted meta text: link-blue and
   semibold, with a clear hover. Otherwise they vanish into the gray. */
.news-row-link {
  color: var(--text-link);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.news-row-link:hover { color: var(--text-link); text-decoration: underline; }
/* Once saved, the "save" link becomes a static "✓ saved" marker. */
.news-row-save.is-saved {
  color: var(--text-positive, #16a34a);
  cursor: default;
}
.news-row-save.is-saved:hover { text-decoration: none; color: var(--text-positive, #16a34a); }

.market-empty {
  padding: 12px 6px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Macro & policy panel ---- */
.macro-summary {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, inherit);
  background: var(--surface-2, rgba(127,127,127,0.06));
  border: 1px solid var(--border, rgba(127,127,127,0.18));
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 2px 14px 2px;
}
.macro-summary > :first-child { margin-top: 0; }
.macro-summary > :last-child { margin-bottom: 0; }
.macro-summary p { margin: 0 0 8px 0; }

.macro-group { margin-bottom: 14px; }
.macro-group-title {
  margin: 0 4px 6px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.macro-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--border, rgba(127,127,127,0.12));
}
.macro-metric:last-child { border-bottom: none; }
.macro-metric-label {
  font-size: 12.5px;
  color: var(--text-secondary, inherit);
}
.macro-metric-value {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.macro-news-title {
  margin: 6px 4px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ============================================================
   Mobile — collapse sidebar to a top sliver. Phase 4 will do this
   properly with a drawer; for Phase 1 we just keep it usable.
   ============================================================ */

/* ============================================================
   Feature navigator rail (left) — one view at a time
   ============================================================ */
.sidebar { overflow: hidden; }   /* header + body(scroll) + footer */
.sidebar-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.nav-rail {
  flex: 0 0 58px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 3px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.nav-rail-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-rail-btn:hover { background: var(--bg-elevated); color: var(--text); }
/* The rail mixes <button> features with an <a> Admin link; keep links from
   underlining and respect the hidden attribute (display:flex would override it). */
.nav-rail-btn { text-decoration: none; }
.nav-rail-btn[hidden] { display: none; }
/* Admin + Settings are utilities, not features — drop them to the bottom of the
   rail, with Admin directly above Settings. Put the auto margin (which absorbs
   the free space) on Admin when it's shown so the two sit together at the
   bottom; when Admin is hidden, Settings takes the auto margin instead. */
#nav-admin:not([hidden]) { margin-top: auto; }
#nav-admin[hidden] ~ .nav-rail-btn[data-view="settings"] { margin-top: auto; }
/* Selected category: accent-tinted background, accent text/icon, and a
   left accent bar so the active feature reads at a glance. */
.nav-rail-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nav-rail-btn.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav-rail-btn.is-active .nav-ico { filter: none; }
.nav-ico { font-size: 16px; line-height: 1; }
.nav-lbl { font-size: 9.5px; line-height: 1; }
.nav-views { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.nav-view { }

/* Contextual left views for the data categories (Movers / News / Stocks /
   Watch) — their standalone quick actions stack full-width for a clean
   launcher feel. Direct-child only, so buttons inside forms (e.g. the
   keyword "Add") keep their inline layout. */
#view-movers > .sidebar-action-btn,
#view-news > .sidebar-action-btn,
#view-stocks > .sidebar-action-btn,
#view-watch > .sidebar-action-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 6px 8px;
}

/* Movers left-panel breadth pulse line. */
.movers-breadth {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.movers-breadth .breadth-up { color: var(--pos); font-weight: 600; }
.movers-breadth .breadth-down { color: var(--neg); font-weight: 600; }
.movers-breadth .breadth-meta { color: var(--text-muted); }

/* Per-category custom prompt shortcuts ("My prompts"). */
.custom-prompts {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cp-title {
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cp-add-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  cursor: pointer;
  transition: color .1s, border-color .1s;
}
.cp-add-btn:hover { color: var(--text); border-color: var(--border-strong); }
.cp-list { list-style: none; margin: 0; padding: 0; display: flex;
           flex-direction: column; gap: 4px; }
.cp-item { display: flex; gap: 4px; }
.cp-go {
  flex: 1 1 auto;
  text-align: left;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 5px 8px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .1s;
}
.cp-go:hover { border-color: var(--accent); }
.cp-del {
  flex: 0 0 auto;
  width: 24px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}
.cp-del:hover { color: var(--negative, #c75450); border-color: var(--negative, #c75450); }
.cp-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cp-title-input, .cp-prompt-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 8px;
}
.cp-title-input:focus, .cp-prompt-input:focus {
  outline: none; border-color: var(--accent, #5a89d6);
}
.cp-prompt-input { resize: vertical; }
.cp-form-actions { display: flex; gap: 6px; }
.cp-form-actions .sidebar-action-btn { flex: 1 1 0; text-align: center; }

/* News topic chips (theme toggles + selected keywords). */
.topic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
/* `display: flex` would otherwise override the [hidden] attribute, so the
   collapsible Suggested-themes list must explicitly hide when collapsed. */
.topic-chips[hidden] { display: none; }
.topic-chips-selected { margin-top: 8px; }
.topic-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.topic-chip:hover { color: var(--text); border-color: var(--border-strong); }
.topic-chip.is-on {
  color: var(--text);
  background: var(--accent-soft, var(--bg-elevated));
  border-color: var(--accent, var(--border-strong));
}
/* Selected (removable) chips carry a trailing × */
.topic-chip-remove { color: var(--text); border-color: var(--accent, var(--border-strong)); }
.topic-chip-remove::after { content: " ×"; opacity: 0.7; }

/* ============================================================
   Portfolio + alerts + data status + disclaimer
   ============================================================ */
.pf-form { display: flex; gap: 4px; margin: 6px 0 8px; flex-wrap: wrap; }
.pf-form input {
  min-width: 0; padding: 5px 7px; font-size: 12px;
  color: var(--text); background: var(--bg-input);
  border: 0.5px solid var(--border, #2a2f3a); border-radius: 6px;
}
#pos-ticker { width: 62px; } #pos-shares, #pos-cost { width: 56px; flex: 1 1 auto; }
.pf-totals { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); margin: 4px 0 6px; }
.pf-totals b { color: var(--text); font-weight: 600; }
.pf-sub { color: var(--text-muted); font-size: 11px; font-weight: 400; }
.pf-expo { margin-top: 8px; }
.pf-expo-title { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.pf-expo-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 2px 2px; color: var(--text-secondary); }
.data-status { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; cursor: default; }
.disclaimer { font-size: 10px; color: var(--text-muted); opacity: 0.8; margin-top: 4px; }

/* ============================================================
   My (custom) strategies sidebar section
   ============================================================ */
.strategy-form { display: flex; gap: 6px; margin: 6px 0 8px; }
.strategy-input {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 8px; font-size: 12px;
  color: var(--text); background: var(--bg-input);
  border: 1px solid var(--border, #2a2f3a); border-radius: 6px;
}
.strategy-input:focus { outline: none; border-color: var(--accent, #5a89d6); }
.my-strategy-item { display: flex; align-items: center; gap: 6px; }
.my-strategy-item .history-item-title { flex: 1 1 auto; cursor: pointer; }
.my-strategy-actions { flex: 0 0 auto; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.my-strategy-item:hover .my-strategy-actions { opacity: 1; }
.my-strategy-btn {
  font-size: 10px; color: var(--text-muted);
  background: transparent; border: 1px solid var(--border, #2a2f3a);
  border-radius: 4px; padding: 1px 5px; cursor: pointer;
}
.my-strategy-btn:hover { color: var(--text); border-color: var(--accent, #5a89d6); }
.my-strategy-del:hover { color: var(--negative, #c75450); border-color: var(--negative, #c75450); }

/* ============================================================
   Welcome message (chat panel)
   ============================================================ */
.welcome-bubble { max-width: 640px; }
.welcome-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0 0 4px;
}
.welcome-sub { margin: 0 0 14px; font-size: 14px; color: var(--text-muted); }

/* Feature showcase grid in the welcome bubble. */
.welcome-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0 0 16px;
}
.welcome-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.welcome-feature .wf-ico { flex: 0 0 auto; font-size: 15px; line-height: 1.2; }
.welcome-feature .wf-text strong { color: var(--text); font-weight: 600; }
.welcome-feature .wf-text strong::after { content: " — "; color: var(--text-muted); font-weight: 400; }
.welcome-try { margin: 0 0 8px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
@media (max-width: 640px) {
  .welcome-features { grid-template-columns: 1fr; }
}
.welcome-examples {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.welcome-chip {
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-elevated, #1a1f29);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.welcome-chip:hover {
  border-color: var(--accent, #5a89d6);
  background: var(--bg-sidebar, #11151c);
}
.welcome-hint { margin: 0; font-size: 11.5px; color: var(--text-muted); }

/* ============================================================
   Ticker-panel sentiment sparkline
   ============================================================ */
.ticker-sentiment {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.ticker-sentiment .sentiment-label { flex: 0 0 auto; }
.ticker-sentiment .spark-wrap { flex: 1 1 auto; min-width: 0; display: flex; }
.ticker-sentiment .spark-wrap .spark { width: 100%; height: 18px; }
.sentiment-stat { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.sentiment-stat.positive { color: var(--positive, #3fa66a); }
.sentiment-stat.negative { color: var(--negative, #c75450); }
.sentiment-stat.neutral  { color: var(--text-muted); }
.sentiment-stat .sentiment-dir { color: var(--text-muted); }

/* "Similar" peer chips in the ticker panel — clickable, explore related names. */
#ticker-similar-wrap { margin-top: 8px; }
.ticker-similar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ticker-chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.ticker-chip:hover {
  background: var(--accent-soft, var(--bg-elevated));
  border-color: var(--accent, var(--border));
}

/* Pretty sentiment area-chart inside the analyze_price_move tool card. */
.sentiment-viz {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated, #1a1f29);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 8px;
}
.sentiment-viz-title {
  font-size: 11px; color: var(--text-muted); margin-bottom: 4px;
}
.sentiment-viz-svg { width: 100%; height: auto; display: block; }
.sentiment-viz-cap {
  margin-top: 4px; font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.sentiment-viz-cap .positive { color: var(--positive, #3fa66a); }
.sentiment-viz-cap .negative { color: var(--negative, #c75450); }

/* ============================================================
   Ticker autocomplete dropdown
   ============================================================ */
.watchlist-search-wrap { position: relative; }
/* In-flow (not absolute) so the parent market-panel's overflow:auto can't
   clip it, and no z-index/stacking surprises. It pushes the watchlist down
   while you're typing, then collapses. */
.ticker-suggest {
  margin: 4px 0 0; padding: 4px;
  list-style: none;
  background: var(--bg-elevated, #1a1f29);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  max-height: 240px; overflow-y: auto;
}
.ticker-suggest-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.ticker-suggest-item:hover { background: var(--bg-sidebar, #11151c); }
.ticker-suggest-sym { font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; }
.ticker-suggest-name {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticker-suggest-empty {
  padding: 6px 8px; font-size: 11px; color: var(--text-muted); font-style: italic;
}

/* Ticker-view search dropdown floats below its input (form is position:relative). */
#ticker-search-suggest {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 30;
}

/* ---- Ticker dashboard (overview section) ---- */
.ticker-ov-empty { padding: 4px 2px; }
.ticker-ov-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 2px;
}
/* The left id block shrinks (its name/links wrap) so the right-aligned quote
   keeps its place instead of being pushed past the panel edge and clipped. */
.ticker-ov-id { min-width: 0; flex: 1 1 auto; }
.ticker-ov-quote { flex: 0 0 auto; }
.ticker-ov-symbol {
  margin: 0; font-family: var(--font-mono); font-size: 20px; font-weight: 700;
}
.ticker-ov-name {
  margin: 2px 0 0; font-size: 11.5px; color: var(--text-muted);
}
/* Yahoo + Google links share one row, pushed to opposite ends. */
.ticker-ov-links {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; margin-top: 4px; max-width: 340px;
}
.ticker-ov-yahoo {
  font-size: 11px; font-weight: 600;
  color: var(--accent, #5a89d6); text-decoration: none; white-space: nowrap;
}
.ticker-ov-yahoo:hover { text-decoration: underline; }
/* A hidden link still occupies no space in the flex row, so the visible one
   keeps its natural position rather than centering. */
.ticker-ov-links .ticker-ov-yahoo[hidden] { display: none; }
.ticker-ov-quote { text-align: right; white-space: nowrap; }
.ticker-ov-price {
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ticker-ov-change {
  display: block; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ticker-ov-change.pos { color: var(--pos, #2bbf6a); }
.ticker-ov-change.neg { color: var(--neg, #e0556a); }
/* Stale quote: mute the change number + amber the as-of line so a delayed
   quote doesn't read as the current session's move. */
.ticker-ov-change.stale { opacity: 0.55; }
.ticker-ov-asof.stale { color: var(--warn, #d6932b); font-weight: 600; }

.ticker-chart { margin: 10px 0 4px; height: 96px; position: relative; }
.ticker-chart-cap {
  margin: 0 2px 8px; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.ticker-chart-cap.pos { color: var(--pos, #2bbf6a); }
.ticker-chart-cap.neg { color: var(--neg, #e0556a); }
.ticker-chart-svg { width: 100%; height: 96px; display: block; }
.ticker-chart-base { stroke: var(--text-muted); stroke-width: 1; opacity: 0.5; }
/* Hover crosshair: dashed vertical guide + a dot that snaps to the curve. */
.ticker-chart-cross {
  stroke: var(--text-muted); stroke-width: 1;
  pointer-events: none; transition: opacity 0.08s ease;
}
.ticker-chart-cross-dot { stroke: var(--bg, #fff); stroke-width: 1; pointer-events: none; }
.ticker-chart-svg.pos .ticker-chart-cross-dot { fill: var(--pos, #2bbf6a); }
.ticker-chart-svg.neg .ticker-chart-cross-dot { fill: var(--neg, #e0556a); }
/* Floating tooltip showing the hovered point's date/time + price. */
.ticker-chart-tip {
  position: absolute; left: 0; top: 0;
  transform: translateX(-50%);
  display: flex; gap: 6px; align-items: baseline;
  padding: 2px 6px; border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated, #1c1f26);
  color: var(--text);
  border: 1px solid var(--border, rgba(128, 128, 128, 0.25));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 11px; line-height: 1.3; white-space: nowrap;
  pointer-events: none; z-index: 5; transition: opacity 0.08s ease;
}
.ticker-chart-tip .tip-when { color: var(--text-muted); }
.ticker-chart-tip .tip-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.daily-digest-cal { margin: 4px 0 12px; }
.ticker-range {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 2px 2px;
}
.ticker-range-btn {
  font-size: 11px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  transition: background 0.1s, color 0.1s;
}
.ticker-range-btn:hover { background: var(--bg-elevated); }
.ticker-range-btn.is-active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.ticker-chart-line { stroke-width: 1.75px; }
.ticker-chart-svg.pos .ticker-chart-line { stroke: var(--pos, #2bbf6a); }
.ticker-chart-svg.neg .ticker-chart-line { stroke: var(--neg, #e0556a); }
.ticker-chart-fill { opacity: 0.10; }
.ticker-chart-svg.pos .ticker-chart-fill { fill: var(--pos, #2bbf6a); }
.ticker-chart-svg.neg .ticker-chart-fill { fill: var(--neg, #e0556a); }
.ticker-chart-dot { stroke: none; }
.ticker-chart-svg.pos .ticker-chart-dot { fill: var(--pos, #2bbf6a); }
.ticker-chart-svg.neg .ticker-chart-dot { fill: var(--neg, #e0556a); }
.ticker-chart-empty {
  height: 96px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-muted); font-style: italic;
}

.ticker-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 2px;
}
.ticker-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 8px; border-radius: 8px;
  background: var(--surface-2, rgba(127,127,127,0.06));
  border: 1px solid var(--border, rgba(127,127,127,0.14));
}
.ticker-stat-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted);
}
.ticker-stat-value {
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ticker-ov-summary {
  margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary, inherit);
}

/* ---- Comments (community layer) ---- */
.comment-thread {
  margin-top: 14px;
  border-top: 1px solid var(--border, rgba(127,127,127,0.18));
  padding-top: 12px;
}
.comment-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.comment-title {
  margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.comment-count { font-size: 11px; color: var(--text-muted); }
.comment-list { list-style: none; margin: 0 0 10px; padding: 0; }
.comment-empty {
  padding: 8px 2px; font-size: 12px; color: var(--text-muted); font-style: italic;
}
.comment-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(127,127,127,0.10));
}
.comment-item:last-child { border-bottom: none; }
.comment-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.comment-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.comment-author { font-size: 12px; font-weight: 600; }
.comment-time { font-size: 11px; color: var(--text-muted); }
.comment-delete {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1; padding: 0 4px;
}
.comment-delete:hover { color: var(--neg, #e0556a); }
.comment-body {
  font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  color: var(--text-secondary, inherit);
}
.comment-form { display: flex; flex-direction: column; gap: 6px; }
.comment-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: 12.5px; padding: 7px 9px;
  border-radius: 8px; border: 1px solid var(--border, rgba(127,127,127,0.25));
  background: var(--surface-2, rgba(127,127,127,0.06)); color: inherit;
}
.comment-post-btn { align-self: flex-end; }

/* ---- Threaded replies ---------------------------------------------------- */
/* Nested replies: a left rail + indent per depth level, capped so deep chains
   don't run off-screen. `--depth` is set inline by the renderer. */
.comment-children {
  list-style: none;
  margin: 6px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--border, rgba(127,127,127,0.18));
}
.comment-children .comment-item { padding: 6px 0; border-bottom: none; }
.comment-reply .comment-author { font-size: 11.5px; }

.comment-actions { margin-top: 3px; }
.comment-reply-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.02em;
}
.comment-reply-btn:hover { color: var(--accent, #4f8cff); text-decoration: underline; }

.comment-reply-host:not(:empty) { margin-top: 6px; }
.comment-reply-form { margin-bottom: 2px; }

/* Soft-deleted (tombstoned) comment: kept to preserve the thread, but muted. */
.comment-deleted > .comment-meta .comment-author,
.comment-deleted > .comment-body {
  color: var(--text-muted);
  font-style: italic;
}

/* Report thread sits in the chat flow — constrain to the reading column. */
.report-comments {
  max-width: 760px;
  margin: 4px auto 28px;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.report-comments .comment-thread { border-top-color: var(--border, rgba(127,127,127,0.25)); }

/* ============================================================
   Mobile: top bar + off-canvas sidebar / market drawers
   ============================================================ */
/* Phone — chat full width; the SIDEBAR also becomes an off-canvas left
   drawer (market drawer + bar already set up by the ≤1180px block). */
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  #mobile-sidebar-toggle { display: block; }   /* re-show ☰ on phones */
  .sidebar {
    position: fixed; top: 48px; bottom: 0; left: 0;
    width: 86%; max-width: 320px; z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease; max-height: none;
  }
  .sidebar.drawer-open { transform: translateX(0); }
  .chat-input-form { padding: 8px 12px 12px 12px; }
  .chat-messages { padding: 0 12px; }
}

/* ============================================================
   Multi-user: signed-in user area + personal watchlist
   ============================================================ */

.user-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #2a2f3a);
  margin-bottom: 8px;
}
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-elevated);
}
.user-name {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text, #e7e9ee);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-logout {
  font-size: 12px;
  color: var(--muted, #9aa0ad);
  text-decoration: none;
}
.user-logout:hover { color: var(--text, #e7e9ee); text-decoration: underline; }

.watchlist-form {
  display: flex;
  gap: 6px;
  margin: 6px 0 10px 0;
}
.watchlist-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text, #e7e9ee);
  background: var(--bg-input);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 6px;
}
.watchlist-input:focus { outline: none; border-color: var(--accent, #5a89d6); }
.watchlist-add-btn {
  flex: 0 0 auto;
  width: 30px;
  font-size: 16px;
  line-height: 1;
  color: var(--text, #e7e9ee);
  background: var(--bg-input);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 6px;
  cursor: pointer;
}
.watchlist-add-btn:hover { border-color: var(--accent, #5a89d6); }

.watchlist-row { position: relative; }
.watchlist-remove {
  flex: 0 0 auto;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-size: 14px;
  color: var(--muted, #9aa0ad);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.watchlist-row:hover .watchlist-remove { opacity: 1; }
.watchlist-remove:hover { color: var(--negative, #c75450); background: rgba(199,84,80,.12); }

/* ============================================================
   Market panel: movers "show more", high-impact news,
   selected-ticker news.
   ============================================================ */

.market-more-btn {
  list-style: none;
  padding: 4px 2px;
  font-size: 12px;
  color: var(--accent, #5a89d6);
  cursor: pointer;
  user-select: none;
}
.market-more-btn:hover { text-decoration: underline; }

/* Highlight the row whose ticker-news panel is open. */
.mover-row-active {
  background: rgba(90,137,214,.14);
  border-radius: 6px;
}

.ticker-news-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticker-news-header .market-section-title { flex: 1 1 auto; margin: 0; }
#ticker-news-close {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}
/* Action buttons on their own row so they don't crowd the title on the
   narrow market panel. Each button shares the width evenly. */
.ticker-news-actions {
  display: flex;
  gap: 6px;
  margin: 6px 0 8px;
}
.ticker-news-actions .sidebar-action-btn { flex: 1 1 0; }
/* "✓ Watching" state for the watch toggle. */
#ticker-watch-btn.is-watching {
  color: var(--positive, #3fa66a);
  border-color: var(--positive, #3fa66a);
}

/* Clickable ticker tag inside a news row's meta line. */
.news-row-ticker {
  color: var(--accent, #5a89d6);
  font-weight: 600;
  text-decoration: none;
}
.news-row-ticker:hover { text-decoration: underline; }

/* ---- Report podcast (Agentic Finance audio) ---- */
/* Marker class (used for spacing + dedup detection). The tinted box is a
   separate class so the collapsed "🎧 Listen" pill stays unboxed. */
.report-podcast { margin-top: 8px; }
.report-podcast-box {
  background: var(--surface-2, rgba(127,127,127,0.08));
  border-radius: 8px;
  padding: 8px 10px;
}
.report-podcast-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.report-podcast-label { font-weight: 600; }
.report-podcast-len {
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(127,127,127,0.3));
  background: transparent;
  color: inherit;
}
.report-podcast-btn { margin: 0; }
.report-podcast-status { font-size: 0.85em; opacity: 0.8; }
.report-podcast-audio { display: block; width: 100%; margin: 10px 0 6px; }

/* Daily-digest audio player — native <audio> control on a light card so it's
   visible against the dark chat bubble. */
.digest-audio {
  display: inline-block;
  background: #f1f3f5; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin: 2px 0 4px;
}
/* Concrete width — the agent bubble shrink-wraps, so width:100% would collapse
   the native control into a sliver. */
.digest-audio audio { display: block; width: 340px; max-width: 60vw; height: 40px; }

/* Daily-digest branded MP4 — same light card as the audio, sized 16:9. */
.digest-video {
  display: inline-block;
  background: #f1f3f5; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin: 2px 0 4px;
}
.digest-video video {
  display: block; width: 340px; max-width: 60vw; aspect-ratio: 16 / 9;
  background: #000; border-radius: 6px;
}
.digest-video-actions { margin-top: 8px; }
.digest-video-download {
  display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--accent, #0b5cff); text-decoration: none;
}
.digest-video-download:hover { text-decoration: underline; }

/* Daily-digest vertical short (9:16) — a phone-shaped player. */
.digest-short {
  display: inline-block;
  background: #f1f3f5; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin: 2px 0 4px;
}
.digest-short-cap { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.digest-short-video {
  display: block; width: 240px; max-width: 52vw; aspect-ratio: 9 / 16;
  background: #000; border-radius: 8px;
}

/* Daily-digest social post — share-ready hook-first text for RedNote / X.
   Accent border so it reads as the "take this and post it" block. */
.digest-social {
  display: block; width: 340px; max-width: 60vw;
  background: #f1f3f5; border: 1.5px solid var(--accent, #0b5cff);
  border-radius: 10px; padding: 10px 12px; margin: 2px 0 4px;
}
.digest-social-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.digest-social-title { font-size: 13px; font-weight: 600; }
.digest-social-copy {
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--accent, #0b5cff);
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px;
}
.digest-social-copy:hover { background: rgba(0, 0, 0, 0.04); }
.digest-social-copy.is-copied { color: #157347; border-color: #157347; }
.digest-social-body {
  font-size: 13px; line-height: 1.7; white-space: pre-wrap;
  word-break: break-word;
}
/* copy-the-long-text row under the rendered brief */
.digest-copy-row { display: flex; justify-content: flex-end; }

/* Admin → Dashboard: Visitors — not signed in */
.visitors-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.visitors-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.visitors-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.visitors-table th.num, .visitors-table td.num { text-align: right; }
.visitors-subtitle {
  font-size: 13px; font-weight: 700; color: var(--muted);
  margin: 16px 0 4px;
}
.probe-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 11px; font-weight: 600; border-radius: 6px;
  color: #b42318; background: rgba(180, 35, 24, 0.08);
  border: 1px solid rgba(180, 35, 24, 0.25); vertical-align: 1px;
}
.aplayer-time {
  flex: none; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 76px; text-align: right;
}
.report-podcast-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.report-podcast-download {
  color: var(--accent, #5a89d6);
  text-decoration: none;
  font-size: 0.9em;
}
.report-podcast-download:hover { text-decoration: underline; }
.report-podcast-regen {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent, #5a89d6);
  font: inherit;
  font-size: 0.9em;
}
.report-podcast-regen:hover { text-decoration: underline; }
.report-podcast-note { margin-top: 6px; font-size: 0.8em; opacity: 0.7; }

/* ---- Commute Podcast tab ---- */
.podcast-sub { margin-top: 4px; }
.podcast-episodes { display: flex; flex-direction: column; gap: 12px; }
.podcast-episode {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel);
}
.podcast-episode-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.podcast-episode-title { font-weight: 600; color: var(--ink); }
.podcast-episode-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.podcast-audio { width: 100%; height: 36px; margin: 2px 0 6px; }
.podcast-episode-notes { font-size: 13px; color: var(--muted); }
.podcast-episode-notes ul { margin: 4px 0 0; padding-left: 18px; }
.podcast-episode-notes a { color: var(--accent, #5a89d6); }

/* ---- Hourly news digest (left, grouped by day, single-line rows) ---- */
.digest-date-header {
  list-style: none; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
  margin: 12px 0 2px; padding: 0 2px;
}
.digest-date-header:first-child { margin-top: 4px; }
.digest-date-toggle {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  padding: 7px 4px; border-radius: 6px;
}
.digest-date-toggle:hover { color: var(--ink); background: var(--bg); }
.digest-caret {
  display: inline-block; width: 16px; text-align: center;
  font-size: 14px; line-height: 1; color: var(--ink);
  transition: transform 0.12s ease;
}
.digest-date-toggle.is-open .digest-caret { transform: rotate(90deg); }
.digest-day-count { margin-left: auto; font-weight: 400; opacity: 0.7; }
.digest-hour-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 5px 10px;
}
.digest-hour { font-weight: 500; }
.digest-ago { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- Daily Digest (right panel, date-grouped list) ---- */
.daily-digest-list { display: flex; flex-direction: column; gap: 14px; }
.dd-day { display: flex; flex-direction: column; gap: 4px; }
.dd-date {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px;
}
.dd-entry {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--ink);
  font: inherit; font-size: 14px; padding: 9px 12px; cursor: pointer;
}
.dd-entry:hover:not(.is-empty) { border-color: var(--accent, #5a89d6); }
.dd-entry.is-empty { opacity: 0.5; cursor: default; }
.dd-entry-label { font-weight: 500; }
.dd-entry-meta { color: var(--muted); font-size: 13px; }

/* Per-user digest language picker (Podcast tab). */
.digest-language-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 12px 4px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.digest-language-row label { font-weight: 500; }
.digest-language-row select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, #d0d0d0);
  background: var(--bg, #fff);
  color: inherit;
}
.digest-language-hint { font-size: 11px; opacity: 0.7; }
.digest-dur-field { display: inline-flex; align-items: center; gap: 4px; }
.digest-dur-field select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, #d0d0d0);
  background: var(--bg, #fff);
  color: inherit;
}

/* Settings view: Profile / Preference sub-tabs + forms. */
.settings-tabs { display: flex; gap: 6px; margin: 4px 4px 14px 4px; }
.settings-tab {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border, #2a2f3a);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  cursor: pointer;
}
.settings-tab.is-active {
  background: var(--accent, #3a63c0);
  border-color: var(--accent, #3a63c0);
  color: #fff;
}
.settings-panel { padding: 0 4px; }
.settings-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 12px 0 4px;
}
.settings-panel input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--bg, #0e1117);
  color: inherit;
  margin-bottom: 10px;
}
.settings-select {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--bg, #0e1117);
  color: inherit;
  margin-bottom: 6px;
}
.settings-hint { display: block; font-size: 11px; opacity: 0.75; margin-top: 8px; }
.settings-meta { font-size: 11px; opacity: 0.55; margin-top: 14px; }
.settings-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.settings-link:hover { text-decoration: underline; }

/* ---- In-app Admin view (middle panel) ---- */
.settings-panel input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--bg, #0e1117);
  color: inherit;
  margin-bottom: 10px;
}
.admin-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.admin-row {
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 10px;
  padding: 10px 12px;
}
.admin-row .a-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.admin-row .a-email { font-size: 13px; font-weight: 600; word-break: break-all; }
.admin-row .a-sub { font-size: 12px; opacity: 0.6; margin-top: 2px; word-break: break-all; }
.a-status { font-size: 11px; font-weight: 700; white-space: nowrap; }
.a-status.a-accepted { color: #16a34a; }
.a-status.a-invited  { color: #b45309; }
.a-status.a-pending  { color: var(--text-muted, #8a93a0); }
.a-status.a-rejected { color: #dc2626; }
.admin-row .a-acts {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px;
}
.a-btn {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--bg-elevated, #161b22); color: inherit;
}
.a-btn:hover:not([disabled]) { background: var(--accent-soft, rgba(99,102,241,.12)); }
.a-btn[disabled] { opacity: 0.4; cursor: default; }
select.a-role {
  font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border, #2a2f3a); background: var(--bg, #0e1117); color: inherit;
}
.admin-debug { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.a-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.a-kv b { opacity: 0.7; font-weight: 600; }
.a-kv span { text-align: right; word-break: break-all; }

/* Dashboard (Admin → Dashboard) — responsive grid of headline metric cards. */
.admin-dashboard-toolbar { display: flex; gap: 8px; margin: 10px 0; }
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.metric-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg-input);
}
.metric-label { font-size: 12px; opacity: 0.7; font-weight: 600; }
.metric-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.metric-hint { font-size: 11.5px; opacity: 0.6; margin-top: 4px; }
.admin-dashboard-breakdowns { margin-top: 18px; }
.admin-dashboard-breakdown { margin-top: 14px; }

/* Latency viewer (Admin → Latency). Reuses .a-kv / .admin-list rows. */
.admin-latency-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.admin-latency-minms {
  width: 90px;
  padding: 5px 8px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
}
.admin-latency-stats { margin: 6px 0 14px; }
.admin-latency-routes, .admin-latency-recent { margin-top: 14px; }
.a-kv.lat-slow b { color: #b8860b; }
.a-kv.lat-err b { color: var(--danger, #c0392b); }

/* Admin header: title on the left, Refresh pinned to the right. */
.admin-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-head-row .sidebar-section-title { margin: 0; }
.admin-refresh-btn {
  flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--bg-elevated, rgba(127,127,127,.08)); color: inherit;
}
.admin-refresh-btn:hover { background: var(--accent-soft, rgba(99,102,241,.12)); }

/* ---- Sub-category nav (middle panel) for Settings / Admin ---- */
.subnav { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.subnav-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: var(--text, inherit);
  font: inherit; font-size: 14px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.subnav-item:hover { background: var(--bg-elevated, rgba(127,127,127,.08)); }
.subnav-item.is-active {
  background: var(--accent-soft, rgba(99,102,241,.12));
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
  font-weight: 600;
}

/* ---- Right-pane detail overlay (Settings / Admin content) ---- */
.chat { position: relative; }
.detail-overlay {
  position: absolute; inset: 0; z-index: 30;
  background: var(--bg, #0e1117);
  overflow-y: auto;
  padding: 36px clamp(20px, 5vw, 56px);
}
.detail-overlay[hidden] { display: none; }
.detail-panel { max-width: 860px; }
.detail-head { margin-bottom: 22px; }
.detail-head h1 { font-size: 25px; font-weight: 700; margin: 0 0 4px; }
.detail-sub { color: var(--text-muted, #8a93a0); margin: 0; font-size: 14px; max-width: 640px; }
.detail-body { font-size: 14px; }
.detail-body input[type="text"],
.detail-body input[type="email"],
.detail-body input[type="password"] {
  width: 100%; max-width: 420px; box-sizing: border-box;
  font-size: 14px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--bg-elevated, var(--bg, #0e1117)); color: inherit;
  margin-bottom: 12px;
}
button.settings-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit; text-align: left;
}
.pw-form { margin-top: 14px; max-width: 420px; }
.pw-form .settings-label:first-child { margin-top: 0; }
.pw-form input[type="password"] { display: block; }
.pw-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.pw-actions .sidebar-action-btn { width: auto; margin: 0; }
.pw-actions .settings-link { margin-top: 0; }
.pw-show-row { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px;
  font-size: 12px; color: var(--text-muted, #8a93a0); cursor: pointer; }
.pw-show-row input { width: auto; margin: 0; }
.detail-body input:focus { outline: none; border-color: var(--accent, #6366f1); }
.admin-invite-row { display: flex; gap: 12px; align-items: stretch; max-width: 620px; }
.admin-invite-row input[type="email"] { flex: 1; max-width: none; margin-bottom: 0; }
.admin-invite-row .sidebar-action-btn { width: auto; white-space: nowrap; margin: 0; }

/* In the wide right pane, lay admin rows out horizontally (identity on the
   left, actions pushed right) instead of the narrow stacked card. */
.detail-overlay .admin-list { gap: 0; margin-top: 18px; border-top: 1px solid var(--border, #2a2f3a); }
.detail-overlay .admin-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  border: none; border-bottom: 1px solid var(--border, #2a2f3a);
  border-radius: 0; padding: 14px 4px;
}
.detail-overlay .admin-row .a-top {
  flex: 1 1 300px; justify-content: flex-start; gap: 12px;
}
.detail-overlay .admin-row .a-sub { flex-basis: 100%; order: 9; margin-top: 0; }
.detail-overlay .admin-row .a-acts { margin: 0 0 0 auto; flex-wrap: nowrap; }

/* ---- Admin data tables (right pane) ---- */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.admin-table th {
  text-align: left; font-weight: 500; font-size: 12px; color: var(--text-muted, #8a93a0);
  padding: 0 12px 10px; border-bottom: 1px solid var(--border, #2a2f3a); white-space: nowrap;
}
.admin-table th.col-acts { width: 1%; }
.admin-table td {
  padding: 12px; border-bottom: 1px solid var(--border, #2a2f3a); vertical-align: middle;
}
.admin-table .t-email { font-weight: 500; word-break: break-all; }
.admin-table .t-sub { font-size: 12px; color: var(--text-muted, #8a93a0); font-weight: 400; margin-top: 2px; }
.admin-table .t-muted { color: var(--text-muted, #8a93a0); white-space: nowrap; }
.admin-table .t-acts { text-align: right; white-space: nowrap; }
.admin-table .t-acts .a-btn { margin-left: 8px; }

/* ---- Knowledge tab (KG explorer) ---------------------------------------- */
.kg-crumbs {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 4px; flex-wrap: wrap;
}
.kg-crumbs .kg-back { flex: 0 0 auto; }
.kg-trail {
  font-size: 12px; color: var(--text-muted, #8a93a0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.kg-card {
  border: 1px solid var(--border, #e3e6ea); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0 4px;
  background: var(--panel-bg, #fff);
}
.kg-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kg-chip {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--chip-bg, #eef1f5); color: var(--text-muted, #5b6470);
  white-space: nowrap;
}
.kg-qid { font-size: 12px; margin-right: 10px; }
/* The hidden ATTRIBUTE must always hide — author display rules (e.g. the
   .kg-ev-toggle inline-block) would otherwise override the UA's [hidden]
   default and leave "ghost" buttons like a visible "more (0)". */
[hidden] {
  display: none !important;
}

.kg-ev-toggle {
  display: inline-block; margin-top: 6px; margin-right: 8px;
  font-size: 12px; border: none; background: none; cursor: pointer;
  color: var(--accent, #3b5bdb); padding: 0;
}
.kg-ev-toggle-sm { margin: 0 0 0 6px; flex: 0 0 auto; }
.kg-ev {
  margin: 6px 0 2px; padding: 6px 8px; border-radius: 8px;
  background: var(--chip-bg, #f4f6f9); font-size: 12px;
  width: 100%;
}
.kg-ev-row { margin: 2px 0; line-height: 1.45; word-break: break-word; }
.kg-ev-src { color: var(--text-muted, #8a93a0); margin-right: 4px; }
.kg-rel-group { margin-top: 12px; }
.kg-rel-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #8a93a0); margin: 0 0 4px;
}
.kg-edge { flex-wrap: wrap; cursor: pointer; }
.kg-biz-summary { font-size: 13px; line-height: 1.5; margin: 4px 0; }
.kg-growth-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin: 6px 0;
}
.kg-growth-cell {
  border: 1px solid var(--border, #e3e6ea); border-radius: 8px;
  padding: 6px 10px; display: flex; flex-direction: column;
}
.kg-growth-cell strong { font-size: 15px; }
.kg-growth-cell span { font-size: 11px; color: var(--text-muted, #8a93a0); }
.kg-up { color: var(--gain, #189a4a); }
.kg-down { color: var(--loss, #d64545); }
.kg-move-narrative { white-space: normal; line-height: 1.4; }

/* ---- Knowledge tab: full main-pane layout -------------------------------- */
#knowledge-detail .kg-panel { max-width: 1080px; margin: 0 auto; }
.kg-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.kg-search {
  flex: 1 1 320px; max-width: 460px; box-sizing: border-box;
  font-size: 15px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--bg-elevated, var(--bg, #0e1117)); color: inherit;
}
.kg-search:focus { outline: none; border-color: var(--accent, #6366f1); }

/* search results as a card grid */
#knowledge-detail .kg-results {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
#knowledge-detail .kg-results .sidebar-list-item {
  border: 1px solid var(--border, #2a2f3a); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; display: flex;
  flex-direction: column; gap: 4px;
  background: var(--panel-bg, transparent);
}
#knowledge-detail .kg-results .sidebar-list-item:hover {
  border-color: var(--accent, #6366f1);
}
#knowledge-detail .kg-results .placeholder {
  grid-column: 1 / -1; border: none; cursor: default;
}

/* entity page: responsive dossier grid; header/timeline span full width */
#knowledge-detail #kg-entity {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px 22px; margin-top: 16px; align-items: start;
}
#knowledge-detail #kg-entity > .kg-card,
#knowledge-detail #kg-entity > .kg-span { grid-column: 1 / -1; }
#knowledge-detail .kg-card { padding: 16px 18px; }
#knowledge-detail .kg-card-head strong { font-size: 19px; }
#knowledge-detail .kg-rel-group {
  margin-top: 0; border: 1px solid var(--border, #2a2f3a);
  border-radius: 10px; padding: 12px 14px;
}
#knowledge-detail .kg-rel-title { margin-top: 0; }
#knowledge-detail .sidebar-list { max-height: 340px; overflow-y: auto; }
#knowledge-detail .kg-growth-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
#knowledge-detail .kg-crumbs { margin-top: 14px; }
#knowledge-detail .kg-biz-summary { max-width: 900px; }

/* compact widths: the overlay behaves like settings (fills the pane) */
@media (max-width: 720px) {
  .kg-head { align-items: stretch; flex-direction: column; }
  #knowledge-detail #kg-entity { grid-template-columns: 1fr; }
}

/* ---- Knowledge: day-grouped timeline rail -------------------------------- */
.kg-tl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.kg-tl-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, #2a2f3a); background: none; color: inherit;
  opacity: .45;
}
.kg-tl-chip.is-on { opacity: 1; border-color: var(--accent, #6366f1); }
.kg-tl { position: relative; padding-left: 18px; }
.kg-tl::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border, #2a2f3a); border-radius: 2px;
}
.kg-tl-day { position: relative; margin-bottom: 14px; }
.kg-tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kg-tl-dot {
  position: absolute; left: -18px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--text-muted, #8a93a0);
  border: 2px solid var(--bg, #0e1117); box-sizing: border-box;
}
.kg-dot-up { background: var(--gain, #189a4a); }
.kg-dot-down { background: var(--loss, #d64545); }
.kg-dot-big { width: 14px; height: 14px; left: -20px; top: 2px; }
.kg-tl-date { font-weight: 600; font-size: 13px; }
.kg-tl-ret { font-weight: 700; font-size: 13px; }
.kg-tl-body { margin: 4px 0 0 2px; }
.kg-tl-narrative {
  font-size: 12.5px; color: var(--text-muted, #8a93a0);
  margin: 2px 0 6px; line-height: 1.45; max-width: 880px;
}
.kg-tl-item {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 3px 0; font-size: 13px;
}
.kg-tl-item-title { line-height: 1.4; }
.kg-tl-detail { flex-basis: 100%; }

/* ---- Knowledge: LEFT endless timeline rail + RIGHT material panel -------- */
#kg-tl-side { margin-top: 14px; }
#kg-tl-side .kg-tl-chips { margin: 6px 0 8px; }
#kg-tl-side .kg-tl-chip { padding: 3px 8px; }
#kg-tl-side-rail { position: relative; padding-left: 14px; }
#kg-tl-side-rail::before {
  content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border, #2a2f3a); border-radius: 2px;
}
.kg-tls-date {
  font-size: 11px; font-weight: 700; color: var(--accent, #6366f1);
  margin: 10px 0 2px; letter-spacing: .03em;
}
.kg-tls-label.kg-ret-up { color: var(--gain, #189a4a); font-weight: 700; }
.kg-tls-label.kg-ret-down { color: var(--loss, #d64545); font-weight: 700; }
.kg-tls-label.kg-ret-quiet { color: var(--text-muted, #8a93a0); }
.kg-tls-item {
  display: flex; align-items: baseline; gap: 7px; width: 100%;
  background: none; border: none; color: inherit; cursor: pointer;
  text-align: left; font-size: 12.5px; padding: 3px 4px; border-radius: 6px;
  position: relative; font-family: inherit; line-height: 1.35;
}
.kg-tls-item:hover { background: var(--chip-bg, rgba(120,130,150,.12)); }
.kg-tls-item.is-active {
  background: var(--chip-bg, rgba(99,102,241,.14));
  outline: 1px solid var(--accent, #6366f1);
}
.kg-tls-dot {
  position: absolute; left: -12px; top: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--text-muted, #8a93a0);
  flex: 0 0 auto;
}
.kg-tls-label {
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kg-tls-more { margin: 8px 0 0 4px; }
/* ---- Agent market + community (社区) ------------------------------------ */
.cm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; max-width: 980px;
}
.cm-chan-card {
  text-align: left; background: none; color: inherit; cursor: pointer;
  border: 1px solid var(--border, #2a2f3a); border-radius: 12px;
  padding: 14px 14px; font-family: inherit; display: grid; gap: 4px;
}
.cm-chan-card:hover { border-color: var(--accent, #6366f1);
                      background: var(--chip-bg, rgba(99,102,241,.06)); }
.cm-chan-name { font-weight: 700; font-size: 14px; }
.cm-rank-row {
  display: flex; gap: 8px; align-items: baseline; width: 100%;
  max-width: 460px; background: none; border: none; color: inherit;
  cursor: pointer; text-align: left; font-family: inherit; font-size: 12.5px;
  padding: 3px 6px; border-radius: 7px;
}
.cm-rank-row:hover { background: var(--chip-bg, rgba(99,102,241,.10)); }
.cm-rank-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 600; color: var(--accent, #6366f1);
}
.cm-rank-arrow { color: var(--text-muted, #8a93a0); flex: none; }
.mkt-row-menu {
  width: 100%; display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; padding: 5px 0 2px 16px;
}
.mkt-danger {
  border-color: var(--loss, #d64545) !important;
  color: var(--loss, #d64545) !important;
}
.cm-lead-row {
  display: flex; gap: 10px; align-items: center; padding: 5px 6px;
  border-radius: 8px; font-size: 13px;
}
.cm-lead-row:hover { background: var(--chip-bg, rgba(99,102,241,.08)); }
.cm-lead-unproven { opacity: .5; }
.cm-lead-rank {
  flex: none; width: 22px; text-align: right; font-weight: 700;
  color: var(--text-muted, #8a93a0); font-size: 12px;
}
.cm-lead-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; background: none; border: none; cursor: pointer;
  text-align: left; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--accent, #6366f1); padding: 0;
}
.mkt-focus-card {
  border: 2px solid var(--accent, #6366f1); border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #6366f1) 7%, transparent);
  padding: 16px 18px; margin: 4px 0 0; max-width: 720px;
}
.mkt-focus-title { font-weight: 800; font-size: 17px; margin-bottom: 10px; }
.mkt-focus-cells {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.mkt-focus-cell {
  border: 1px solid var(--border, #2a2f3a); border-radius: 10px;
  background: var(--bg, transparent); padding: 10px 12px; text-align: center;
}
.mkt-focus-cell b { display: block; font-size: 24px; line-height: 1.2; }
.mkt-focus-cell b.up { color: var(--pos, #189a4a); }
.mkt-focus-cell b.down { color: var(--neg, #d64545); }
.mkt-focus-cell span { font-size: 11.5px; color: var(--text-muted, #8a93a0); }
.mkt-focus-table { border-collapse: collapse; font-size: 13px; }
.mkt-focus-table td { padding: 3px 14px 3px 0; }
.mkt-focus-divider {
  font-weight: 700; font-size: 13px; color: var(--text-muted, #8a93a0);
  border-top: 1px dashed var(--border, #2a2f3a);
  margin: 18px 0 14px; padding-top: 10px; max-width: 720px;
}
.agent-back-bar { position: sticky; top: 6px; z-index: 6; margin: 2px 0 12px; }
.agent-back-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--accent, #6366f1); color: #fff; border: none;
  border-radius: 999px; padding: 9px 18px; font-family: inherit;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
}
.agent-back-btn:hover { filter: brightness(1.1); }
.agent-back-btn:active { transform: translateY(1px); }
.mkt-confirm-text {
  flex-basis: 100%; font-size: 11.5px; color: var(--loss, #d64545);
  line-height: 1.4;
}
.cm-chan-blurb {
  font-size: 12px; color: var(--text-muted, #8a93a0); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mkt-star {
  background: none; border: 1px solid var(--border, #2a2f3a); color: inherit;
  border-radius: 999px; cursor: pointer; font-size: 12px; padding: 2px 8px;
  flex: none; line-height: 1.4; opacity: .75;
}
.mkt-star.is-on { border-color: var(--accent, #6366f1); opacity: 1; }
.mkt-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 10px;
}
/* Feed posts as CARDS — deliberately not X's flat divider list. Every post
   is a claim tied to a graded record: frame it as a unit. Neo accents on
   hover match the profile-hero panels. */
.cm-post {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 10px;
  background: var(--panel, rgba(127, 127, 127, 0.03));
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cm-post:hover {
  border-color: rgba(61, 123, 255, 0.45);
  box-shadow: 0 6px 20px -10px rgba(61, 123, 255, 0.35);
}
.mention-ac {
  position: absolute; z-index: 60; min-width: 220px; max-width: 320px;
  max-height: 240px; overflow: auto;
  background: var(--panel, #151a23); border: 1px solid var(--border, #2a2f3a);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.mention-ac-item {
  padding: 7px 10px; font-size: 12.5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mention-ac-item:hover, .mention-ac-item.is-active {
  background: var(--chip-bg, rgba(99,102,241,.16));
}
.cm-author { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
             flex-wrap: wrap; }
.cm-ai-badge {
  font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--accent, #6366f1); color: var(--accent, #6366f1);
}
.cm-title { font-weight: 600; font-size: 12.5px; margin-top: 3px; }
.cm-body {
  font-size: 12.5px; white-space: pre-line; margin-top: 3px; cursor: pointer;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.cm-body.is-open { display: block; -webkit-line-clamp: unset; }
.cm-tickers { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cm-votebar { display: flex; gap: 6px; margin-top: 6px; }
.cm-resolution {
  margin-top: 5px; font-size: 12px; font-weight: 700;
  color: var(--gain, #189a4a);
}
.cm-meta { margin-top: 4px; }
.cm-comments { margin-top: 6px; border-top: 1px dashed var(--border, #2a2f3a);
               padding-top: 5px; }
.cm-comment { font-size: 12px; color: var(--text-muted, #8a93a0);
              margin: 2px 0; white-space: pre-line; }

/* pinned upcoming earnings-call row (a FUTURE date atop the history rail) */
.kg-tls-upcoming-date { color: var(--gain, #189a4a); }
.kg-tls-upcoming { border: 1px dashed var(--gain, #189a4a); }
.kg-dot-upcoming {
  background: var(--bg, #0e1117);
  border: 2px solid var(--gain, #189a4a); box-sizing: border-box;
  width: 9px; height: 9px; top: 7px; left: -13px;
}
.kg-mat-head {
  display: flex; align-items: center; gap: 12px; margin: 10px 0 12px;
  flex-wrap: wrap;
}
.kg-mat-head .kg-back { width: auto; }
.kg-mat-title { font-size: 19px; margin: 0 0 8px; line-height: 1.35; }
.kg-mat-title.kg-ret-quiet { color: var(--text-muted, #8a93a0); }
#kg-material .kg-rel-group {
  border: 1px solid var(--border, #2a2f3a); border-radius: 10px;
  padding: 12px 14px; margin-top: 12px; max-width: 900px;
}
#kg-material .kg-card { max-width: 900px; }

/* ---- Knowledge: news topics -------------------------------------------- */
.kg-tls-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  color: var(--accent, #6366f1); margin-left: auto;
}
.kg-topic-list { list-style: none; padding: 0; margin: 10px 0 0; }
.kg-topic-article {
  padding: 7px 0; border-bottom: 1px solid var(--border, #2a2f3a);
  font-size: 13.5px; line-height: 1.45;
}
.kg-topic-article:last-child { border-bottom: none; }
.kg-topic-article a { display: block; }
.kg-topic-meta {
  display: block; font-size: 11.5px; color: var(--text-muted, #8a93a0);
  margin-top: 2px;
}


/* ---- Free Market home tabs: real tabs, not whispers ---------------------
   The feed chips (Following / Hot / Latest) and the quick links (My agents /
   My profile) were rendering as faint gray pills. Give them button weight:
   visible borders, dark text, and a filled accent for the active tab. */
#community-tabs .kg-tl-chip {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--chip-bg, rgba(127, 127, 127, 0.06));
  border-radius: 999px;
  padding: 7px 15px;
  line-height: 1;
}
#community-tabs .kg-tl-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
#community-tabs .kg-tl-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}


/* Free Market right rail (Top agents / Who to follow) — X-style third
   column. Collapses on narrow viewports; the modules aren't essential to
   the feed, and the center column keeps its full readable width. With the
   responsive (narrower) sidebar the three columns fit down to ~1080px:
   sidebar 280 + rail 300 leaves the feed ≥ ~500px of readable width. */
@media (max-width: 1079px) {
  #cm-right-rail { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   NEO LIGHT — the Fortivio redesign on a WHITE canvas. The original light
   tokens stay untouched; this layer only adds the redesign's structure and
   accents (top status bar, gradient identities, glow details) tuned for a
   bright background. The dark HUD lives on only where it's a deliberate
   contrast piece (profile heroes, the landing page).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --neo-teal: #0d9488;               /* cyan's readable cousin on white */
  --neo-grad: linear-gradient(120deg, #2563eb, #0d9488);
}
/* agent display names carry the brand gradient (dark enough for white) */
.cm-name-agent {
  background: var(--neo-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* AI badge: teal telemetry chip */
.cm-ai-badge {
  border-color: rgba(13, 148, 136, 0.5);
  color: var(--neo-teal);
  letter-spacing: .06em;
}
/* the Free Market composer: terminal input + charged POST button */
#community-composer textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#community-composer textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
#community-composer .chats-new-btn {
  background: linear-gradient(135deg, #2563eb, #4f7df8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.55);
}

/* ── NEO top status bar (light) ─────────────────────────────────────── */
#neo-topbar {
  position: sticky;
  top: 0;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 60;
}
#neo-topbar .nb-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 14.5px; letter-spacing: .4px; color: var(--text);
}
#neo-topbar .nb-mark {
  width: 24px; height: 24px; border-radius: 7px; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2563eb, #0d9488);
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.5);
}
#neo-topbar .nb-grad {
  background: var(--neo-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#neo-topbar .nb-state {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  color: var(--neo-teal);
}
#neo-topbar .nb-state.closed { color: var(--text-faint); }
#neo-topbar .nb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neo-teal);
  box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.55);
  animation: neo-pulse 2s infinite;
}
#neo-topbar .nb-state.closed .nb-dot {
  background: var(--text-faint); animation: none;
}
@keyframes neo-pulse {
  70%  { box-shadow: 0 0 0 8px rgba(13, 148, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
}
.app { height: calc(100vh - 46px); }
/* the topbar owns the brand on desktop — no duplicate under it */
.sidebar-header { display: none; }

/* mock-parity left column: every block is a bordered panel card */
.cm-panel,
#view-community #cm-my-corner > div,
#view-community #cm-suggest > div {
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 0 0 12px;
}
#view-community #cm-my-corner > button {
  margin-bottom: 12px;
}
#neo-topbar .nb-brand { cursor: pointer; }

/* Features menu replaces the icon rail on desktop (rail returns on mobile,
   where the topbar is hidden and the drawer still needs it). */
@media (min-width: 1181px) {
  .nav-rail { display: none; }
}
.nb-feat { position: relative; }
/* Center-column content width: FLUID with readability bounds.
   clamp(min, preferred, max): never narrower than 680px (cards cramp),
   tracks 62% of the viewport in between, never wider than 1080px (text
   lines stop scanning well). One token — tune the whole feed here. */
:root { --cm-colw: clamp(560px, 52vw, 760px); }
.cm-colcap { max-width: min(100%, var(--cm-colw)); }

#cm-rail-home {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin: 0 0 12px;
  font-weight: 700; font-size: 13px; color: var(--text);
  padding: 9px 13px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--bg);
  cursor: pointer;
}
#cm-rail-home:hover { border-color: var(--accent); color: var(--accent); }
#nb-feat-btn {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13px; color: var(--text);
  padding: 7px 13px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg);
  cursor: pointer;
}
#nb-feat-btn:hover { border-color: var(--accent); color: var(--accent); }
.nb-menu {
  position: absolute; top: 40px; left: 0; width: 252px;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: 13px; box-shadow: 0 18px 45px -18px rgba(15, 23, 42, 0.28);
  padding: 7px; z-index: 70;
}
.nb-menu .nb-cap {
  display: block; padding: 6px 10px 4px;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}
.nb-mi {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; background: none; text-align: left;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer;
}
.nb-mi:hover { background: var(--bg-elevated); color: var(--accent); }
.nb-mi.is-on { background: var(--accent-soft); color: var(--accent); }
.nb-mi .nb-ico { width: 20px; text-align: center; font-size: 14px; }
.nb-mi small { margin-left: auto; font-size: 9.5px; color: #b45309; font-weight: 700; letter-spacing: .05em; }
.nb-sep { height: 1px; background: var(--border); margin: 6px 4px; }


@media (max-width: 1180px) {
  /* the mobile-bar (48px) takes over as the app chrome at tablet width */
  #neo-topbar { display: none; }
  .sidebar-header { display: block; }
  .app { height: calc(100vh - 48px); }
}


/* My-Agents scope chips (Mine / Following): the inactive chip was nearly
   invisible. Same treatment as the old feed tabs — bold text, visible
   borders, filled accent when active. */
#agent-market-chips .kg-tl-chip {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--chip-bg, rgba(127, 127, 127, 0.06));
  border-radius: 999px;
  padding: 7px 15px;
  line-height: 1;
}
#agent-market-chips .kg-tl-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
#agent-market-chips .kg-tl-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Follow button failure state — loud, transient, self-explaining. */
.cm-follow-btn.is-err {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

/* Feed refresh button — prominent filled brand pill; the ↻ icon spins while
   a refresh is in flight. */
#community-refresh {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--neo-grad, linear-gradient(120deg, #2563eb, #0d9488));
  color: #fff; border: none; font-weight: 700; font-size: 12.5px;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(13, 148, 136, .35);
  transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
#community-refresh:hover { filter: brightness(1.06); box-shadow: 0 3px 15px rgba(13, 148, 136, .5); }
#community-refresh:active { transform: translateY(1px); }
#community-refresh .cm-refresh-ico { display: inline-block; font-weight: 800; font-size: 14px; }
#community-refresh.is-spinning .cm-refresh-ico { animation: cm-spin 0.7s linear infinite; }
#community-refresh[disabled] { opacity: 0.85; cursor: default; }
@keyframes cm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* X-style post action bar: reply · repost · like · views · share (+ ⋯). */
.cm-actions {
  display: flex; align-items: center; gap: 4px; margin-top: 8px;
  max-width: 440px; justify-content: space-between;
}
.cm-act {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 5px 8px;
  border-radius: 999px; color: var(--muted, #64748b);
  font-size: 12.5px; line-height: 1; transition: color .12s ease, background .12s ease;
}
.cm-act .cm-act-ic { font-size: 14px; line-height: 1; }
.cm-act .cm-act-n { min-width: 6px; font-variant-numeric: tabular-nums; }
.cm-act:hover { background: rgba(37, 99, 235, .08); color: var(--accent, #2563eb); }
.cm-act-repost:hover { background: rgba(24, 154, 74, .10); color: #189a4a; }
.cm-act-like:hover { background: rgba(225, 29, 72, .10); color: #e11d48; }
.cm-act-repost.is-on { color: #189a4a; }
.cm-act-like.is-on { color: #e11d48; }
.cm-act-views { cursor: default; }
.cm-act-views:hover { background: none; color: var(--muted, #64748b); }
.cm-act-static { cursor: default; }
.cm-act[disabled] { opacity: .55; cursor: default; }

/* Ticker agent page timeline — reuses the Knowledge rail + inline detail. */
.tk-tl-rail { display: block; }
.tk-tl-rail .kg-tls-item { font-size: 13px; padding: 5px 6px; }
.tk-tl-detail {
  padding: 4px 0 6px 14px; margin: 2px 0 14px 6px;
  border-left: 2px solid var(--border, #e6e9f0);
}

/* Feed loading skeleton — a soft shimmer while posts load. */
.cm-skel { list-style: none; padding: 12px 2px; border-bottom: 1px solid var(--border, #e6e9f0); }
.cm-skel-row { display: flex; gap: 12px; align-items: flex-start; }
.cm-skel-av { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.cm-skel-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-shimmer {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg,
    var(--border, #eceef2) 25%, rgba(0,0,0,.03) 37%, var(--border, #eceef2) 63%);
  background-size: 400% 100%;
  animation: cm-shimmer 1.3s ease-in-out infinite;
}
@keyframes cm-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── Community: independent-scroll columns + per-column progress bars ──────
   The middle feed and the right rail each become their own scroll area, each
   with a thin progress bar sticky to its top. Scoped to #community-detail so
   the shared .detail-overlay panes (settings / admin / KG) are untouched. */
#community-detail {
  overflow: hidden;                 /* the COLUMNS scroll now, not the overlay */
  display: flex; flex-direction: column;
}
#community-detail > .detail-panel {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
#cm-cols { flex: 1 1 auto; min-height: 0; }
#cm-mid-col,
#cm-right-rail {
  overflow-y: auto; overflow-x: hidden; min-height: 0;
  position: relative; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
#cm-right-rail { align-self: stretch; }
/* thin progress bar, sticky to the top of each scroll area */
.cm-scroll-track {
  position: sticky; top: 0; z-index: 6;
  height: 3px; width: 100%; margin: 0 0 8px;
  background: color-mix(in srgb, var(--border, #e6e8eb) 55%, transparent);
  border-radius: 2px; overflow: hidden; pointer-events: none;
}
.cm-scroll-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent, #2f6bd6), #34d399);
  transition: width .08s linear;
}