/* ═══════════════════════════════════════════════════════════════════════════
   Athena v3 Design System
   Bloomberg-inspired dark mode with modern colorful accents
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables (Dark Mode - Primary) ─────────────────────────────────── */

:root {
    /* Backgrounds */
    --bg-primary: #0a0a0a;
    --bg-secondary: #121212;
    --bg-tertiary: #1a1a1a;
    --bg-card: #161616;
    --bg-hover: #1e1e1e;
    --bg-active: #252525;

    /* Borders */
    --border-primary: #262626;
    --border-secondary: #333333;
    --border-focus: #ff9500;

    /* Text */
    --text-primary: #fafafa;
    --text-secondary: #a3a3a3;
    --text-muted: #666666;
    --text-inverse: #0a0a0a;

    /* Accent Colors */
    --accent-primary: #ff9500;
    --accent-secondary: #ffc940;
    --accent-teal: #00d4aa;
    --accent-cyan: #22d3ee;
    --accent-blue: #5c9eff;
    --accent-red: #ff5a5a;
    --accent-green: #00d4aa;
    --accent-purple: #7a8599;
    --accent-pink: #ff6b9d;

    /* Functional Colors */
    --color-positive: #00d4aa;
    --color-negative: #ff5a5a;
    --color-warning: #ffc940;
    --color-info: #5c9eff;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #ff9500, #ffc940);
    --gradient-accent: linear-gradient(135deg, #ff9500, #00d4aa);
    --gradient-nav-active: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));

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

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(255, 149, 0, 0.15);

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 0.9rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;

    /* Layout */
    --nav-width: 220px;
    --header-height: 64px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
}

/* ─── Light Mode ──────────────────────────────────────────────────────────── */

[data-theme="light"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8e8e8;
    --bg-card: #ffffff;
    --bg-hover: #f0f0f0;
    --bg-active: #e0e0e0;
    --border-primary: #e0e0e0;
    --border-secondary: #d0d0d0;
    --text-primary: #171717;
    --text-secondary: #525252;
    --text-muted: #a0a0a0;
    --text-inverse: #fafafa;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 20px rgba(255, 149, 0, 0.1);
}

/* ─── Theme Presets ───────────────────────────────────────────────────────── */

[data-theme="fintech"] {
    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-teal: #06b6d4;
    --accent-blue: #6366f1;
    --accent-purple: #94a3b8;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --color-positive: #10b981;
    --color-negative: #ef4444;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-focus: #3b82f6;
    --gradient-primary: linear-gradient(135deg, #3b82f6, #60a5fa);
    --gradient-nav-active: linear-gradient(90deg, #3b82f6, #60a5fa);
}

[data-theme="teal"] {
    --accent-primary: #14b8a6;
    --accent-secondary: #2dd4bf;
    --accent-teal: #06b6d4;
    --accent-blue: #0ea5e9;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --color-positive: #22c55e;
    --color-negative: #ef4444;
    --bg-primary: #042f2e;
    --bg-secondary: #134e4a;
    --bg-tertiary: #115e59;
    --bg-card: #0f766e;
    --text-primary: #f0fdfa;
    --text-secondary: #99f6e4;
    --text-muted: #5eead4;
    --border-primary: #115e59;
    --border-secondary: #14b8a6;
    --border-focus: #14b8a6;
    --gradient-primary: linear-gradient(135deg, #14b8a6, #2dd4bf);
    --gradient-nav-active: linear-gradient(90deg, #14b8a6, #2dd4bf);
}

[data-theme="sunset"] {
    --accent-primary: #f97316;
    --accent-secondary: #fb923c;
    --accent-teal: #14b8a6;
    --accent-blue: #a78bfa;
    --accent-purple: #94a3b8;
    --accent-green: #4ade80;
    --accent-red: #f43f5e;
    --color-positive: #4ade80;
    --color-negative: #f43f5e;
    --bg-primary: #1c1917;
    --bg-secondary: #292524;
    --bg-tertiary: #44403c;
    --bg-card: #292524;
    --text-primary: #fafaf9;
    --text-secondary: #a8a29e;
    --text-muted: #78716c;
    --border-primary: #44403c;
    --border-secondary: #57534e;
    --border-focus: #f97316;
    --gradient-primary: linear-gradient(135deg, #f97316, #fb923c);
    --gradient-nav-active: linear-gradient(90deg, #f97316, #fb923c);
}

/* ─── Reset & Base ────────────────────────────────────────────────────────── */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── App Layout ──────────────────────────────────────────────────────────── */

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-lg);
    flex-shrink: 0;
    z-index: 100;
}

.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.app-nav {
    width: var(--nav-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-primary);
    overflow-y: auto;
    flex-shrink: 0;
    padding: var(--space-md) 0;
}

.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-lg);
}

/* ─── Header ──────────────────────────────────────────────────────────────── */

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.header-title h1 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.header-title p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-badge {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.header-badge strong {
    color: var(--accent-primary);
}

/* ─── Staging Toggle ──────────────────────────────────────────────────────── */

.staging-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    padding: 4px;
}

.staging-toggle button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.staging-toggle button.active {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

/* ─── Theme Selector ──────────────────────────────────────────────────────── */

.theme-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    font-family: var(--font-sans);
}

.theme-select:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* ─── Navigation ──────────────────────────────────────────────────────────── */

.nav-group {
    margin-bottom: var(--space-lg);
}

.nav-group-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 var(--space-lg);
    margin-bottom: var(--space-sm);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-lg);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
    cursor: pointer;
}

.nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.nav-item.active {
    color: var(--accent-primary);
    background: var(--bg-active);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-nav-active);
    border-radius: 0 2px 2px 0;
}

.nav-icon {
    width: 20px;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}

.nav-label {
    white-space: nowrap;
}

/* ─── Cards ───────────────────────────────────────────────────────────────── */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    transition: all var(--transition-normal);
}

.card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.card-badge {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ─── Metric Cards ────────────────────────────────────────────────────────── */

.metrics-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-sm);
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: all var(--transition-normal);
}

.metric-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.metric-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 10px;
    background: rgba(255, 149, 0, 0.15);
    color: var(--accent-primary);
}

.metric-label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.metric-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-subtext {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

/* ─── Charts ──────────────────────────────────────────────────────────────── */

.chart-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chart-container {
    flex: 1;
    min-height: 0;
}

/* ─── Page Layouts ────────────────────────────────────────────────────────── */

.page-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    height: 100%;
}

.page-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    height: 100%;
}

.page-full-height {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--space-lg) * 2);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.page-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.span-full {
    grid-column: 1 / -1;
}

/* ─── AG Grid Dark Theme ──────────────────────────────────────────────────── */

.ag-theme-athena {
    --ag-background-color: var(--bg-card);
    --ag-header-background-color: var(--bg-tertiary);
    --ag-header-foreground-color: var(--text-secondary);
    --ag-foreground-color: var(--text-primary);
    --ag-secondary-foreground-color: var(--text-secondary);
    --ag-border-color: var(--border-primary);
    --ag-row-hover-color: var(--bg-hover);
    --ag-selected-row-background-color: var(--bg-active);
    --ag-odd-row-background-color: transparent;
    --ag-font-family: var(--font-sans);
    --ag-font-size: var(--font-size-sm);
    --ag-header-font-size: var(--font-size-xs);
    --ag-header-font-weight: 600;
    --ag-alpine-active-color: var(--accent-primary);
    --ag-range-selection-border-color: var(--accent-primary);
    --ag-input-focus-border-color: var(--accent-primary);
    --ag-checkbox-checked-color: var(--accent-primary);
    flex: 1;
    min-height: 0;
}

