/* ============================================================
   BASE / DESIGN SYSTEM (tokens, themes, resets, typography)
   ------------------------------------------------------------
   Every colour in the app is read from these tokens. Three
   themes are defined; the active one is set as
   <html data-theme="dark|light|avune|blue|red|green|gray"> by js/theme.js
   (and by a tiny inline script in the HTML <head> so there's
   no flash of the wrong theme on load).
   ============================================================ */

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

/* ── Theme-independent tokens ───────────────────────────────── */
:root {
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   22px;

    --font-head: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

    --sidebar-w: 248px;
    --topbar-h:  60px;
    --shell-gap: 12px;   /* breathing room around the floating sidebar/topbar */

    --transition: 0.18s cubic-bezier(0.4,0,0.2,1);
    --blur: 18px;
}

/* ── DARK (default) — midnight navy glass, periwinkle accent ── */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --bg:          #05070D;
    --bg-sunken:   #0A0D18;
    --bg-2:        #0F1322;
    --bg-3:        #161B2E;
    --bg-4:        #1F2640;

    --surface:       linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.015) 100%);
    --surface-solid: rgba(13,17,31,0.78);
    --glass-bg:      rgba(13,17,31,0.62);
    --highlight:     rgba(255,255,255,0.07);

    --border:       rgba(255,255,255,0.075);
    --border-hover: rgba(255,255,255,0.16);

    --text-1:      #ECEFF7;
    --text-2:      #A3ABC3;
    --text-3:      #646D89;

    --accent:        #93A6F2;
    --accent-hover:  #B4C1F7;
    --accent-strong: #93A6F2;
    --on-accent:     #0A0E1C;
    --accent-dim:    rgba(147,166,242,0.13);
    --accent-ring:   rgba(147,166,242,0.34);

    --danger:      #EE6A6A;
    --danger-dim:  rgba(238,106,106,0.13);
    --success:     #5BD3A0;
    --success-dim: rgba(91,211,160,0.12);
    --info:        #6E9BFF;
    --info-dim:    rgba(110,155,255,0.13);
    --warning:     #F0B661;
    --warning-dim: rgba(240,182,97,0.13);

    --state-open:        #7A84A3;
    --state-in-progress: #6E9BFF;
    --state-on-hold:     #F0B661;
    --state-ready:       #B48CFF;
    --state-done:        #5BD3A0;
    --state-aborted:     #EE6A6A;

    --prio-low:      #5BD3A0;
    --prio-medium:   #6E9BFF;
    --prio-high:     #F0B661;
    --prio-critical: #EE6A6A;

    --fill-1:   rgba(255,255,255,0.045);
    --fill-2:   rgba(255,255,255,0.085);
    --input-bg: rgba(4,6,13,0.55);
    --glow-1: rgba(48,84,214,0.42);
    --glow-2: rgba(30,46,128,0.34);
    --topbar-bg: rgba(12,15,28,0.58);
    --overlay:   rgba(2,4,10,0.62);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-md: 0 10px 30px -10px rgba(0,0,0,0.65);
    --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── LIGHT — frosted porcelain, deep indigo accent ──────────── */
[data-theme="light"] {
    color-scheme: light;

    --bg:          #ECEFF6;
    --bg-sunken:   #E3E7F1;
    --bg-2:        #FFFFFF;
    --bg-3:        #F3F5FA;
    --bg-4:        #E7EBF4;

    --surface:       linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.74) 100%);
    --surface-solid: rgba(255,255,255,0.86);
    --glass-bg:      rgba(255,255,255,0.68);
    --highlight:     rgba(255,255,255,0.95);

    --border:       rgba(22,32,66,0.085);
    --border-hover: rgba(22,32,66,0.17);

    --text-1:      #10162A;
    --text-2:      #4A5474;
    --text-3:      #8A93AD;

    --accent:        #4A5FD0;
    --accent-hover:  #3A4EBD;
    --accent-strong: #4A5FD0;
    --on-accent:     #FFFFFF;
    --accent-dim:    rgba(74,95,208,0.10);
    --accent-ring:   rgba(74,95,208,0.26);

    --danger:      #D24646;
    --danger-dim:  rgba(210,70,70,0.10);
    --success:     #1E9963;
    --success-dim: rgba(30,153,99,0.10);
    --info:        #2F68E0;
    --info-dim:    rgba(47,104,224,0.10);
    --warning:     #C27C12;
    --warning-dim: rgba(194,124,18,0.11);

    --state-open:        #6B7591;
    --state-in-progress: #2F68E0;
    --state-on-hold:     #C27C12;
    --state-ready:       #7C47DB;
    --state-done:        #1E9963;
    --state-aborted:     #D24646;

    --prio-low:      #1E9963;
    --prio-medium:   #2F68E0;
    --prio-high:     #C27C12;
    --prio-critical: #D24646;

    --fill-1:   rgba(22,32,66,0.045);
    --fill-2:   #FFFFFF;
    --input-bg: #FFFFFF;
    --glow-1: rgba(108,132,255,0.30);
    --glow-2: rgba(170,150,255,0.22);
    --topbar-bg: rgba(255,255,255,0.62);
    --overlay:   rgba(22,28,48,0.32);

    --shadow-sm: 0 1px 2px rgba(22,32,66,0.07);
    --shadow-md: 0 12px 30px -12px rgba(22,32,66,0.18);
    --shadow-lg: 0 30px 70px -24px rgba(22,32,66,0.30), 0 0 0 1px rgba(22,32,66,0.05);
}

