/* Fonts — display face for headings/labels, system stack for readable body */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --bg-color: #f5f6f9;
    --bg-gradient: radial-gradient(1200px 800px at 100% -10%, rgba(99,108,140,0.07), transparent 60%),
                   radial-gradient(900px 700px at -10% 110%, rgba(120,140,200,0.06), transparent 60%);
    --glass-bg: rgba(255, 255, 255, 0.74);
    --glass-border: rgba(20, 26, 40, 0.08);
    --text-primary: #0c0e15;
    --text-secondary: #565c6a;
    --text-tertiary: #7b8294;
    --text-muted: #9aa0ad;
    --accent-color: #0c0e15;
    --accent-text: #ffffff;
    --accent-hover: #2a2d3a;
    --accent-soft: rgba(12, 14, 21, 0.07);
    --accent-faint: rgba(12, 14, 21, 0.04);

    --surface-1: #ffffff;
    --surface-2: #f7f8fb;
    --surface-3: #eef0f5;
    --surface-hover: rgba(12, 14, 21, 0.055);
    --surface-active: rgba(12, 14, 21, 0.09);
    --border-soft: #e6e9ef;
    --border-mid: #d3d9e2;
    --border-strong: #0c0e15;
    --shadow-soft: 0 1px 2px rgba(12,18,28,0.04), 0 4px 14px rgba(12,18,28,0.05);
    --shadow-mid: 0 2px 6px rgba(12,18,28,0.06), 0 14px 32px rgba(12,18,28,0.10);
    --shadow-strong: 0 8px 24px rgba(12,18,28,0.12), 0 28px 64px rgba(12,18,28,0.18);
    --ring-focus: 0 0 0 3px rgba(12, 14, 21, 0.10);

    --code-bg: #282c34;
    --code-text: #abb2bf;
    --code-border: #333333;
    --inline-code-bg: rgba(20, 26, 40, 0.06);
    --inline-code-bg-on-user: rgba(255, 255, 255, 0.18);

    --think-bg: #f7f8fb;
    --think-border: #e6e9ef;
    --think-text: #4a4f5c;
    --think-summary: #565c6a;

    --message-user-bg: linear-gradient(125deg, #14171f 0%, #0c0e15 100%);
    --message-user-text: #ffffff;
    --message-bot-bg: #ffffff;
    --message-bot-text: #0c0e15;
    --message-bot-shadow: 0 1px 2px rgba(12,18,28,0.04), 0 8px 22px rgba(12,18,28,0.06);
    --message-bot-border: rgba(20, 26, 40, 0.07);
    --message-user-shadow: 0 6px 18px rgba(12,14,21,0.18);

    --backdrop-overlay: rgba(8, 10, 16, 0.32);
    --backdrop-modal: rgba(8, 10, 16, 0.46);

    --danger: #d33333;
    --danger-strong: #e74c3c;
    --success: #16a34a;

    --sidebar-width: 280px;
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --danger-soft: rgba(211, 51, 51, 0.10);
    --danger-faint: rgba(211, 51, 51, 0.05);
    --shadow-input-focus: 0 0 0 4px var(--accent-faint), 0 6px 18px rgba(12,18,28,0.10);
    --shadow-soft-accent: 0 2px 8px rgba(12,14,21,0.10), 0 10px 26px rgba(12,14,21,0.14);
    --overlay-hairline: 0 0 0 1px rgba(255, 255, 255, 0.10) inset;

    /* Typography tokens */
    --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Sarasa Gothic Fixed", "Sarasa Fixed SC", "JetBrains Mono", "SF Mono", "Consolas", monospace;

    /* Motion Design Tokens */
    --duration-press: 90ms;
    --duration-micro: 150ms;
    --duration-enter: 260ms;
    --duration-exit: 180ms;
    --duration-stagger: 32ms;
    --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
    --transition-interactive:
        background-color var(--duration-micro) var(--ease-standard),
        border-color var(--duration-micro) var(--ease-standard),
        color var(--duration-micro) var(--ease-standard),
        transform var(--duration-micro) var(--ease-standard),
        box-shadow var(--duration-micro) var(--ease-standard);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --bp-sm: 360px;
    --bp-md: 480px;
    --bp-lg: 768px;
    --bp-xl: 769px;
    --control-size: 52px;
    --control-size-md: 44px;
    --control-size-sm: 36px;
    --control-size-xs: 32px;
    --header-padding-x: 40px;
    --chat-padding-x: 40px;
    --chat-padding-x-md: 16px;
    --chat-padding-x-sm: 10px;
}

