/* Amperical Theme for Chainlit */
/* Fonts loaded via custom_font in config.toml to avoid render-blocking */
/* Supports light/dark theme based on OS preference */

:root {
    /* Brand colors - shared (subtle purple) */
    --primary: #9d4edd;
    --primary-dark: #7b2cbf;
    --primary-light: rgba(157, 78, 221, 0.12);
    --radius: 1rem;
    --glass-blur: 16px;

    /* Light theme defaults */
    --text: #1f2937;
    --text-light: #6b7280;
    --bg: #ffffff;
    --bg-body: linear-gradient(135deg, #f9fbff 0%, #f2f6ff 40%, #fef6ff 100%);
    --bg-card: rgba(255, 255, 255, 0.9);
    --border: #e5e7eb;
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-accent: rgba(157, 78, 221, 0.15);
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-border: rgba(0, 0, 0, 0.1);
    --header-bg: rgba(255, 255, 255, 0.85);
    --starter-bg: rgba(255, 255, 255, 0.98);
    --starter-hover-bg: linear-gradient(135deg, rgba(157, 78, 221, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
    --card-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(191, 1, 255, 0.25);
    --code-bg: rgba(0, 0, 0, 0.04);
    color-scheme: light;
}

/* Dark theme - triggered by OS preference */
@media (prefers-color-scheme: dark) {
    :root {
        --text: #f4f6ff;
        --text-light: #c7d2fe;
        --bg: #030617;
        --bg-body: radial-gradient(circle at top, rgba(32, 6, 60, 0.65), transparent 55%),
            radial-gradient(circle at 20% 20%, rgba(88, 28, 135, 0.4), transparent 40%),
            #030617;
        --bg-card: rgba(9, 13, 40, 0.85);
        --border: rgba(148, 163, 184, 0.35);
        --border-subtle: rgba(148, 163, 184, 0.18);
        --border-accent: rgba(157, 78, 221, 0.35);
        --input-bg: rgba(5, 8, 20, 0.9);
        --input-border: rgba(255, 255, 255, 0.1);
        --header-bg: rgba(5, 8, 20, 0.92);
        --starter-bg: rgba(9, 13, 40, 0.95);
        --starter-hover-bg: linear-gradient(135deg, rgba(157, 78, 221, 0.2) 0%, rgba(9, 13, 40, 0.98) 100%);
        --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        --scrollbar-track: rgba(5, 8, 20, 0.5);
        --scrollbar-thumb: rgba(191, 1, 255, 0.3);
        --code-bg: rgba(5, 8, 20, 0.9);
        color-scheme: dark;
    }
}

/* Hide Readme button */
#readme-button,
button[data-testid="readme-button"],
button[aria-label="Readme"],
button[aria-label="Show Readme"] {
    display: none !important;
}

/* Hide theme toggle button */
button[aria-label="Toggle theme"],
button[data-testid="theme-toggle"],
[class*="theme-toggle"],
[class*="ThemeToggle"],
button:has(svg[class*="moon"]),
button:has(svg[class*="sun"]) {
    display: none !important;
}

/* Hide new chat button */
#new-chat-button {
    display: none !important;
}

/* Global body styling */
body {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: var(--bg-body) !important;
    color: var(--text) !important;
}

/* Headings */
h1, h2 {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 500 !important;
}

h3, h4, h5, h6 {
    font-family: 'Saira', sans-serif !important;
    font-weight: 600 !important;
}

/* Bot avatar icon - prevent distortion */
.cl-avatar,
[class*="avatar"],
img[alt*="avatar"],
img[alt*="logo"],
.step img:first-child,
[class*="message"] img:first-of-type {
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
}

/* Primary buttons and accent elements */
button[data-testid="send-button"],
.cl-send-button,
[class*="MuiButton-containedPrimary"] {
    background: var(--primary) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
    box-shadow: 0 4px 12px rgba(157, 78, 221, 0.2) !important;
}

button[data-testid="send-button"]:hover,
.cl-send-button:hover,
[class*="MuiButton-containedPrimary"]:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(157, 78, 221, 0.25) !important;
}

/* Chat messages */
.cl-message,
[class*="message-content"] {
    border-radius: var(--radius) !important;
}

/* User messages - subtle purple tint with readable text */
/* Target the bg-accent class used by Chainlit for user message bubbles */
.bg-accent,
div[class*="bg-accent"] {
    background: rgba(157, 78, 221, 0.1) !important;
    border: 1px solid rgba(157, 78, 221, 0.2) !important;
    color: var(--text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.cl-message[data-role="user"],
[class*="userMessage"],
[class*="user-message"],
[data-testid="user-message"],
.step[data-type="user_message"],
.step[data-type="user_message"] > div {
    background: rgba(157, 78, 221, 0.1) !important;
    border: 1px solid rgba(157, 78, 221, 0.2) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

@media (prefers-color-scheme: dark) {
    .bg-accent,
    div[class*="bg-accent"],
    .cl-message[data-role="user"],
    [class*="userMessage"],
    [class*="user-message"],
    [data-testid="user-message"],
    .step[data-type="user_message"],
    .step[data-type="user_message"] > div {
        background: rgba(157, 78, 221, 0.15) !important;
        border: 1px solid rgba(157, 78, 221, 0.3) !important;
    }
}

/* Assistant messages */
.cl-message[data-role="assistant"],
[class*="assistantMessage"],
[class*="assistant-message"],
[data-testid="assistant-message"] {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--radius) !important;
}

@media (prefers-color-scheme: dark) {
    .cl-message[data-role="assistant"],
    [class*="assistantMessage"],
    [class*="assistant-message"],
    [data-testid="assistant-message"] {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
}

/* Starter buttons - the domain selection chips on landing page */
/* These are in the welcome-screen container with rounded-3xl class */
.welcome-screen button,
button.rounded-3xl,
.welcome-screen button.border {
    background: var(--starter-bg) !important;
    border: 1px solid rgba(157, 78, 221, 0.2) !important;
    border-radius: 2rem !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Saira', sans-serif !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    padding: 0.75rem 1.5rem !important;
}

.welcome-screen button:hover,
button.rounded-3xl:hover,
.welcome-screen button.border:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 24px rgba(157, 78, 221, 0.15) !important;
    background: var(--starter-hover-bg) !important;
}

/* Starter button text - ensure dark readable text */
.welcome-screen button p,
.welcome-screen button span,
button.rounded-3xl p,
button.rounded-3xl span {
    font-size: 0.95rem !important;
    font-family: 'Saira', sans-serif !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
}

@media (prefers-color-scheme: dark) {
    .welcome-screen button p,
    .welcome-screen button span,
    button.rounded-3xl p,
    button.rounded-3xl span {
        color: #f4f6ff !important;
    }
}

/* Input field */
.cl-input,
[class*="input-container"],
textarea,
input[type="text"] {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    font-family: 'Source Sans 3', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
}

textarea {
    padding: 0.75rem 1rem !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}

textarea::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

.cl-input:focus,
[class*="input-container"]:focus-within,
textarea:focus,
input[type="text"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(157, 78, 221, 0.15) !important;
}

/* Sidebar / Navigation */
.cl-sidebar,
[class*="sidebar"],
nav {
    background: var(--header-bg) !important;
    border-right: 1px solid var(--border-subtle) !important;
}

/* Cards and panels */
.cl-card,
[class*="card"],
[class*="panel"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: calc(var(--radius) * 1.2) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    box-shadow: var(--card-shadow) !important;
}

/* Links */
a {
    color: var(--primary) !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: var(--primary-dark) !important;
}

@media (prefers-color-scheme: dark) {
    a:hover {
        color: #f5e8ff !important;
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 78, 221, 0.4);
}

/* Loading / typing indicator */
.cl-typing,
[class*="typing"],
[class*="loading"] {
    color: var(--primary) !important;
}

/* Code blocks */
pre, code {
    background: var(--code-bg) !important;
    border: 1px solid rgba(157, 78, 221, 0.1) !important;
    border-radius: 0.5rem !important;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace !important;
}

/* Plotly chart containers - match app theme */
.js-plotly-plot,
.plotly-graph-div,
[class*="plotly"] {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
}

/* Plotly text colors - light theme */
.js-plotly-plot .gtitle,
.js-plotly-plot .xtitle,
.js-plotly-plot .ytitle,
.js-plotly-plot .xtick text,
.js-plotly-plot .ytick text,
.js-plotly-plot .legendtext,
.js-plotly-plot .annotation-text {
    fill: var(--text) !important;
}

/* Plotly modebar - hidden */
.modebar,
.modebar-container {
    display: none !important;
}

/* Dark theme plotly overrides */
@media (prefers-color-scheme: dark) {
    .js-plotly-plot .gtitle,
    .js-plotly-plot .xtitle,
    .js-plotly-plot .ytitle,
    .js-plotly-plot .xtick text,
    .js-plotly-plot .ytick text,
    .js-plotly-plot .legendtext,
    .js-plotly-plot .annotation-text {
        fill: #f4f6ff !important;
    }
}

/* Tooltips */
[class*="tooltip"],
[role="tooltip"] {
    background: rgba(12, 10, 28, 0.97) !important;
    color: #f8f8ff !important;
    border: 1px solid rgba(157, 78, 221, 0.3) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 12px 30px rgba(2, 5, 24, 0.35) !important;
}

@media (prefers-color-scheme: dark) {
    [class*="tooltip"],
    [role="tooltip"] {
        background: rgba(6, 7, 20, 0.98) !important;
        color: #f6f7ff !important;
        box-shadow: 0 18px 36px rgba(1, 3, 12, 0.65) !important;
    }
}

/* Welcome screen / landing */
[class*="welcome"],
[class*="landing"],
[class*="home"] {
    background: transparent !important;
    overflow: hidden !important;
}

/* Hide scrollbar on main container when not needed */
body,
html,
#root,
main,
[class*="main"] {
    overflow-x: hidden !important;
}

.welcome-screen,
[class*="welcome"] {
    overflow: hidden !important;
}

/* Header / top bar */
header,
[class*="header"],
.flex.flex-col.h-full.w-full > div:first-child {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
}

/* Accent color overrides */
[class*="primary"],
[class*="accent"] {
    color: var(--primary) !important;
}


/* AskActionMessage buttons - domain selection shown in chat */
/* These are the action buttons with border-input bg-background classes */
.flex.items-center.gap-1.flex-wrap button,
button.bg-background.border-input,
button.border.bg-background {
    background: var(--starter-bg) !important;
    border: 1px solid rgba(157, 78, 221, 0.25) !important;
    border-radius: 1.5rem !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Saira', sans-serif !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    padding: 0.625rem 1.25rem !important;
}

.flex.items-center.gap-1.flex-wrap button:hover,
button.bg-background.border-input:hover,
button.border.bg-background:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 24px rgba(157, 78, 221, 0.18) !important;
    background: var(--starter-hover-bg) !important;
}

/* Selection */
::selection {
    background: rgba(157, 78, 221, 0.2);
    color: inherit;
}

/* Focus states */
*:focus-visible {
    outline: 2px solid rgba(157, 78, 221, 0.3) !important;
    outline-offset: 2px !important;
}