/* Shared theme for landing and app. Dark is the base; light applies when the OS prefers it or data-theme="light" is set (App.razor).
   --vp-* are the new tokens; the legacy tokens from app.css are remapped so existing CSS follows the theme. */

/* Dark (base) */
:root {
    --vp-font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --vp-mono: ui-monospace, 'Cascadia Code', 'Fira Mono', Consolas, monospace;
    color-scheme: dark;
    --vp-green: #00b25c;
    --vp-green-light: #20c997;
    --vp-bg: #040706;
    --vp-ink: #fff;
    --vp-muted: rgba(255, 255, 255, .86);
    --vp-faint: rgba(255, 255, 255, .66);
    --vp-card: rgba(27, 32, 35, .6);
    --vp-card-solid: #121a16;
    --vp-border: rgba(255, 255, 255, .13);
    --vp-border-green: rgba(32, 201, 151, .35);
    --vp-accent: #20c997;
    --vp-tint: rgba(0, 178, 92, .12);
    --vp-ink-btn-bg: #fff;
    --vp-ink-btn-fg: #000;
    --vp-shadow: 0 7px 11px rgba(0, 0, 0, .28), 0 40px 90px rgba(0, 0, 0, .6);
    --vp-beam-opacity: 1;
    --vp-hairline: rgba(255, 255, 255, .08);
    --vp-url-bg: rgba(113, 122, 132, .2);
    --vp-sidebar: linear-gradient(180deg, #00803f 0%, #005a2f 100%);
    --vp-title-bg: linear-gradient(135deg, #00b25c, #20c997);
    --vp-glass: rgba(27, 32, 35, .8);
    --vp-glass-border: rgba(255, 255, 255, .13);
    --vp-glass-soft: rgba(255, 255, 255, .06);
    --vp-glass-soft2: rgba(255, 255, 255, .07);
    --vp-glass-bar: rgba(27, 32, 35, .7);
    --vp-mixbase: #1b2023;
    --vp-code-bg: rgba(32, 201, 151, .16);
    --vp-subtle: rgba(255, 255, 255, .07);
    --vp-input-border: rgba(255, 255, 255, .2);
    --vp-track: rgba(255, 255, 255, .25);
    --vp-warn-bg: rgba(245, 176, 74, .15); --vp-warn-border: rgba(245, 176, 74, .4); --vp-warn-fg: #f5b04a;
    --vp-imp-crit-bg: rgba(248, 113, 113, .16); --vp-imp-crit-fg: #fca5a5; --vp-imp-crit-bd: rgba(248, 113, 113, .4);
    --vp-imp-high-bg: rgba(251, 146, 60, .16);  --vp-imp-high-fg: #fdba74; --vp-imp-high-bd: rgba(251, 146, 60, .4);
    --vp-imp-med-bg: rgba(250, 204, 21, .14);   --vp-imp-med-fg: #fde047;  --vp-imp-med-bd: rgba(250, 204, 21, .38);
    --vp-imp-low-bg: rgba(255, 255, 255, .08);  --vp-imp-low-fg: rgba(255, 255, 255, .78); --vp-imp-low-bd: rgba(255, 255, 255, .2);
    /* sidebar hover / selected highlight: dark frosted glass in dark mode (light mode keeps the white frosted glass) */
    --vp-side-hover-bg: rgba(2, 22, 13, .15);
    --vp-side-hover-bd: rgba(255, 255, 255, .10);
    --vp-side-hover-sh: inset 0 0 6px 2px rgba(0, 0, 0, .10);
    --vp-side-active-bg: rgba(2, 16, 10, .20);
    --vp-side-active-bd: rgba(255, 255, 255, .14);
    --vp-side-active-sh: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 8px 3px rgba(0, 0, 0, .10);
    --vp-float-opacity: .45;   /* floating example prompts */
    /* sidebar personality items (Creative, Direct...): same soft-white / white-glass pattern as the other nav items */
    --vp-pers-fg: rgba(255, 255, 255, .75);
    --vp-pers-on-fg: #fff;
    --vp-pers-hover-bg: rgba(255, 255, 255, .05);
    --vp-pers-active-bg: rgba(255, 255, 255, .08);
    --vp-sub: rgba(255, 255, 255, .92);
    --vp-scroll: rgba(255, 255, 255, .22);
    --vp-scroll-hover: rgba(255, 255, 255, .4);
    --vp-wash: transparent;   /* no edge fade in either theme: the canvas reads as painted edge to edge */
    --vp-wash-a: rgba(2, 9, 6, .92);   /* dark veil over the shared artwork */
    --vp-main-img: url('/Intellivega-background.webp') center / cover no-repeat fixed;
    --vp-main-beam: linear-gradient(transparent, transparent);   /* no diagonal beam in the app */
    --vp-main-glow: rgba(0, 178, 92, .12);
    --vp-main-glow2: rgba(32, 201, 151, .06);

    /* legacy app tokens, dark values */
    --green: #00b25c;
    --green-bright: #20c997;
    --tint: rgba(0, 178, 92, .14);
    --pale: rgba(0, 178, 92, .07);
    --white: #0e1311;
    --bg: #040706;
    --ink: #fff;
    --grey: rgba(255, 255, 255, .86);
    --grey-light: rgba(255, 255, 255, .62);
    --border: rgba(255, 255, 255, .13);
    --disabled: rgba(255, 255, 255, .1);
    --red: #ff8a8a;
    --red-border: rgba(255, 138, 138, .35);
    --red-bg: rgba(205, 32, 32, .16);
}

/* Light */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --vp-bg: #f4faf6;
        --vp-ink: #15141f;
        --vp-muted: #475257;
        --vp-faint: #6b767a;
        --vp-card: rgba(255, 255, 255, .78);
        --vp-card-solid: #fff;
        --vp-border: rgba(21, 20, 31, .1);
        --vp-border-green: rgba(0, 150, 80, .35);
        --vp-accent: #00803f;
        --vp-tint: rgba(0, 178, 92, .1);
        --vp-ink-btn-bg: #15141f;
        --vp-ink-btn-fg: #fff;
        --vp-shadow: 0 2px 6px rgba(21, 20, 31, .06), 0 30px 70px rgba(0, 120, 70, .16);
        --vp-beam-opacity: .5;
        --vp-hairline: rgba(21, 20, 31, .08);
        --vp-url-bg: rgba(21, 20, 31, .06);
        --vp-sidebar: #00733c;
        --vp-title-bg: linear-gradient(135deg, #00733c, #00733c);
        --vp-main-img: url('/Intellivega-background.webp') center / cover no-repeat fixed;
        --vp-main-beam: linear-gradient(transparent, transparent);
        --vp-main-glow2: transparent;
        --vp-glass: rgba(255, 255, 255, .8);
        --vp-glass-border: rgba(255, 255, 255, .7);
        --vp-glass-soft: rgba(255, 255, 255, .35);
        --vp-glass-soft2: rgba(255, 255, 255, .55);
        --vp-glass-bar: rgba(247, 247, 247, .65);
        --vp-mixbase: #fff;
        --vp-pers-fg: #fff;
        --vp-pers-on-fg: #00733c;
        --vp-pers-hover-bg: rgba(241, 252, 241, .78);
        --vp-pers-active-bg: rgba(229, 252, 229, .8);
        --vp-code-bg: rgba(0, 82, 0, .07);
        --vp-subtle: #f5f5f5;
        --vp-input-border: #d9d9d9;
        --vp-track: #d9d9d9;
        --vp-warn-bg: #fff7eb; --vp-warn-border: #ffe7c0; --vp-warn-fg: #dd8b05;
        --vp-imp-crit-bg: #fef2f2; --vp-imp-crit-fg: #b91c1c; --vp-imp-crit-bd: #fecaca;
        --vp-imp-high-bg: #fff7ed; --vp-imp-high-fg: #c2410c; --vp-imp-high-bd: #fed7aa;
        --vp-imp-med-bg: #fefce8;  --vp-imp-med-fg: #a16207;  --vp-imp-med-bd: #fef08a;
        --vp-imp-low-bg: #f3f4f6;  --vp-imp-low-fg: #4b5563;  --vp-imp-low-bd: #e5e7eb;
        --vp-side-hover-bg: rgba(255, 255, 255, .05);
        --vp-side-hover-bd: rgba(255, 255, 255, .15);
        --vp-side-hover-sh: inset 0 0 5px 2px rgba(255, 255, 255, .25);
        --vp-side-active-bg: rgba(255, 255, 255, .08);
        --vp-side-active-bd: rgba(255, 255, 255, .25);
        --vp-side-active-sh: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 6px 3px rgba(255, 255, 255, .35);
        --vp-float-opacity: .22;
        --vp-sub: rgba(0, 85, 0, .72);
        --vp-scroll: rgba(0, 82, 0, .25);
        --vp-scroll-hover: rgba(0, 82, 0, .4);
        --vp-wash: transparent;
        --vp-wash-a: rgba(255, 255, 255, .6);
        --vp-main-glow: rgba(0, 178, 92, .08);
        --green: #00733c; --green-bright: #00b25c; --tint: #e6f8ee; --pale: #f1fcf1; --white: #fff;
        --bg: #f4faf6; --ink: #15141f; --grey: #585f62; --grey-light: #9b9b9b; --border: #e0dfe5;
        --disabled: #e8e8e8; --red: #cd2020; --red-border: #fecaca; --red-bg: #fef2f2;
    }
}
:root[data-theme="light"] {
    color-scheme: light;
    --vp-bg: #f4faf6;
    --vp-ink: #15141f;
    --vp-muted: #475257;
    --vp-faint: #6b767a;
    --vp-card: rgba(255, 255, 255, .78);
    --vp-card-solid: #fff;
    --vp-border: rgba(21, 20, 31, .1);
    --vp-border-green: rgba(0, 150, 80, .35);
    --vp-accent: #00803f;
    --vp-tint: rgba(0, 178, 92, .1);
    --vp-ink-btn-bg: #15141f;
    --vp-ink-btn-fg: #fff;
    --vp-shadow: 0 2px 6px rgba(21, 20, 31, .06), 0 30px 70px rgba(0, 120, 70, .16);
    --vp-beam-opacity: .5;
    --vp-hairline: rgba(21, 20, 31, .08);
    --vp-url-bg: rgba(21, 20, 31, .06);
    --vp-sidebar: #00733c;
    --vp-title-bg: linear-gradient(135deg, #00733c, #00733c);
    --vp-main-img: url('/Intellivega-background.webp') center / cover no-repeat fixed;
    --vp-main-beam: linear-gradient(transparent, transparent);
    --vp-main-glow2: transparent;
    --vp-glass: rgba(255, 255, 255, .8);
    --vp-glass-border: rgba(255, 255, 255, .7);
    --vp-glass-soft: rgba(255, 255, 255, .35);
    --vp-glass-soft2: rgba(255, 255, 255, .55);
    --vp-glass-bar: rgba(247, 247, 247, .65);
    --vp-mixbase: #fff;
    --vp-pers-fg: #fff;
    --vp-pers-on-fg: #00733c;
    --vp-pers-hover-bg: rgba(241, 252, 241, .78);
    --vp-pers-active-bg: rgba(229, 252, 229, .8);
    --vp-code-bg: rgba(0, 82, 0, .07);
    --vp-subtle: #f5f5f5;
    --vp-input-border: #d9d9d9;
    --vp-track: #d9d9d9;
    --vp-warn-bg: #fff7eb; --vp-warn-border: #ffe7c0; --vp-warn-fg: #dd8b05;
    --vp-imp-crit-bg: #fef2f2; --vp-imp-crit-fg: #b91c1c; --vp-imp-crit-bd: #fecaca;
    --vp-imp-high-bg: #fff7ed; --vp-imp-high-fg: #c2410c; --vp-imp-high-bd: #fed7aa;
    --vp-imp-med-bg: #fefce8;  --vp-imp-med-fg: #a16207;  --vp-imp-med-bd: #fef08a;
    --vp-imp-low-bg: #f3f4f6;  --vp-imp-low-fg: #4b5563;  --vp-imp-low-bd: #e5e7eb;
    --vp-side-hover-bg: rgba(255, 255, 255, .05);
    --vp-side-hover-bd: rgba(255, 255, 255, .15);
    --vp-side-hover-sh: inset 0 0 5px 2px rgba(255, 255, 255, .25);
    --vp-side-active-bg: rgba(255, 255, 255, .08);
    --vp-side-active-bd: rgba(255, 255, 255, .25);
    --vp-side-active-sh: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 6px 3px rgba(255, 255, 255, .35);
    --vp-float-opacity: .22;
    --vp-sub: rgba(0, 85, 0, .72);
    --vp-scroll: rgba(0, 82, 0, .25);
    --vp-scroll-hover: rgba(0, 82, 0, .4);
    --vp-wash: transparent;
    --vp-wash-a: rgba(255, 255, 255, .6);
    --vp-main-glow: rgba(0, 178, 92, .08);
    --green: #00733c; --green-bright: #00b25c; --tint: #e6f8ee; --pale: #f1fcf1; --white: #fff;
    --bg: #f4faf6; --ink: #15141f; --grey: #585f62; --grey-light: #9b9b9b; --border: #e0dfe5;
    --disabled: #e8e8e8; --red: #cd2020; --red-border: #fecaca; --red-bg: #fef2f2;
}

/* Shared base */
html { background: var(--vp-bg); }
/* Form controls do not inherit the page font by default, which made buttons/inputs render in a different face. */
button, input, select, textarea { font-family: inherit; }
code, pre, kbd, samp { font-family: var(--vp-mono); }
/* app.css has no global margin reset, so the default 8px body margin inset the chat and landing pages and left an unpainted frame. */
body:has(.app-shell), body:has(.landing-page) { margin: 0; }
.main-area { background-color: var(--vp-bg); }
body { background: var(--vp-bg); color: var(--ink); font-family: var(--vp-font); }
.sidebar { background: var(--vp-sidebar); }

/* Theme toggle (landing nav + chat) */
.vp-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--vp-ink); border: 1px solid var(--vp-border); transition: border-color .2s, color .2s; }
.vp-theme-toggle:hover { border-color: var(--vp-green-light); color: var(--vp-accent); }
.vp-theme-toggle .icon-moon, .vp-theme-switch .icon-moon { display: none; }
.vp-lbl-to-dark { display: none; }   /* label shows the mode the button switches TO: dark theme -> "Light Mode" */
:root[data-theme="light"] .vp-lbl-to-light { display: none; }
:root[data-theme="light"] .vp-lbl-to-dark { display: inline; }
:root[data-theme="light"] :is(.vp-theme-toggle, .vp-theme-switch) .icon-sun { display: none; }
:root[data-theme="light"] :is(.vp-theme-toggle, .vp-theme-switch) .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) :is(.vp-theme-toggle, .vp-theme-switch) .icon-sun { display: none; }
    :root:not([data-theme="dark"]) :is(.vp-theme-toggle, .vp-theme-switch) .icon-moon { display: block; }
    :root:not([data-theme="dark"]) .vp-lbl-to-light { display: none; }
    :root:not([data-theme="dark"]) .vp-lbl-to-dark { display: inline; }
}