html[data-theme="dark"] {
    --bg-color: #0a0b0e;
    --bg-gradient: radial-gradient(1200px 800px at 100% -10%, rgba(120,140,200,0.05), transparent 60%),
                   radial-gradient(900px 700px at -10% 110%, rgba(60,80,140,0.06), transparent 60%);
    --glass-bg: rgba(22, 24, 28, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-primary: #eef0f4;
    --text-secondary: #aab1bd;
    --text-tertiary: #858b99;
    --text-muted: #656b78;
    --accent-color: #f3f4f7;
    --accent-text: #0a0b0e;
    --accent-hover: #d4d8e0;
    --accent-soft: rgba(255, 255, 255, 0.08);
    --accent-faint: rgba(255, 255, 255, 0.04);

    --surface-1: #16171a;
    --surface-2: #121315;
    --surface-3: #1e1f24;
    --surface-hover: rgba(255, 255, 255, 0.06);
    --surface-active: rgba(255, 255, 255, 0.10);
    --border-soft: #24262b;
    --border-mid: #34363d;
    --border-strong: #f3f4f7;
    --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.45);
    --shadow-mid: 0 2px 6px rgba(0,0,0,0.5), 0 16px 36px rgba(0,0,0,0.6);
    --shadow-strong: 0 8px 24px rgba(0,0,0,0.65), 0 28px 72px rgba(0,0,0,0.7);
    --ring-focus: 0 0 0 3px rgba(255, 255, 255, 0.14);

    --code-bg: #0d1017;
    --code-text: #c9d1d9;
    --code-border: #1f242c;
    --inline-code-bg: rgba(180,180,200,0.15);
    --inline-code-bg-on-user: rgba(0,0,0,0.25);

    --think-bg: #141518;
    --think-border: #24262b;
    --think-text: #b8bdc8;
    --think-summary: #9aa0ad;

    --message-user-bg: linear-gradient(125deg, #ffffff 0%, #e8ebf1 100%);
    --message-user-text: #0a0b0e;
    --message-bot-bg: #181a1e;
    --message-bot-text: #eef0f4;
    --message-bot-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 8px 22px rgba(0,0,0,0.40);
    --message-bot-border: rgba(255, 255, 255, 0.06);
    --message-user-shadow: 0 8px 22px rgba(0,0,0,0.45);

    --backdrop-overlay: rgba(0,0,0,0.55);
    --backdrop-modal: rgba(0,0,0,0.65);

    --danger-soft: rgba(255, 99, 99, 0.12);
    --danger-faint: rgba(255, 99, 99, 0.06);
    --shadow-input-focus: 0 0 0 4px var(--accent-faint), 0 6px 18px rgba(0,0,0,0.40);
    --shadow-soft-accent: 0 2px 8px rgba(0,0,0,0.40), 0 10px 26px rgba(0,0,0,0.48);
    --overlay-hairline: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;

    --danger: #ff6363;
    --danger-strong: #ff5050;
    --success: #22c55e;

    color-scheme: dark;
}

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

html {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
    height: 100%;
    display: flex;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-color); color: var(--accent-text); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; transition: background var(--duration-micro) var(--ease-standard); }
::-webkit-scrollbar-thumb:hover { background: var(--border-mid); background-clip: padding-box; border: 2px solid transparent; }
html { scrollbar-color: var(--border-mid) transparent; scrollbar-width: thin; }

:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, [role="menuitem"]:focus-visible { outline-offset: 1px; outline-width: 2px; }
/* custom svg-heavy buttons with transparent backgrounds get a soft ring instead of a crisp outline */
.icon-btn:focus-visible, .upload-btn:focus-visible, .queue-btn:focus-visible,
.send-btn:focus-visible, .action-icon:focus-visible, .context-menu-item:focus-visible {
    outline: none; box-shadow: var(--ring-focus);
    border-radius: var(--radius-md);
}
.context-menu-item:focus-visible { border-radius: 7px; }

h1, h2, h3, .font-display {
    font-family: var(--font-display);
    font-feature-settings: "ss01", "cv11";
}

@keyframes slideUpFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes msgSlideInRight {
    from { opacity: 0; transform: translateX(12px) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes fadeIn { to { opacity: 1; } }
@keyframes resultThinkingBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
@keyframes resultStreamingCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
}
@keyframes textSweep {
    from { background-position: 220% 0; }
    to { background-position: -220% 0; }
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes toastEnter { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastLeave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes textPopIn {
    from { opacity: 0; transform: translateY(4px) scale(0.96); filter: blur(2px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
}
@keyframes bubbleResetShrink {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.82); opacity: 0; }
}
@keyframes bubbleResetExpand {
    from { transform: scale(0.82); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes menuEnter {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeScaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes queueDrawerOpen {
    from { opacity: 0; transform: translateY(-6px) scaleY(0.92); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes queueItemEnter {
    from { opacity: 0; transform: translateX(-10px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes softPulseRing {
    0%, 100% { box-shadow: 0 0 0 0 var(--danger-soft); }
    50% { box-shadow: 0 0 0 6px transparent; }
}
@keyframes toastBounce {
    0% { opacity: 0; transform: translateY(-18px) scale(0.92); }
    60% { opacity: 1; transform: translateY(2px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shimmerSweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}