/* ── AVUNE — deep ultraviolet, built from the brand palette ─────
   #E0D6FF  #B19AF9  #784EF9  #613DD1  #523C96  #2B0F80          */
[data-theme="avune"] {
    color-scheme: dark;

    --bg:          #090418;
    --bg-sunken:   #0E0826;
    --bg-2:        #150D35;
    --bg-3:        #1E1449;
    --bg-4:        #2B0F80;

    --surface:       linear-gradient(180deg, rgba(224,214,255,0.07) 0%, rgba(224,214,255,0.018) 100%);
    --surface-solid: rgba(20,12,50,0.78);
    --glass-bg:      rgba(20,12,50,0.6);
    --highlight:     rgba(224,214,255,0.09);

    --border:       rgba(177,154,249,0.13);
    --border-hover: rgba(177,154,249,0.30);

    --text-1:      #F3EFFF;
    --text-2:      #BCAFE4;
    --text-3:      #7A6DAE;

    --accent:        #B19AF9;
    --accent-hover:  #E0D6FF;
    --accent-strong: #784EF9;
    --on-accent:     #FFFFFF;
    --accent-dim:    rgba(120,78,249,0.18);
    --accent-ring:   rgba(177,154,249,0.38);

    --danger:      #FF7A93;
    --danger-dim:  rgba(255,122,147,0.13);
    --success:     #6EE0B4;
    --success-dim: rgba(110,224,180,0.12);
    --info:        #8FA8FF;
    --info-dim:    rgba(143,168,255,0.14);
    --warning:     #FFC478;
    --warning-dim: rgba(255,196,120,0.13);

    --state-open:        #8C80BD;
    --state-in-progress: #8FA8FF;
    --state-on-hold:     #FFC478;
    --state-ready:       #B19AF9;
    --state-done:        #6EE0B4;
    --state-aborted:     #FF7A93;

    --prio-low:      #6EE0B4;
    --prio-medium:   #8FA8FF;
    --prio-high:     #FFC478;
    --prio-critical: #FF7A93;

    --fill-1:   rgba(224,214,255,0.05);
    --fill-2:   rgba(224,214,255,0.10);
    --input-bg: rgba(8,3,22,0.55);
    --glow-1: rgba(120,78,249,0.48);
    --glow-2: rgba(43,15,128,0.70);
    --topbar-bg: rgba(18,10,46,0.58);
    --overlay:   rgba(6,2,18,0.62);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 10px 30px -10px rgba(8,0,30,0.75);
    --shadow-lg: 0 30px 80px -20px rgba(8,0,30,0.9), 0 0 0 1px rgba(177,154,249,0.06);
}