/* Hero title: same green gradient as the landing page headline in dark; solid brand green in light. */
.composer-hero__title { background: var(--vp-title-bg); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* background-clip:text only paints inside the element box; the title's line-height:1 cut the descenders (g, p). */
.composer-hero__title { padding: 0 .06em .18em; margin-bottom: calc(12px - .18em); }

/* Plain pages (not-found, error, access-denied) share the chat's canvas */
.auth-page, body:has(.error-page) {
    background:
        radial-gradient(ellipse 55% 45% at 88% 0%, var(--vp-main-glow), transparent 70%),
        radial-gradient(ellipse 50% 45% at 8% 100%, var(--vp-main-glow2), transparent 70%),
        var(--vp-main-beam),
        linear-gradient(var(--vp-wash-a), var(--vp-wash-a)),
        var(--vp-main-img);
    background-color: var(--vp-bg);
}
.vp-theme-toggle--corner { position: fixed; top: 18px; right: 20px; z-index: 60; }
.error-page__icon { color: var(--green); }
.error-page__btn { background: linear-gradient(135deg, var(--vp-green), var(--vp-green-light)); border-radius: 999px; padding: 10px 26px; box-shadow: 0 6px 22px rgba(0, 178, 92, .3); }

/* Sidebar account row: not interactive; the tooltip carries the full email. */
.nav-item--account { cursor: default; }
.nav-item--account .flyout-card__text { word-break: break-all; }

/* Chat top-bar toggle: same frosted glass as the Admin / Sign out buttons beside it. */
.topbar-float-actions .vp-theme-toggle {
    width: auto; height: auto; padding: 4px 9px;
    border: 1px solid var(--vp-glass-border); background: var(--vp-glass-soft);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.05);
    border-radius: var(--r-md); color: var(--grey);
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.topbar-float-actions .vp-theme-toggle:hover {
    background: rgba(10,102,22,0.12); border-color: rgba(10,102,22,0.3);
    box-shadow: inset 0 0 6px 2px rgba(10,102,22,0.15), 0 2px 8px rgba(0,0,0,0.05);
    color: var(--green);
}