@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Ubuntu Sans';
    src: url('/fonts/ubuntu-sans/UbuntuSans[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu Sans';
    src: url('/fonts/ubuntu-sans/UbuntuSans-Italic[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[v-cloak] { display: none; }

html, body { background: transparent; }

:root {
    /* ── Typography ── */
    --font-sans:   'Ubuntu Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:   'Ubuntu Sans Mono', 'Consolas', 'Monaco', monospace;
    --text-base:   0.875rem;  /* 14px — single base size for all UI text */

    /* Surface colors - slate blue */
    --bg:          #0f172a;
    --surface:     #1e293b;
    --border:      #334155;
    --chat-bg:     #0f172a;
    --agent:       #1e293b;
    --agent-border:#475569;
    --muted:       #334155;
    --muted-text:  #94a3b8;

    /* Text */
    --text:        #eee;
    --text-dim:    #888;

    /* Semantic colors */
    --accent:      #818cf8;   /* indigo — primary action / UI chrome */
    --user-bubble: #2d5a3d;   /* muted green — user messages */
    --primary:     #3b82f6;   /* blue — info, links */
    --secondary:   #6366f1;   /* indigo — secondary badges */
    --success:     #22c55e;   /* green — yes, wrap up, positive */
    --success-dim: #4ade80;   /* light green — connected lamp */
    --warn:        #fbbf24;   /* yellow — connecting, caution */
    --error:       #f87171;   /* red-light — errors, destructive */
    --focus:       #4ade80;   /* green — input focus rings */

    /* Dim surface — used by system groups, subtle containers */
    --bg-dim:      #1a2133;

    /* Disabled */
    --disabled-opacity: 0.4;

    /* Layout tokens */
    --space-page:  32px;   /* horizontal page gutter */
    --space-gap:    8px;   /* gap between stacked sections */
    --space-inset: 12px;   /* padding inside components */
    --radius:       8px;   /* cards, inputs, large buttons */
    --radius-sm:    6px;   /* toolbar buttons, badges */
    --radius-panel: 12px;  /* floating panels (sidebar, toolbar groups) */
    --height-nav:  40px;   /* top nav bar */
    --height-btn:  32px;   /* toolbar buttons */
    --text-sm:     var(--text-base);  /* legacy alias — same as base now */
    --text-xs:     var(--text-base);  /* legacy alias — same as base now */

    /* Panel system — elevated floating containers */
    --panel-bg:     #1a2540;
    --panel-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.05);
    --panel-gap:    6px;   /* gap between panels and edges */
}

/* Mobile overrides: applied per-element in view CSS files, not via global var changes.
   CSS vars stay constant across all breakpoints to prevent resize flicker. */

/* ── ERAS theme (bright) ────────────────────────────────────── */
[data-theme="eras"] {
    --bg:          #ffffff;
    --surface:     #f5f5f5;
    --border:      #e2e2e2;
    --chat-bg:     #fafafa;
    --agent:       #f0f0f0;
    --agent-border:#d0d0d0;
    --muted:       #e8e8e8;
    --muted-text:  #8f8f8f;

    --text:        #212121;
    --text-dim:    #646464;

    --accent:      #005e83;   /* eras teal-blue — nav, active, UI chrome */
    --user-bubble: #fef3e5;   /* warm orange tint for user messages */
    --primary:     #e25303;   /* eras orange — links, actions */
    --secondary:   #3567fd;
    --success:     #009490;   /* eras teal */
    --success-dim: #00b8b3;
    --warn:        #ff8044;
    --error:       #df3131;
    --focus:       #e25303;

    --bg-dim:      #f0ece8;
    --disabled-opacity: 0.4;

    /* Markdown code blocks */
    --code-bg:     #f0f0f0;
    --text-bright: #212121;

    /* Nav links */
    --nav-link:        #005e83;
    --nav-link-active: #005e83;

    /* Send button */
    --send-btn-bg:     #e25303;
    --send-btn-color:  #ffffff;

    /* Panel system */
    --panel-bg:     #ffffff;
    --panel-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.12);
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    /* iOS safe areas (notch, home indicator) */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Prevent iOS auto-zoom on input focus — set base to 16px globally
   (iOS zooms when font-size < 16px). No breakpoint needed. */
input, select, textarea { font-size: 1rem; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
}

[data-theme="eras"] {
    --font-sans: 'Raleway', 'Segoe UI', sans-serif;
}

/* ── Workhorse theme (neutral dark + 6 happy kids colors) ─── */
/* Palette: #73B96E #46915C #F25E44 #489FB2 #FFD96C #C895C0   */
/* Backgrounds: neutral grays, not from palette                */
[data-theme="loop42"] {
    --bg:          #1A212C;
    --surface:     #222a36;
    --border:      #1D7872;
    --chat-bg:     #1e2630;
    --agent:       #222a36;
    --agent-border:#1D7872;
    --muted:       #2a3340;
    --muted-text:  #71B095;

    --text:        #e8e6e0;
    --text-dim:    #71B095;

    --accent:      #1D7872;   /* deep teal — grounded */
    --user-bubble: #2a3340;
    --primary:     #71B095;   /* sage green — links */
    --btn-bg:      #1D7872;
    --btn-text:    #e8e6e0;
    --btn-hover:   #71B095;

    --input-bg:    #222a36;
    --input-border:#1D7872;
    --input-text:  #e8e6e0;

    /* Panel system */
    --panel-bg:     #1e2630;
    --panel-shadow: 0 2px 12px rgba(0,0,0,0.35), 0 0 1px rgba(29,120,114,0.15);
}

/* Scrollbars — OverlayScrollbars handles main containers.
   Fallback for any native scrollbar we missed. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* Hide native scrollbar inside OverlayScrollbars viewports */
[data-overlayscrollbars-viewport] { scrollbar-width: none; }
[data-overlayscrollbars-viewport]::-webkit-scrollbar { display: none; }

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: var(--disabled-opacity); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Emoji: use system font so sizing is consistent across platforms */
.emoji, [role="img"] {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-style: normal;
}

/* Touch: prevent tap highlight on mobile */
* { -webkit-tap-highlight-color: transparent; }

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── Mobile: tighter spacing ── */
@media (max-width: 480px) {
    :root {
        --space-page: 12px;
        --space-inset: 8px;
    }
}