/* ── BLUE — deep ocean, azure accent ── */
[data-theme="blue"] {
    color-scheme: dark;

    --bg:          #040914;
    --bg-sunken:   #07101F;
    --bg-2:        #0B1628;
    --bg-3:        #112039;
    --bg-4:        #1A2E52;

    --surface:       linear-gradient(180deg, rgba(170,205,255,0.06) 0%, rgba(170,205,255,0.016) 100%);
    --surface-solid: rgba(10,20,40,0.78);
    --glass-bg:      rgba(10,20,40,0.6);
    --highlight:     rgba(190,215,255,0.08);

    --border:       rgba(150,190,255,0.11);
    --border-hover: rgba(150,190,255,0.24);

    --text-1:      #EAF2FF;
    --text-2:      #9EB2D4;
    --text-3:      #5F7499;

    --accent:        #60A5FA;
    --accent-hover:  #93C5FD;
    --accent-strong: #3B82F6;
    --on-accent:     #FFFFFF;
    --accent-dim:    rgba(59,130,246,0.16);
    --accent-ring:   rgba(96,165,250,0.38);

    --danger:      #EE6A6A;
    --danger-dim:  rgba(238,106,106,0.13);
    --success:     #5BD3A0;
    --success-dim: rgba(91,211,160,0.12);
    --info:        #6E9BFF;
    --info-dim:    rgba(110,155,255,0.13);
    --warning:     #F0B661;
    --warning-dim: rgba(240,182,97,0.13);

    --state-open:        #7A84A3;
    --state-in-progress: #6E9BFF;
    --state-on-hold:     #F0B661;
    --state-ready:       #B48CFF;
    --state-done:        #5BD3A0;
    --state-aborted:     #EE6A6A;

    --prio-low:      #5BD3A0;
    --prio-medium:   #6E9BFF;
    --prio-high:     #F0B661;
    --prio-critical: #EE6A6A;

    --fill-1:   rgba(170,205,255,0.05);
    --fill-2:   rgba(170,205,255,0.10);
    --input-bg: rgba(3,8,18,0.55);
    --glow-1: rgba(37,99,235,0.46);
    --glow-2: rgba(8,47,120,0.50);
    --topbar-bg: rgba(9,18,36,0.58);
    --overlay:   rgba(2,4,10,0.62);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-md: 0 10px 30px -10px rgba(0,0,0,0.65);
    --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── RED — dark crimson, rose accent ── */
[data-theme="red"] {
    color-scheme: dark;

    --bg:          #0D0407;
    --bg-sunken:   #13070B;
    --bg-2:        #1B0A10;
    --bg-3:        #271018;
    --bg-4:        #3A1724;

    --surface:       linear-gradient(180deg, rgba(255,200,210,0.06) 0%, rgba(255,200,210,0.016) 100%);
    --surface-solid: rgba(28,10,16,0.78);
    --glass-bg:      rgba(28,10,16,0.6);
    --highlight:     rgba(255,215,222,0.08);

    --border:       rgba(255,170,185,0.11);
    --border-hover: rgba(255,170,185,0.24);

    --text-1:      #FFF0F3;
    --text-2:      #D6AAB4;
    --text-3:      #956A75;

    --accent:        #FB7185;
    --accent-hover:  #FDA4AF;
    --accent-strong: #E11D48;
    --on-accent:     #FFFFFF;
    --accent-dim:    rgba(225,29,72,0.17);
    --accent-ring:   rgba(251,113,133,0.38);

    --danger:      #FF8F6B;
    --danger-dim:  rgba(255,143,107,0.14);
    --success:     #5BD3A0;
    --success-dim: rgba(91,211,160,0.12);
    --info:        #6E9BFF;
    --info-dim:    rgba(110,155,255,0.13);
    --warning:     #F0B661;
    --warning-dim: rgba(240,182,97,0.13);

    --state-open:        #7A84A3;
    --state-in-progress: #6E9BFF;
    --state-on-hold:     #F0B661;
    --state-ready:       #B48CFF;
    --state-done:        #5BD3A0;
    --state-aborted:     #EE6A6A;

    --prio-low:      #5BD3A0;
    --prio-medium:   #6E9BFF;
    --prio-high:     #F0B661;
    --prio-critical: #EE6A6A;

    --fill-1:   rgba(255,200,210,0.05);
    --fill-2:   rgba(255,200,210,0.10);
    --input-bg: rgba(12,3,6,0.55);
    --glow-1: rgba(225,29,72,0.40);
    --glow-2: rgba(110,16,40,0.50);
    --topbar-bg: rgba(26,9,15,0.58);
    --overlay:   rgba(2,4,10,0.62);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-md: 0 10px 30px -10px rgba(0,0,0,0.65);
    --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── GREEN — deep forest, emerald accent ── */
[data-theme="green"] {
    color-scheme: dark;

    --bg:          #030F0B;
    --bg-sunken:   #061510;
    --bg-2:        #091E16;
    --bg-3:        #0F2A20;
    --bg-4:        #163A2C;

    --surface:       linear-gradient(180deg, rgba(190,255,225,0.06) 0%, rgba(190,255,225,0.016) 100%);
    --surface-solid: rgba(8,28,20,0.78);
    --glass-bg:      rgba(8,28,20,0.6);
    --highlight:     rgba(200,255,230,0.08);

    --border:       rgba(140,240,195,0.11);
    --border-hover: rgba(140,240,195,0.24);

    --text-1:      #ECFDF5;
    --text-2:      #A2CAB9;
    --text-3:      #618B7A;

    --accent:        #34D399;
    --accent-hover:  #6EE7B7;
    --accent-strong: #10B981;
    --on-accent:     #02140D;
    --accent-dim:    rgba(16,185,129,0.15);
    --accent-ring:   rgba(52,211,153,0.36);

    --danger:      #EE6A6A;
    --danger-dim:  rgba(238,106,106,0.13);
    --success:     #A3E635;
    --success-dim: rgba(163,230,53,0.13);
    --info:        #6E9BFF;
    --info-dim:    rgba(110,155,255,0.13);
    --warning:     #F0B661;
    --warning-dim: rgba(240,182,97,0.13);

    --state-open:        #7A84A3;
    --state-in-progress: #6E9BFF;
    --state-on-hold:     #F0B661;
    --state-ready:       #B48CFF;
    --state-done:        #A3E635;
    --state-aborted:     #EE6A6A;

    --prio-low:      #A3E635;
    --prio-medium:   #6E9BFF;
    --prio-high:     #F0B661;
    --prio-critical: #EE6A6A;

    --fill-1:   rgba(190,255,225,0.05);
    --fill-2:   rgba(190,255,225,0.10);
    --input-bg: rgba(2,10,7,0.55);
    --glow-1: rgba(16,185,129,0.34);
    --glow-2: rgba(6,78,59,0.55);
    --topbar-bg: rgba(7,26,19,0.58);
    --overlay:   rgba(2,4,10,0.62);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-md: 0 10px 30px -10px rgba(0,0,0,0.65);
    --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── GRAY — neutral graphite, monochrome accent ── */
[data-theme="gray"] {
    color-scheme: dark;

    --bg:          #09090B;
    --bg-sunken:   #0E0E11;
    --bg-2:        #141417;
    --bg-3:        #1C1C20;
    --bg-4:        #28282D;

    --surface:       linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.016) 100%);
    --surface-solid: rgba(20,20,23,0.80);
    --glass-bg:      rgba(20,20,23,0.62);
    --highlight:     rgba(255,255,255,0.07);

    --border:       rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.17);

    --text-1:      #F4F4F5;
    --text-2:      #A1A1AA;
    --text-3:      #6B6B74;

    --accent:        #E4E4E7;
    --accent-hover:  #FFFFFF;
    --accent-strong: #E4E4E7;
    --on-accent:     #18181B;
    --accent-dim:    rgba(228,228,231,0.10);
    --accent-ring:   rgba(228,228,231,0.28);

    --danger:      #EE6A6A;
    --danger-dim:  rgba(238,106,106,0.13);
    --success:     #5BD3A0;
    --success-dim: rgba(91,211,160,0.12);
    --info:        #6E9BFF;
    --info-dim:    rgba(110,155,255,0.13);
    --warning:     #F0B661;
    --warning-dim: rgba(240,182,97,0.13);

    --state-open:        #7A84A3;
    --state-in-progress: #6E9BFF;
    --state-on-hold:     #F0B661;
    --state-ready:       #B48CFF;
    --state-done:        #5BD3A0;
    --state-aborted:     #EE6A6A;

    --prio-low:      #5BD3A0;
    --prio-medium:   #6E9BFF;
    --prio-high:     #F0B661;
    --prio-critical: #EE6A6A;

    --fill-1:   rgba(255,255,255,0.045);
    --fill-2:   rgba(255,255,255,0.085);
    --input-bg: rgba(0,0,0,0.45);
    --glow-1: rgba(161,161,170,0.16);
    --glow-2: rgba(82,82,91,0.22);
    --topbar-bg: rgba(18,18,21,0.6);
    --overlay:   rgba(2,4,10,0.62);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-md: 0 10px 30px -10px rgba(0,0,0,0.65);
    --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg);
}
body {
    font-family: var(--font-body);
    background:  var(--bg);
    color:       var(--text-1);
    line-height: 1.6;
    min-height:  100vh;
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -0.005em;
}
a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); }
input, textarea, select { font-family: var(--font-body); }
::selection { background: var(--accent-ring); color: var(--text-1); }