.ag-theme-athena .ag-header-cell-text {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ag-theme-athena .ag-paging-panel {
    border-top: 1px solid var(--border-primary);
    color: var(--text-secondary);
}

/* AG Grid cell classes */
.cell-mono { font-family: var(--font-mono); font-size: var(--font-size-sm); }
.cell-isin { color: var(--accent-primary); font-weight: 500; }
.cell-desc { max-width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-right { text-align: right; }
.cell-center { text-align: center; }
.cell-positive { color: var(--color-positive) !important; }
.cell-negative { color: var(--color-negative) !important; }
.cell-warning { color: var(--color-warning) !important; }

/* ─── Badges ──────────────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.badge-pass { background: rgba(0, 212, 170, 0.15); color: var(--color-positive); }
.badge-fail { background: rgba(255, 90, 90, 0.15); color: var(--color-negative); }
.badge-warning { background: rgba(255, 201, 64, 0.15); color: var(--color-warning); }
.badge-info { background: rgba(92, 158, 255, 0.15); color: var(--color-info); }
.badge-govt { background: rgba(0, 212, 170, 0.15); color: var(--accent-teal); }
.badge-corp { background: rgba(122, 133, 153, 0.2); color: var(--accent-purple); }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 16px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.btn-primary {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}

.btn-primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.btn-sm {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
}

/* ─── Loading States ──────────────────────────────────────────────────────── */

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    gap: var(--space-md);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-secondary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text { height: 16px; margin-bottom: var(--space-sm); }
.skeleton-card { height: 120px; }
.skeleton-chart { height: 300px; }

/* ─── Error States ────────────────────────────────────────────────────────── */

.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    text-align: center;
    gap: var(--space-md);
}

.error-icon {
    font-size: 48px;
    color: var(--color-warning);
}

.error-state h3 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

.error-state p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    max-width: 400px;
}

/* ─── Value Colors ────────────────────────────────────────────────────────── */

.value-positive { color: var(--color-positive); }
.value-negative { color: var(--color-negative); }
.value-warning { color: var(--color-warning); }

/* ─── Utility Classes ─────────────────────────────────────────────────────── */

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); font-size: var(--font-size-sm); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; min-height: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ─── Widget Layout System ────────────────────────────────────────────────── */

.widget-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
    min-height: 0;
}

.widget-row {
    display: grid;
    gap: var(--space-md);
    flex: 0 0 auto;
}

.widget-row-grow {
    flex: 1 1 0;
    min-height: 0;
}

.widget-cell {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
}

.widget-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 100%;
    min-height: 80px;
    color: var(--accent-red);
    font-size: 13px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .metrics-row { grid-template-columns: repeat(3, 1fr); }
    .page-grid-2x2 { grid-template-columns: 1fr; }
    .page-grid-3col { grid-template-columns: 1fr 1fr; }
    .widget-row { grid-template-columns: 1fr !important; }
}

/* ─── Full-Screen Chat ──────────────────────────────────────────────────── */

.fc-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.fc-suggestions {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-primary);
}

.fc-chip {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
}
.fc-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.fc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.fc-messages::-webkit-scrollbar { width: 4px; }
.fc-messages::-webkit-scrollbar-track { background: transparent; }
.fc-messages::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 2px; }

.fc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.fc-msg { display: flex; }
.fc-msg-user { justify-content: flex-end; }
.fc-msg-asst { align-items: flex-start; gap: 12px; }

.fc-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 2px;
}

.fc-bubble-user {
    background: var(--accent-primary);
    color: var(--text-inverse);
    padding: 12px 16px;
    border-radius: 16px 16px 4px 16px;
    max-width: 60%;
    font-size: 0.9rem;
    line-height: 1.5;
}

.fc-bubble-asst {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 16px 20px;
    border-radius: 4px 16px 16px 16px;
    max-width: 80%;
    font-size: 0.9rem;
    line-height: 1.6;
}

.fc-bubble-asst p { margin: 0 0 8px; }
.fc-bubble-asst p:last-child { margin-bottom: 0; }
.fc-bubble-asst h2, .fc-bubble-asst h3, .fc-bubble-asst h4 { margin: 12px 0 6px; font-size: 1rem; color: var(--accent-primary); }
.fc-bubble-asst ul { margin: 4px 0; padding-left: 20px; }
.fc-bubble-asst li { margin: 3px 0; }
.fc-bubble-asst strong { color: var(--accent-primary); }
.fc-bubble-asst code { background: var(--bg-active); padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono); }
.fc-bubble-asst a { color: var(--accent-blue); text-decoration: none; }
.fc-bubble-asst a:hover { text-decoration: underline; }
.fc-bubble-asst hr { border: none; border-top: 1px solid var(--border-primary); margin: 12px 0; }

