"""Fusion Lab design tokens: dark, clarity-first palette (Linear/Observable/Bloomberg,
not Palantir-dense) plus a Gradio theme + CSS injection built from the same tokens."""

import gradio as gr

BG_VOID = "#09090b"
BG_SURFACE = "#18181b"
BORDER_HAIRLINE = "#27272a"
TEXT_PRIMARY = "#a1a1aa"
TEXT_SECONDARY = "#71717a"
ACCENT = "#FF5722"

SIG_POSITIVE = "#3DDC97"
SIG_NEUTRAL = "#d4d4d8"
SIG_NEGATIVE = "#FF5722"
SIG_NOT_SIGNIFICANT = "#3f3f46"

CLASS_COLORS = {0: SIG_NEGATIVE, 1: SIG_NEUTRAL, 2: SIG_POSITIVE}
CLASS_NAMES = {0: "Negative", 1: "Neutral", 2: "Positive"}

FONT_MONO = 'ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace'
FONT_SERIF = '"Merriweather", "Georgia", "Times New Roman", serif'
FONT_UI = (
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
)


def build_theme() -> gr.themes.Base:
    return gr.themes.Base(
        primary_hue=gr.themes.colors.emerald,
        neutral_hue=gr.themes.colors.slate,
        font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
        font_mono=[gr.themes.GoogleFont("JetBrains Mono"), FONT_MONO],
    ).set(
        body_background_fill=BG_VOID,
        body_background_fill_dark=BG_VOID,
        background_fill_primary=BG_SURFACE,
        background_fill_primary_dark=BG_SURFACE,
        background_fill_secondary=BG_VOID,
        background_fill_secondary_dark=BG_VOID,
        border_color_primary=BORDER_HAIRLINE,
        border_color_primary_dark=BORDER_HAIRLINE,
        body_text_color=TEXT_PRIMARY,
        body_text_color_dark=TEXT_PRIMARY,
        body_text_color_subdued=TEXT_SECONDARY,
        body_text_color_subdued_dark=TEXT_SECONDARY,
        color_accent=ACCENT,
        color_accent_soft=ACCENT,
        block_background_fill=BG_SURFACE,
        block_background_fill_dark=BG_SURFACE,
        block_border_color=BORDER_HAIRLINE,
        block_border_color_dark=BORDER_HAIRLINE,
        block_radius="4px",
        button_primary_background_fill=ACCENT,
        button_primary_background_fill_dark=ACCENT,
        button_primary_text_color=BG_VOID,
        button_primary_text_color_dark=BG_VOID,
        input_background_fill=BG_VOID,
        input_background_fill_dark=BG_VOID,
        input_border_color=BORDER_HAIRLINE,
        input_border_color_dark=BORDER_HAIRLINE,
    )