/* ── Scrollbar ──────────────────────────────────────────────────
   Chromium ignores every ::-webkit-scrollbar rule as soon as the standard
   scrollbar-width / scrollbar-color properties are set, and its standard
   scrollbar can't be inset — so it ran into the rounded corners of text
   fields, editors and panels. The standard properties are therefore only
   used where ::-webkit-scrollbar isn't supported (Firefox), and Chromium /
   Safari get a custom scrollbar whose track keeps clear of the corners.
   ─────────────────────────────────────────────────────────────── */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 12px;    /* ≥ corner radius → thumb never enters the curve */
    margin-inline: 12px;
}
::-webkit-scrollbar-corner { background: transparent; }
/* Textarea resize grip — Chromium paints a light square here once custom
   scrollbars are active; draw two quiet diagonal strokes instead. */
::-webkit-resizer {
    background:
        linear-gradient(135deg, transparent 0 52%, var(--text-3) 52% 58%, transparent 58% 70%,
                        var(--text-3) 70% 76%, transparent 76%);
    border-bottom-right-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--bg-4);
    border-radius: 99px;
    border: 3px solid transparent;   /* visual inset from the field's edge */
    background-clip: padding-box;
    min-height: 32px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }
/* The page itself has square edges — no inset needed there */
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { margin: 0; }
/* Large-radius panels (modals, sidebar, chat, drawers) */
.modal ::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.notif-panel ::-webkit-scrollbar-track { margin-block: 16px; }