/* ARKWOOD FIU - Dark Terminal Theme */

/* Login page background + glow (was inline in login.html) */
body.login-page { background: #0a0f1a; }
.glow { box-shadow: 0 0 20px rgba(59, 130, 246, 0.15); }

:root {
    --bg-primary: #0a0f1a;
    --bg-secondary: #111827;
    --bg-card: #1a2332;
    --border: #2d3748;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;  /* slate-300 — bumped for WCAG AA on dark bg */
    --text-muted: #94a3b8;       /* slate-400 — was #64748b which fails AA  */
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-yellow: #f59e0b;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Chat */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    position: relative;  /* anchor for .chat-jump-to-latest */
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.chat-input-area {
    border-top: 1px solid var(--border);
    padding: 1rem;
    background: var(--bg-secondary);
}

/* Single-row textarea that auto-grows as the user types. */
.chat-input {
    resize: none;
    min-height: 48px;
    max-height: 150px;
    line-height: 1.4;
    overflow-y: auto;
    font-family: inherit;
}

/* Floating "jump to latest" pill, shown only when the reader is scrolled away. */
.chat-jump-to-latest {
    position: absolute;
    bottom: 90px;
    right: 1.5rem;
    background: var(--accent-blue);
    color: white;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 10;
    cursor: pointer;
    transition: background 0.15s;
}

.chat-jump-to-latest:hover {
    background: #2563eb;
}

.message-user {
    background: #1e3a5f;
    border-radius: 12px 12px 4px 12px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    max-width: 80%;
    margin-left: auto;
}

/* Preserve Shift+Enter newlines in the user-message body without picking up
   indentation whitespace from the surrounding template. */
.message-user-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Light-italic until the server commits the user message. */
.message-pending {
    opacity: 0.6;
    font-style: italic;
}

/* Per-message wrapper holds chip-row, bubble, role label, action buttons. */
.message-wrapper {
    display: flex;
    flex-direction: column;
}
.message-wrapper-user {
    align-items: flex-end;
}
.message-wrapper-assistant,
.message-wrapper-error {
    align-items: flex-start;
}

/* Error bubble — clearly distinct from a real assistant response. */
.message-error {
    background: #2a1010;
    border: 1px solid #b91c1c;
    color: #fecaca;
    border-radius: 12px 12px 12px 4px;
    padding: 0.6rem 1rem;
    margin: 0.5rem 0;
    max-width: 80%;
    font-size: 0.9rem;
}
.message-error-text::before {
    content: "⚠ ";
}

/* Role label + action row sit below each bubble. */
.message-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0.25rem 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}
.message-wrapper:hover .message-meta {
    opacity: 1;
}
.message-wrapper-user .message-meta {
    flex-direction: row-reverse;  /* role label on the right; actions to its left */
}
.message-role {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.message-actions {
    display: flex;
    gap: 0.25rem;
}
.msg-action {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.msg-action:hover:not(:disabled) {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}
.msg-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.copied-flash {
    color: var(--accent-green);
    font-size: 0.7rem;
    font-weight: 500;
}

/* Settings panel rows. */
.settings-row { padding: 0.5rem 0; }
.settings-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}
.settings-checkbox { width: 16px; height: 16px; accent-color: var(--accent-blue); }
.settings-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 1.5rem;
    line-height: 1.4;
}

/* "Show context" details block above each assistant response. */
.chat-prompt-details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0.5rem 0 0.25rem 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 80%;
}
.chat-prompt-details summary {
    cursor: pointer;
    user-select: none;
    color: var(--text-primary);
    list-style: revert;  /* show the disclosure triangle */
}
.chat-prompt-pre {
    margin: 0.5rem 0 0 0;
    padding: 0.5rem;
    background: var(--bg-primary);
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Cap chat content width on wide screens; scrollbar stays at viewport edge. */
.chat-messages-inner,
.chat-input-area-inner {
    max-width: 48rem;  /* 768px, matches Tailwind max-w-3xl */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Send-button keyboard hint pill. */
.chat-kbd {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 0.85em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    line-height: 1;
}

/* Char/token meta line below the input. */
.chat-input-meta {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
    min-height: 1em;  /* avoid layout jitter when toggling between states */
}
.chat-input-warn { color: #fbbf24; }  /* amber when approaching the 8000-char limit */
.chat-input-usage { color: var(--text-muted); }

/* "Show earlier messages" pagination button at top of chat. */
.show-earlier-btn {
    display: block;
    margin: 0.5rem auto 1rem;
    padding: 0.4rem 1rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.show-earlier-btn:hover,
.show-earlier-btn:focus-visible {
    border-color: var(--accent-blue);
    background: var(--bg-secondary);
    outline: none;
}
.show-earlier-loading { cursor: default; opacity: 0.7; }

/* Sparkline next to a chat-chip and inside a comparison card. */
.chat-chip { display: inline-flex; align-items: center; gap: 0.4rem; }
.chat-chip-sparkline { display: inline-flex; line-height: 0; }
.sparkline { vertical-align: middle; }

/* Comparison cards row — shown for "compare X vs Y" turns. */
.comparison-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.comparison-card {
    flex: 1 1 180px;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}
.comparison-symbol { font-weight: 600; color: var(--text-primary); }
.comparison-price { font-size: 0.95rem; margin-top: 0.15rem; display: flex; gap: 0.5rem; align-items: baseline; }
.comparison-score { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.2rem; }
.comparison-sparkline { margin-top: 0.3rem; }

/* Empty-state kickoff card: today's movers + top-rated. */
.kickoff-card {
    margin: 1rem auto 1.5rem;
    max-width: 36rem;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.8rem 1rem;
}
.kickoff-section + .kickoff-section { margin-top: 0.6rem; }
.kickoff-title {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}
.kickoff-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.kickoff-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.28rem 0.7rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.kickoff-pill:hover,
.kickoff-pill:focus-visible {
    border-color: var(--accent-blue);
    background: var(--bg-card);
    outline: none;
}
.kickoff-ticker { font-weight: 600; color: var(--text-primary); }
.kickoff-up { color: #22c55e; font-weight: 500; }
.kickoff-down { color: #f87171; font-weight: 500; }
.kickoff-score { color: var(--accent-blue); font-weight: 500; }

/* Citations: [1], [2] inside assistant markdown — hover for tooltip via title. */
.citation-link {
    color: var(--accent-blue);
    text-decoration: none;
    padding: 0 1px;
}
.citation-link:hover,
.citation-link:focus-visible { text-decoration: underline; outline: none; }

/* Score drill-down: click a "100/125" to pre-fill a "why?" prompt. */
.score-drill {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0 2px;
    border-bottom: 1px dashed var(--accent-blue);
    cursor: pointer;
}
.score-drill:hover,
.score-drill:focus-visible {
    color: var(--accent-blue);
    outline: none;
    border-bottom-style: solid;
}

/* Settings: model dropdown. */
.settings-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}
.settings-select:focus-visible { outline: none; border-color: var(--accent-blue); }

/* "+ watchlist" affordance on chips and comparison cards. */
.watchlist-add-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 9999px;
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.watchlist-add-btn:hover,
.watchlist-add-btn:focus-visible {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    outline: none;
    background: var(--bg-secondary);
}
.watchlist-add-chip { padding: 0 0.4rem; line-height: 1.1; }
.watchlist-on { font-size: 0.72rem; color: #22c55e; }
.comparison-card .watchlist-add-btn,
.comparison-card .watchlist-on { margin-top: 0.4rem; align-self: flex-start; }
.comparison-card { display: flex; flex-direction: column; }

/* Alert-proposal chip — surfaced when chat extracts a price-alert intent. */
.alert-proposal {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--accent-blue);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.alert-proposal-icon { font-size: 1.1rem; }
.alert-proposal-text { flex: 1; }
.alert-proposal-confirm {
    background: #2563eb;  /* blue-600, AA contrast vs white */
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.alert-proposal-confirm:hover,
.alert-proposal-confirm:focus-visible { background: #1d4ed8; outline: none; }
.alert-proposal-dismiss {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 0.3rem;
}
.alert-proposal-dismiss:hover,
.alert-proposal-dismiss:focus-visible { color: var(--text-primary); outline: none; }

/* Toast notifications: bottom-right corner, auto-fade. */
.toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    max-width: 22rem;
}
.toast-success { border-color: #22c55e; }
.toast-error { border-color: #f87171; }
.toast-warning { border-color: #f59e0b; }
.toast-info { border-color: #60a5fa; }
.toast-close {
    background: transparent; border: 0; color: var(--text-muted);
    font-size: 0.95rem; cursor: pointer; padding: 0 0.2rem;
}
.toast-close:hover, .toast-close:focus-visible { color: var(--text-primary); outline: none; }

/* Reports daily summary chips (rating + signal counts pulled from the CSV). */
.report-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}
.report-summary-label {
    color: var(--text-secondary);
    font-weight: 500;
    margin-right: 0.5rem;
}
.report-summary-sep {
    height: 1.1rem;
    width: 1px;
    background: var(--border);
    margin: 0 0.2rem;
}
.report-summary-signal {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 9999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.78rem;
}

/* Reports filter row (CSV only) — substring search over Ticker + Company. */
.report-filter-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.report-filter-input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    flex: 1;
    max-width: 22rem;
}
.report-filter-input:focus-visible { outline: none; border-color: var(--accent-blue); }
.report-filter-count { color: var(--text-muted); font-size: 0.8rem; }

/* Compare-with-prior-day toggle (Reports CSV only). */
.report-compare-toggle {
    display: flex; gap: 0.4rem; align-items: center;
    color: var(--text-secondary); font-size: 0.8rem;
    cursor: pointer; user-select: none;
    margin-left: auto;
}
.report-compare-toggle input[type=checkbox] { cursor: pointer; }

/* Diff badges in cells: ↑ green / ↓ red for numeric, • blue for text, ✨ for new. */
.diff-badge {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    vertical-align: 0.05rem;
}
.diff-up    { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.diff-down  { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.diff-changed { color: #60a5fa; background: rgba(96, 165, 250, 0.12); }
.diff-new   { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }

/* Generated-at + size caption row. */
.report-meta-row {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.report-meta-sep {
    width: 1px; height: 0.9rem; background: var(--border);
}

/* Inline loading state during file/date switch. */
.report-content-loading {
    display: flex; gap: 0.5rem; align-items: center; justify-content: center;
    color: var(--text-muted); padding: 2rem;
}
.report-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: report-spin 0.8s linear infinite;
}
@keyframes report-spin { to { transform: rotate(360deg); } }

/* Reports date selector: arrow nav + native datepicker + position label. */
.report-date-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.report-date-arrow {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}
.report-date-arrow:hover:not(:disabled),
.report-date-arrow:focus-visible {
    border-color: var(--accent-blue);
    background: var(--bg-secondary);
    outline: none;
}
.report-date-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.report-date-input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color-scheme: dark;  /* native datepicker on dark theme */
}
.report-date-input:focus-visible { outline: none; border-color: var(--accent-blue); }
.report-date-position {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: 0.5rem;
}
.report-date-all { margin-bottom: 1rem; color: var(--text-muted); font-size: 0.85rem; }
.report-date-all summary { cursor: pointer; padding: 0.2rem 0; }
.report-date-all summary:hover, .report-date-all summary:focus-visible {
    color: var(--text-secondary); outline: none;
}
.report-date-all button:focus-visible {
    outline: 2px solid var(--accent-blue); outline-offset: 2px;
}
.report-file-row button:focus-visible,
.report-file-row a:focus-visible {
    outline: 2px solid var(--accent-blue); outline-offset: 2px;
}
.report-file-row a { text-decoration: none; }

/* WCAG AA: text-gray-400 on hover bg-gray-700 is 3.96:1 — bump foreground
   to gray-300 on hover so contrast stays >= 4.5:1. */
.report-file-row [role=tab][aria-selected=false]:hover {
    color: var(--text-secondary);
}

/* File-tab row + download button live in the same flex container. */
.report-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.report-download-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}
.report-download-btn:hover, .report-download-btn:focus-visible {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: var(--bg-secondary);
    outline: none;
}

/* Keyboard users need to focus this region to scroll the wide CSV horizontally. */
.report-content-box:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Dark-theme palette for the report markdown's inline color spans (the raw
 * browser blue/red/green/orange fail WCAG AA on var(--bg-card)). */
.markdown-content .md-color-blue { color: #60a5fa; }
.markdown-content .md-color-red { color: #f87171; }
.markdown-content .md-color-green { color: #4ade80; }
.markdown-content .md-color-orange { color: #fb923c; }

/* Cap line length for markdown text blocks; tables/pre keep natural width. */
.markdown-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) {
    max-width: 72ch;
}
.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 1rem 0;
}
.markdown-content thead th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-align: left;
    padding: 0.5rem;
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    z-index: 1;
}
.markdown-content tbody td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.markdown-content tbody tr:hover { background: var(--bg-card); }

/* Stops a wide nav from horizontally scrolling the whole page on phones;
 * inner overflow-x:auto containers keep their own scrollbars. */
html, body { overflow-x: clip; }

/* hljs's theme handles token colors; this rule just sizes the block. */
.markdown-content pre code.hljs {
    display: block;
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Sessions modal — session list inside the dialog. */
.session-new-btn {
    background: #2563eb;  /* blue-600; passes WCAG AA (4.6:1) vs white */
    color: white;
    border: 0;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0.75rem;
    align-self: flex-start;
}
.session-new-btn:hover { background: #2563eb; }

.session-list {
    list-style: none;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    flex: 1;
}
.session-list > li {
    margin-bottom: 0.4rem;
}
.session-item {
    width: 100%;
    text-align: left;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.session-item:hover,
.session-item:focus-visible {
    border-color: var(--accent-blue);
    background: var(--bg-secondary);
    outline: none;
}
.session-item-current {
    border-color: var(--accent-blue);
    background: var(--bg-secondary);
}
.session-item-title {
    font-size: 0.9rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.session-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Toolbar: New chat + Delete all sit on one row. */
.session-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.session-toolbar .session-new-btn {
    margin-bottom: 0;
}
.session-delete-all-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-left: auto;
}
.session-delete-all-btn:hover {
    color: #fca5a5;
    border-color: #f87171;
}
.session-delete-all-btn:focus-visible {
    color: #fca5a5;
    border-color: #f87171;
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}
.session-delete-all-confirm {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

/* Per-row trash icon + inline confirm. */
.session-row {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.session-row > .session-item { flex: 1; }
.session-delete-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 0.6rem;
    font-size: 1rem;
    cursor: pointer;
}
.session-delete-btn:hover {
    color: #fca5a5;
    border-color: #f87171;
}
.session-delete-btn:focus-visible {
    color: #fca5a5;
    border-color: #f87171;
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}
.session-delete-confirm {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.session-delete-yes {
    background: #b91c1c;  /* red-700; AA on white */
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.session-delete-yes:hover { background: #991b1b; }
.session-delete-yes:focus-visible {
    background: #991b1b;
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}
.session-delete-no {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.session-delete-no:hover { background: var(--bg-secondary); }
.session-delete-no:focus-visible {
    background: var(--bg-secondary);
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Per-turn ticker chip-row above the assistant bubble. */
.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0.25rem 0;
}

.chat-chip {
    display: inline-block;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Fetching-live-data indicator — same chip-row line as the eventual context. */
.chat-fetching {
    display: inline-block;
    background: var(--bg-card);
    color: #93c5fd;  /* blue-300; passes WCAG AA on bg-card without animation dimming */
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.2rem 0.8rem;
    font-size: 0.78rem;
    margin: 0.5rem 0 0.25rem 0;
}

/* Empty-state suggestion chips. */
.empty-state-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.empty-state-chip {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.empty-state-chip:hover {
    border-color: var(--accent-blue);
    background: var(--bg-secondary);
}

/* Slim streaming progress bar above the input area. */
.chat-progress {
    height: 2px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.chat-progress-fill {
    height: 100%;
    background: var(--accent-blue);
    transition: width 0.15s ease-out;
}

.message-assistant {
    background: var(--bg-card);
    border-radius: 12px 12px 12px 4px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    max-width: 80%;
}

.message-assistant pre {
    background: #0d1117;
    border-radius: 6px;
    padding: 0.75rem;
    overflow-x: auto;
    font-size: 0.85rem;
}

.message-assistant code {
    font-size: 0.85rem;
}

.message-assistant table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
}

.message-assistant th,
.message-assistant td {
    border: 1px solid var(--border);
    padding: 0.5rem;
    text-align: left;
}

.message-assistant th {
    background: var(--bg-secondary);
}

/* Scores table */
.scores-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.scores-table th {
    background: var(--bg-secondary);
    padding: 0.5rem;
    text-align: left;
    border-bottom: 2px solid var(--border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.scores-table th:hover { background: var(--bg-card); }
.scores-table th:focus-visible {
    background: var(--bg-card);
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.scores-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.scores-table tr:hover {
    background: var(--bg-card);
}

/* Sticky first column (Ticker). :first-of-type because Alpine's <template
   x-for> sits as a real first child inside the <tr>, ahead of the cells. */
.scores-table th:first-of-type,
.scores-table td:first-of-type {
    position: sticky;
    left: 0;
    background: var(--bg-secondary);
    z-index: 1;
    border-right: 1px solid var(--border);
}
.scores-table tr:hover td:first-of-type { background: var(--bg-card); }

/* Fade existing content while a refresh is in flight. */
.report-content-box.is-loading {
    opacity: 0.6;
    transition: opacity 0.15s ease-out;
}

/* Right-edge gradient on the CSV content box hints there's more to scroll. */
.report-content-box.has-csv {
    position: relative;
}
.report-content-box.has-csv::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, rgba(10, 15, 26, 0.85));
    pointer-events: none;
    border-radius: 0 0.75rem 0.75rem 0;
}

/* Right-align + tabular figures so column digits stack cleanly. */
.scores-table th.col-num,
.scores-table td.col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Rating badges: white on -700/-800 backgrounds for AA-compliant contrast. */
.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #ffffff;
}
.badge-strong-buy { background: #047857; }  /* emerald-700 + white */
.badge-buy { background: #15803d; }          /* green-700   + white */
.badge-hold { background: #1d4ed8; }         /* blue-700    + white */
.badge-sell { background: #b91c1c; }         /* red-700     + white */
.badge-strong-sell { background: #7f1d1d; }  /* red-800     + white */

.badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Portfolio */
.pnl-positive { color: var(--accent-green); }
.pnl-negative { color: var(--accent-red); }

/* Tab navigation */
.tab-active {
    border-bottom: 2px solid var(--accent-blue);
    color: var(--accent-blue);
}

.tab-inactive {
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
}

.tab-inactive:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-muted);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Typing indicator */
.typing-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* Markdown content in reports */
.markdown-content h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.markdown-content h2 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 0.5rem; color: #60a5fa; /* blue-400; ~6:1 vs bg-card, passes AA */ }
.markdown-content h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
.markdown-content p { margin: 0.5rem 0; line-height: 1.6; }
.markdown-content ul, .markdown-content ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.markdown-content li { margin: 0.25rem 0; }
.markdown-content hr { border-color: var(--border); margin: 1rem 0; }

/* Print: light palette, hide chrome (nav, date selector, file tabs, filter), let tables flow. */
@media print {
    html, body { background: white !important; color: black !important; }
    nav, .report-date-row, .report-date-all, .report-file-row,
    .report-filter-row, .toast, .alert-proposal { display: none !important; }
    .report-content-box {
        background: white !important;
        border: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .scores-table th { background: #eee !important; color: black !important; }
    .scores-table td { color: black !important; border-color: #ccc !important; }
    .badge { color: black !important; background: transparent !important; border: 1px solid #888 !important; }
    .markdown-content { color: black !important; }
    .markdown-content h1, .markdown-content h2, .markdown-content h3 { color: black !important; }
    .markdown-content table { color: black !important; }
    .markdown-content thead th { background: #eee !important; color: black !important; }
    h1, h2 { page-break-after: avoid; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
}

/* ============================================================
   Trading Agents tab (Phase B3).
   Original styles prototyped in trading-agents-preview.html.
   Mockup-only rules (.ta-mock-bar) are NOT carried over here.
   ============================================================ */

.ta-page {
    max-width: 64rem;
    margin: 0 auto;
    padding: 1rem;
}

.ta-summary-row {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}
.ta-summary-row strong { color: #e2e8f0; }

.ta-card {
    background: #111827;
    border: 1px solid #2d3748;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.ta-card-title {
    color: #60a5fa;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #2d3748;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ta-form {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    gap: 0.75rem 0.75rem;
    align-items: center;
    font-size: 0.9rem;
}
.ta-form label { color: #cbd5e1; }
.ta-form input, .ta-form select {
    background: #1a2332;
    border: 1px solid #2d3748;
    color: #e2e8f0;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.ta-form input:focus, .ta-form select:focus,
.ta-form-readonly:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-color: #3b82f6;
}
.ta-form-readonly {
    background: #1a2332;
    border: 1px dashed #2d3748;
    color: #cbd5e1;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: default;
    font-variant-numeric: tabular-nums;
    display: inline-block;
}
.ta-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}
.ta-est-cost { color: #94a3b8; font-size: 0.8rem; }
.ta-run-btn {
    background: #2563eb;
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.ta-run-btn:hover { background: #1d4ed8; }
.ta-run-btn:disabled {
    background: #374151;
    color: #9ca3af;
    cursor: not-allowed;
}

.ta-progress-card {
    background: #111827;
    /* M12 — brighter blue + halo so the active run reads as "active"
       at a glance, not as another idle card. */
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.ta-cancel-btn {
    background: transparent;
    color: #f87171;
    border: 1px solid #b91c1c;
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.ta-cancel-btn:hover { background: #1f1316; color: #fca5a5; }
.ta-cancel-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.ta-progress-table { width: 100%; font-size: 0.85rem; }
.ta-progress-table thead th {
    color: #94a3b8;
    text-align: left;
    font-weight: 500;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #2d3748;
}
.ta-progress-table tbody td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid #1f2937;
}
.ta-progress-table tfoot td {
    padding: 0.6rem;
    font-weight: 600;
    color: #e2e8f0;
}
.ta-progress-status { display: inline-block; width: 1.2rem; text-align: center; }
.ta-progress-status.done { color: #4ade80; }
.ta-progress-status.running { color: #fbbf24; }
.ta-progress-status.queued { color: #475569; }
.ta-row-running td { color: #e2e8f0; }
.ta-row-queued td { color: #94a3b8; }
.ta-cost { font-variant-numeric: tabular-nums; color: #cbd5e1; }
.ta-num { font-variant-numeric: tabular-nums; }

.ta-runs-filter {
    background: #1a2332;
    border: 1px solid #2d3748;
    color: #e2e8f0;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    min-width: 18rem;
    font-weight: normal;
}
.ta-runs-filter:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-color: #3b82f6;
}
.ta-runs-table { width: 100%; font-size: 0.9rem; border-collapse: collapse; }
.ta-runs-table thead th {
    color: #94a3b8;
    text-align: left;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #2d3748;
}
.ta-runs-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #1f2937;
}
.ta-runs-table tbody tr:hover { background: #1a2332; cursor: pointer; }
.ta-row-actions { display: flex; gap: 0.25rem; justify-content: flex-end; }
.ta-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.ta-icon-btn:hover { color: #e2e8f0; border-color: #2d3748; }

.ta-detail-summary { color: #cbd5e1; font-size: 0.85rem; margin-bottom: 0.75rem; }
.ta-detail-back {
    background: transparent;
    border: 0;
    color: #60a5fa;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    margin-right: 0.5rem;
}
.ta-report-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #2d3748;
    padding-bottom: 0.6rem;
}
.ta-report-tab {
    background: #1a2332;
    color: #cbd5e1;
    border: 1px solid #2d3748;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.ta-report-tab.active { background: #2563eb; color: white; border-color: #2563eb; }
.ta-report-content {
    background: #0d1421;
    border: 1px solid #2d3748;
    border-radius: 6px;
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.ta-report-content h1 { font-size: 1.2rem; margin-bottom: 0.5rem; color: #e2e8f0; }
.ta-report-content p { margin-bottom: 0.5rem; color: #cbd5e1; }
.ta-report-content code {
    color: #fbbf24;
    background: #1f2937;
    padding: 0 0.2rem;
    border-radius: 3px;
}

.ta-empty-msg {
    text-align: center;
    color: #94a3b8;
    padding: 2.5rem 1rem;
    font-size: 0.95rem;
}
.ta-empty-msg strong { color: #cbd5e1; }

@media (max-width: 640px) {
    .ta-runs-table thead { display: none; }
    .ta-runs-table tbody td {
        display: block;
        border-bottom: 0;
        padding: 0.2rem 0.5rem;
    }
    .ta-runs-table tbody tr {
        display: block;
        border: 1px solid #2d3748;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        padding: 0.5rem 0;
    }
    .ta-form { grid-template-columns: 1fr; }
}

/* ============================================================
   Trading Agents detail-view: PDF + email controls
   ============================================================ */

.ta-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ta-detail-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.ta-detail-actions .ta-icon-btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    border: 1px solid #2d3748;
    background: #1a2332;
    color: #cbd5e1;
    text-decoration: none;
}
.ta-detail-actions .ta-icon-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: white;
}
.ta-detail-actions .ta-icon-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.ta-email-panel {
    background: #0d1421;
    border: 1px solid #2d3748;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0.75rem 0;
}
.ta-email-label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}
.ta-email-label:not(:first-child) {
    margin-top: 0.6rem;
}
.ta-email-input {
    width: 100%;
    background: #1a2332;
    border: 1px solid #2d3748;
    color: #e2e8f0;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
}
.ta-email-input:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
    border-color: #3b82f6;
}
.ta-email-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ta-email-hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: #64748b;
}
.ta-email-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

/* C4/C5 follow-up — empty-section message inside .ta-report-content */
.ta-empty-section { color: #94a3b8; font-style: italic; }

/* H2 — visible "Cancelling…" state on the in-progress card */
.ta-cancelling { color: #fbbf24; font-style: italic; }
.ta-cancel-btn:disabled { opacity: 0.6; cursor: progress; }

/* H3 — status-aware badges that don't blend into HOLD */
.badge-failed    { background: #7f1d1d; color: #fecaca; }
.badge-cancelled { background: #475569; color: #f1f5f9; }
.badge-running   { background: #f59e0b; color: #1e293b;
                    animation: ta-running-pulse 1.4s ease-in-out infinite; }

@keyframes ta-running-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* M5 — inline "clear filter" link in the empty-search message */
.ta-link-btn {
    background: none;
    border: 0;
    color: var(--accent-blue);
    text-decoration: underline;
    cursor: pointer;
    padding: 0 0 0 0.4rem;
    font: inherit;
}
.ta-link-btn:hover, .ta-link-btn:focus-visible {
    color: #93c5fd;
    outline: none;
}

/* M10 — keyboard-focusable past-runs row */
.ta-runs-table tbody tr:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
    background: var(--bg-card);
}

/* M8 helper — sub-label hint inside .ta-form labels */
.ta-form-hint { color: var(--text-muted); font-size: 0.75rem; }

/* L2 — right-align tabular numbers; prevents the / separator and
   uneven token widths from making columns shift between rows */
.ta-progress-table td.ta-num,
.ta-progress-table td.ta-cost,
.ta-progress-table tfoot td.ta-cost,
.ta-runs-table td.ta-cost { text-align: right; }
.ta-progress-table th:nth-child(2),
.ta-progress-table th:nth-child(3),
.ta-runs-table th:nth-child(5) { text-align: right; }

/* ============================================================
   Trading Agents — comparison view (L2)
   Two-column grid that collapses to single column on narrow screens.
   ============================================================ */

.ta-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ta-compare-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}
.ta-compare-col-head {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
/* Highlight when the two runs reached different decisions —
   subtle amber border, not a screaming color */
.ta-compare-divergent {
    border-color: #f59e0b;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.12);
}

@media (max-width: 880px) {
    .ta-compare-grid { grid-template-columns: 1fr; }
}

/* Comparison picker — inline panel mirroring the email panel pattern */
.ta-compare-picker {
    background: #0d1421;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0.75rem 0;
}
.ta-compare-picker-list {
    max-height: 18rem;
    overflow-y: auto;
    margin-top: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.ta-compare-picker-row {
    display: grid;
    grid-template-columns: 4rem 1fr 7rem 5rem;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}
.ta-compare-picker-row:last-child { border-bottom: 0; }
.ta-compare-picker-row:hover,
.ta-compare-picker-row:focus-visible {
    background: var(--bg-card);
    outline: none;
}
.ta-compare-picker-row strong { color: var(--text-primary); }

/* Polish — "INCONCLUSIVE" badge for runs that completed but produced
   no actionable decision (Portfolio Manager couldn't synthesise).
   Distinct from HOLD (deliberate) and CANCELLED (user-aborted). */
.badge-inconclusive { background: #6b7280; color: #f1f5f9; }

/* L9 — prompt-hash inline indicator on the detail view */
.ta-prompt-hash {
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: help;
}
.ta-prompt-hash code {
    color: #fbbf24;
    background: #1f2937;
    padding: 0 0.25rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

/* Browser-notification toggle in the New Run card title row.
   Compact button — readable but not competing with "Start analysis". */
.ta-notify-toggle {
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
}
.ta-notify-toggle[aria-pressed="true"] {
    color: #fbbf24;
    border-color: #f59e0b;
    background: #1e293b;
}

/* Mobile nav + Past Runs header — fixes from B (mobile responsive)
   audit. At narrow viewports the tab labels + side-cluster overflow
   the right edge, and the past-runs filter forces the title to wrap. */

/* Below 480px: tighten the nav so Logout doesn't fall off the right.
   Tailwind's `text-sm px-4 py-4` is too generous at this width.
   "Trading Agents" wraps to 2 lines naturally — acceptable trade-off
   vs cutting Logout off entirely. */
@media (max-width: 480px) {
    nav button.tab-active,
    nav button.tab-inactive {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.78rem !important;
    }
    /* Logout / sessions / settings cluster: compact too. */
    nav .text-gray-400 { font-size: 0.78rem !important; }
}

/* Past Runs header: stack title + filter when there's no horizontal room. */
@media (max-width: 640px) {
    /* The card title is `display:flex; justify-content:space-between` —
       wrap into a column so the filter sits below the heading. */
    .ta-card-title {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .ta-runs-filter {
        min-width: 0;
        width: 100%;
    }
}

/* Comparison picker rows at narrow widths: the 4-col grid
   (ticker / date / badge / cost) doesn't fit on phones — date
   wraps to 2 lines and cost truncates ($0.0... instead of $0.0950).
   Stack each row vertically below 480px. */
@media (max-width: 480px) {
    /* Switch from a fixed 4-col grid to a flex-wrap. Children stay
       in source order (ticker, date, badge, cost) and wrap when
       there's no room — no truncation, no awkward grid placement. */
    .ta-compare-picker-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
    .ta-compare-picker-row strong { flex: 0 0 auto; }
    .ta-compare-picker-row .ta-cost { margin-left: auto; }  /* push cost to row's right edge */
}

/* `.ta-label-row` — wrapper around `<label>` + `<button class="ta-help">`
   so the button isn't a child of the label. Without this, the browser
   treats clicks on the help icon as if they were clicks on the label,
   which fires the label's "synthetic click" on the labeled control —
   opening the dropdown unwantedly. */
.ta-label-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* The `(?)` help-toggle button next to a form label. Reset native
   button chrome so it visually matches a small text glyph. */
button.ta-help {
    background: transparent;
    border: 0;
    padding: 0 0.15rem;
    color: var(--text-muted);
    font-size: 0.8em;
    cursor: help;
    user-select: none;
    position: relative;  /* anchor for the popover below */
}
button.ta-help:hover,
button.ta-help:focus-visible {
    color: var(--accent-blue);
    outline: none;
}
button.ta-help[aria-expanded="true"] { color: var(--accent-blue); }

/* Click-toggle popover so mobile users (where `title` doesn't trigger)
   can also see the help text. Positioned below the button. */
.ta-help-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.35rem;
    width: 18rem;
    max-width: calc(100vw - 2rem);
    z-index: 50;
    background: var(--bg-card);
    border: 1px solid var(--accent-blue);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: left;
    cursor: default;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    /* Strong wins over the parent button's small font */
    font-weight: normal;
}
.ta-help-popover strong { color: var(--accent-blue); }