CUSTOM_CSS = f"""
:root {{
    --fl-bg-void: {BG_VOID};
    --fl-bg-surface: {BG_SURFACE};
    --fl-border: {BORDER_HAIRLINE};
    --fl-text-primary: {TEXT_PRIMARY};
    --fl-text-secondary: {TEXT_SECONDARY};
    --fl-accent: {ACCENT};
    --fl-positive: {SIG_POSITIVE};
    --fl-neutral: {SIG_NEUTRAL};
    --fl-negative: {SIG_NEGATIVE};
    --fl-not-sig: {SIG_NOT_SIGNIFICANT};
}}

.gradio-container {{
    max-width: 1320px !important;
    font-family: {FONT_UI} !important;
}}

.fl-mono, .fl-mono * {{
    font-family: {FONT_MONO} !important;
    font-variant-numeric: tabular-nums;
}}

/* Scoped sharp-corner + hairline treatment on our own components — deliberately
   NOT a blanket wildcard border-radius reset, which fights native Gradio
   component chrome (dropdowns/sliders/tab pills) instead of composing with it. */
.gr-group, .fl-panel, .fl-stat-block, .fl-badge, .fl-turn, .fl-caveat, .fl-diagram-box {{
    border-radius: 0px !important;
}}
.gr-group, .fl-panel {{
    border: 1px solid var(--fl-border) !important;
    background: var(--fl-bg-surface) !important;
}}

/* Persistent header ribbon (space/header.py) */
.fl-ribbon {{
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 20px;
    margin-bottom: 4px;
    border: 1px solid var(--fl-border);
    background: linear-gradient(180deg, var(--fl-bg-surface) 0%, var(--fl-bg-void) 100%);
}}
.fl-wordmark {{
    font-family: {FONT_UI};
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fl-text-primary);
    white-space: nowrap;
}}
.fl-wordmark span {{ color: var(--fl-accent); }}
.fl-ribbon-divider {{
    width: 1px;
    align-self: stretch;
    background: var(--fl-border);
}}
.fl-chip {{
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 108px;
}}
.fl-chip-label {{
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fl-text-secondary);
}}
.fl-chip-value {{
    font-family: {FONT_MONO};
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 700;
    color: var(--fl-text-primary);
}}
.fl-chip-value.fl-accent {{ color: var(--fl-accent); }}
.fl-chip-dot {{
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
}}

.fl-stat-block {{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border: 1px solid var(--fl-border);
    background: var(--fl-bg-surface);
}}
.fl-stat-label {{
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fl-text-secondary);
}}
.fl-stat-value {{
    font-family: {FONT_MONO};
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-size: 34px;
    font-weight: 700;
    color: var(--fl-text-primary);
}}
.fl-stat-value.fl-accent {{ color: var(--fl-accent); }}
.fl-stat-sub {{
    font-size: 12px;
    color: var(--fl-text-secondary);
}}

/* Architecture diagram (space/diagram.py) */
.fl-diagram {{
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 18px 4px;
}}
.fl-diagram-box {{
    flex: 0 0 auto;
    border: 1px solid var(--fl-border);
    background: var(--fl-bg-surface);
    padding: 10px 14px;
    text-align: center;
}}
.fl-diagram-box.fl-diagram-highlight {{
    border-color: var(--fl-accent);
    box-shadow: 0 0 0 1px rgba(255, 87, 34, 0.25);
}}
.fl-diagram-title {{
    font-size: 12px;
    font-weight: 600;
    color: var(--fl-text-primary);
    white-space: nowrap;
}}
.fl-diagram-dim {{
    font-family: {FONT_MONO};
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--fl-accent);
    margin-top: 2px;
}}
.fl-diagram-sub {{
    font-size: 10px;
    color: var(--fl-text-secondary);
    margin-top: 2px;
    max-width: 120px;
}}
.fl-diagram-arrow {{
    flex: 0 0 auto;
    color: var(--fl-text-secondary);
    font-size: 16px;
}}
.fl-diagram-col {{
    display: flex;
    flex-direction: column;
    gap: 6px;
}}

/* Dataframe density + tabular numerals */
.fl-panel table, table.svelte-* {{ font-family: {FONT_UI}; }}
div[data-testid="dataframe"] td, div[data-testid="dataframe"] th {{
    font-family: {FONT_MONO} !important;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px !important;
    padding: 5px 10px !important;
}}
.fl-class-badge {{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}}
.fl-class-dot {{
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}}

.fl-badge {{
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 3px;
}}
.fl-badge-significant {{ background: rgba(255, 87, 34, 0.12); color: var(--fl-accent); border: 1px solid rgba(255, 87, 34, 0.35); }}
.fl-badge-not-significant {{ background: rgba(74, 85, 104, 0.2); color: var(--fl-text-secondary); border: 1px solid var(--fl-border); }}

.fl-caveat {{
    border-left: 3px solid var(--fl-neutral);
    padding: 8px 14px;
    background: rgba(201, 162, 39, 0.06);
    font-size: 13px;
    color: var(--fl-text-secondary);
    overflow-wrap: break-word;
}}
.fl-caveat code {{
    overflow-wrap: break-word;
    word-break: break-word;
}}

.fl-turn {{
    padding: 10px 14px;
    margin-bottom: 6px;
    border: 1px solid var(--fl-border);
    border-left-width: 3px;
}}
.fl-turn-meta {{
    font-size: 11px;
    color: var(--fl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}}
.fl-turn-text {{
    font-size: 14px;
    color: var(--fl-text-primary);
    line-height: 1.5;
}}
.fl-turn-weight {{
    font-family: {FONT_MONO};
    font-variant-numeric: tabular-nums;
    color: var(--fl-text-secondary);
    font-size: 12px;
}}

.fl-section-header {{
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fl-text-secondary);
    margin: 18px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--fl-border);
}}

.fl-split-hero {{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--fl-bg-void);
    border: 1px solid var(--fl-border);
    margin-bottom: 32px;
}}
.fl-split-left {{
    flex: 1;
    padding: 48px;
    border-right: 1px solid var(--fl-border);
}}
.fl-split-right {{
    flex: 1;
    padding: 48px;
    background: rgba(255, 87, 34, 0.03); /* Subtle audio accent background */
}}
.fl-serif-text {{
    font-family: {FONT_SERIF} !important;
    font-size: 24px;
    line-height: 1.6;
    color: #f4f4f5;
    font-style: italic;
}}
.fl-xray-highlight {{
    border-left: 4px solid var(--fl-accent) !important;
    background: rgba(255, 87, 34, 0.08) !important;
}}
.fl-xray-highlight .fl-turn-text {{
    color: var(--fl-accent) !important;
    font-family: {FONT_MONO} !important;
}}

/* --- Evidence Room: behavioral summary strip, timeline, evidence panel
   (space/workspace.py) --- these classes are emitted by workspace.py/transcript.py
   but were previously unstyled; restored here. */

.fl-summary-strip {{
    display: flex;
    gap: 1px;
    background: var(--fl-border);
    border: 1px solid var(--fl-border);
    margin-bottom: 10px;
    flex-wrap: wrap;
}}
.fl-summary-strip .fl-stat-block {{
    flex: 1;
    border: none;
    padding: 12px 16px;
}}
.fl-summary-strip .fl-stat-value {{
    font-size: 24px;
}}

.fl-timeline {{
    border: 1px solid var(--fl-border);
    background: var(--fl-bg-surface);
    padding: 14px 16px;
}}
.fl-timeline-row {{
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    margin-bottom: 2px;
}}
.fl-timeline-label {{
    width: 84px;
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fl-text-secondary);
}}
.fl-timeline-strip {{
    position: relative;
    flex: 1 1 auto;
    height: 22px;
    background: var(--fl-bg-void);
    border: 1px solid var(--fl-border);
}}
.fl-timeline-bar {{
    position: absolute;
    bottom: 0;
    width: 3px;
    background: var(--fl-accent);
    cursor: pointer;
    transition: opacity 0.1s;
}}
.fl-timeline-bar:hover {{ opacity: 0.7; }}
.fl-timeline-bar.fl-timeline-selected {{
    background: var(--fl-text-primary);
    box-shadow: 0 0 0 1px var(--fl-accent);
}}
.fl-timeline-divider {{
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: var(--fl-neutral);
}}
.fl-timeline-section-label {{
    position: absolute;
    top: -18px;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fl-text-secondary);
}}
.fl-timeline-risk-row {{
    position: relative;
    height: 14px;
    margin: 4px 0 2px 94px;
}}
.fl-risk-dot {{
    position: absolute;
    top: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fl-negative);
    cursor: pointer;
    transform: translateX(-50%);
}}
.fl-risk-dot.fl-timeline-selected {{
    box-shadow: 0 0 0 2px var(--fl-text-primary);
}}

.fl-evidence-panel {{
    border: 1px solid var(--fl-border);
    background: var(--fl-bg-surface);
    padding: 14px 16px;
    min-height: 220px;
}}
.fl-evidence-empty {{
    color: var(--fl-text-secondary);
    font-size: 13px;
}}
.fl-evidence-quote {{
    margin-bottom: 10px;
}}
.fl-evidence-bullets {{
    margin: 0 0 10px 0;
    padding-left: 18px;
}}
.fl-evidence-bullet {{
    font-size: 12.5px;
}}

/* --- Verdict card (space/workspace.py: render_verdict_card) --- */

.fl-verdict-card {{
    border: 1px solid var(--fl-border);
    background: var(--fl-bg-surface);
    margin-bottom: 10px;
    overflow: hidden;
}}
.fl-verdict-banner {{
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}}
.fl-verdict-banner-correct {{
    background: rgba(61, 220, 151, 0.12);
    color: var(--fl-positive);
    border-bottom: 1px solid rgba(61, 220, 151, 0.35);
}}
.fl-verdict-banner-incorrect {{
    background: rgba(255, 87, 34, 0.12);
    color: var(--fl-accent);
    border-bottom: 1px solid rgba(255, 87, 34, 0.35);
}}
.fl-verdict-tiles {{
    display: flex;
    flex-wrap: wrap;
}}
.fl-verdict-tiles .fl-stat-block {{
    flex: 1;
    border: none;
    border-right: 1px solid var(--fl-border);
    padding: 12px 16px;
}}
.fl-verdict-tiles .fl-stat-block:last-child {{ border-right: none; }}
.fl-verdict-tiles .fl-stat-value {{
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}}

/* --- Mobile --- the layout above is built on Gradio's own responsive Row/Column
   grid (columns already collapse to full width below ~320px on their own), but the
   raw HTML/CSS blocks below (ribbon, split-hero, panels, timeline) bypass that grid
   and need explicit narrow-viewport rules. */

@media (max-width: 768px) {{
    .fl-ribbon {{
        flex-wrap: wrap;
        gap: 14px;
        padding: 12px 16px;
    }}
    .fl-chip {{
        min-width: 88px;
    }}
    .fl-split-hero {{
        flex-direction: column;
    }}
    .fl-split-left {{
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--fl-border);
    }}
    .fl-split-right {{
        padding: 20px;
    }}
    .fl-serif-text {{
        font-size: 19px;
    }}
    .fl-panel {{
        padding: 16px !important;
    }}
    .fl-timeline-label {{
        width: 60px;
        font-size: 10px;
    }}
    .fl-timeline-row {{
        gap: 6px;
    }}
    .fl-timeline-risk-row {{
        margin-left: 66px;
    }}
    .fl-timeline-section-label {{
        font-size: 9px;
    }}
}}

@media (max-width: 480px) {{
    .fl-wordmark {{
        font-size: 13px;
    }}
    .fl-chip {{
        min-width: 74px;
    }}
    .fl-chip-value {{
        font-size: 15px;
    }}
    .fl-stat-value {{
        font-size: 26px;
    }}
}}
"""