/* Tables inside chat */
.fc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.85rem;
}
.fc-table th, .fc-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-primary);
    text-align: left;
}
.fc-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.fc-table td strong { color: var(--accent-primary); }

/* Tool status */
.fc-tool-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-left: 44px;
    background: rgba(92, 158, 255, 0.08);
    border: 1px solid rgba(92, 158, 255, 0.15);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--accent-blue);
    animation: fc-pulse 2s ease-in-out infinite;
}
.fc-tool-icon { font-size: 14px; }

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

/* Thinking dots */
.fc-thinking-dots {
    display: flex;
    gap: 5px;
    padding: 14px 18px;
    background: var(--bg-tertiary);
    border-radius: 4px 16px 16px 16px;
}
.fc-thinking-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    animation: fc-bounce 1.4s infinite ease-in-out;
}
.fc-thinking-dots span:nth-child(1) { background: var(--accent-primary); animation-delay: 0s; }
.fc-thinking-dots span:nth-child(2) { background: var(--accent-teal); animation-delay: 0.2s; }
.fc-thinking-dots span:nth-child(3) { background: var(--accent-blue); animation-delay: 0.4s; }
@keyframes fc-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-8px); opacity: 1; }
}

/* Bond selection grid */
.fc-bond-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin: 8px 0;
}
.fc-bond-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.fc-bond-card:hover:not(:disabled) {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}
.fc-bond-card:disabled { opacity: 0.5; cursor: not-allowed; }
.fc-bond-ticker { font-weight: 700; color: var(--accent-primary); font-size: 0.9rem; margin-bottom: 4px; }
.fc-bond-meta { font-size: 0.78rem; color: var(--text-muted); }
.fc-cancel-card { text-align: center; border-color: rgba(255, 82, 82, 0.2); }
.fc-cancel-card .fc-bond-ticker { color: var(--color-negative); }

/* Trade confirmation */
.fc-trade-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px;
    margin: 8px 0;
    max-width: 400px;
}
.fc-trade-header {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-primary);
}
.fc-trade-details { margin-bottom: 12px; }
.fc-trade-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.85rem; }
.fc-trade-row span:first-child { color: var(--text-muted); }
.fc-trade-actions { display: flex; gap: 8px; }
.fc-action-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.fc-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fc-btn-confirm { background: rgba(0, 200, 83, 0.15); border-color: rgba(0, 200, 83, 0.3); color: var(--color-positive); }
.fc-btn-confirm:hover:not(:disabled) { background: rgba(0, 200, 83, 0.25); }
.fc-btn-staging { background: rgba(92, 158, 255, 0.15); border-color: rgba(92, 158, 255, 0.3); color: var(--accent-blue); }
.fc-btn-staging:hover:not(:disabled) { background: rgba(92, 158, 255, 0.25); }
.fc-btn-cancel { background: rgba(255, 82, 82, 0.1); border-color: rgba(255, 82, 82, 0.2); color: var(--color-negative); }
.fc-btn-cancel:hover:not(:disabled) { background: rgba(255, 82, 82, 0.2); }

/* Input bar */
.fc-input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.fc-input-bar input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    outline: none;
}
.fc-input-bar input:focus { border-color: var(--accent-primary); }
.fc-input-bar input::placeholder { color: var(--text-muted); }
.fc-send {
    width: 42px; height: 42px;
    border-radius: 12px; border: none;
    background: var(--accent-primary);
    color: var(--text-inverse);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.fc-send:hover { background: var(--accent-secondary); }
.fc-send:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
    .app-nav { display: none; }
    .metrics-row { grid-template-columns: repeat(2, 1fr); }
    .page-grid-3col { grid-template-columns: 1fr; }
    :root { --nav-width: 0px; }
}