/* Minimal, framework-free styles. Adjust with CSS variables if desired. */
:root {
    --bg: var(--brand-background, #1a1a1a);
    --surface: var(--brand-surface, #2a2a2a);
    --surface-2: color-mix(in srgb, var(--brand-surface, #2a2a2a) 90%, black 10%);
    --text: var(--brand-text, #e6e6e6);
    --muted: var(--brand-muted, #888888);
    --primary: var(--brand-primary, #666666);
    --accent: var(--brand-accent, #777777);
    --danger: #ef4444;
    --border: color-mix(in srgb, var(--brand-surface, #2a2a2a) 70%, white 5%);
    --shadow: color-mix(in srgb, var(--brand-background, #1a1a1a) 50%, transparent 50%);
    --app-font-size: 14px;
    --message-font-size: 14px;
    --composer-font-size: 13px;
    --shadow: rgba(20, 20, 20, 0.5);
}

:root[data-theme="dark"] {
    --bg: var(--brand-background, #1a1a1a);
    --surface: var(--brand-surface, #2a2a2a);
    --surface-2: #3a3a3a;
    --text: var(--brand-text, #e6e6e6);
    --muted: var(--brand-muted, #888888);
    --primary: var(--brand-primary, #666666);
    --accent: var(--brand-accent, #777777);
    --danger: #ef4444;
    --border: #444444;
    --shadow: rgba(20, 20, 20, 0.6);
}

:root[data-theme="midnight"] {
    --bg: #1a1a1a;
    --surface: #2a2a2a;
    --surface-2: #3a3a3a;
    --text: #c5d1e0;
    --muted: #7d8ca3;
    --primary: #5ccfe6;
    --accent: #73d0ff;
    --danger: #f07178;
    --border: #3a3a3a;
    --shadow: rgba(10, 14, 20, 0.6);
}

:root[data-theme="forest"] {
    --bg: #1a2520;
    --surface: #223028;
    --surface-2: #2a3b30;
    --text: #d4e3d9;
    --muted: #8fa599;
    --primary: #5fb383;
    --accent: #7ecb9f;
    --danger: #d48276;
    --border: #2e3f35;
    --shadow: rgba(26, 37, 32, 0.5);
}

:root[data-theme="ocean"] {
    --bg: #0d1f2d;
    --surface: #14293a;
    --surface-2: #1a3447;
    --text: #d5e7f0;
    --muted: #7f9fb3;
    --primary: #4a9eca;
    --accent: #6bc1e6;
    --danger: #e07878;
    --border: #1f3d52;
    --shadow: rgba(13, 31, 45, 0.5);
}

:root[data-theme="sunset"] {
    --bg: #331408;
    --surface: #421a0c;
    --surface-2: #522110;
    --text: #ffd9c8;
    --muted: #c89878;
    --primary: #ff6b35;
    --accent: #ffa15f;
    --danger: #e85d5d;
    --border: #5c2815;
    --shadow: rgba(51, 20, 8, 0.6);
}

:root[data-theme="purple-dream"] {
    --bg: #1a1428;
    --surface: #251d35;
    --surface-2: #312642;
    --text: #e8dff5;
    --muted: #a895c4;
    --primary: #9d4edd;
    --accent: #c77dff;
    --danger: #e76f51;
    --border: #372d47;
    --shadow: rgba(26, 20, 40, 0.5);
}

:root[data-theme="cyberpunk"] {
    --bg: #0a0e1a;
    --surface: #0f1420;
    --surface-2: #151b28;
    --text: #e0f0ff;
    --muted: #7a9bc4;
    --primary: #00ffcc;
    --accent: #ff00aa;
    --danger: #ff3366;
    --border: #1a2433;
    --shadow: rgba(10, 14, 26, 0.7);
}

:root[data-theme="ember"] {
    --bg: #2d1b1b;
    --surface: #3d2424;
    --surface-2: #4d2e2e;
    --text: #f5e6e6;
    --muted: #d4a5a5;
    --primary: #e74c3c;
    --accent: #ff6b6b;
    --danger: #c0392b;
    --border: #4a2828;
    --shadow: rgba(45, 27, 27, 0.6);
}

:root[data-theme="nord"] {
    --bg: #2e3440;
    --surface: #3b4252;
    --surface-2: #434c5e;
    --text: #eceff4;
    --muted: #d8dee9;
    --primary: #88c0d0;
    --accent: #8fbcbb;
    --danger: #bf616a;
    --border: #4c566a;
    --shadow: rgba(46, 52, 64, 0.5);
}

:root[data-theme="void"] {
    --bg: #0d0d0d;
    --surface: #1a1a1a;
    --surface-2: #262626;
    --text: #f0f0f0;
    --muted: #b0b0b0;
    --primary: #6c63ff;
    --accent: #9d94ff;
    --danger: #ff6b6b;
    --border: #2d2d2d;
    --shadow: rgba(13, 13, 13, 0.8);
}

:root[data-theme="graphite"] {
    --bg: #0a0a0a;
    --surface: #151515;
    --surface-2: #202020;
    --text: #f5f5f5;
    --muted: #9a9a9a;
    --primary: #606060;
    --accent: #787878;
    --danger: #c44545;
    --border: #2a2a2a;
    --shadow: rgba(10, 10, 10, 0.85);
}

:root[data-theme="slate"] {
    --bg: #1c1c1c;
    --surface: #282828;
    --surface-2: #333333;
    --text: #efefef;
    --muted: #a8a8a8;
    --primary: #8a8a8a;
    --accent: #a0a0a0;
    --danger: #d45555;
    --border: #3d3d3d;
    --shadow: rgba(28, 28, 28, 0.7);
}

/* ============================================
   LIGHT THEMES - 10 variations
   ============================================ */

:root[data-theme="light"] {
    --bg: color-mix(in srgb, #ffffff 85%, var(--brand-background, #f5f7fb) 15%);
    --surface: color-mix(in srgb, #ffffff 90%, var(--brand-surface, #ffffff) 10%);
    --surface-2: color-mix(in srgb, #ffffff 95%, var(--brand-surface, #fafafc) 5%);
    --text: color-mix(in srgb, #151924 50%, var(--brand-text, #151924) 50%);
    --muted: color-mix(in srgb, var(--brand-muted, #5f6776) 70%, #6b7280 30%);
    --primary: var(--brand-primary, #0088ff);
    --accent: var(--brand-accent, #0099ff);
    --danger: #ef4444;
    --border: color-mix(in srgb, #d9deeb 60%, var(--brand-surface, #ffffff) 40%);
    --shadow: rgba(21, 25, 36, 0.08);
}

:root[data-theme="sky"] {
    --bg: #e8f4fb;
    --surface: #f5f9fb;
    --surface-2: #ffffff;
    --text: #1a3847;
    --muted: #5a7a8c;
    --primary: #2d7a9e;
    --accent: #4a9bc4;
    --danger: #d14545;
    --border: #c5dae5;
    --shadow: rgba(26, 56, 71, 0.08);
}

:root[data-theme="cherry-blossom"] {
    --bg: #fdf5f8;
    --surface: #fff9fb;
    --surface-2: #ffffff;
    --text: #3d2831;
    --muted: #8a6b7a;
    --primary: #e85d91;
    --accent: #f78bb8;
    --danger: #d14545;
    --border: #f5d9e5;
    --shadow: rgba(61, 40, 49, 0.08);
}

:root[data-theme="mint"] {
    --bg: #f0f8f5;
    --surface: #f8fcfa;
    --surface-2: #ffffff;
    --text: #1f3d33;
    --muted: #5a7a6e;
    --primary: #3d8b6f;
    --accent: #52a688;
    --danger: #d14545;
    --border: #d9ede5;
    --shadow: rgba(31, 61, 51, 0.08);
}

:root[data-theme="lavender"] {
    --bg: #f5f3f8;
    --surface: #faf9fc;
    --surface-2: #ffffff;
    --text: #2d2638;
    --muted: #6e6079;
    --primary: #8b5fbf;
    --accent: #a67dd4;
    --danger: #d14545;
    --border: #e4dff0;
    --shadow: rgba(45, 38, 56, 0.08);
}

:root[data-theme="peach"] {
    --bg: #fff5f0;
    --surface: #fffaf7;
    --surface-2: #ffffff;
    --text: #3d2819;
    --muted: #8a6b52;
    --primary: #e67e50;
    --accent: #f4a460;
    --danger: #d14545;
    --border: #f5dfd0;
    --shadow: rgba(61, 40, 25, 0.08);
}

:root[data-theme="sage"] {
    --bg: #f4f7f0;
    --surface: #fafcf7;
    --surface-2: #ffffff;
    --text: #2d3a24;
    --muted: #6b7d5b;
    --primary: #6b8e58;
    --accent: #8aae74;
    --danger: #d14545;
    --border: #dfe8d5;
    --shadow: rgba(45, 58, 36, 0.08);
}

:root[data-theme="coral"] {
    --bg: #fff3f0;
    --surface: #fff9f7;
    --surface-2: #ffffff;
    --text: #3d1f1a;
    --muted: #8a5b52;
    --primary: #e8765d;
    --accent: #ff9980;
    --danger: #d14545;
    --border: #f5d9d0;
    --shadow: rgba(61, 31, 26, 0.08);
}

:root[data-theme="arctic"] {
    --bg: #f0f8ff;
    --surface: #f7fbff;
    --surface-2: #ffffff;
    --text: #1a3844;
    --muted: #5b7f92;
    --primary: #3b8cb8;
    --accent: #5ba5d1;
    --danger: #d14545;
    --border: #d0e8f5;
    --shadow: rgba(26, 56, 68, 0.08);
}

:root[data-theme="cream"] {
    --bg: #f7f3ed;
    --surface: #fefbf7;
    --surface-2: #ffffff;
    --text: #3d362e;
    --muted: #7a6f63;
    --primary: #a57548;
    --accent: #c4945f;
    --danger: #d14545;
    --border: #e5dace;
    --shadow: rgba(61, 54, 46, 0.08);
}

/* ============================================
   NEW DARK THEMES - 5 additional variations
   ============================================ */

:root[data-theme="espresso"] {
    --bg: #1f1612;
    --surface: #2a1f18;
    --surface-2: #3a2b20;
    --text: #e8dcd0;
    --muted: #a89580;
    --primary: #b8794e;
    --accent: #d4956b;
    --danger: #d14545;
    --border: #3f3025;
    --shadow: rgba(31, 22, 18, 0.8);
}

:root[data-theme="deep-sea"] {
    --bg: #0a1525;
    --surface: #0f1d35;
    --surface-2: #162845;
    --text: #d5e5f5;
    --muted: #8ba9c9;
    --primary: #2d6a8a;
    --accent: #4a89b0;
    --danger: #d14545;
    --border: #1a2f4a;
    --shadow: rgba(10, 21, 37, 0.8);
}

:root[data-theme="aubergine"] {
    --bg: #1a0f1f;
    --surface: #2a1833;
    --surface-2: #3a2247;
    --text: #e5d5f0;
    --muted: #a587b9;
    --primary: #7b2d9e;
    --accent: #9b47c4;
    --danger: #d14545;
    --border: #3a2247;
    --shadow: rgba(26, 15, 31, 0.8);
}

:root[data-theme="charcoal"] {
    --bg: #18191a;
    --surface: #242526;
    --surface-2: #3a3b3c;
    --text: #e4e6eb;
    --muted: #b0b3b8;
    --primary: #5a8299;
    --accent: #6ea0bd;
    --danger: #d14545;
    --border: #3a3b3c;
    --shadow: rgba(24, 25, 26, 0.8);
}

:root[data-theme="wine"] {
    --bg: #1f0f15;
    --surface: #2d1621;
    --surface-2: #3d1f2d;
    --text: #f0d5e0;
    --muted: #b08595;
    --primary: #a0305e;
    --accent: #c94a7a;
    --danger: #d14545;
    --border: #3d1f2d;
    --shadow: rgba(31, 15, 21, 0.8);
}

:root[data-theme="matrix"] {
    --bg: #0b1810;
    --surface: #13231a;
    --surface-2: #1b3023;
    --text: #d3eede;
    --muted: #6aa487;
    --primary: #2fdc6b;
    --accent: #7ef796;
    --danger: #d14545;
    --border: #234430;
    --shadow: rgba(11, 24, 16, 0.7);
}

:root[data-theme="solar-gold"] {
    --bg: #181107;
    --surface: #241a0b;
    --surface-2: #2e1f10;
    --text: #f5e3c7;
    --muted: #b89b6d;
    --primary: #d49a28;
    --accent: #f6c24d;
    --danger: #d14545;
    --border: #3a2a17;
    --shadow: rgba(24, 17, 7, 0.65);
}

:root[data-theme="nebula"] {
    --bg: #120f1a;
    --surface: #1d1826;
    --surface-2: #282235;
    --text: #e8def5;
    --muted: #9b90b5;
    --primary: #ff5ebd;
    --accent: #6f87ff;
    --danger: #d14545;
    --border: #332b46;
    --shadow: rgba(18, 15, 26, 0.7);
}

/* ============================================
   10 COLORBLIND-FRIENDLY DARK THEMES
   ============================================ */

:root[data-theme="ruby"] {
    --bg: #1a0505;
    --surface: #2d0a0a;
    --surface-2: #3d1515;
    --text: #f5d5d5;
    --muted: #c48080;
    --primary: #ff6b6b;
    --accent: #ff9999;
    --danger: #cc2020;
    --border: #4d2020;
    --shadow: rgba(26, 5, 5, 0.8);
}

:root[data-theme="amber"] {
    --bg: #1f1005;
    --surface: #2a1508;
    --surface-2: #3a2010;
    --text: #f5e8d5;
    --muted: #c9a080;
    --primary: #ffb366;
    --accent: #ffd699;
    --danger: #d14545;
    --border: #4a2e10;
    --shadow: rgba(31, 16, 5, 0.8);
}

:root[data-theme="golden"] {
    --bg: #1a1505;
    --surface: #262008;
    --surface-2: #3a3010;
    --text: #f5f0d5;
    --muted: #c4bb80;
    --primary: #ffd700;
    --accent: #ffe44d;
    --danger: #d14545;
    --border: #4a4015;
    --shadow: rgba(26, 21, 5, 0.8);
}

:root[data-theme="emerald"] {
    --bg: #051a0a;
    --surface: #0a2612;
    --surface-2: #103d1a;
    --text: #d5f5dd;
    --muted: #80b894;
    --primary: #2ecc71;
    --accent: #52de9e;
    --danger: #d14545;
    --border: #1a5530;
    --shadow: rgba(5, 26, 10, 0.8);
}

:root[data-theme="teal"] {
    --bg: #050f1a;
    --surface: #0a151f;
    --surface-2: #0f2030;
    --text: #d5f0f5;
    --muted: #80c4cc;
    --primary: #00d9ff;
    --accent: #4dfff0;
    --danger: #d14545;
    --border: #1a4d5e;
    --shadow: rgba(5, 15, 26, 0.8);
}

:root[data-theme="sapphire"] {
    --bg: #050a1f;
    --surface: #0a0f2e;
    --surface-2: #0f1a47;
    --text: #d5e5f5;
    --muted: #80b4d4;
    --primary: #4da6ff;
    --accent: #7ec4ff;
    --danger: #d14545;
    --border: #1a3d66;
    --shadow: rgba(5, 10, 31, 0.8);
}

:root[data-theme="violet"] {
    --bg: #0f050f;
    --surface: #1a0a2e;
    --surface-2: #2a1a47;
    --text: #e5d5f5;
    --muted: #b580d9;
    --primary: #b366ff;
    --accent: #d699ff;
    --danger: #d14545;
    --border: #3a2a66;
    --shadow: rgba(15, 5, 15, 0.8);
}

:root[data-theme="magenta"] {
    --bg: #1a050f;
    --surface: #2e0a1a;
    --surface-2: #4a1a33;
    --text: #f5d5ed;
    --muted: #d980b8;
    --primary: #ff33cc;
    --accent: #ff66e6;
    --danger: #d14545;
    --border: #661a4d;
    --shadow: rgba(26, 5, 15, 0.8);
}

:root[data-theme="sienna"] {
    --bg: #1a0f05;
    --surface: #2a1408;
    --surface-2: #3a2010;
    --text: #f0e0d0;
    --muted: #c4a080;
    --primary: #cc8855;
    --accent: #e6a876;
    --danger: #d14545;
    --border: #5a3820;
    --shadow: rgba(26, 15, 5, 0.8);
}

:root[data-theme="seafoam"] {
    --bg: #051515;
    --surface: #0a1f1a;
    --surface-2: #102c26;
    --text: #d5f0ea;
    --muted: #80c9b8;
    --primary: #2dd9b0;
    --accent: #5fecda;
    --danger: #d14545;
    --border: #1a6655;
    --shadow: rgba(5, 21, 21, 0.8);
}

/* ============================================
   10 COLORBLIND-FRIENDLY LIGHT THEMES
   ============================================ */

:root[data-theme="rose"] {
    --bg: #fff5f5;
    --surface: #ffe6e6;
    --surface-2: #ffffff;
    --text: #5a2d33;
    --muted: #a08090;
    --primary: #e74c3c;
    --accent: #c0392b;
    --danger: #a00000;
    --border: #ffd9d9;
    --shadow: rgba(90, 45, 51, 0.05);
}

:root[data-theme="honey"] {
    --bg: #fffbf5;
    --surface: #ffe6cc;
    --surface-2: #ffffff;
    --text: #6b4820;
    --muted: #a07a50;
    --primary: #d97706;
    --accent: #b8601b;
    --danger: #d14545;
    --border: #ffd9b3;
    --shadow: rgba(107, 72, 32, 0.05);
}

:root[data-theme="lemon"] {
    --bg: #fffef5;
    --surface: #fffdcc;
    --surface-2: #ffffff;
    --text: #6b6620;
    --muted: #a0a050;
    --primary: #b8a600;
    --accent: #8a7d00;
    --danger: #d14545;
    --border: #fffaaa;
    --shadow: rgba(107, 102, 32, 0.05);
}

:root[data-theme="pistachio"] {
    --bg: #f5fff5;
    --surface: #e6ffe6;
    --surface-2: #ffffff;
    --text: #2d5a30;
    --muted: #508060;
    --primary: #27ae60;
    --accent: #1e8449;
    --danger: #d14545;
    --border: #ccffcc;
    --shadow: rgba(45, 90, 48, 0.05);
}

:root[data-theme="aqua"] {
    --bg: #f0ffff;
    --surface: #ccf7ff;
    --surface-2: #ffffff;
    --text: #1a4d5e;
    --muted: #4a8fa3;
    --primary: #00a8cc;
    --accent: #007fa3;
    --danger: #d14545;
    --border: #99ebff;
    --shadow: rgba(26, 77, 94, 0.05);
}

:root[data-theme="periwinkle"] {
    --bg: #f5f9ff;
    --surface: #e6f2ff;
    --surface-2: #ffffff;
    --text: #1f2e5f;
    --muted: #5a7fa0;
    --primary: #2980b9;
    --accent: #1f618d;
    --danger: #d14545;
    --border: #cce5ff;
    --shadow: rgba(31, 46, 95, 0.05);
}

:root[data-theme="lilac"] {
    --bg: #faf5ff;
    --surface: #f0e6ff;
    --surface-2: #ffffff;
    --text: #3a1f5e;
    --muted: #7a5fa0;
    --primary: #8e44ad;
    --accent: #6c3483;
    --danger: #d14545;
    --border: #e0ccff;
    --shadow: rgba(58, 31, 94, 0.05);
}

:root[data-theme="blush"] {
    --bg: #fff5ff;
    --surface: #ffe6ff;
    --surface-2: #ffffff;
    --text: #5a1a4d;
    --muted: #a060a0;
    --primary: #c2185b;
    --accent: #880e4f;
    --danger: #d14545;
    --border: #ffc9f0;
    --shadow: rgba(90, 26, 77, 0.05);
}

:root[data-theme="caramel"] {
    --bg: #fef9f5;
    --surface: #f5e6d3;
    --surface-2: #ffffff;
    --text: #5a4530;
    --muted: #a0855a;
    --primary: #a0522d;
    --accent: #704214;
    --danger: #d14545;
    --border: #e6d4b8;
    --shadow: rgba(90, 69, 48, 0.05);
}

:root[data-theme="mint"] {
    --bg: #f0fff8;
    --surface: #d9fff5;
    --surface-2: #ffffff;
    --text: #1a5a4d;
    --muted: #4a8f7d;
    --primary: #16a085;
    --accent: #0d5f4f;
    --danger: #d14545;
    --border: #b3fff5;
    --shadow: rgba(26, 90, 77, 0.05);
}

/* ============================================
   NEW LIGHT THEMES - 5 additional variations
   ============================================ */

:root[data-theme="cotton-candy"] {
    --bg: #fef5fb;
    --surface: #fffafd;
    --surface-2: #ffffff;
    --text: #4a2d40;
    --muted: #8a6278;
    --primary: #d65ba3;
    --accent: #e87dc1;
    --danger: #d14545;
    --border: #f5e0ee;
    --shadow: rgba(74, 45, 64, 0.08);
}

:root[data-theme="lemon"] {
    --bg: #fefef5;
    --surface: #fffffb;
    --surface-2: #ffffff;
    --text: #3d3a25;
    --muted: #7a7555;
    --primary: #c4a93d;
    --accent: #ddc555;
    --danger: #d14545;
    --border: #f5f3d8;
    --shadow: rgba(61, 58, 37, 0.08);
}

:root[data-theme="glacier"] {
    --bg: #f0f7fb;
    --surface: #f7fbfd;
    --surface-2: #ffffff;
    --text: #2d3e48;
    --muted: #627880;
    --primary: #4d8ba8;
    --accent: #6ba5c3;
    --danger: #d14545;
    --border: #dce8ed;
    --shadow: rgba(45, 62, 72, 0.08);
}

:root[data-theme="rose-quartz"] {
    --bg: #fdf3f5;
    --surface: #fff9fa;
    --surface-2: #ffffff;
    --text: #3d2d30;
    --muted: #7a5d62;
    --primary: #c9677d;
    --accent: #e08598;
    --danger: #d14545;
    --border: #f5dce0;
    --shadow: rgba(61, 45, 48, 0.08);
}

:root[data-theme="sand"] {
    --bg: #faf6f0;
    --surface: #fffcf7;
    --surface-2: #ffffff;
    --text: #3d3930;
    --muted: #7a7360;
    --primary: #b89968;
    --accent: #d1b586;
    --danger: #d14545;
    --border: #ebe5d8;
    --shadow: rgba(61, 57, 48, 0.08);
}

:root[data-theme="tropical"] {
    --bg: #eefbf8;
    --surface: #f9fefd;
    --surface-2: #ffffff;
    --text: #143c33;
    --muted: #5a7d73;
    --primary: #1fbfa3;
    --accent: #4fe8cc;
    --danger: #d14545;
    --border: #d3ece6;
    --shadow: rgba(31, 60, 51, 0.08);
}

:root[data-theme="periwinkle"] {
    --bg: #f3f6ff;
    --surface: #fbfcff;
    --surface-2: #ffffff;
    --text: #2d3450;
    --muted: #667499;
    --primary: #5d78d8;
    --accent: #7d96ee;
    --danger: #d14545;
    --border: #d9e1f5;
    --shadow: rgba(45, 52, 80, 0.08);
}

:root[data-theme="minimal"] {
    --bg: #f4f5f6;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --text: #1e2023;
    --muted: #5a5f66;
    --primary: #5a5f66;
    --accent: #7b828c;
    --danger: #d14545;
    --border: #d9dbdf;
    --shadow: rgba(30, 32, 35, 0.06);
}

:root[data-theme="ash"] {
    --bg: #d8d8d8;
    --surface: #e8e8e8;
    --surface-2: #f0f0f0;
    --text: #1a1a1a;
    --muted: #4a4a4a;
    --primary: #3a3a3a;
    --accent: #505050;
    --danger: #b03535;
    --border: #c0c0c0;
    --shadow: rgba(26, 26, 26, 0.12);
}

:root[data-theme="pearl"] {
    --bg: #f8f8f8;
    --surface: #fefefe;
    --surface-2: #ffffff;
    --text: #222222;
    --muted: #6a6a6a;
    --primary: #5a5a5a;
    --accent: #707070;
    --danger: #c44545;
    --border: #e0e0e0;
    --shadow: rgba(34, 34, 34, 0.08);
}

/* ========================================
   APPEARANCE CONTROL CUSTOM PROPERTIES
   ======================================== */

:root {
    /* Text Contrast */
    --text-contrast: normal; /* normal | high | maximum */

    /* Message Density */
    --message-density: normal; /* compact | normal | spacious */

    /* Accent Color Hue (0-360°) */
    --accent-hue: 210;
}

/* Message Density: Compact */
:root[data-message-density="compact"] {
    --message-gap: 8px;
    --message-padding: 6px 12px;
    --line-height-tight: 1.3;
}

/* Message Density: Normal (default) */
:root[data-message-density="normal"] {
    --message-gap: 12px;
    --message-padding: 8px 16px;
    --line-height-tight: 1.4;
}

/* Message Density: Spacious */
:root[data-message-density="spacious"] {
    --message-gap: 18px;
    --message-padding: 12px 20px;
    --line-height-tight: 1.6;
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

/* Allow text selection in input fields and message content */
input,
textarea,
#message,
.message,
.message .body,
.message .body *,
code,
pre {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary, #7f5af0) 30%, var(--muted, #9aa4b2) 70%);
    border-radius: 0;
    border: 2px solid var(--surface-2);
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 50%, var(--muted, #9aa4b2) 50%);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary, #7f5af0) 30%, var(--muted, #9aa4b2) 70%) var(--surface-2);
}

html {
    height: 100dvh;
    min-height: 100dvh;
    background: var(--bg);
    overflow-x: hidden;
}

body {
    min-height: 100dvh;
    height: 100dvh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    font-family: var(--brand-font-body, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji");
    font-size: var(--app-font-size, 14px);
    line-height: 1.4;
    /* Background image with dark overlay to keep it subtle */
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--bg, #080808) 85%, transparent 15%),
            color-mix(in srgb, var(--bg, #080808) 90%, transparent 10%)
        ),
        var(--brand-background-image);
    background-size: cover;
    background-position: center 50px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "main"
        "composer";
}

body.overlay-page-open {
    overflow: visible;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.app-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px var(--shadow);
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand .logo {
    width: 24px;
    height: 24px;
}
.brand h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.brand .version {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    opacity: 0.6;
    letter-spacing: 0.02em;
    margin-left: -4px;
    margin-top: 6px;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-folder-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text);
    height: 32px;
}
.header-folder-indicator[hidden] {
    display: none !important;
}
.header-folder-indicator .folder-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 0;
    background: color-mix(in srgb, var(--folder-pill-color, #6366f1) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--folder-pill-color, #6366f1) 60%, transparent);
    box-shadow: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}
.header-folder-indicator .folder-pill:hover {
    background: color-mix(in srgb, var(--folder-pill-color, #6366f1) 25%, transparent);
    border-color: color-mix(in srgb, var(--folder-pill-color, #6366f1) 75%, transparent);
}
.header-folder-indicator .folder-pill:active {
    transform: scale(0.98);
}
.header-folder-indicator .folder-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--folder-pill-color, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--folder-pill-color, #6366f1) 30%, transparent);
    flex-shrink: 0;
}
.header-folder-indicator .folder-pill-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .header-folder-indicator .folder-pill {
        padding: 3px 8px;
        font-size: 11px;
        gap: 4px;
    }
    .header-folder-indicator .folder-pill-name {
        max-width: 110px;
    }
}
@media (max-width: 600px) {
    .header-folder-indicator {
        gap: 4px;
    }
    .header-folder-indicator .folder-pill {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
    }
    .header-folder-indicator .folder-pill-name {
        display: none;
    }
    .header-folder-indicator .folder-pill-dot {
        width: 12px;
        height: 12px;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--folder-pill-color, #6366f1) 35%, transparent);
    }
}
@media (max-width: 420px) {
    .header-folder-indicator {
        display: none;
    }
}
.user-mode-badge {
    display: none;
}
.status {
    color: var(--muted);
    font-size: 12px;
}

.offline-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    border: 1px solid var(--danger);
    border-radius: 4px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 500;
}

.offline-indicator svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.offline-indicator[hidden] {
    display: none;
}

.header-new-action {
    width: 32px;
    height: 32px;
    padding: 0;
}

.header-new-action svg {
    width: 16px;
    height: 16px;
}

.header-new-action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary, #7f5af0) 70%, transparent 30%);
    outline-offset: 2px;
}
.auth-button {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.auth-button:hover {
    background: var(--surface-2);
    border-color: var(--muted);
}
.auth-button:active {
    transform: scale(0.97);
}
.auth-button[hidden] {
    display: none;
}
.account-button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 0 !important;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.account-button:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 10%, transparent 90%);
    border-color: var(--primary);
    color: var(--primary);
}
.account-button:active {
    transform: scale(0.95);
}
.account-button svg {
    width: 18px;
    height: 18px;
}
.account-button[hidden] {
    display: none;
}

.user-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    margin-left: 8px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    max-width: 200px;
}
.user-display[hidden] {
    display: none;
}
.user-display span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.user-display svg {
    color: var(--muted);
    flex-shrink: 0;
}
.user-display:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 12%, transparent);
}
.user-display:hover svg {
    color: var(--primary);
}
.user-display:active {
    transform: scale(0.97);
}
.user-display:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary, #7f5af0) 60%, transparent 40%);
    outline-offset: 2px;
}
.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.icon-button:hover {
    background: var(--surface-2);
    border-color: var(--muted);
    color: var(--text);
}
.icon-button:active {
    transform: scale(0.95);
}

.tool-toggle-button {
    position: relative;
    width: 44px !important;
    height: 44px !important;
    border-radius: 0 !important;
}

.tool-toggle-button::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    bottom: 5px;
    right: 5px;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.tool-toggle-button[aria-pressed="true"] {
    color: var(--accent, #00b4ff);
    border-color: color-mix(in srgb, var(--accent, #00b4ff) 65%, var(--border) 35%);
}

.tool-toggle-button[aria-pressed="true"]::after {
    background: var(--accent, #00b4ff);
    border-color: transparent;
}

.tool-toggle-button[aria-pressed="false"] {
    opacity: 0.75;
}

.tool-toggle-button[aria-pressed="false"]::after {
    border-color: var(--muted);
}

.tool-toggle-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.35;
}

.tool-toggle-button[aria-disabled="true"]:hover {
    background: transparent;
    border-color: var(--border);
    color: var(--muted);
}

.tool-toggle-button[aria-disabled="true"]::after {
    background: transparent;
    border-color: transparent;
}

/* Help modal styles */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 18, 0.85);
    backdrop-filter: blur(12px);
    z-index: 10000;
    padding: 20px;
}
.modal[aria-hidden="false"] {
    display: flex;
}
.auth-modal {
    position: relative;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    background: var(--bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
    border-radius: 0;
}
.auth-modal .modal-close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 40px;
    height: 40px;
    border-radius: 0;
    border: none;
    background: color-mix(in srgb, var(--surface) 50%, transparent 50%);
    backdrop-filter: blur(10px);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    z-index: 10;
}
.auth-modal .modal-close:hover {
    background: var(--surface);
    transform: scale(1.05);
}
.auth-modal .modal-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.auth-modal-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%;
}
.auth-hero-side {
    position: relative;
    background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 90%, var(--bg) 10%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
    overflow: hidden;
    border-radius: 0 !important;
}
.auth-hero-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 30% 40%,
        color-mix(in srgb, var(--primary) 20%, transparent 80%),
        transparent 70%
    );
    pointer-events: none;
}
.auth-hero-side::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 70% 60%,
        color-mix(in srgb, var(--accent) 15%, transparent 85%),
        transparent 70%
    );
    pointer-events: none;
}
.auth-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    max-width: 500px;
}
.auth-hero-logo {
    width: 120px;
    height: 120px;
    border-radius: 0;
    background: color-mix(in srgb, var(--primary) 20%, transparent 80%);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--primary) 30%, transparent 70%);
}
.auth-hero-logo .logo,
.auth-hero-logo img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.auth-brand-name {
    margin: 0;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.auth-brand-tagline {
    margin: 0;
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--muted);
    line-height: 1.5;
    font-weight: 500;
}
.auth-form-side {
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px;
    border-radius: 0 !important;
}
.auth-form-container {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.auth-form-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.auth-form-header h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.auth-form-subtitle {
    margin: 0;
    font-size: 16px;
    color: var(--muted);
    line-height: 1.5;
}
.auth-modal form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.auth-modal label {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-modal .label-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.auth-modal input {
    padding: 14px 18px;
    border-radius: 0;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.auth-modal input:hover {
    background: color-mix(in srgb, var(--bg) 95%, var(--text) 5%);
}
.auth-modal input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent 85%);
}
.auth-modal input::placeholder {
    color: var(--muted);
    opacity: 0.5;
}
.auth-modal .btn-primary {
    margin-top: 8px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 0;
    padding: 16px 32px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 40%, transparent 60%);
}
.auth-modal .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 50%, transparent 50%);
}
.auth-modal .btn-primary:active {
    transform: translateY(0);
}
.auth-modal .btn-primary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
/* Legacy styles for backward compatibility - hide old elements */
.auth-modal-grid,
.auth-modal-hero,
.hero-brand,
.hero-text,
.hero-title,
.hero-tagline,
.auth-panel,
.auth-panel-header,
.auth-panel-kicker,
.auth-panel-description,
.auth-tabs,
.auth-tab,
.auth-views,
.auth-note {
    display: none;
}
/* Responsive design */
@media (max-width: 1024px) {
    .auth-modal-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .auth-hero-side {
        padding: 60px 40px;
        min-height: 40vh;
    }
    .auth-hero-content {
        gap: 24px;
    }
    .auth-hero-logo {
        width: 100px;
        height: 100px;
        border-radius: 0;
    }
    .auth-hero-logo .logo,
    .auth-hero-logo img {
        width: 64px;
        height: 64px;
    }
    .auth-form-side {
        padding: 40px;
    }
    .auth-form-header h2 {
        font-size: 28px;
    }
}
@media (max-width: 640px) {
    .auth-modal .modal-close {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
    }
    .auth-hero-side {
        padding: 32px 20px 24px;
        min-height: auto;
    }
    .auth-hero-content {
        gap: 16px;
    }
    .auth-hero-logo {
        width: 64px;
        height: 64px;
        border-radius: 0;
    }
    .auth-hero-logo .logo,
    .auth-hero-logo img {
        width: 44px;
        height: 44px;
    }
    .auth-brand-name {
        font-size: 24px;
    }
    .auth-brand-tagline {
        font-size: 14px;
    }
    .auth-form-side {
        padding: 24px 20px 32px;
    }
    .auth-form-container {
        gap: 24px;
    }
    .auth-form-header {
        gap: 6px;
    }
    .auth-form-header h2 {
        font-size: 22px;
    }
    .auth-form-subtitle {
        font-size: 14px;
    }
    .auth-modal form {
        gap: 20px;
    }
    .auth-modal label {
        gap: 8px;
    }
    .auth-modal .label-text {
        font-size: 12px;
    }
    .auth-modal input {
        padding: 12px 14px;
        font-size: 15px;
        border-radius: 0;
    }
    .auth-modal .btn-primary {
        padding: 13px 20px;
        font-size: 14px;
        border-radius: 0;
        margin-top: 4px;
    }
    .identity-fields {
        grid-template-columns: 1fr;
    }
    .color-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .preview-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .preview-hex {
        align-self: flex-end;
    }
}
.form-errors {
    padding: 10px 12px;
    border-radius: 0;
    background: color-mix(in srgb, var(--danger) 20%, transparent 80%);
    color: var(--danger, #ef4444);
    font-size: 13px;
}
.form-errors[hidden] {
    display: none;
}
.hint {
    font-size: 13px;
    color: var(--muted);
}
.optional {
    font-weight: 500;
    color: var(--muted);
    font-size: 12px;
}
.small-print {
    font-size: 12px;
    color: color-mix(in srgb, var(--muted) 85%, var(--text) 15%);
}
.toggle-button.danger {
    border-color: color-mix(in srgb, var(--danger) 70%, transparent 30%);
    color: var(--danger);
}
.toggle-button.danger:hover {
    background: color-mix(in srgb, var(--danger) 15%, var(--surface) 85%);
}
.modal-content:not(.auth-modal) {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 18px;
    border-radius: 0;
    width: min(720px, 92%);
    color: var(--text);
    position: relative; /* ensure absolute children are positioned inside */
    max-height: 80vh; /* keep modal content scrollable on small screens */
    overflow: auto;
}
.help-modal {
    width: min(640px, 92%);
}

/* Note Modal - Create Note from Message */
.note-modal .modal-content {
    width: min(420px, 92%);
    max-width: 420px;
    padding: 24px;
}

.note-modal h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.note-modal-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.note-modal-label span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.note-modal-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.note-modal-select:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
}

.note-modal-select:focus {
    outline: none;
    border-color: var(--primary);
}

.note-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.help-table-wrapper {
    overflow-x: auto;
    margin: 8px 0 24px;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.help-table thead {
    background: var(--surface-alt);
    border-bottom: 2px solid var(--border);
}

.help-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.help-table td {
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent 60%);
}

.help-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.help-table code {
    background: color-mix(in srgb, var(--surface) 80%, var(--text) 20%);
    color: var(--text);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.help-table kbd {
    background: color-mix(in srgb, var(--surface) 60%, var(--text) 40%);
    color: var(--text);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-mono, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent 40%);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--background) 80%, var(--text) 20%);
    display: inline-block;
    min-width: 20px;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .help-table th,
    .help-table td {
        padding: 8px 12px;
        font-size: 13px;
    }

    .help-table th {
        font-size: 12px;
    }

    .help-table kbd {
        font-size: 11px;
        padding: 2px 6px;
    }

    .help-table code {
        font-size: 12px;
    }
}
.help-modal h3 {
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    opacity: 0.95;
}
.help-modal h3:first-of-type {
    margin-top: 16px;
}
.help-modal .help-release-notes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
    max-height: 260px;
    overflow-y: auto;
}
.help-modal .help-release-notes[hidden] {
    display: none;
}
.help-modal .help-release-notes h3 {
    margin-top: 0;
    margin-bottom: 8px;
}
.help-modal .help-release-notes h4 {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 15px;
}
.help-modal .help-release-notes ul {
    margin: 0 0 12px 18px;
    padding: 0;
    list-style: disc;
}
.help-modal .help-release-notes li {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.4;
}
.help-modal .release-meta {
    font-size: 13px;
    color: var(--muted);
    /* Title now styled within .overlay-header */
    margin: 0;
    position: absolute;
    right: 12px;
    top: 12px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

/* Assistant message action buttons */
.message.assistant {
    position: relative;
}

/* TOP-RIGHT: scroll-down button */
.message.assistant .corner-action.top-right {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--surface-2);
    border: none;
    color: var(--muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-grid;
    place-items: center;
    z-index: 5;
}
.message.assistant .corner-action.top-right:hover {
    background: var(--surface-3);
    color: var(--text);
}

/* BOTTOM ROW: footer with [menu][timestamp] on left */
.message.assistant .message-footer {
    display: flex;
    align-items: center;
    margin-top: 12px;
}
.message.assistant .message-footer .footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.message.assistant .message-footer .menu-button {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
}
.message.assistant .message-footer .menu-button:hover {
    background: var(--surface-2);
    color: var(--text);
}
.message.assistant .message-footer .timestamp {
    font-size: 11px;
    color: var(--muted);
    opacity: 0.75;
}

/* BOTTOM-RIGHT: scroll-up button (absolute, same X as scroll-down) */
.message.assistant .scroll-up-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--surface-2);
    border: none;
    color: var(--muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-grid;
    place-items: center;
    z-index: 5;
}
.message.assistant .scroll-up-button:hover {
    background: var(--surface-3);
    color: var(--text);
}

/* Scroll-down chevron icon */
.message.assistant .scroll-down-button::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-image: url("./assets/icons/chevron-down.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("./assets/icons/chevron-down.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Scroll-up chevron icon */
.message.assistant .scroll-up-button::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-image: url("./assets/icons/chevron-up.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("./assets/icons/chevron-up.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Disabled attach button */
.attach-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toast notifications */
#toastContainer {
    position: fixed;
    right: 16px;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 11000;
    align-items: flex-end;
}
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 0;
    box-shadow: 0 6px 18px var(--shadow);
    max-width: 320px;
    backdrop-filter: blur(8px);
}
.toast.success {
    border-left: 4px solid color-mix(in srgb, var(--primary, #7f5af0) 70%, transparent 30%);
}
.toast.error {
    border-left: 4px solid var(--danger);
}
.toast.info {
    border-left: 4px solid var(--accent);
}

.app-body {
    grid-area: main;
    display: flex;
    min-height: 0;
}

.app-main {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
    display: flex;
    justify-content: center;
    position: relative;
}

.scroll-down-btn {
    position: fixed;
    bottom: 80px;
    right: 32px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--shadow);
    transition: all 0.2s ease;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
}

.scroll-down-btn:not([hidden]) {
    opacity: 0.9;
    visibility: visible;
    animation: fadeInUp 0.3s ease;
}

.scroll-down-btn:hover {
    opacity: 1;
    background: var(--surface-2);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow);
}

.scroll-down-btn:active {
    transform: translateY(0);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 199;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop:not([hidden]) {
    display: block;
}

.sidebar-mobile-close {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar-mobile-close:hover {
    background: color-mix(in srgb, var(--muted) 15%, transparent);
    color: var(--text);
}

.sidebar-mobile-close[hidden] {
    display: none;
}

.conversation-sidebar {
    width: 264px;
    flex: 0 0 264px;
    border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
    background: color-mix(in srgb, var(--surface, #2a2a2a) 92%, transparent 8%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(6px);
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--border) 50%, transparent 50%);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.2s ease;
}

body[data-access-tier="guest"] .conversation-sidebar,
body[data-access-tier="user"] .conversation-sidebar {
    display: none;
}

body[data-access-tier="guest"] .tool-toggle-button,
body[data-access-tier="user"] .tool-toggle-button {
    display: none !important;
}

.conversation-sidebar.collapsed {
    width: 56px;
    flex: 0 0 56px;
    min-width: 56px;
    border-right-color: var(--border);
    background: color-mix(in srgb, var(--surface, #2a2a2a) 97%, transparent 3%);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.2s ease;
}

.conversation-sidebar.collapsed:hover {
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.conversation-sidebar.collapsed::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>');
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.conversation-sidebar.collapsed:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Removed sidebar collapsed label 'Chats' */

.conversation-sidebar.collapsed .conversation-sidebar-header,
.conversation-sidebar.collapsed .sidebar-accordion,
.conversation-sidebar.collapsed .conversation-sidebar-section {
    display: none !important;
}

.sidebar-collapse-toggle {
    width: 100%;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent 40%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
    color: var(--muted);
}

.sidebar-collapse-toggle:hover {
    background: color-mix(in srgb, var(--muted) 15%, transparent);
    color: var(--text);
}

.sidebar-collapse-toggle .collapse-icon {
    transition: transform 0.2s ease;
}

.conversation-sidebar.collapsed .sidebar-collapse-toggle {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid transparent;
}

.conversation-sidebar.collapsed .sidebar-collapse-toggle .collapse-icon {
    transform: rotate(180deg);
}

@media (min-width: 961px) {
    .conversation-sidebar.desktop-hidden {
        display: none;
    }
}

@media (max-width: 960px) {
    .conversation-sidebar.desktop-hidden {
        display: flex;
    }
}

body[data-sidebar-position="right"] .sidebar-collapse-toggle {
    right: auto;
    left: -18px;
}

body[data-sidebar-position="right"] .sidebar-collapse-toggle .collapse-icon {
    transform: rotate(180deg);
}

body[data-sidebar-position="right"] .conversation-sidebar.collapsed .sidebar-collapse-toggle .collapse-icon {
    transform: rotate(0deg);
}

body[data-sidebar-position="right"] .sidebar-collapse-toggle:hover {
    transform: translateX(-2px);
}

body[data-sidebar-position="right"] .conversation-sidebar {
    order: 2;
    border-right: none;
    border-left: 1px solid var(--border);
}

body[data-sidebar-position="right"] .conversation-sidebar.collapsed {
    border-left-color: color-mix(in srgb, var(--border) 70%, transparent);
}

body[data-sidebar-position="right"] .app-main {
    order: 1;
}

.conversation-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent 60%);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--surface) 98%, transparent 2%);
}

.conversation-sidebar-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    opacity: 0.95;
    padding-left: 4px;
}

.sidebar-new-chat {
    width: 100%;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0;
    border: none;
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent 70%), 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-align: center;
}
.sidebar-new-chat:hover {
    background: color-mix(in srgb, var(--primary) 90%, white 10%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent 60%), 0 2px 4px rgba(0, 0, 0, 0.15);
}
.sidebar-new-chat:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent 40%);
    outline-offset: 2px;
}
.sidebar-new-chat:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--primary) 35%, transparent 65%), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sidebar-header-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.sidebar-new-note {
    width: 100%;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0;
    border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
    color: var(--text);
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
}

.sidebar-new-note:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border) 60%);
    color: var(--primary);
}

.sidebar-new-note:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent 50%);
    outline-offset: 2px;
}

.notes-section {
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    padding-bottom: 12px;
}

.note-empty {
    padding: 12px 16px;
    color: var(--muted);
    font-size: 13px;
}

.note-empty p {
    margin: 0;
}

.note-empty .muted {
    font-size: 12px;
    margin-top: 4px;
}

.note-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 8px;
    max-height: 320px;
    overflow-y: auto;
}

.note-group {
    background: color-mix(in srgb, var(--surface) 94%, transparent 6%);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
    border-radius: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.note-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.note-group-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.note-group-header-row .count {
    font-size: 11px;
    color: var(--muted);
}

.sidebar-search-container {
    position: relative;
    width: 100%;
}

.sidebar-search-icon {
    display: none;
}

.sidebar-search-input {
    width: 100%;
    padding: 9px 28px 9px 12px;
    font-size: 12.5px;
    background: color-mix(in srgb, var(--surface-2) 80%, transparent 20%);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent 40%);
    border-radius: 0;
    color: var(--text);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-search-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent);
}

.sidebar-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.sidebar-search-clear:hover {
    color: var(--text);
    background: var(--surface-2);
}

.sidebar-primary-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-primary-actions .primary-button,
.sidebar-primary-actions .secondary-button {
    width: 100%;
    justify-content: center;
}

.sidebar-accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 12px 16px;
    overflow-y: auto;
}

.sidebar-section {
    border: none;
    border-radius: 0;
    background: transparent;
}

.sidebar-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 4px 4px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    transition: color 0.15s ease;
}

.sidebar-section-toggle:hover {
    color: var(--primary);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 70%, var(--text) 30%);
}

.sidebar-section-toggle .expand-icon {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    color: var(--muted);
    width: 14px;
    text-align: center;
}

.sidebar-section-toggle .expand-icon::before {
    content: "−";
}

.sidebar-section-toggle[aria-expanded="false"] .expand-icon::before {
    content: "+";
}

.section-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 60%, transparent 40%);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}

.sidebar-section-content {
    padding: 2px 4px 12px;
}

.chat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-empty-state {
    padding: 12px 16px;
    color: var(--muted);
    font-size: 12px;
    border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent 30%);
    border-radius: 0;
    text-align: center;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent 30%);
}

.conversation-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow: hidden;
}

.conversation-sidebar-section:first-of-type {
    border-bottom: 1px solid var(--border);
}

.conversation-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 90%, var(--text) 10%);
    padding: 14px 16px 10px;
    flex-shrink: 0;
    opacity: 0.85;
}

.conversation-section-heading .text-button {
    text-transform: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 8px;
}

.folder-creation {
    margin: 0 16px 16px;
    animation: slideDown 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 0;
    padding: 12px;
}

.folder-creation[hidden] {
    display: none !important;
}

.folder-creation:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.folder-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 0;
    padding: 8px;
    transition: all 0.2s ease;
}

.folder-knowledge-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.folder-knowledge-fields label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 90%, var(--text) 10%);
}

.folder-knowledge-input {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    border-radius: 0;
    border: 1.5px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
    color: var(--text);
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
}

.folder-knowledge-input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent 60%);
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border) 40%);
}

.folder-knowledge-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: color-mix(in srgb, var(--muted) 90%, var(--text) 10%);
}

.folder-knowledge-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.folder-knowledge-toggle input {
    accent-color: var(--primary);
}

.folder-form-row:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.folder-name-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    border: 1px solid var(--border);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}

.folder-name-input:focus {
    border-color: var(--primary);
    background: var(--surface-2);
}

.folder-name-input::placeholder {
    color: var(--muted);
    opacity: 0.6;
}

.folder-color-picker-mini {
    display: grid;
    grid-template-columns: repeat(5, 32px);
    gap: 12px;
    justify-content: center;
    margin: 8px 0;
}

.mini-color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    padding: 0;
    background: none;
}

.mini-color-btn::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
}

.mini-color-btn[data-color="#6366F1"]::before {
    background: #6366f1;
}
.mini-color-btn[data-color="#EC4899"]::before {
    background: #ec4899;
}
.mini-color-btn[data-color="#10B981"]::before {
    background: #10b981;
}
.mini-color-btn[data-color="#F59E0B"]::before {
    background: #f59e0b;
}
.mini-color-btn[data-color="#EF4444"]::before {
    background: #ef4444;
}
.mini-color-btn[data-color="#A855F7"]::before {
    background: #a855f7;
}
.mini-color-btn[data-color="#06B6D4"]::before {
    background: #06b6d4;
}
.mini-color-btn[data-color="#F43F5E"]::before {
    background: #f43f5e;
}
.mini-color-btn[data-color="#84CC16"]::before {
    background: #84cc16;
}
.mini-color-btn[data-color="#EAB308"]::before {
    background: #eab308;
}

.mini-color-btn:hover {
    transform: scale(1.15);
    border-color: var(--muted);
}

.mini-color-btn.active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

.folder-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.folder-form-button {
    padding: 8px 16px;
    border-radius: 0;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.folder-save-btn {
    background: var(--primary);
    color: white;
}

.folder-save-btn:hover {
    background: color-mix(in srgb, var(--primary) 85%, black);
    transform: translateY(-1px);
}

.folder-cancel-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}

.folder-cancel-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--muted);
}

.folder-color-picker-inline {
    display: flex;
    gap: 6px;
    padding: 0 4px;
    border-left: 1px solid var(--border);
    padding-left: 12px;
}

.folder-color-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    padding: 0;
    background: none;
}

.folder-color-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--folder-color, #6366f1);
}

.folder-color-btn[data-color="#6366F1"] {
    --folder-color: #6366f1;
}
.folder-color-btn[data-color="#EC4899"] {
    --folder-color: #ec4899;
}
.folder-color-btn[data-color="#10B981"] {
    --folder-color: #10b981;
}
.folder-color-btn[data-color="#F59E0B"] {
    --folder-color: #f59e0b;
}
.folder-color-btn[data-color="#3B82F6"] {
    --folder-color: #3b82f6;
}
.folder-color-btn[data-color="#8B5CF6"] {
    --folder-color: #8b5cf6;
}
.folder-color-btn[data-color="#EF4444"] {
    --folder-color: #ef4444;
}
.folder-color-btn[data-color="#14B8A6"] {
    --folder-color: #14b8a6;
}

.folder-color-btn:hover {
    transform: scale(1.15);
    border-color: color-mix(in srgb, var(--folder-color) 50%, var(--text));
}

.folder-color-btn.active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--folder-color) 30%, transparent);
}

.folder-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.folder-save-btn {
    background: var(--primary);
    color: white;
}

.folder-save-btn:hover {
    background: color-mix(in srgb, var(--primary) 85%, black);
    transform: scale(1.05);
}

.folder-cancel-btn {
    background: transparent;
    color: var(--muted);
}

.folder-cancel-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* Responsive folder form for smaller screens */
@media (max-width: 360px) {
    .folder-color-picker-inline {
        flex-wrap: wrap;
        gap: 4px;
        padding-left: 8px;
    }

    .folder-color-btn {
        width: 18px;
        height: 18px;
    }
}

.folder-groups {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 12px 16px;
}

.folder-groups::-webkit-scrollbar {
    width: 6px;
}

.folder-groups::-webkit-scrollbar-track {
    background: transparent;
}

.folder-groups::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 30%, transparent);
    border-radius: 3px;
}

.folder-groups::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted) 50%, transparent);
}

.conversation-section-heading {
    padding: 0 16px 8px;
    display: flex;
    align-items: center;
}

.section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.section-toggle:hover {
    opacity: 0.8;
}

.section-toggle .toggle-icon {
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-toggle[aria-expanded="false"] .toggle-icon {
    transform: rotate(-90deg);
}

.section-content[hidden] {
    display: none;
}

.folder-group {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.folder-group-default {
    border-radius: 0;
    background: color-mix(in srgb, var(--surface-2) 40%, transparent 60%);
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent 50%);
    overflow: hidden;
}

.folder-group-project {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 8px;
    overflow: hidden;
}

.folder-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 0;
    user-select: none;
    min-height: 36px;
    background: transparent;
}

/* Sidebar project header - more specific to avoid conflict with modal .project-item */
.folder-group-project .project-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 11px;
    cursor: pointer;
    border-radius: 0;
    user-select: none;
    background: transparent;
    border: none;
}

.project-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 0;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.project-toggle:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--text);
}

.project-toggle .expand-icon {
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    width: 12px;
    text-align: center;
}

.project-toggle .expand-icon::before {
    content: "−";
}

.folder-group-project.collapsed .project-toggle .expand-icon::before {
    content: "+";
}

/* No hover effect on project header - keep border consistent */

.project-item-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.project-item-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--folder-color, var(--primary));
    box-shadow: 0 0 8px color-mix(in srgb, var(--folder-color, var(--primary)) 65%, transparent);
}

.project-item-count {
    font-size: 11px;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-2) 80%, transparent 20%);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}

.project-item-menu {
    opacity: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.folder-group-project .project-item:hover .project-item-menu {
    opacity: 1;
}

.project-item-menu:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--text);
}

.project-items {
    padding: 0 !important;
    background: transparent !important;
    border: none;
    margin: 0;
    list-style: none;
    transition: opacity 0.2s ease, max-height 0.25s ease;
    overflow: hidden;
}

.folder-group-project.collapsed .project-items {
    display: none;
}

.project-compact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 0;
}

.project-compact-item:last-child {
    /* No special styling needed */
}

.project-compact-item:hover {
    background: color-mix(in srgb, var(--folder-color, var(--primary)) 14%, transparent);
}

.project-compact-item.active {
    background: color-mix(in srgb, var(--folder-color, var(--primary)) 22%, transparent);
    border-left: 3px solid var(--folder-color, var(--primary));
    padding-left: 13px; /* Compensate for border to keep alignment */
}

.compact-item-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.compact-item-title {
    flex: 1;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* No hover effect on folder-group-header - keep border consistent */

.folder-toggle {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent 40%);
    border: none;
    color: var(--muted);
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    border-radius: 0;
}

.folder-toggle:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 20%, var(--surface-2) 40%);
}

.folder-group.collapsed .folder-toggle {
    transform: rotate(-90deg);
}

.folder-toggle .toggle-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    display: block;
}

.folder-group-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text);
    transition: color 0.15s ease;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 7px;
}

.folder-group-label.has-color::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--folder-color, var(--primary));
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--folder-color) 20%, transparent 80%);
    margin-left: auto;
}

.folder-group-header:hover .folder-group-label {
    opacity: 1;
    color: var(--text);
}

.folder-group-count {
    display: none;
}

.folder-group-header .folder-menu-button {
    opacity: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-group-header:hover .folder-menu-button {
    opacity: 1;
}

.folder-group-header .folder-menu-button:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--text);
}

.folder-group-conversations {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: opacity 0.2s ease, max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: transparent;
}

.folder-group.collapsed .folder-group-conversations {
    display: none;
    opacity: 0;
}

.conversation-empty {
    font-size: 13px;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface, #2a2a2a) 98%, transparent 2%);
    border: 1px dashed color-mix(in srgb, var(--border) 60%, transparent 40%);
    border-radius: 0;
    padding: 20px 16px;
    margin: 0 16px;
    text-align: center;
}

.conversation-empty p {
    margin: 0 0 8px 0;
}

.conversation-empty .muted {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}

.conversation-list {
    list-style: none;
    margin: 0;
    padding: 8px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.conversation-list::-webkit-scrollbar {
    width: 6px;
}

.conversation-list::-webkit-scrollbar-track {
    background: transparent;
}

.conversation-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 30%, transparent);
    border-radius: 3px;
}

.conversation-list::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted) 50%, transparent);
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    background: transparent;
    position: relative;
    min-height: 36px;
    border: none;
}

.conversation-item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--muted) 60%, var(--text) 40%);
    opacity: 0.5;
    flex-shrink: 0;
}

.conversation-item:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.conversation-item.active {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-left: 3px solid var(--primary);
    padding-left: 9px; /* Compensate for border to keep alignment */
}

.conversation-item-title {
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    line-height: 1.4;
    opacity: 0.9;
}

.conversation-item.active .conversation-item-title {
    font-weight: 500;
    opacity: 1;
}

.conversation-item-menu {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    padding: 4px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    flex-shrink: 0;
}

.conversation-item:hover .conversation-item-menu,
.conversation-item.active .conversation-item-menu {
    opacity: 1;
}

.conversation-item-menu:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.note-divider {
    margin: 6px 0;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 85%, var(--text) 15%);
    padding: 2px 4px;
}

.note-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 0;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--surface) 96%, transparent 4%);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.note-item:hover {
    border-color: color-mix(in srgb, var(--primary) 20%, transparent);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.note-item.active {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.note-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-item-preview {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-item-menu {
    position: absolute;
    right: 6px;
    top: 6px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    padding: 2px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.note-item:hover .note-item-menu,
.note-item.active .note-item-menu {
    opacity: 1;
}

.note-item-menu:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.note-ai-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface) 95%, var(--primary) 5%);
    flex: 0 0 auto;
}

.note-editor-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.note-view:not(.fullscreen) .note-editor-body {
    flex-direction: column;
}

.note-view:not(.fullscreen) .note-ai-panel {
    flex: 0 0 auto;
    order: 2;
}

.note-ai-status {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    margin-left: auto;
}

.note-ai-input {
    width: 100%;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 10px 12px;
    font-size: 13px;
    resize: vertical;
    min-height: 50px;
    max-height: 120px;
    line-height: 1.5;
    font-family: inherit;
}

.note-ai-input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border) 40%);
}

.note-ai-input::placeholder {
    color: var(--muted);
    opacity: 0.5;
}

.note-ai-actions {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

.note-view.fullscreen .note-ai-actions {
    flex-direction: row;
}

.note-view.fullscreen .note-ai-actions button {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    padding: 8px 12px;
}

.note-view.fullscreen .note-ai-actions button svg {
    width: 14px;
    height: 14px;
}

.note-ai-status {
    font-size: 12px;
    color: var(--muted);
}

.note-ai-answer {
    border-radius: 4px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
    color: var(--text);
    padding: 14px;
    font-size: 13px;
    white-space: pre-wrap;
    line-height: 1.6;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

.conversation-placeholder {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--muted);
    border-radius: 6px;
    cursor: default;
    user-select: none;
    background: color-mix(in srgb, var(--surface-2) 80%, transparent 20%);
}

.conversation-color-chip {
    /* Deprecated - color is now on folder labels */
    display: none;
}

.text-button {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.text-button:hover {
    color: color-mix(in srgb, var(--primary) 80%, white);
    text-decoration: none;
}

.text-button.danger {
    color: #f87171;
}

.text-button.danger:hover {
    color: color-mix(in srgb, #f87171 85%, white);
}

.conversations-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.sidebar-footer {
    display: none;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    gap: 12px;
    flex-direction: column;
}

.sidebar-footer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}

.sidebar-footer-user svg {
    color: var(--muted);
    flex-shrink: 0;
}

.sidebar-footer-actions {
    display: flex;
    gap: 8px;
}

.sidebar-footer-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-footer-button:hover {
    background: color-mix(in srgb, var(--primary) 15%, var(--surface-alt));
    border-color: var(--primary);
    color: var(--text);
}

.sidebar-footer-button svg {
    flex-shrink: 0;
}

.conversation-popover {
    position: absolute;
    z-index: 3000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 12px 40px color-mix(in srgb, var(--shadow) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--border) 50%, transparent);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    max-width: 400px;
}

.conversation-popover button {
    background: none;
    border: none;
    text-align: left;
    padding: 10px 12px;
    border-radius: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.conversation-popover button:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.conversation-popover .popover-select {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding: 12px 16px;
    min-width: 300px;
}

.conversation-popover select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.conversation-popover select:hover {
    border-color: var(--primary);
}

.conversation-popover select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.conversation-popover button.danger {
    color: var(--danger);
}

.conversation-popover button.danger:hover {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
}

/* Submenu items: show arrow on right */
.conversation-popover button.has-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.conversation-popover button.has-submenu .submenu-arrow {
    opacity: 0.6;
    font-size: 14px;
}

.conversation-popover button.has-submenu:hover .submenu-arrow {
    opacity: 1;
}

/* Submenu popover (child menu) */
.conversation-popover.submenu {
    position: fixed;
    z-index: 3001;
}

@media (max-width: 960px) {
    body {
        /* Lighten wallpaper overlay and avoid fixed attachment to reduce jank */
        background-image:
            linear-gradient(to bottom, color-mix(in srgb, var(--bg, #080808) 94%, transparent 6%), color-mix(in srgb, var(--bg, #080808) 90%, transparent 10%)),
            var(--brand-background-image);
        background-attachment: scroll;
        background-position: center 0;
    }
    .app-body {
        flex-direction: column;
    }

    .user-display {
        display: none !important;
    }

    .sidebar-footer {
        display: flex;
    }

    body[data-access-tier="guest"] .mobile-sidebar-toggle,
    body[data-access-tier="user"] .mobile-sidebar-toggle {
        display: none !important;
    }

    .mobile-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        margin-right: 4px;
        background: transparent;
        border: none;
        color: var(--text);
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.15s ease;
    }

    .brand .logo {
        display: none;
    }

    .mobile-sidebar-toggle:hover {
        background: color-mix(in srgb, var(--primary) 12%, transparent);
    }

    .mobile-sidebar-toggle:active {
        transform: scale(0.97);
    }

    .conversation-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100dvh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border: none;
        max-width: 100%;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
    }

    .conversation-sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-mobile-close {
        display: flex;
    }

    .sidebar-collapse-toggle {
        display: none;
    }

    /* Add top padding on mobile to avoid close button overlap */
    .sidebar-accordion {
        padding-top: 48px;
        flex: 1;
        overflow-y: auto;
        padding-bottom: 16px;
    }

    /* Fix footer to bottom on mobile */
    .sidebar-footer {
        position: relative;
        flex-shrink: 0;
        border-top: 1px solid var(--border);
        background: var(--surface);
        padding: 16px;
    }
}

/* Mobile keyboard-aware layout - uses dvh units and lets browser handle viewport resize */
@media (max-width: 960px) {
    /* Ensure body uses dynamic viewport height */
    body {
        min-height: 100dvh;
        height: 100dvh;
    }

    /* Messages area scrolls naturally with viewport changes */
    .app-main {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
}
.messages {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 960px;
}

:root[data-layout-width="full"] .messages {
    max-width: 100%;
}

.messages::after {
    content: "";
    display: block;
    height: 16px;
    flex-shrink: 0;
}

body.note-mode .messages {
    display: none;
}

body.note-mode .composer {
    display: none;
}

body.note-mode .note-view {
    display: flex;
}

.note-view {
    display: none;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 24px;
    overflow: auto;
    flex: 1 1 auto;
    max-width: 960px;
    margin: 0 auto;
}

:root[data-layout-width="full"] .note-view {
    max-width: 100%;
}

.note-view-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.note-title-group {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.note-title-input {
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 10px 12px;
    font-size: 18px;
    font-weight: 600;
    background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
    color: var(--text);
}

.note-title-input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border) 40%);
}

.note-folder-select {
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 8px 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    min-width: 160px;
    max-height: 40vh;
    overflow: auto;
}

.note-switcher-group {
    display: none;
    flex: 0 1 auto;
}

.note-switcher-select {
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 8px 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    min-width: 180px;
    max-height: 40vh;
    overflow: auto;
}

.note-view.fullscreen .note-switcher-group {
    display: block;
}

.note-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Fullscreen button styling */
.note-view .note-header-actions .toolbar-btn {
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
}

.note-view .note-header-actions .toolbar-btn:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface) 92%);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border) 50%);
}

.note-editor {
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
    border-radius: 0;
    background: color-mix(in srgb, var(--surface) 97%, var(--primary) 3%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 90%, transparent 10%);
    display: flex;
    flex-direction: column;
}

.note-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
    background: color-mix(in srgb, var(--surface) 92%, transparent 8%);
}

.note-toolbar-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.note-toolbar-btn {
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
    background: color-mix(in srgb, var(--surface) 98%, transparent 2%);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.note-toolbar-btn span {
    font-weight: 700;
}

.note-toolbar-btn:hover,
.note-toolbar-btn:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border) 50%);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface) 92%);
    outline: none;
}

.note-editor-modes {
    display: inline-flex;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
    border-radius: 999px;
    overflow: hidden;
}

.note-mode-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.note-mode-btn.active {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
    color: var(--text);
}

.note-editor-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Note Editor Toolbar */
.note-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    gap: 2px;
    align-items: center;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 6px;
}

.toolbar-spacer {
    flex: 1;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-btn:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent 85%);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent 70%);
}

.toolbar-btn:active {
    background: color-mix(in srgb, var(--primary) 25%, transparent 75%);
    transform: scale(0.97);
}

.toolbar-btn.active {
    background: color-mix(in srgb, var(--primary) 20%, transparent 80%);
    border-color: var(--primary);
    color: var(--primary);
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
}

/* Export Dropdown */
.export-dropdown {
    position: relative;
}

.export-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.export-menu[hidden] {
    display: none;
}

.export-menu-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.export-menu-item:first-child {
    border-radius: 6px 6px 0 0;
}

.export-menu-item:last-child {
    border-radius: 0 0 6px 6px;
}

.export-menu-item:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent 90%);
}

.export-menu-item:active {
    background: color-mix(in srgb, var(--primary) 15%, transparent 85%);
}

/* Note Editor Container */
.note-editor-container {
    display: flex;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 0;
    min-height: 400px;
    max-height: calc(100dvh - 420px);
    flex: 1 1 auto;
}

.note-content-input,
.note-content-preview {
    flex: 1 1 50%;
    width: 50%;
    padding: 20px;
    font-size: 15px;
    line-height: 1.7;
    background: var(--surface);
    color: var(--text);
    overflow-y: auto;
    min-height: 400px;
}

/* Edit Mode - Show only textarea */
.note-editor-container[data-mode="edit"] .note-content-input {
    width: 100%;
    flex: 1 1 100%;
}

.note-editor-container[data-mode="edit"] .note-content-preview {
    display: none;
}

/* Preview Mode - Show only preview */
.note-editor-container[data-mode="preview"] .note-content-input {
    display: none;
}

.note-editor-container[data-mode="preview"] .note-content-preview {
    width: 100%;
    flex: 1 1 100%;
}

/* Split Mode - Show both (default) */
.note-editor-container[data-mode="split"] .note-content-input {
    flex: 1 1 50%;
    width: 50%;
}

.note-editor-container[data-mode="split"] .note-content-preview {
    flex: 1 1 50%;
    width: 50%;
}

/* Textarea Styling */
.note-content-input {
    border: none;
    resize: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.note-content-input:focus {
    outline: none;
}

.note-content-input::placeholder {
    color: var(--muted);
    opacity: 0.5;
}

/* Preview Styling */
.note-content-preview {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.note-content-preview:empty::before {
    content: "Preview will appear here…";
    color: var(--muted);
    font-style: italic;
    opacity: 0.6;
}

/* Markdown Preview Content Styles */
.note-content-preview > *:first-child {
    margin-top: 0;
}

.note-content-preview > *:last-child {
    margin-bottom: 0;
}

.note-content-preview p {
    margin: 0 0 16px;
}

.note-content-preview h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
    color: var(--text);
}

.note-content-preview h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 20px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent 40%);
    color: var(--text);
}

.note-content-preview h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 16px 0 10px;
    color: var(--text);
}

.note-content-preview h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 14px 0 8px;
    color: var(--text);
}

.note-content-preview h5,
.note-content-preview h6 {
    font-size: 16px;
    font-weight: 600;
    margin: 12px 0 6px;
    color: var(--text);
}

.note-content-preview ul,
.note-content-preview ol {
    margin: 12px 0;
    padding-left: 24px;
}

.note-content-preview ul {
    list-style-type: disc;
}

.note-content-preview ol {
    list-style-type: decimal;
}

.note-content-preview li {
    margin: 6px 0;
    line-height: 1.6;
}

.note-content-preview li > ul,
.note-content-preview li > ol {
    margin: 6px 0;
}

.note-content-preview blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 4px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent 92%);
    color: var(--text);
    font-style: italic;
}

.note-content-preview blockquote p {
    margin: 0;
}

.note-content-preview code {
    background: color-mix(in srgb, var(--surface-2) 80%, transparent 20%);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
    color: color-mix(in srgb, var(--primary) 85%, var(--text) 15%);
}

.note-content-preview pre {
    margin: 16px 0;
    padding: 16px;
    background: color-mix(in srgb, var(--surface-2) 50%, var(--surface) 50%);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow-x: auto;
}

.note-content-preview pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text);
    font-size: 14px;
}

.note-content-preview a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: opacity 0.15s ease;
}

.note-content-preview a:hover {
    opacity: 0.8;
}

.note-content-preview hr {
    margin: 24px 0;
    border: none;
    border-top: 2px solid var(--border);
}

.note-content-preview table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    border: 1px solid var(--border);
}

.note-content-preview th,
.note-content-preview td {
    padding: 10px 12px;
    border: 1px solid var(--border);
    text-align: left;
}

.note-content-preview th {
    background: var(--surface-2);
    font-weight: 600;
}

.note-content-preview tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-2) 30%, transparent 70%);
}

.note-content-preview img {
    max-width: 100%;
    height: auto;
    margin: 16px 0;
    border-radius: 0;
}

.note-content-preview strong {
    font-weight: 700;
    color: var(--text);
}

.note-content-preview em {
    font-style: italic;
}

.note-content-preview del {
    text-decoration: line-through;
    opacity: 0.7;
}

.note-view-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
}

/* Fullscreen Mode */
.note-view.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    z-index: 9999;
    overflow: hidden;
    gap: 0;
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

body.fullscreen-mode {
    overflow: hidden;
}

body.fullscreen-mode .sidebar,
body.fullscreen-mode .chat-header,
body.fullscreen-mode .main-header {
    display: none !important;
}

.note-view.fullscreen .note-view-header {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    min-height: auto;
    flex: 0 0 auto;
}

.note-view.fullscreen .note-title-group {
    flex: 0 1 auto;
    gap: 0;
}

.note-view.fullscreen .note-title-input {
    font-size: 16px;
    padding: 8px 10px;
}

.note-view.fullscreen .note-folder-select {
    padding: 6px 8px;
    font-size: 12px;
    min-width: 140px;
}

.note-view.fullscreen .note-header-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.note-view.fullscreen .note-header-actions button {
    padding: 6px 12px;
    font-size: 12px;
}

/* Fullscreen Editor Container - Three Column Layout */
.note-view.fullscreen .note-editor {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    background: var(--surface);
    gap: 0;
}

.note-view.fullscreen .note-editor-toolbar {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 4px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border);
}

/* Three-Column Content Layout */
.note-view.fullscreen .note-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* Two columns when AI panel is collapsed */
.note-view.fullscreen .note-editor-body:has(.note-ai-panel.collapsed) {
    grid-template-columns: 1fr 1fr 60px;
}

.note-view.fullscreen .note-editor-container {
    grid-column: 1 / 3;
    grid-row: 1;
    flex-direction: row;
    border: none;
    border-right: 1px solid var(--border);
    max-height: none;
    min-height: 0;
    gap: 1px;
    background: var(--border);
    height: 100%;
}

.note-view.fullscreen .note-editor-container[data-mode="edit"],
.note-view.fullscreen .note-editor-container[data-mode="preview"],
.note-view.fullscreen .note-editor-container[data-mode="split"] {
    grid-column: 1 / 3;
}

.note-view.fullscreen .note-editor-container[data-mode="edit"] .note-content-input,
.note-view.fullscreen .note-editor-container[data-mode="edit"] .note-content-preview,
.note-view.fullscreen .note-editor-container[data-mode="preview"] .note-content-input,
.note-view.fullscreen .note-editor-container[data-mode="preview"] .note-content-preview,
.note-view.fullscreen .note-editor-container[data-mode="split"] .note-content-input,
.note-view.fullscreen .note-editor-container[data-mode="split"] .note-content-preview {
    max-height: none;
    min-height: 0;
}

.note-view.fullscreen .note-ai-panel {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    gap: 0;
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: 0;
    background: var(--surface);
    min-width: 300px;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    height: 100%;
}

/* AI Panel Header */
.note-ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
}

.note-ai-header svg {
    color: var(--primary);
    flex-shrink: 0;
}

/* AI Messages Container - scrollable chat area */
.note-ai-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
}

.note-ai-messages:empty::before {
    content: "Ask the AI for help with your note. It can draft content, answer questions, or provide suggestions.";
    display: block;
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    opacity: 0.6;
    line-height: 1.6;
}

/* Individual AI message bubbles */
.note-ai-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 85%;
    animation: messageSlideIn 0.2s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-ai-message.user {
    align-self: flex-end;
}

.note-ai-message.assistant {
    align-self: flex-start;
}

.note-ai-message-role {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    opacity: 0.8;
    padding: 0 2px;
}

.note-ai-message.user .note-ai-message-role {
    text-align: right;
    color: color-mix(in srgb, var(--primary) 70%, var(--text) 30%);
}

.note-ai-message-content {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    white-space: normal;
    word-wrap: break-word;
    border: 1px solid var(--border);
}

/* Markdown rendering in AI messages */
.note-ai-message-content h1,
.note-ai-message-content h2,
.note-ai-message-content h3,
.note-ai-message-content h4,
.note-ai-message-content h5,
.note-ai-message-content h6 {
    margin: 8px 0 4px 0;
    font-weight: 600;
}

.note-ai-message-content h1 {
    font-size: 16px;
}
.note-ai-message-content h2 {
    font-size: 15px;
}
.note-ai-message-content h3 {
    font-size: 14px;
}
.note-ai-message-content h4,
.note-ai-message-content h5,
.note-ai-message-content h6 {
    font-size: 13px;
}

.note-ai-message-content strong {
    font-weight: 700;
}

.note-ai-message-content em {
    font-style: italic;
}

.note-ai-message-content p {
    margin: 6px 0;
}

.note-ai-message-content ul,
.note-ai-message-content ol {
    margin: 6px 0;
    padding-left: 20px;
}

.note-ai-message-content li {
    margin: 3px 0;
}

.note-ai-message-content code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
}

.note-ai-message-content pre {
    background: rgba(0, 0, 0, 0.1);
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 6px 0;
}

.note-ai-message-content pre code {
    background: none;
    padding: 0;
    font-size: 12px;
}

.note-ai-message-content blockquote {
    border-left: 3px solid var(--border);
    padding-left: 10px;
    margin: 6px 0;
    opacity: 0.85;
}

.note-ai-message.user .note-ai-message-content {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
    color: var(--text);
}

.note-ai-message.assistant .note-ai-message-content {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.note-ai-message-time {
    font-size: 10px;
    color: var(--muted);
    opacity: 0.6;
    padding: 0 2px;
}

.note-ai-message.user .note-ai-message-time {
    text-align: right;
}

/* Loading state for AI messages */
.note-ai-message.loading .note-ai-message-content {
    min-height: 1.5em;
    display: flex;
    align-items: center;
    font-style: italic;
}

.loading-dots span {
    animation: pulse 1.4s infinite;
    display: inline-block;
    margin: 0 2px;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0%, 60%, 100% {
        opacity: 0.6;
    }
    30% {
        opacity: 1;
    }
}

/* AI Composer at bottom */
.note-ai-composer {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* AI Panel Collapsed State */
.note-view.fullscreen .note-ai-panel.collapsed {
    grid-column: 3;
    max-width: 60px;
    min-width: 60px;
    padding: 0;
    gap: 0;
    align-items: stretch;
}

.note-view.fullscreen .note-ai-panel.collapsed .note-ai-header,
.note-view.fullscreen .note-ai-panel.collapsed .note-ai-messages,
.note-view.fullscreen .note-ai-panel.collapsed .note-ai-composer {
    display: none;
}

.note-view.fullscreen .note-ai-panel.collapsed .note-ai-collapse-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* AI Panel Toggle Button */
.note-ai-collapse-btn {
    display: none;
    width: 100%;
    height: 40px;
    padding: 8px;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent 40%);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: stretch;
}

.note-view.fullscreen .note-ai-collapse-btn {
    display: flex;
}

.note-ai-collapse-btn:hover {
    background: color-mix(in srgb, var(--muted) 15%, transparent);
    color: var(--text);
}

.note-ai-collapse-btn svg {
    transition: transform 0.2s ease;
}

.note-ai-panel.collapsed .note-ai-collapse-btn {
    border-bottom: 1px solid transparent;
}

.note-ai-panel.collapsed .note-ai-collapse-btn svg {
    transform: rotate(180deg);
}

/* Fullscreen Exit Button - Hidden since we moved it to toolbar */
.note-fullscreen-exit-btn {
    display: none !important;
}

.note-view-footer {
    display: none;
}

.note-view.fullscreen .note-view-footer {
    display: none;
}

.message {
    position: relative;
    padding: 14px 18px;
    border-radius: 0;
    max-width: 720px;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.6;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    font-size: var(--message-font-size, 15px);
    border: 1px solid var(--border, #3a3a3a);
    background: var(--surface-2, #111827);
    padding-right: 62px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:root[data-layout-width="full"] .message {
    max-width: 100%;
}
.message:last-child {
    margin-bottom: 16px;
}
.message.user {
    background: color-mix(in srgb, var(--primary, #7f5af0) 18%, var(--surface, #2a2a2a) 82%);
    align-self: flex-end;
    border-color: color-mix(in srgb, var(--primary, #7f5af0) 35%, var(--border, #3a3a3a) 65%);
}
.message.assistant {
    background: var(--surface-2, #111827);
    border-color: var(--border, #3a3a3a);
}

/* Speaker labels with icon and name */
.speaker-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.85;
    user-select: none;
    margin-bottom: 2px;
}

.speaker-label .speaker-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Brand kit logo in speaker label */
.speaker-label .speaker-icon-img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 1;
}

.speaker-label .speaker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.message.user .speaker-label {
    justify-content: flex-end;
    color: color-mix(in srgb, var(--primary, #7f5af0) 70%, var(--text, #e6e6e6) 30%);
}

.message.assistant .speaker-label {
    color: var(--muted);
}

.message.assistant .speaker-label .speaker-icon {
    color: var(--primary);
}

.message .actions {
    position: absolute;
    right: 10px;
    top: 8px;
    display: flex;
    gap: 6px;
    align-items: center;
    z-index: 2;
}

/* Hide copy button from message header (functionality remains in action menu) */
.message .actions button.copy-button {
    display: none !important;
}
.message-metadata {
    display: flex;
    gap: 4px;
    flex-direction: column;
    margin-top: 2px;
    flex-shrink: 0;
}
.message .timestamp {
    font-size: 11px;
    color: var(--muted);
    opacity: 0.75;
    user-select: none;
    line-height: 1.2;
    padding: 0;
    order: 2;
    align-self: flex-start;
}
.message.user .timestamp {
    text-align: right;
    align-self: flex-end;
}
.metadata-pill {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    background: color-mix(in srgb, var(--primary, #7f5af0) 12%, var(--surface, #2a2a2a) 88%);
    border: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 25%, transparent 75%);
    border-radius: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    cursor: help;
    transition: all 0.15s ease;
}
.metadata-pill:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 18%, var(--surface, #2a2a2a) 82%);
    border-color: color-mix(in srgb, var(--primary, #7f5af0) 40%, transparent 60%);
}
.metadata-pill img {
    filter: brightness(0) saturate(100%) invert(62%) sepia(70%) saturate(2824%) hue-rotate(229deg) brightness(101%) contrast(93%);
    opacity: 0.9;
}
.pill-count {
    font-size: 9px;
    line-height: 1;
}
.message .body {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Give assistant message body padding for top-right button only */
.message.assistant .body {
    padding-right: 40px;
}

/* Enhanced message content typography */
.message .body p {
    margin: 8px 0;
    line-height: 1.65;
    color: var(--text, #e6e6e6);
}

.message .body p:first-child {
    margin-top: 0;
}

.message .body p:last-child {
    margin-bottom: 0;
}

.message .body h1,
.message .body h2,
.message .body h3,
.message .body h4,
.message .body h5,
.message .body h6 {
    margin: 16px 0 10px 0;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text, #e6e6e6);
}

.message .body h1:first-child,
.message .body h2:first-child,
.message .body h3:first-child,
.message .body h4:first-child,
.message .body h5:first-child,
.message .body h6:first-child {
    margin-top: 0;
}

.message .body h1 {
    font-size: 1.35em;
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 25%, transparent 75%);
    padding-bottom: 4px;
    margin-top: 14px;
}

.message .body h2 {
    font-size: 1.2em;
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 18%, transparent 82%);
    padding-bottom: 3px;
    margin-top: 12px;
}

.message .body h3 {
    font-size: 1.1em;
    color: color-mix(in srgb, var(--text, #e6e6e6) 95%, var(--accent, #00b4ff) 5%);
}

.message .body h4 {
    font-size: 1.05em;
}

.message .body h5 {
    font-size: 1em;
}

.message .body h6 {
    font-size: 0.95em;
    color: var(--muted, #9aa4b2);
}

.message .body a {
    color: var(--accent, #00b4ff);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
    font-weight: 500;
}

.message .body a:hover {
    color: var(--primary, #7f5af0);
    border-bottom-color: var(--primary, #7f5af0);
}

.message .body a:visited {
    color: color-mix(in srgb, var(--accent, #00b4ff) 80%, var(--primary, #7f5af0) 20%);
}

.message .body strong {
    font-weight: 600;
    color: color-mix(in srgb, var(--text, #e6e6e6) 100%, var(--accent, #00b4ff) 0%);
}

.message .body em {
    font-style: italic;
    color: color-mix(in srgb, var(--text, #e6e6e6) 95%, var(--muted, #9aa4b2) 5%);
}

.message .body blockquote {
    margin: 12px 0;
    padding: 10px 16px;
    border-left: 4px solid var(--primary, #7f5af0);
    background: color-mix(in srgb, var(--surface, #2a2a2a) 80%, var(--primary, #7f5af0) 5%);
    border-radius: 0;
    font-style: italic;
    color: color-mix(in srgb, var(--text, #e6e6e6) 90%, var(--muted, #9aa4b2) 10%);
    overflow-wrap: break-word;
    word-break: break-word;
}

.message .body blockquote p {
    margin: 6px 0;
}

.message .body .message-callout {
    --callout-accent: var(--primary, #7f5af0);
    border-radius: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--callout-accent);
    background: color-mix(in srgb, var(--surface, #2a2a2a) 92%, transparent 8%);
    margin: 12px 0;
}

.message .body .message-callout .callout-header {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--callout-accent) 70%, var(--text, #e6e6e6) 30%);
}

.message .body .message-callout .callout-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--callout-accent);
}

.message .body .message-callout .callout-body {
    margin-top: 6px;
    color: color-mix(in srgb, var(--text, #e6e6e6) 94%, var(--muted, #9aa4b2) 6%);
}
.message .body .message-callout .callout-body:empty {
    display: none;
}

.message .body .message-callout[data-callout="option"] {
    --callout-accent: var(--accent, #00b4ff);
}

.message .body .message-callout[data-callout="warning"] {
    --callout-accent: var(--danger, #ef4444);
}

.message .body .message-callout[data-callout="info"],
.message .body .message-callout[data-callout="note"] {
    --callout-accent: color-mix(in srgb, var(--primary, #7f5af0) 55%, var(--accent, #00b4ff) 45%);
}

/* Square: Everything gets 0px border-radius */
body[data-border-style="square"] * {
    border-radius: 0px !important;
}

/* Soft: A subtle 5px radius for all corners */
body[data-border-style="soft"] * {
    border-radius: 5px !important;
}

/* Rounded: Everything gets 10px border-radius */
body[data-border-style="rounded"] * {
    border-radius: 10px !important;
}

#projectsList > div > ul {
    border-radius: 0px !important;
}

/* Exceptions: keep structural containers square for cleaner layout */
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .app-header,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .conversation-sidebar,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .composer,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .chat-footer,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .message-input-wrapper,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .sidebar-footer,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .sidebar-header,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .settings-overlay-header,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .guide-overlay-header,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .privacy-overlay-header,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .changelog-overlay-header,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .auth-hero-side,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .auth-form-side,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .folder-group-default,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .project-item,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .project-compact-item,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .conversation-item,
:is(
    body[data-border-style="rounded"],
    body[data-border-style="soft"]
)
    .note-item {
    border-radius: 0 !important;
}

:root[data-shadow-mode="off"] {
    --shadow: rgba(0, 0, 0, 0);
}

:root[data-shadow-mode="off"] .app-header,
:root[data-shadow-mode="off"] .composer,
:root[data-shadow-mode="off"] .message,
:root[data-shadow-mode="off"] .settings-sidebar,
:root[data-shadow-mode="off"] .settings-content,
:root[data-shadow-mode="off"] .settings-group,
:root[data-shadow-mode="off"] .auth-modal,
:root[data-shadow-mode="off"] .modal .modal-content,
:root[data-shadow-mode="off"] .theme-card,
:root[data-shadow-mode="off"] .persona-card,
:root[data-shadow-mode="off"] .toast,
:root[data-shadow-mode="off"] .tool-server {
    box-shadow: none !important;
}

/* ========================================
   MESSAGE DENSITY STYLES
   ======================================== */

/* Compact density */
:root[data-message-density="compact"] .message {
    gap: 6px;
    padding: 6px 12px;
}

:root[data-message-density="compact"] .message:last-child {
    margin-bottom: 10px;
}

:root[data-message-density="compact"] #messages > div {
    gap: 6px;
}

:root[data-message-density="compact"] .message .body p {
    margin: 4px 0;
    line-height: 1.3;
}

/* Spacious density */
:root[data-message-density="spacious"] .message {
    gap: 12px;
    padding: 12px 20px;
}

:root[data-message-density="spacious"] .message:last-child {
    margin-bottom: 20px;
}

:root[data-message-density="spacious"] #messages > div {
    gap: 16px;
}

:root[data-message-density="spacious"] .message .body p {
    margin: 10px 0;
    line-height: 1.7;
}

/* ========================================
   TEXT CONTRAST STYLES
   ======================================== */

/* High contrast */
:root[data-text-contrast="high"] {
    --text-opacity: 1;
}

:root[data-text-contrast="high"] .message {
    font-weight: 500;
}

:root[data-text-contrast="high"] .message .body p {
    font-weight: 500;
}

/* Maximum contrast */
:root[data-text-contrast="maximum"] {
    --text-opacity: 1;
}

:root[data-text-contrast="maximum"] .message {
    font-weight: 600;
}

:root[data-text-contrast="maximum"] .message .body p {
    font-weight: 600;
}

:root[data-text-contrast="maximum"] .message .body h1,
:root[data-text-contrast="maximum"] .message .body h2,
:root[data-text-contrast="maximum"] .message .body h3,
:root[data-text-contrast="maximum"] .message .body h4,
:root[data-text-contrast="maximum"] .message .body h5,
:root[data-text-contrast="maximum"] .message .body h6 {
    font-weight: 700;
}

/* ========================================
   SIDEBAR OPACITY
   ======================================== */

.conversation-sidebar {
    opacity: var(--sidebar-opacity, 1);
}

/* ========================================
   ACCENT COLOR (via HSL) - Theme-aware
   ======================================== */

:root {
    /* Default for dark themes: lighter, more saturated */
    --accent-color: hsl(var(--accent-hue, 210), 75%, 55%);
    --accent-color-light: hsl(var(--accent-hue, 210), 75%, 65%);
    --accent-color-dark: hsl(var(--accent-hue, 210), 75%, 45%);
}

/* For light themes, use darker, more saturated colors */
:root[data-theme="rose"],
:root[data-theme="honey"],
:root[data-theme="lemon"],
:root[data-theme="pistachio"],
:root[data-theme="aqua"],
:root[data-theme="periwinkle"],
:root[data-theme="lilac"],
:root[data-theme="blush"],
:root[data-theme="caramel"],
:root[data-theme="mint"] {
    --accent-color: hsl(var(--accent-hue, 210), 75%, 45%);
    --accent-color-light: hsl(var(--accent-hue, 210), 75%, 55%);
    --accent-color-dark: hsl(var(--accent-hue, 210), 75%, 35%);
}

.message .body ul li::marker {
    color: var(--accent-color);
}

.message .body a {
    color: var(--accent-color);
}

.message .body a:hover {
    color: var(--accent-color-light);
}

.message .body code {
    background: color-mix(in srgb, var(--accent-color) 15%, var(--surface, #2a2a2a) 85%);
    border-left: 3px solid var(--accent-color);
}

/* Interactive elements using accent */
button.primary-button {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

button.primary-button:hover {
    background: var(--accent-color-light);
    border-color: var(--accent-color-light);
}

.message .body ul li::marker {
    color: var(--primary, #7f5af0);
    font-weight: 600;
}
.message .body ol {
    margin: 10px 0;
    padding-left: 24px;
    list-style-position: outside;
    line-height: 1.6;
}

.message .body ul ul,
.message .body ol ol,
.message .body ul ol,
.message .body ol ul {
    margin: 6px 0;
    padding-left: 20px;
}

.message .body li {
    margin: 4px 0;
}

.message .body li::marker {
    color: var(--primary, #7f5af0);
    font-weight: 600;
}

.message .body .task-list-item {
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.message .body ul.task-list {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message .body .task-list-item::marker {
    content: none;
}

.message .body .task-list-item label {
    display: inline-flex;
    gap: 10px;
    align-items: flex-start;
    cursor: default;
}

.message .body .task-list-item input[type="checkbox"] {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    cursor: not-allowed;
    accent-color: var(--primary, #7f5af0);
}

.message .body hr {
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--border, rgba(148, 163, 184, 0.25)) 85%, transparent 15%);
    margin: 12px 0;
}

/* Tables inside messages */
.message .body .table-wrapper {
    overflow-x: auto;
    margin: 16px 0;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.message .body table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid var(--border);
    font-size: 0.95em;
}

.message .body th,
.message .body td {
    padding: 10px 12px;
    border: 1px solid var(--border);
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
}

.message .body th {
    background: color-mix(in srgb, var(--surface-2) 80%, var(--primary) 5%);
    font-weight: 600;
    color: var(--text);
}

.message .body tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-2) 30%, transparent 70%);
}

.message .body tbody tr:hover {
    background: color-mix(in srgb, var(--surface-2) 50%, transparent 50%);
}

/* Hide Prism's toolbar (we use our own copy button and language label) */
div.code-toolbar > .toolbar {
    display: none !important;
}

/* Code blocks inside messages - Enhanced Design */
.message .body .code-block-wrapper {
    margin: 12px 0;
    background: color-mix(in srgb, var(--surface, #2a2a2a) 95%, var(--primary, #7f5af0) 5%);
    border: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 20%, var(--border, #3a3a3a) 80%);
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    animation: fadeInCode 0.3s ease-out;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

@keyframes fadeInCode {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message .body .code-block-wrapper:hover {
    border-color: color-mix(in srgb, var(--primary, #7f5af0) 35%, var(--border, #3a3a3a) 65%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px color-mix(in srgb, var(--primary, #7f5af0) 10%, transparent 90%);
    transform: translateY(-1px);
}

.message .body .code-block-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--surface, #2a2a2a) 90%, var(--primary, #7f5af0) 10%);
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 15%, transparent 85%);
}

.message .body .code-block-lang {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary, #7f5af0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.message .body .code-block-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 30%, transparent 70%);
    border-radius: 0;
    color: var(--muted, #9aa4b2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.message .body .code-block-copy:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 15%, transparent 85%);
    border-color: var(--primary, #7f5af0);
    color: var(--primary, #7f5af0);
}

.message .body .code-block-copy:active {
    transform: scale(0.96);
}

.message .body .code-block-copy.copied {
    background: color-mix(in srgb, #10b981 20%, transparent 80%);
    border-color: #10b981;
    color: #10b981;
}

.message .body .code-block-copy svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.message .body .code-block-copy .copy-label {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.message .body .code-block-wrapper[data-code-type="script"] {
    background: color-mix(in srgb, var(--surface, #2a2a2a) 88%, var(--accent, #00b4ff) 12%);
    border-color: color-mix(in srgb, var(--accent, #00b4ff) 35%, var(--border, #3a3a3a) 65%);
}

.message .body .code-block-header[data-code-type="script"] {
    background: color-mix(in srgb, var(--surface, #2a2a2a) 80%, var(--accent, #00b4ff) 20%);
    border-bottom-color: color-mix(in srgb, var(--accent, #00b4ff) 35%, transparent 65%);
}

.message .body .code-block-wrapper[data-code-type="script"] .code-block-lang {
    color: color-mix(in srgb, var(--accent, #00b4ff) 75%, var(--text, #e6e6e6) 25%);
}

.message .body pre[data-code-type="script"] {
    background: color-mix(in srgb, var(--surface, #2a2a2a) 90%, transparent 10%);
    border-top: 1px solid color-mix(in srgb, var(--accent, #00b4ff) 20%, transparent 80%);
}

.message .body pre[data-code-type="script"] code {
    color: color-mix(in srgb, var(--text, #e6e6e6) 90%, var(--accent, #00b4ff) 10%);
}

.message .body pre {
    margin: 0;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary, #7f5af0) 40%, transparent 60%) transparent;
}

.message .body pre::-webkit-scrollbar {
    height: 8px;
}

.message .body pre::-webkit-scrollbar-track {
    background: transparent;
}

.message .body pre::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary, #7f5af0) 40%, transparent 60%);
    border-radius: 0;
}

.message .body pre::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 60%, transparent 40%);
}

.message .body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    font-variant-ligatures: common-ligatures;
}

.message .body pre code {
    display: block;
    white-space: pre;
    overflow-x: auto;
    color: var(--text, #e6e6e6);
    padding-left: 20px;
}

/* Inline code styling */
.message .body :not(pre) > code {
    background: color-mix(in srgb, var(--surface, #2a2a2a) 80%, var(--primary, #7f5af0) 20%);
    padding: 3px 7px;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--text, #e6e6e6) 95%, var(--accent, #00b4ff) 5%);
    border: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 20%, transparent 80%);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Responsive code block styles for mobile */
@media (max-width: 768px) {
    .app-body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .app-main {
        padding: 12px 8px;
        overflow-x: hidden;
    }

    .messages {
        max-width: 100%;
    }

    .message {
        max-width: 100%;
        padding: 12px 50px 12px 14px;
    }

    .message .body .code-block-wrapper {
        margin: 10px -8px;
        border-radius: 0;
    }

    .message .body .code-block-header {
        padding: 6px 10px;
        flex-wrap: wrap;
    }

    .message .body .code-block-lang {
        font-size: 10px;
    }

    .message .body .code-block-copy {
        padding: 4px 8px;
        font-size: 11px;
    }

    .message .body .code-block-copy svg {
        width: 12px;
        height: 12px;
    }

    .message .body pre {
        padding: 12px;
        font-size: 12px;
    }

    .message .body code {
        font-size: 12px;
    }

    .message .body :not(pre) > code {
        font-size: 11.5px;
        padding: 2px 6px;
    }
}

.message .actions button {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 0;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
}
.message .actions button:hover {
    background: var(--surface-2);
    color: var(--text);
}
.message.assistant .typing-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.message.assistant .typing span {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    opacity: 0.4;
    animation: blink 1.4s infinite ease-in-out;
}
.message.assistant .typing span:nth-child(2) {
    animation-delay: 0.2s;
}
.message.assistant .typing span:nth-child(3) {
    animation-delay: 0.4s;
}
.message.assistant .typing-text {
    font-size: 13px;
    color: var(--text-secondary, var(--muted));
    opacity: 0.7;
    font-weight: 500;
}

@keyframes blink {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.action-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
}

.action-buttons-container > .action-button,
.action-buttons-container > .action-button-expand {
    flex-shrink: 0;
}

.action-buttons-hidden {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.action-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--primary, #7f5af0) 10%, transparent 90%);
    border: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 30%, transparent 70%);
    border-radius: 0;
    color: var(--primary, #7f5af0);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    width: fit-content;
}

.action-button-compact {
    padding: 6px 12px;
    font-size: 13px;
}

.action-button-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-button-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary, #7f5af0);
    color: var(--bg, #16161a);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    flex-shrink: 0;
}

.action-button:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 20%, transparent 80%);
    border-color: var(--primary, #7f5af0);
    transform: translateY(-1px);
}

.action-button:active {
    transform: translateY(0);
}

.action-button-expand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--primary, #7f5af0) 30%, transparent 70%);
    border-radius: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
}

.action-button-expand:hover {
    color: var(--primary, #7f5af0);
    border-color: var(--primary, #7f5af0);
    background: color-mix(in srgb, var(--primary, #7f5af0) 5%, transparent 95%);
}

.action-button-expand.expanded {
    border-style: solid;
    background: color-mix(in srgb, var(--primary, #7f5af0) 10%, transparent 90%);
}

/* Legacy class kept for backwards compatibility */
.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    width: 100%;
    flex-basis: 100%;
}

.response-action-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 0;
    font-size: 16px;
    line-height: 1;
    margin-top: 8px;
    opacity: 0.5;
    transition: all 0.2s ease;
    order: 3;
    align-self: flex-start;
}

.response-action-btn:hover {
    opacity: 1;
    background: var(--surface-2);
    color: var(--text);
}

.message.assistant .response-action-btn {
    align-self: flex-start;
}

.composer {
    grid-area: composer;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 14px var(--shadow);
}
#message {
    flex: 1;
    resize: none;
    min-height: 44px;
    max-height: 160px;
    padding: 12px 14px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface, #2a2a2a) 70%, black 30%);
    color: var(--text);
    font-family: var(--brand-font-body, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow-y: hidden;
}
#message::placeholder {
    color: color-mix(in srgb, var(--muted, #9aa4b2) 80%, transparent 20%);
}
#message::placeholder {
    color: color-mix(in srgb, var(--muted, #9aa4b2) 80%, transparent 20%);
}
#message:focus {
    border-color: color-mix(in srgb, var(--primary, #7f5af0) 50%, transparent 50%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #7f5af0) 15%, transparent 85%);
}
#sendBtn {
    background: linear-gradient(135deg, var(--primary, #7f5af0), var(--accent, #22d3ee));
    color: var(--bg, #0b0e13);
    border: none;
    border-radius: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.05s ease, filter 0.15s ease;
    flex-shrink: 0;
}
#sendBtn:hover {
    filter: brightness(1.05);
}
#sendBtn:active {
    transform: translateY(1px);
}
#sendBtn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
#sendBtn:disabled {
    filter: grayscale(0.5) brightness(0.8);
    cursor: not-allowed;
}
#sendBtn img {
    width: 18px;
    height: 18px;
    filter: invert(100%);
}

/* Voice Input Button */

.voice-input-button {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    position: relative;
}

.voice-input-button[hidden] {
    display: none !important;
}

.voice-input-button:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 10%, transparent 90%);
    border-color: var(--primary);
    color: var(--primary);
}

.voice-input-button:active {
    transform: scale(0.95);
}

.voice-input-button.listening {
    background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent 85%);
    border-color: var(--danger, #ef4444);
    color: var(--danger, #ef4444);
    animation: voice-pulse 1.5s ease-in-out infinite;
}

.voice-input-button.listening:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 25%, transparent 75%);
}

.voice-input-button svg {
    width: 20px;
    height: 20px;
}

@keyframes voice-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #ef4444) 40%, transparent 60%);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger, #ef4444) 0%, transparent 100%);
    }
}

button.secondary {
    background: color-mix(in srgb, var(--surface, #2a2a2a) 90%, white 10%);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 10px 12px;
    cursor: pointer;
    transition: filter 0.15s ease;
    flex-shrink: 0;
}
button.secondary:hover {
    filter: brightness(1.1);
}
button.secondary:active {
    transform: translateY(1px);
}

.error {
    color: #fff;
    background: var(--danger);
    padding: 8px 10px;
    border-radius: 0;
}
.info {
    color: #fff;
    background: #3a3a3a;
    padding: 8px 10px;
    border-radius: 0;
    border: 1px solid #263040;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .app-header {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .brand {
        flex: 0 0 auto;
        gap: 8px;
    }

    .brand .logo {
        width: 20px;
        height: 20px;
    }

    .brand h1 {
        font-size: 14px;
    }

    .brand .version {
        font-size: 9px;
        margin-top: 4px;
    }

    .user-display {
        margin-left: 6px;
        padding: 3px 6px;
        font-size: 11px;
        gap: 4px;
        max-width: 120px;
    }

    .user-display span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-display svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .header-right {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 8px;
        min-width: 0;
    }

    .status {
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
    }

    .offline-indicator {
        font-size: 11px;
        padding: 3px 8px;
        gap: 4px;
    }

    .offline-indicator svg {
        width: 14px;
        height: 14px;
    }

    .offline-indicator span {
        display: none; /* Hide text on very small screens, just show icon */
    }

    .conversation-sidebar-header {
        display: none;
    }

    .sidebar-search-container {
        display: none;
    }

    .icon-button {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    #composer .tool-toggle-button {
        display: none;
    }

    .icon-button svg {
        width: 16px;
        height: 16px;
    }

    .modal-content:not(.auth-modal),
    .help-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .modal-content:not(.auth-modal),
    .help-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    html, body {
        background-position: center 40px !important;
    }

    /* Floating composer effect - position absolutely over messages */
    body {
        grid-template-rows: auto 1fr;
    }

    .app-main {
        position: relative;
        padding-bottom: 140px; /* Space for floating composer */
    }

    .scroll-down-btn {
        bottom: 160px;
        right: 20px;
        width: 36px;
        height: 36px;
    }

    .scroll-down-btn svg {
        width: 18px;
        height: 18px;
    }

    .messages::after {
        height: 140px; /* Match the bottom padding */
    }

    .composer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        border-radius: 0;
        margin: 0;
        padding: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: var(--surface);
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .composer-row {
        padding: 8px;
        gap: 6px;
        align-items: center;
    }

    #message {
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 44px;
        max-height: 44px;
        padding: 10px 12px;
    }

    .mobile-options-button {
        flex-shrink: 0;
    }

    /* All buttons same size: 44px × 44px with consistent layout */
    .composer-row .icon-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .composer-row .icon-button svg {
        width: 20px;
        height: 20px;
    }

    /* Ensure send button matches other buttons */
    .composer-row #sendBtn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Mobile keyboard open mode - focus on input (HERO MODE) */
    body.keyboard-open {
        overflow: hidden;
    }

    body.keyboard-open .app-header {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
    }

    body.keyboard-open .conversation-sidebar {
        display: none !important;
    }

    body.keyboard-open .app-main {
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        padding-top: 0;
    }

    body.keyboard-open .messages {
        opacity: 0.3;
        pointer-events: none;
        filter: blur(3px);
        transition: opacity 0.3s ease, filter 0.3s ease;
        flex: 1;
        overflow-y: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    body.keyboard-open .messages .message:last-child {
        opacity: 0.8;
        filter: blur(1px);
    }

    /* HERO MODE: Composer takes center stage */
    body.keyboard-open .composer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        max-width: none;
        box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.6);
        border-top: 3px solid var(--primary);
        border-radius: 0;
        background: var(--surface);
        z-index: 1500;
        transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    body.keyboard-open .composer-row {
        padding: 0;
        gap: 12px;
    }

    /* Hide all non-essential buttons when keyboard is open */
    body.keyboard-open .mobile-options-button,
    body.keyboard-open .attach-button,
    body.keyboard-open .attach-library-button,
    body.keyboard-open .tool-toggle-button,
    body.keyboard-open .account-button {
        display: none !important;
    }

    /* Make textarea THE HERO */
    body.keyboard-open #message {
        min-height: 120px;
        max-height: calc(40dvh);
        font-size: 16px; /* Prevents iOS zoom */
        line-height: 1.5;
        padding: 16px 18px;
        border-radius: 0;
        border-width: 2px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
        background: color-mix(in srgb, var(--surface, #2a2a2a) 60%, black 40%);
    }

    body.keyboard-open #message:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #7f5af0) 20%, transparent 80%), 0 4px 24px rgba(0, 0, 0, 0.3);
    }

    /* Larger send button for easy tapping */
    body.keyboard-open #sendBtn {
        width: 56px;
        height: 56px;
        border-radius: 0;
        flex-shrink: 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    body.keyboard-open #sendBtn img {
        width: 26px;
        height: 26px;
    }

    /* Hide file attachments UI in hero mode to maximize space */
    body.keyboard-open .file-attachments {
        max-height: 25dvh;
        overflow-y: auto;
        padding: 0 0 12px 0;
        margin-bottom: 8px;
    }

    body.keyboard-open #stopBtn {
        height: 56px;
        padding: 0 20px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 0;
    }
}

/* Landscape mobile - aggressive header shrinking */
@media (max-width: 900px) and (max-height: 500px) {
    .app-header {
        padding: 4px 8px;
    }

    .brand {
        gap: 6px;
    }

    .brand .logo {
        width: 16px;
        height: 16px;
    }

    .brand h1 {
        font-size: 13px;
        margin: 0;
    }

    .brand .version {
        font-size: 8px;
        margin-top: 3px;
    }

    .user-display {
        margin-left: 4px;
        padding: 2px 5px;
        font-size: 10px;
        gap: 3px;
    }

    .user-display svg {
        width: 12px;
        height: 12px;
    }

    .status {
        font-size: 10px;
        max-width: 100px;
    }

    .header-right {
        gap: 6px;
    }

    .icon-button {
        width: 24px;
        height: 24px;
    }

    .icon-button svg {
        width: 14px;
        height: 14px;
    }

    html, body {
        background-position: center 30px !important;
    }
}

/* Extra small mobile screens */
@media (max-width: 400px) {
    .app-header {
        padding: 6px 8px;
    }

    .brand h1 {
        font-size: 13px;
    }

    .brand .version {
        display: none;
    }

    .user-display {
        margin-left: 4px;
        padding: 2px 5px;
        font-size: 10px;
    }

    .user-display span {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .status {
        max-width: 80px;
    }

    .icon-button {
        width: 26px;
        height: 26px;
    }

    .composer {
        margin: 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* Desktop/wider screens - reset mobile constraints */
@media (min-width: 769px) {
    #message {
        min-height: 44px;
        max-height: 160px;
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* File upload styles */
.composer {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    transition: all 0.15s ease;
}

.composer-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    padding: 12px;
    flex-wrap: nowrap;
}

.composer.drag-over {
    background: color-mix(in srgb, var(--primary, #7f5af0) 10%, var(--surface, #2a2a2a) 90%);
    border-color: var(--primary);
}

.file-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 12px 0;
    max-height: 150px;
    overflow-y: auto;
}

.file-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--surface, #2a2a2a) 70%, black 30%);
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 13px;
}

.file-attachment-item .file-icon {
    font-size: 18px;
}

.file-attachment-item .file-name {
    color: var(--text);
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-attachment-item .file-size {
    color: var(--muted);
    font-size: 11px;
}

.file-attachment-item .remove-attachment {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.file-attachment-item .remove-attachment:hover {
    opacity: 1;
}

.attach-button {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.attach-button:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 10%, transparent 90%);
    border-color: var(--primary);
    color: var(--primary);
}

.attach-button:active {
    transform: scale(0.95);
}

.attach-button svg {
    width: 20px;
    height: 20px;
}

.menu-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
}

.menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.menu-row.disabled {
    opacity: 0.6;
}
.menu-row.disabled input,
.menu-row.disabled button {
    cursor: not-allowed;
}

.menu-copy h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--text);
}

.menu-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    max-width: 320px;
}

.tools-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 20%, transparent 80%);
    border-radius: 8px;
    overflow: hidden;
}

.tool-server {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--surface, #2a2a2a) 95%, var(--primary, #7f5af0) 5%);
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 15%, transparent 85%);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    align-items: center;
    transition: background 0.2s ease;
}

.tool-server:last-child {
    border-bottom: none;
}

.tool-server:hover {
    background: color-mix(in srgb, var(--surface, #2a2a2a) 85%, var(--primary, #7f5af0) 15%);
}

.tool-server strong {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    grid-column: 1;
    grid-row: 1;
}

.tool-count {
    grid-column: 2;
    grid-row: 1 / 3;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: right;
    white-space: nowrap;
}

.tool-description {
    grid-column: 1;
    grid-row: 2;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
}

.toggle-button {
    border: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 35%, transparent 65%);
    background: color-mix(in srgb, var(--primary, #7f5af0) 15%, var(--surface, #2a2a2a) 85%);
    color: var(--primary);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.toggle-button:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 22%, var(--surface, #2a2a2a) 78%);
}

.toggle-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.toggle-button[aria-pressed="false"] {
    color: var(--text);
}

.persona-select {
    background: color-mix(in srgb, var(--primary, #7f5af0) 15%, var(--surface, #2a2a2a) 85%);
    border: 1px solid color-mix(in srgb, var(--primary, #7f5af0) 35%, transparent 65%);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    min-width: 180px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.persona-select:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 22%, var(--surface, #2a2a2a) 78%);
}

.persona-select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.persona-select option {
    background: var(--surface);
    color: var(--text);
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.menu-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.menu-actions input[type="file"] {
    font: inherit;
    color: var(--text);
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent);
    padding: 6px 10px;
    border-radius: 0;
    cursor: pointer;
}

.menu-actions input[type="file"]:disabled {
    opacity: 0.6;
}

.menu-file-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.menu-file-label input[type="file"] {
    width: 220px;
}

.user-menu .modal-content {
    width: min(720px, 94vw);
    height: min(92vh, 720px);
    max-height: 92vh;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.user-menu .menu-section {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.user-menu .modal-content .modal-close {
    color: var(--muted);
}

.user-menu .modal-content .modal-close:hover {
    color: var(--text);
}

@media (max-width: 600px) {
    .user-display {
        margin-left: 8px;
        padding: 3px 6px;
        font-size: 11px;
    }

    .user-menu .modal-content {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        padding: 24px;
        gap: 16px;
    }

    .user-menu .menu-section {
        padding-right: 0;
    }

    .menu-row {
        flex-direction: column;
        align-items: stretch;
    }

    .toggle-button {
        align-self: flex-start;
    }
}

/* Tools list styling */
.tools-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.tool-server {
    background: color-mix(in srgb, var(--surface) 80%, transparent 20%);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 12px;
}

.tool-server strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.tool-description {
    font-size: 13px;
    color: var(--muted);
    margin: 4px 0;
}

.tool-count {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 0 0;
}

.tool-tier-badges {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
}

.tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-badge.guest {
    background: color-mix(in srgb, var(--muted) 20%, transparent 80%);
    color: var(--muted);
}

.tier-badge.user {
    background: color-mix(in srgb, #4a9eff 20%, transparent 80%);
    color: #4a9eff;
}

.tier-badge.staff {
    background: color-mix(in srgb, #ff9500 20%, transparent 80%);
    color: #ff9500;
}

.tier-badge.developer {
    background: color-mix(in srgb, #a855f7 20%, transparent 80%);
    color: #a855f7;
}

.tier-badge.teams {
    background: color-mix(in srgb, #10b981 20%, transparent 80%);
    color: #10b981;
}

.tier-badge.current {
    background: color-mix(in srgb, var(--accent) 30%, transparent 70%);
    color: var(--accent);
    font-weight: 700;
}

.privacy-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.privacy-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.privacy-section p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.privacy-section ul {
    margin: 0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.privacy-section li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.privacy-section code {
    background: color-mix(in srgb, var(--primary) 15%, transparent 85%);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 0;
    font-size: 13px;
    font-family: "Fira Code", "Source Code Pro", monospace;
}

.privacy-provider-info {
    background: color-mix(in srgb, var(--primary) 8%, transparent 92%);
    border-left: 3px solid var(--primary);
    padding: 12px 16px;
    border-radius: 0;
    font-size: 13px !important;
    line-height: 1.8 !important;
}

.privacy-tier-badge {
    background: color-mix(in srgb, var(--accent) 12%, transparent 88%);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent 70%);
    padding: 12px 16px;
    border-radius: 0;
    font-size: 14px !important;
}

.privacy-tier-badge span {
    color: var(--accent);
    font-weight: 600;
    text-transform: capitalize;
}

/* ========================================
   FULL-SCREEN SETTINGS PAGE
   ======================================== */

.settings-page {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-size: var(--app-font-size, 14px);
    /* Prevent invisible overlay from blocking clicks when not explicitly opened */
    pointer-events: none;
}

.settings-page[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Re-enable interaction only when visible */
}
.settings-page[aria-hidden="true"] {
    display: none;
    pointer-events: none;
}

.settings-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100%;
    overflow: hidden;
}

/* Settings Sidebar */
.settings-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.settings-sidebar-header {
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 10;
}

.settings-sidebar-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
}

.settings-sidebar-header .settings-close {
    display: flex;
}

.settings-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.settings-close:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--text);
}

.settings-close:active {
    transform: scale(0.95);
}

.settings-nav {
    list-style: none;
    padding: 16px 12px;
    margin: 0;
}

.settings-nav li {
    margin-bottom: 4px;
}

.settings-nav-item {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 12px 16px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: left;
}

.settings-nav-item svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.settings-nav-item:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--text);
}

.settings-nav-item:hover svg {
    opacity: 1;
}

.settings-nav-item.active {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--primary);
    font-weight: 600;
}

.settings-nav-item.active svg {
    opacity: 1;
}

/* Settings Content */
.settings-content {
    overflow-y: auto;
    padding: 40px 60px 60px;
    max-width: 900px;
    background: var(--bg);
}

/* Disabled overlay preview effects (neutralized to prevent accidental transparency blocking UI) */
/* Empty rulesets removed for cleaner CSS */

/* Simple rebuild: plain toggle button (no custom overlay interactions) */
.plain-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-alt);
    color: var(--fg);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.plain-toggle[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-fg, #fff);
}
.plain-toggle-indicator {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--border-subtle);
}
.plain-toggle[aria-pressed="true"] .plain-toggle-indicator {
    background: var(--accent-fg, #fff);
}

.settings-content.overlay-preview-mode .settings-section {
    background: transparent;
}

.settings-content.overlay-preview-mode .settings-group:not(#overlayGroup),
.settings-content.overlay-preview-mode .section-description,
.settings-content.overlay-preview-mode h2 {
    display: none !important;
}

.settings-content.overlay-preview-mode #overlayGroup {
    position: relative;
    z-index: 10;
    background: var(--surface);
    box-shadow: 0 8px 32px var(--shadow);
}

.settings-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.settings-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-section h2 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
}

.section-description {
    margin: 0 0 32px;
    color: var(--muted);
    font-size: 16px;
}

.settings-group {
    margin-bottom: 40px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    transition: border-color 0.2s ease;
}

.settings-group:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

.settings-group h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.settings-hint {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 14px;
}

.settings-note {
    margin: 0;
    color: var(--success, #10b981);
    font-size: 13px;
}

/* Input Field */
.input-field {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.input-field input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-field input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent 80%);
}

.input-field input[type="text"]::placeholder {
    color: var(--muted);
}

.primary-button {
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.primary-button:hover {
    background: color-mix(in srgb, var(--primary) 90%, black 10%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow);
}

.primary-button:active {
    transform: translateY(0);
}

/* Theme Grid */
/* Theme Mode Toggle */
.theme-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding: 4px;
    background: var(--surface-2);
    border-radius: 0;
    width: fit-content;
}

.mode-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-toggle-btn svg {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.mode-toggle-btn:hover {
    color: var(--text);
    background: var(--surface);
}

.mode-toggle-btn:hover svg {
    opacity: 1;
}

.mode-toggle-btn.active {
    background: var(--primary);
    color: white;
}

.mode-toggle-btn.active svg {
    opacity: 1;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.theme-card {
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.theme-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.theme-card.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
}

.theme-card.active::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.theme-swatch {
    height: 48px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}

.theme-swatch-color {
    height: 100%;
}

.theme-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
}

/* Settings Controls */
.settings-select {
    width: 100%;
    max-width: 360px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-select:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
}

.settings-select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.background-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.file-upload-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    color: var(--primary);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-button:hover {
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
    transform: translateY(-1px);
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.secondary-button:hover:not(:disabled) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
}

.secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary);
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 85%, black 15%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
}

.primary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--surface);
    color: var(--text-muted);
}

.danger-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: color-mix(in srgb, var(--danger) 15%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
}

.danger-button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 25%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
}

.danger-button:active:not(:disabled) {
    transform: translateY(1px);
}

.danger-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.background-preview {
    margin-top: 16px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    max-width: 300px;
}

.background-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.preview-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.option-pill-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.option-pill-item {
    position: relative;
}

.option-pill-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.option-pill:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.option-pill-item input[type="radio"]:checked + label {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent 75%);
}

.option-visual {
    width: 48px !important;
    height: 36px !important;
    border-radius: 0;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}

.border-preview-square {
    border-radius: 0px;
}

.border-preview-rounded {
    border-radius: 10px;
}

.border-preview-soft {
    border-radius: 5px;
}

.option-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.option-subtitle {
    font-size: 12px;
    color: var(--muted);
}

.font-preview {
    font-size: 28px;
    line-height: 1;
    font-weight: 600;
}

.option-visual.font-preview-small {
    font-size: 20px;
}

.option-visual.font-preview-medium {
    font-size: 28px;
}

.option-visual.font-preview-large {
    font-size: 36px;
}

.layout-preview {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.layout-bar {
    height: 6px;
    background: currentColor;
    border-radius: 2px;
}

.layout-preview-centered .layout-bar {
    width: 24px;
}

.layout-preview-full .layout-bar {
    width: 36px;
}

.switch-control {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.switch-control:hover {
    border-color: var(--primary);
}

.switch-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent 80%);
}

.switch-control input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 35%, transparent 65%);
    padding: 3px;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s ease;
}

.switch-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform 0.2s ease, background 0.2s ease;
}

.switch-control input[type="checkbox"]:checked + .switch-track {
    background: color-mix(in srgb, var(--primary) 40%, transparent 60%);
}

.switch-control input[type="checkbox"]:checked + .switch-track .switch-thumb {
    transform: translateX(20px);
    background: var(--primary);
}

.switch-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.switch-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.switch-hint {
    font-size: 12px;
    color: var(--muted);
}

/* Experimental badge */
.experimental-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent 80%);
    color: var(--warning, #f59e0b);
    border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 40%, transparent 60%);
    margin-left: 8px;
    vertical-align: middle;
}

/* TTS generating animation */
.tts-generating {
    animation: tts-pulse 1.5s ease-in-out infinite;
}

@keyframes tts-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.range-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.range-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.range-value {
    font-size: 13px;
    color: var(--muted);
}

#overlayOpacity {
    width: 100%;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 20%, var(--border));
    outline: none;
}

#overlayOpacity:focus-visible {
    outline: none;
}

#overlayOpacity::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 20%, var(--border));
}

#overlayOpacity::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface);
    margin-top: -6px;
    transition: transform 0.15s ease, background 0.15s ease;
}

#overlayOpacity:focus-visible::-webkit-slider-runnable-track {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent 75%);
}

#overlayOpacity:active::-webkit-slider-thumb {
    transform: scale(1.05);
}

#overlayOpacity::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 20%, var(--border));
}

#overlayOpacity::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface);
}

/* Account Info */
.account-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: var(--muted);
    font-size: 14px;
}

.info-value {
    color: var(--text);
    font-size: 15px;
}

/* Info List */
.info-list {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
}

.info-list li {
    margin-bottom: 12px;
    line-height: 1.6;
}

.info-list code {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: "Fira Code", "Source Code Pro", monospace;
}

/* Persona Grid */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.persona-card {
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 0;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.persona-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.persona-card.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-2));
}

.persona-card.active::after {
    content: "✓";
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.persona-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 4px;
}

.persona-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.persona-description {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .persona-grid {
        grid-template-columns: 1fr;
    }
}

/* Tools List in Settings */
.tool-server-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.tool-server-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--shadow);
}

.tool-server-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tool-server-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}

.tool-count-badge {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
}

.tool-server-description {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.tool-items {
    display: grid;
    gap: 8px;
}

.tool-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.tool-item:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border-color: var(--primary);
}

.tool-item-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.tool-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
}

.tool-item-description {
    font-size: 12px;
    color: var(--muted);
    flex: 2;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.4;
}

/* Mobile layout improvements for Tools & Features cards */
@media (max-width: 700px) {
    .tool-items {
        /* stack tools vertically */
        display: flex;
        flex-direction: column;
    }
    .tool-item {
        /* allow description to take full width below name */
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .tool-item-name, .tool-item-description {
        width: 100%;
    }
    .tool-item-description {
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* Unified overlay header (shared across help/settings/etc.) */
.overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 10;
}
.overlay-header h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

@media (max-width: 960px) {
    .overlay-header {
        padding: 20px 20px 16px;
    }
    .overlay-header h2 {
        font-size: 20px;
    }
}

/* Mobile Settings Header */
.settings-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.mobile-menu-toggle,
.mobile-close-button {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.mobile-menu-toggle:hover,
.mobile-close-button:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.settings-mobile-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

/* Responsive Design */
@media (max-width: 900px) {
    .settings-container {
        grid-template-columns: 240px 1fr;
    }

    .settings-content {
        padding: 32px 32px 48px;
    }
}

@media (max-width: 700px) {
    .settings-container {
        grid-template-columns: 1fr;
        position: relative;
    }

    .settings-mobile-header {
        display: flex;
    }

    .settings-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        z-index: 10001;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
    }

    .settings-sidebar.mobile-open {
        transform: translateX(0);
    }

    .settings-sidebar-header {
        position: static;
    }

    .settings-sidebar-header .settings-close {
        display: flex;
    }

    .settings-content {
        padding: 0;
    }

    .settings-section {
        padding: 24px 20px 40px;
    }

    .settings-section h2 {
        font-size: 24px;
    }

    .theme-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .persona-grid {
        grid-template-columns: 1fr;
    }

    /* Overlay for mobile sidebar */
    .settings-page::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 150;
    }

    .settings-page.sidebar-open::before {
        opacity: 1;
        visibility: visible;
    }
}

.privacy-warning {
    background: color-mix(in srgb, #ff6b6b 12%, transparent 88%);
    border-left: 3px solid #ff6b6b;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px !important;
    color: var(--text) !important;
}

/* User Guide Page */
.guide-page {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-size: var(--app-font-size, 14px);
}

.guide-page[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.guide-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100%;
    overflow: hidden;
}

.guide-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.guide-sidebar-header {
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 10;
}

.guide-sidebar-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
}

.guide-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.guide-close:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--text);
}

.guide-close:active {
    transform: scale(0.95);
}

.guide-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 12px 24px;
    margin: 0;
}

.guide-tab {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 12px 16px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    transition: all 0.2s ease;
}

.guide-tab svg {
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.guide-tab span {
    flex: 1;
}

.guide-tab:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--text);
}

.guide-tab:hover svg {
    opacity: 1;
}

.guide-tab.active {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--primary);
    font-weight: 600;
}

.guide-tab.active svg {
    opacity: 1;
}

.guide-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.guide-content {
    overflow-y: auto;
    background: var(--bg);
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.guide-content-inner {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 48px 64px 72px;
    position: relative;
    z-index: 0;
    background: color-mix(in srgb, var(--surface, #2a2a2a) 92%, transparent 8%);
    border-radius: 0;
    box-shadow: 0 28px 68px color-mix(in srgb, var(--shadow, rgba(0, 0, 0, 0.38)) 85%, transparent 15%);
    backdrop-filter: blur(18px);
}

.guide-content-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 60%),
        radial-gradient(140% 90% at 0% 20%, color-mix(in srgb, var(--accent, #22d3ee) 14%, transparent) 0%, transparent 65%);
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
}

.guide-mobile-header {
    display: none;
}

.guide-mobile-menu,
.guide-mobile-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.guide-mobile-menu:hover,
.guide-mobile-close:hover {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--text);
}

.guide-mobile-menu:active,
.guide-mobile-close:active {
    transform: scale(0.95);
}

.guide-mobile-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

/* =====================================================
   Changelog / Release History Styles
   ===================================================== */

.changelog-group-intro {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.changelog-group-intro h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px 0;
}

.changelog-group-intro p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

.changelog-version {
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.changelog-version:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.changelog-version-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.changelog-version-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.changelog-version-name {
    font-weight: 500;
    font-size: 18px;
    color: var(--primary);
    font-style: italic;
}

.changelog-version-date {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--surface-2);
    padding: 4px 10px;
    border-radius: 4px;
}

.changelog-version-summary {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--primary) 6%, var(--surface) 94%);
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
}

.changelog-version-body {
    margin-top: 16px;
}

.changelog-section {
    margin-bottom: 20px;
}

.changelog-section:last-child {
    margin-bottom: 0;
}

.changelog-section h3 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.changelog-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.changelog-section li {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}

.changelog-section li:last-child {
    border-bottom: none;
}

.changelog-section li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
}

.changelog-version-empty,
.changelog-section-empty {
    font-size: 14px;
    color: var(--text-secondary);
    font-style: italic;
    padding: 12px 0;
}

.changelog-nav-message {
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.changelog-nav-message.error {
    color: var(--danger, #ef4444);
}

@media (max-width: 768px) {
    .changelog-group-intro h1 {
        font-size: 22px;
    }

    .changelog-version-header h2 {
        font-size: 18px;
    }

    .changelog-version-name {
        font-size: 15px;
    }

    .changelog-version-summary {
        font-size: 14px;
        padding: 12px 16px;
    }
}

.guide-page.sidebar-open::before,
.guide-page::before {
    content: none;
}

@media (max-width: 900px) {
    .guide-container {
        grid-template-columns: 240px 1fr;
    }

    .guide-content-inner {
        padding: 40px 40px 60px;
    }
}

@media (max-width: 700px) {
    .guide-container {
        grid-template-columns: 1fr;
        position: relative;
    }

    .guide-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        max-width: 80vw;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    }

    .guide-sidebar.mobile-open {
        transform: translateX(0);
    }

    .guide-tabs {
        padding-bottom: 32px;
    }

    .guide-content {
        padding: 0;
    }

    .guide-content-inner {
        padding: 24px 20px 40px;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        background: var(--bg);
    }

    .guide-content-inner::before {
        display: none;
    }

    .guide-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        position: sticky;
        top: 0;
        z-index: 150;
    }

    .guide-page::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 150;
    }

    .guide-page.sidebar-open::before {
        opacity: 1;
        visibility: visible;
    }
}

.guide-views {
    min-height: 400px;
}

.guide-view {
    animation: fadeIn 0.2s ease;
}

.guide-section {
    margin-bottom: 28px;
}

.guide-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.guide-section p {
    margin-bottom: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.guide-section ul,
.guide-section ol {
    margin-left: 20px;
    margin-bottom: 12px;
}

.guide-section li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.guide-steps {
    list-style: decimal;
    padding-left: 20px;
}

.guide-steps li {
    margin-bottom: 16px;
    padding-left: 8px;
}

.feature-list,
.tips-list,
.action-list,
.persona-list {
    list-style: none;
    margin-left: 0;
}

.feature-list li,
.tips-list li,
.action-list li,
.persona-list li {
    padding-left: 8px;
    position: relative;
}

.warning-list {
    list-style: none;
    margin-left: 0;
}

.warning-list li {
    padding-left: 24px;
    position: relative;
    color: #ff6b6b;
}

.warning-list li::before {
    content: "⚠️";
    position: absolute;
    left: 0;
}

.guide-tip {
    background: color-mix(in srgb, var(--primary, #7f5af0) 12%, var(--surface, #2a2a2a) 88%);
    border-left: 3px solid var(--primary);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    margin: 16px 0;
}

.guide-note {
    background: color-mix(in srgb, var(--accent, #22d3ee) 12%, transparent 88%);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    margin: 16px 0;
}

.guide-example {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 8px;
}

.commands-table,
.shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.commands-table tr,
.shortcuts-table tr {
    border-bottom: 1px solid var(--border);
}

.commands-table td,
.shortcuts-table td {
    padding: 10px 12px;
    vertical-align: top;
}

.commands-table td:first-child,
.shortcuts-table td:first-child {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: 13px;
    color: var(--primary);
    white-space: nowrap;
    width: 160px;
}

.commands-table td:last-child,
.shortcuts-table td:last-child {
    color: var(--text-secondary);
    font-size: 14px;
}

kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: 11px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.inline-action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inline-action-button:hover {
    background: color-mix(in srgb, var(--primary) 85%, white 15%);
    transform: translateY(-1px);
}

.guide-button,
.guide-link-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    justify-content: center;
}

.guide-button:hover,
.guide-link-button:hover {
    background: color-mix(in srgb, var(--primary) 85%, white 15%);
    transform: translateY(-1px);
}

.guide-button svg,
.guide-link-button svg {
    flex-shrink: 0;
}

.help-actions {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .guide-tabs {
        gap: 4px;
    }

    .guide-tab {
        font-size: 14px;
        padding: 10px 14px;
    }

    .guide-section h3 {
        font-size: 17px;
    }

    .commands-table td:first-child,
    .shortcuts-table td:first-child {
        width: 140px;
        font-size: 12px;
    }
}

/* Files & Storage Section */
.quota-bar-container {
    height: 32px;
    background: var(--surface-2);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}

.quota-bar {
    height: 100%;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 7px;
    background: linear-gradient(90deg, #10b981, #059669);
}

.quota-bar.warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.quota-bar.danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.quota-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.quota-summary {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
}

.quota-breakdown {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--text);
}

.quota-breakdown li {
    padding: 4px 0;
}

.file-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}

.file-list-header h3 {
    margin: 0;
    flex: 1;
}

.file-list-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.file-sort-select {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.file-sort-select:hover {
    border-color: var(--primary);
}

.file-sort-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.file-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
    align-items: center;
    transition: all 0.15s ease;
}

.file-item:hover {
    border-color: var(--primary);
    background: var(--surface-2);
}

.file-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 0;
    object-fit: cover;
    background: var(--surface-2);
    flex-shrink: 0;
}

.file-icon {
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    color: var(--muted);
}

.file-icon svg {
    width: 20px;
    height: 20px;
}

.file-details {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-weight: 500;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.file-meta {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.file-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.file-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.info-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--muted);
}

.file-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.file-action-btn:hover {
    background: var(--surface-2);
    border-color: var(--primary);
}

.file-action-btn.danger:hover {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-color: var(--danger);
    color: var(--danger);
}

#filesListContainer .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
}

#filesListContainer .empty-state p:first-child {
    font-size: 16px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .file-item {
        flex-direction: column;
        gap: 12px;
    }

    .file-actions {
        width: 100%;
        justify-content: stretch;
    }

    .file-action-btn {
        flex: 1;
    }

    .file-list-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Hide custom color picker for now */

/* Attach from Library button */
.attach-library-button {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.attach-library-button:hover {
    background: color-mix(in srgb, var(--accent, #1fb6ff) 10%, transparent 90%);
    border-color: var(--accent);
    color: var(--accent);
}

.attach-library-button:active {
    transform: scale(0.95);
}

.attach-library-button svg {
    width: 20px;
    height: 20px;
}

.attach-library-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Attach Button Container and Menu */
.attach-button-container {
    position: relative;
}

.attach-button {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.attach-button:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 10%, transparent 90%);
    border-color: var(--primary);
    color: var(--primary);
}

.attach-button:active {
    transform: scale(0.95);
}

.attach-button svg {
    width: 20px;
    height: 20px;
}

.attach-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.attach-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 200px;
    box-shadow: 0 4px 12px var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    margin-bottom: 8px;
}

.attach-menu:not([hidden]) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.attach-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--border);
}

.attach-menu-item:last-child {
    border-bottom: none;
}

.attach-menu-item:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 8%, transparent 92%);
    color: var(--primary);
}

.attach-menu-item:active {
    background: color-mix(in srgb, var(--primary, #7f5af0) 12%, transparent 88%);
}

.attach-menu-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.attach-menu-item[hidden] {
    display: none;
}

/* ========================================
   FULL-SCREEN FILE MANAGER
   ======================================== */

@keyframes file-manager-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-manager-page {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.file-manager-page[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.file-manager-page[aria-hidden="false"] .file-manager-container {
    animation: file-manager-slide-in 0.3s ease-out;
}

.file-manager-page[aria-hidden="true"] {
    display: none;
}

.file-manager-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* File Manager Header */
.file-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    gap: 16px;
}

.file-manager-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.file-manager-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.file-manager-count {
    font-size: 13px;
    color: var(--muted);
    padding: 4px 10px;
    background: var(--surface-2);
    border-radius: 4px;
    white-space: nowrap;
}

.file-manager-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-manager-search {
    position: relative;
    display: flex;
    align-items: center;
}

.file-manager-search .search-icon {
    position: absolute;
    left: 12px;
    color: var(--muted);
    pointer-events: none;
}

.file-manager-search input {
    width: 240px;
    padding: 8px 12px 8px 36px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-size: 14px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.file-manager-search input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg);
}

.file-manager-search input::placeholder {
    color: var(--muted);
}

#fileBrowserUploadBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--primary);
    color: var(--primary-text);
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

#fileBrowserUploadBtn:hover {
    background: var(--primary-hover);
}

#fileBrowserUploadBtn:active {
    opacity: 0.9;
}

#fileBrowserUploadBtn svg {
    flex-shrink: 0;
}

.file-manager-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
    border-radius: 0;
}

.file-manager-close:hover {
    color: var(--text);
    background: var(--surface-2);
}

/* File Manager Toolbar */
.file-manager-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 16px;
    flex-wrap: wrap;
}

.file-manager-toolbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.file-manager-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.file-manager-select-all input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.file-manager-select-all:hover {
    color: var(--text);
}

.file-manager-selected-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
}

.file-manager-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.file-manager-hint {
    font-size: 12px;
    color: var(--accent);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.file-manager-hint .hint-text {
    color: var(--accent);
}

.file-manager-hint .hint-shortcuts {
    font-size: 10px;
    color: var(--muted);
    opacity: 0.8;
}

/* File Filter Tabs */
.file-manager-filters {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.file-filter-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.file-filter-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}

.file-filter-tab.active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.file-filter-tab svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.file-filter-tab.active svg {
    opacity: 1;
}

/* Project Filter Dropdown */
.file-manager-project-filter {
    position: relative;
}

.file-project-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 32px 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.file-project-select:hover {
    border-color: var(--primary);
}

.file-project-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Sort Dropdown */
.file-manager-sort {
    position: relative;
}

.file-sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 32px 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.file-sort-select:hover {
    border-color: var(--primary);
}

.file-sort-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* View Toggle */
.file-view-toggle {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.file-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.file-view-btn:not(:last-child) {
    border-right: 1px solid var(--border);
}

.file-view-btn:hover {
    color: var(--text);
    background: var(--surface-2);
}

.file-view-btn.active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.file-view-btn svg {
    flex-shrink: 0;
}

/* File Manager List */
.file-manager-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 24px;
    background: var(--bg);
    scroll-behavior: smooth;
}

/* Custom scrollbar for file list */
.file-manager-list::-webkit-scrollbar {
    width: 8px;
}

.file-manager-list::-webkit-scrollbar-track {
    background: transparent;
}

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

.file-manager-list::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

.file-manager-list .loading-state,
.file-manager-list .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    color: var(--muted);
    min-height: 300px;
}

/* Loading spinner animation */
@keyframes file-loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.file-manager-list .loading-state::before {
    content: "";
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin-bottom: 16px;
    animation: file-loading-spin 0.8s linear infinite;
}

.file-manager-list .empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.file-manager-list .empty-state p {
    margin: 0 0 4px 0;
}

.file-manager-list .empty-state .small-print {
    font-size: 13px;
    color: var(--muted);
}

/* File Manager Item */
.file-manager-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.file-manager-item:last-child {
    margin-bottom: 0;
}

.file-manager-item:hover {
    background: var(--surface-2);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border) 60%);
}

.file-manager-item:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.file-manager-item.selected {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface) 88%);
    border-color: var(--primary);
}

.file-manager-item.selected:hover {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
}

.file-manager-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.file-manager-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: color 0.15s ease, transform 0.15s ease;
}

.file-manager-item:hover .file-manager-item-icon {
    color: var(--primary);
}

.file-manager-item.selected .file-manager-item-icon {
    color: var(--primary);
}

.file-manager-item-icon svg {
    width: 20px;
    height: 20px;
}

/* Image Thumbnail */
.file-manager-item-thumbnail {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: var(--surface-2);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Loading placeholder pattern */
.file-manager-item-thumbnail::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%),
        linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
    opacity: 0.4;
}

/* Image icon while loading */
.file-manager-item-thumbnail::after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0.6;
    z-index: 1;
}

.file-manager-item-thumbnail.loaded::before,
.file-manager-item-thumbnail.loaded::after {
    display: none;
}

.file-manager-item-thumbnail.loaded {
    border-color: transparent;
}

.file-manager-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.file-manager-item-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-manager-item-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}

.file-manager-item-meta span {
    white-space: nowrap;
}

/* Fixed widths for consistent alignment */
.file-manager-item-meta .meta-size {
    /* File size column */
    min-width: 60px;
    text-align: right;
}

.file-manager-item-meta .meta-date {
    /* Date column */
    min-width: 70px;
    text-align: right;
}

.file-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    text-transform: uppercase;
    flex-shrink: 0;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
    min-width: 60px;
    text-align: center;
    display: inline-block;
}

.file-type-badge.script-badge {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.file-type-badge.note-badge {
    background: color-mix(in srgb, #8b5cf6 15%, transparent);
    color: #8b5cf6;
    border-color: color-mix(in srgb, #8b5cf6 30%, transparent);
}

.file-type-badge.orphan-badge {
    background: color-mix(in srgb, #ef4444 15%, transparent);
    color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 30%, transparent);
}

.file-type-badge.chat-badge {
    background: color-mix(in srgb, #06b6d4 15%, transparent);
    color: #06b6d4;
    border-color: color-mix(in srgb, #06b6d4 30%, transparent);
}

/* Note folder label */
.note-folder-label {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* File Manager Item Actions */
.file-manager-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.2s ease;
}

.file-manager-item:hover .file-manager-item-actions {
    max-width: 200px;
}

.file-manager-action-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease, background 0.12s ease;
    border-radius: 0;
}

.file-manager-action-btn:hover {
    color: var(--text);
    background: var(--surface-2);
}

.file-manager-action-btn.danger:hover {
    color: var(--danger, #ef4444);
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
}

.file-manager-action-btn svg {
    width: 16px;
    height: 16px;
}

/* File Manager Footer */
.file-manager-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.file-manager-footer-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.file-manager-footer-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 300px;
}

.file-library-storage-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.file-library-storage-indicator .storage-bar-container {
    width: 100%;
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
}

.file-library-storage-indicator .storage-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 0;
}

.file-library-storage-indicator .storage-bar-fill.warning {
    background: #f59e0b;
}

.file-library-storage-indicator .storage-bar-fill.danger {
    background: #ef4444;
}

.file-library-storage-indicator .storage-text {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.file-manager-footer-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

@media (max-width: 960px) {
    .file-manager-footer {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .file-manager-footer-left,
    .file-manager-footer-right {
        flex-wrap: wrap;
        flex: 1 1 auto;
    }

    .file-manager-footer-right {
        justify-content: flex-end;
    }

    .file-manager-footer-center {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }
}

.file-manager-footer .btn-primary,
.file-manager-footer .btn-secondary {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0;
}

.file-manager-footer .btn-primary {
    background: var(--primary);
    color: white;
    border: none;
}

.file-manager-footer .btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 85%, black 15%);
}

.file-manager-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.file-manager-footer .btn-secondary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}

.file-manager-footer .btn-secondary:hover:not(:disabled) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
}

.file-manager-footer .btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.file-manager-footer .btn-secondary.danger {
    color: #ef4444;
    border-color: #ef4444;
}

.file-manager-footer .btn-secondary.danger:hover:not(:disabled) {
    background: color-mix(in srgb, #ef4444 8%, var(--surface-2));
    border-color: #ef4444;
}

/* File Rename Dialog */
.file-rename-dialog {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.file-rename-dialog[aria-hidden="false"] {
    display: flex;
}

.file-rename-dialog-content {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 24px;
    min-width: 360px;
    max-width: 90vw;
}

.file-rename-dialog-content h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.file-rename-dialog-content input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    margin-bottom: 16px;
    border-radius: 0;
}

.file-rename-dialog-content input:focus {
    outline: none;
    border-color: var(--primary);
}

.file-rename-dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.file-rename-dialog-actions button {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
}

.file-rename-dialog-actions .btn-primary {
    background: var(--primary);
    color: white;
    border: none;
}

.file-rename-dialog-actions .btn-secondary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}

/* File Preview Dialog */
.file-preview-dialog {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 20;
    padding: 24px;
}

.file-preview-dialog[aria-hidden="false"] {
    display: flex;
}

.file-preview-dialog-content {
    background: var(--surface);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.file-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.file-preview-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-mono, monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-close {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.file-preview-close:hover {
    color: var(--text);
}

.file-preview-code {
    flex: 1;
    overflow: auto;
    padding: 16px 20px;
    background: var(--bg);
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    max-height: 60vh;
}

.file-preview-code .loading-state {
    color: var(--muted);
    padding: 40px;
    text-align: center;
}

.file-preview-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.file-preview-footer button {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.file-preview-footer .btn-primary {
    background: var(--primary);
    color: white;
    border: none;
}

.file-preview-footer .btn-primary:hover {
    background: color-mix(in srgb, var(--primary) 85%, black 15%);
}

.file-preview-footer .btn-secondary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}

.file-preview-footer .btn-secondary:hover {
    border-color: var(--primary);
}

@media (max-width: 768px) {
    .file-preview-dialog {
        padding: 12px;
    }

    .file-preview-dialog-content {
        max-height: 95vh;
    }

    .file-preview-code {
        max-height: 50vh;
        font-size: 12px;
    }

    .file-preview-footer {
        flex-direction: column;
    }

    .file-preview-footer button {
        width: 100%;
        justify-content: center;
    }
}

/* Cloud file styling in attachment UI */
.file-attachment-item.from-cloud {
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent, #1fb6ff) 8%, transparent 92%);
}

/* ========================================
   FILE MANAGER GRID VIEW
   ======================================== */

.file-manager-list.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 16px 24px;
    align-content: start;
}

.file-manager-list.grid-view .file-manager-item {
    flex-direction: column;
    padding: 14px 12px 12px;
    margin-bottom: 0;
    gap: 6px;
    position: relative;
    height: 150px;
    max-height: 150px;
    justify-content: flex-start;
    align-items: center;
}

.file-manager-list.grid-view .file-manager-item input[type="checkbox"] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.file-manager-list.grid-view .file-manager-item-icon {
    width: 40px;
    height: 40px;
    margin: 4px auto 2px;
    flex-shrink: 0;
}

.file-manager-list.grid-view .file-manager-item-icon svg {
    width: 36px;
    height: 36px;
}

/* Grid view image thumbnails */
.file-manager-list.grid-view .file-manager-item-thumbnail {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 6px;
    flex-shrink: 0;
}

.file-manager-list.grid-view .file-manager-item-thumbnail::after {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}

.file-manager-list.grid-view .file-manager-item-thumbnail.loaded {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border-color: transparent;
}

.file-manager-list.grid-view .file-manager-item-info {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
}

.file-manager-list.grid-view .file-manager-item-name {
    font-size: 12px;
    text-align: center;
    word-break: break-word;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-width: 100%;
}

.file-manager-list.grid-view .file-manager-item-meta {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    margin-top: auto;
    width: 100%;
    overflow: hidden;
}

.file-manager-list.grid-view .file-manager-item-meta span {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.file-manager-list.grid-view .file-manager-item-meta span:nth-child(2),
.file-manager-list.grid-view .file-manager-item-meta span:nth-child(3) {
    min-width: 0;
    text-align: center;
}

.file-manager-list.grid-view .file-manager-item-meta span:last-child {
    display: inline;
}

.file-manager-list.grid-view .file-manager-item-meta .note-folder-label {
    max-width: 100%;
}

.file-manager-list.grid-view .file-manager-item-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    flex-direction: column;
    gap: 2px;
    max-width: unset;
    opacity: 0;
    overflow: visible;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 4px;
    transition: opacity 0.2s ease;
}

.file-manager-list.grid-view .file-manager-item:hover .file-manager-item-actions {
    opacity: 1;
    max-width: unset;
}

/* File Manager Empty State Improvements */
.file-manager-list .empty-state.filtered {
    min-height: 200px;
    padding: 48px 24px;
}

.file-manager-list .empty-state.filtered svg {
    width: 40px;
    height: 40px;
}

.file-manager-list .empty-state .clear-filter-btn {
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.file-manager-list .empty-state .clear-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* File Type Colors */
.file-type-badge.image-badge {
    background: color-mix(in srgb, #10b981 15%, transparent);
    color: #10b981;
    border-color: color-mix(in srgb, #10b981 30%, transparent);
}

.file-type-badge.document-badge {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #f59e0b;
    border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

/* Animation for item appearance */
@keyframes file-item-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-manager-item {
    animation: file-item-appear 0.2s ease-out;
    animation-fill-mode: both;
}

.file-manager-item:nth-child(1) {
    animation-delay: 0.02s;
}
.file-manager-item:nth-child(2) {
    animation-delay: 0.04s;
}
.file-manager-item:nth-child(3) {
    animation-delay: 0.06s;
}
.file-manager-item:nth-child(4) {
    animation-delay: 0.08s;
}
.file-manager-item:nth-child(5) {
    animation-delay: 0.10s;
}
.file-manager-item:nth-child(6) {
    animation-delay: 0.12s;
}
.file-manager-item:nth-child(7) {
    animation-delay: 0.14s;
}
.file-manager-item:nth-child(8) {
    animation-delay: 0.16s;
}
.file-manager-item:nth-child(9) {
    animation-delay: 0.18s;
}
.file-manager-item:nth-child(10) {
    animation-delay: 0.20s;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .file-manager-header {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 12px;
    }

    .file-manager-header-left {
        justify-content: space-between;
    }

    .file-manager-header-right {
        flex-direction: row-reverse;
    }

    .file-manager-search {
        flex: 1;
    }

    .file-manager-search input {
        width: 100%;
    }

    .file-manager-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 16px;
        gap: 8px;
    }

    .file-manager-toolbar-left {
        justify-content: space-between;
    }

    .file-manager-hint {
        display: none;
    }

    .file-manager-list {
        padding: 8px 12px;
    }

    .file-manager-item {
        padding: 10px;
        gap: 10px;
    }

    .file-manager-item-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .file-manager-item-meta {
        gap: 8px;
        flex-wrap: wrap;
    }

    .file-manager-item-actions {
        opacity: 1;
        flex-direction: column;
        gap: 2px;
    }

    .file-manager-footer {
        padding: 12px 16px;
    }

    .file-manager-footer .btn-primary,
    .file-manager-footer .btn-secondary {
        padding: 12px 16px;
        flex: 1;
        justify-content: center;
    }

    /* Mobile: Filter tabs */
    .file-manager-filters {
        order: 10;
        width: 100%;
        justify-content: stretch;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .file-manager-filters::-webkit-scrollbar {
        display: none;
    }

    .file-filter-tab {
        flex: 1;
        justify-content: center;
        padding: 8px 6px;
    }

    .file-filter-tab svg {
        display: none;
    }

    /* Mobile: Sort and view toggle */
    .file-manager-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .file-sort-select {
        flex: 1;
        max-width: 160px;
    }

    /* Mobile: Grid view adjustments */
    .file-manager-list.grid-view {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 12px 12px;
    }

    .file-manager-list.grid-view .file-manager-item {
        height: 130px;
        max-height: 130px;
        padding: 10px;
    }

    .file-manager-list.grid-view .file-manager-item-icon {
        width: 32px;
        height: 32px;
    }

    .file-manager-list.grid-view .file-manager-item-icon svg {
        width: 28px;
        height: 28px;
    }

    .file-manager-list.grid-view .file-manager-item-name {
        font-size: 11px;
    }
}

/* Mobile Options Drawer */
.mobile-options-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.mobile-options-drawer:not([hidden]) {
    pointer-events: auto;
    opacity: 1;
}

.mobile-options-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.mobile-options-drawer[hidden] .mobile-options-backdrop {
    opacity: 0;
}

.mobile-options-content {
    position: relative;
    width: 100%;
    background: var(--surface);
    border-radius: 0;
    padding: 24px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    max-height: 50vh;
    overflow-y: auto;
}

.mobile-options-drawer:not([hidden]) .mobile-options-content {
    transform: translateY(0);
}

.mobile-options-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.mobile-options-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.mobile-options-close {
    background: none;
    border: none;
    color: var(--muted);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-options-close:hover {
    background: color-mix(in srgb, var(--surface, #2a2a2a) 70%, white 10%);
    color: var(--text);
}

.mobile-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

.mobile-option-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: color-mix(in srgb, var(--surface, #2a2a2a) 70%, black 30%);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-option-item:hover,
.mobile-option-item:active {
    background: color-mix(in srgb, var(--primary, #7f5af0) 15%, var(--surface, #2a2a2a) 85%);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.mobile-option-item svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
}

.mobile-option-item span {
    text-align: center;
    line-height: 1.2;
}

.mobile-option-item[hidden] {
    display: none;
}

.mobile-option-item.active {
    background: color-mix(in srgb, var(--primary, #7f5af0) 20%, var(--surface, #2a2a2a) 80%);
    border-color: var(--primary);
}

.mobile-option-item.active svg {
    color: var(--accent);
}

/* Sign-in button special styling for guests */
.mobile-option-item[data-action="signin"] {
    background: color-mix(in srgb, var(--primary, #7f5af0) 15%, var(--surface, #2a2a2a) 85%);
    border-color: var(--primary);
}

.mobile-option-item[data-action="signin"]:hover {
    background: color-mix(in srgb, var(--primary, #7f5af0) 25%, var(--surface, #2a2a2a) 75%);
    transform: translateY(-3px);
}

.mobile-option-item[data-action="signin"] svg {
    color: var(--accent);
}

/* Mobile options button (visible only on mobile) */
.mobile-options-button {
    display: none;
}

@media (max-width: 768px) {
    .mobile-options-button {
        display: flex;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    /* Hide desktop buttons on mobile */
    .attach-button,
    .attach-library-button,
    .tool-toggle-button,
    .account-button {
        display: none !important;
    }
}

/* Small screens - adjust drawer grid */
@media (max-width: 400px) {
    .mobile-options-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }

    .mobile-option-item {
        padding: 16px 12px;
    }

    .mobile-option-item svg {
        width: 24px;
        height: 24px;
    }

    .mobile-option-item span {
        font-size: 12px;
    }
}

/* ====================================
   PROJECT CREATE VIEW (FULL SCREEN)
   ==================================== */

.project-create-view {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-create-view[hidden] {
    display: none;
}

.project-create-close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    border-radius: 0;
    border: none;
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.project-create-close:hover {
    background: var(--surface-2);
    transform: scale(1.05);
}

.project-create-container {
    width: 100%;
    max-width: 600px;
    padding: 40px;
}

.project-create-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.project-create-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.project-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-form-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    opacity: 0.9;
}

.project-form-field input[type="text"],
.project-form-field textarea {
    width: 100%;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.project-form-field input[type="text"]:focus,
.project-form-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.project-form-field textarea {
    resize: vertical;
    min-height: 72px;
}

.project-color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.project-color-btn-create {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    padding: 0;
    background: none;
}

.project-color-btn-create::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
}

.project-color-btn-create[data-color="#6366F1"]::before {
    background: #6366f1;
}
.project-color-btn-create[data-color="#EC4899"]::before {
    background: #ec4899;
}
.project-color-btn-create[data-color="#10B981"]::before {
    background: #10b981;
}
.project-color-btn-create[data-color="#F59E0B"]::before {
    background: #f59e0b;
}
.project-color-btn-create[data-color="#EF4444"]::before {
    background: #ef4444;
}
.project-color-btn-create[data-color="#A855F7"]::before {
    background: #a855f7;
}
.project-color-btn-create[data-color="#06B6D4"]::before {
    background: #06b6d4;
}
.project-color-btn-create[data-color="#F43F5E"]::before {
    background: #f43f5e;
}
.project-color-btn-create[data-color="#84CC16"]::before {
    background: #84cc16;
}
.project-color-btn-create[data-color="#EAB308"]::before {
    background: #eab308;
}
/* Additional colors for create project dialog */
.project-color-btn-create[data-color="#1976D2"]::before {
    background: #1976d2;
}
.project-color-btn-create[data-color="#C62828"]::before {
    background: #c62828;
}
.project-color-btn-create[data-color="#388E3C"]::before {
    background: #388e3c;
}
.project-color-btn-create[data-color="#FBC02D"]::before {
    background: #fbc02d;
}
.project-color-btn-create[data-color="#7B1FA2"]::before {
    background: #7b1fa2;
}
.project-color-btn-create[data-color="#F57C00"]::before {
    background: #f57c00;
}
.project-color-btn-create[data-color="#00BCD4"]::before {
    background: #00bcd4;
}
.project-color-btn-create[data-color="#455A64"]::before {
    background: #455a64;
}
.project-color-btn-create[data-color="#E91E63"]::before {
    background: #e91e63;
}
.project-color-btn-create[data-color="#009688"]::before {
    background: #009688;
}

.project-color-btn-create:hover {
    transform: scale(1.1);
    border-color: var(--muted);
}

.project-color-btn-create.active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

.project-create-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Mobile responsive for create view */
@media (max-width: 768px) {
    .project-create-container {
        padding: 24px;
    }

    .project-create-close {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }

    .project-create-content h2 {
        font-size: 24px;
    }
}

/* ====================================
   PROJECT VIEW (FULL SCREEN)
   ==================================== */

.project-view,
.project-edit-view {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.project-view[hidden],
.project-edit-view[hidden] {
    display: none;
}

.project-view-header {
    padding: 20px 32px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
}

.project-header-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.project-view-title {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.project-color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.project-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.project-view-description,
.project-view-instructions {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.project-item-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
    background: var(--surface);
}

.project-item-nav:hover {
    background: var(--surface-2);
    border-color: var(--primary);
}

.project-item-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.project-item-title {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-name-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.project-name-input:hover {
    border-color: var(--primary);
}

.project-name-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.project-color-picker-inline {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.project-color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    padding: 0;
    background: none;
}

.project-color-btn::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
}

.project-color-btn[data-color="#6366F1"]::before {
    background: #6366f1;
}
.project-color-btn[data-color="#EC4899"]::before {
    background: #ec4899;
}
.project-color-btn[data-color="#10B981"]::before {
    background: #10b981;
}
.project-color-btn[data-color="#F59E0B"]::before {
    background: #f59e0b;
}
.project-color-btn[data-color="#EF4444"]::before {
    background: #ef4444;
}
.project-color-btn[data-color="#A855F7"]::before {
    background: #a855f7;
}
.project-color-btn[data-color="#06B6D4"]::before {
    background: #06b6d4;
}
.project-color-btn[data-color="#F43F5E"]::before {
    background: #f43f5e;
}
.project-color-btn[data-color="#84CC16"]::before {
    background: #84cc16;
}
.project-color-btn[data-color="#EAB308"]::before {
    background: #eab308;
}

.project-color-btn[data-color="#1976D2"]::before {
    background: #1976d2;
}
.project-color-btn[data-color="#C62828"]::before {
    background: #c62828;
}
.project-color-btn[data-color="#388E3C"]::before {
    background: #388e3c;
}
.project-color-btn[data-color="#FBC02D"]::before {
    background: #fbc02d;
}
.project-color-btn[data-color="#7B1FA2"]::before {
    background: #7b1fa2;
}
.project-color-btn[data-color="#F57C00"]::before {
    background: #f57c00;
}
.project-color-btn[data-color="#00BCD4"]::before {
    background: #00bcd4;
}
.project-color-btn[data-color="#455A64"]::before {
    background: #455a64;
}
.project-color-btn[data-color="#E91E63"]::before {
    background: #e91e63;
}
.project-color-btn[data-color="#009688"]::before {
    background: #009688;
}

.project-color-btn:hover {
    transform: scale(1.15);
    border-color: var(--muted);
}

.project-color-btn.active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.project-view-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.project-section {
    margin-bottom: 32px;
}

.project-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 16px;
}

.project-section-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.project-actions {
    display: flex;
    gap: 8px;
}

.project-actions .secondary-button {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 6px 12px;
}

.project-actions .secondary-button svg {
    flex-shrink: 0;
}

.project-section > label,
.project-section > h3 {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    opacity: 0.9;
}

.project-section > h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

.project-desc-input,
.project-instructions-input {
    width: 100%;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
}

.project-desc-input:focus,
.project-instructions-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.project-instruction-toggles {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.project-instruction-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.project-instruction-toggle input[type="checkbox"] {
    accent-color: var(--primary);
    cursor: pointer;
}

.project-items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-items-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 12px 0;
    margin: 0;
}

.project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.project-item:hover {
    background: var(--surface-2);
    border-color: var(--muted);
}

.folder-group-project:not(.collapsed) .project-item {
    border-bottom: none;
}

.project-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.project-item-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.project-item-title {
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item-remove {
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.15s ease;
}

.project-item-remove:hover {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
}

.project-add-items-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.project-add-items-toggle:hover {
    background: var(--surface-2);
    border-color: var(--primary);
}

.project-add-items-toggle svg {
    flex-shrink: 0;
}

.project-add-items-section {
    margin-top: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.project-available-items {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.project-available-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.project-available-item:hover {
    background: var(--surface-2);
}

.project-available-item input[type="checkbox"] {
    accent-color: var(--primary);
    cursor: pointer;
}

.project-available-item-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.project-available-item-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.project-available-item-title {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-view-footer {
    padding: 16px 32px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

#projectSaveStatus {
    font-size: 13px;
    color: var(--muted);
}

/* Mobile responsive for project views */
@media (max-width: 768px) {
    .project-view-header,
    .project-edit-view .project-view-header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .project-header-main {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .project-header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .project-view-title {
        font-size: 20px;
    }

    .project-name-input {
        font-size: 16px;
        width: 100%;
    }

    .project-color-picker-inline {
        flex-wrap: wrap;
    }

    .project-view-content {
        padding: 24px 20px;
    }

    .project-section {
        margin-bottom: 24px;
    }

    .project-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-actions {
        width: 100%;
    }

    .project-actions .secondary-button {
        flex: 1;
    }
}

/* ====================================
   CONTEXT MENU
   ==================================== */

.context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 16px 48px color-mix(in srgb, var(--shadow) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent);
    padding: 6px;
    min-width: 180px;
    max-width: 280px;
    animation: contextMenuFadeIn 0.12s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.1s ease;
}

.context-menu-item:hover:not(.disabled) {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.context-menu-item:active:not(.disabled) {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.context-menu-item.danger {
    color: var(--danger);
}

.context-menu-item.danger:hover:not(.disabled) {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.context-menu-icon svg {
    width: 14px;
    height: 14px;
}

.context-menu-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-menu-separator {
    height: 1px;
    background: var(--border);
    margin: 6px 8px;
}

/* ====================================
   DRAG AND DROP
   ==================================== */

.drag-in-progress * {
    cursor: grabbing !important;
}

.dragging {
    opacity: 0.5;
    background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

.drop-target {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

.folder-group-project.drop-target {
    border-radius: 8px;
}

#chatsSectionContent.drop-target {
    border-radius: 8px;
    min-height: 40px;
    margin: 0 4px;
    outline-offset: 0;
}

#chatsSectionToggle.drop-target {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
    border-radius: 8px;
}

#chatList.drop-target {
    border-radius: 8px;
    min-height: 40px;
}

.conversation-item[draggable="true"],
.project-compact-item[draggable="true"] {
    cursor: grab;
}

.conversation-item[draggable="true"]:active,
.project-compact-item[draggable="true"]:active {
    cursor: grabbing;
}

/* ====================================
   PROJECT SELECTION MODAL
   ==================================== */

.selection-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    padding: 20px;
}

.selection-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 320px;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.selection-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
}

.selection-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.selection-modal-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.selection-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.selection-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.selection-modal-item:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.selection-modal-item:focus {
    outline: none;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.selection-modal-item-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px color-mix(in srgb, currentColor 50%, transparent);
}

.selection-modal-item-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.selection-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.selection-modal-cancel {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.selection-modal-cancel:hover {
    background: var(--surface-2);
    border-color: var(--muted);
}

/* ====================================
   ENHANCED PROJECT VIEW
   ==================================== */

.project-view {
    /* Subtle radial gradient emanating from top-left, using project color as accent */
    background:
        radial-gradient(
            ellipse 80% 50% at 10% 0%,
            color-mix(in srgb, var(--project-color, var(--primary)) 6%, transparent) 0%,
            transparent 70%
        ),
        linear-gradient(
        180deg,
        var(--bg) 0%,
        color-mix(in srgb, var(--surface) 15%, var(--bg)) 100%
    );
}

.project-view-header {
    /* Header with subtle project color tint */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--project-color, var(--surface)) 12%, var(--surface)) 0%,
        color-mix(in srgb, var(--project-color, var(--surface)) 6%, var(--surface)) 100%
    );
    border-bottom: 1px solid color-mix(in srgb, var(--project-color, var(--border)) 25%, var(--border));
    padding: 28px 40px;
    position: relative;
}

/* Color indicator hidden - project color shown via header background */
.project-view .project-color-indicator {
    display: none;
}

.project-header-main {
    display: flex;
    align-items: center;
    gap: 0;
}

.project-view-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text);
    line-height: 1.2;
}

/* Enhanced header action buttons */
.project-view .project-header-actions {
    gap: 14px;
}

.project-view .project-header-actions .secondary-button {
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.project-view .project-header-actions .secondary-button:hover {
    background: color-mix(in srgb, var(--project-color, var(--primary)) 12%, transparent);
    border-color: color-mix(in srgb, var(--project-color, var(--primary)) 40%, var(--border));
    color: var(--project-color, var(--primary));
}

.project-view .project-header-actions .text-button {
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.project-view .project-header-actions .text-button:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Color indicator hidden - project color shown via header background */
.project-view .project-color-indicator {
    display: none;
}

.project-view-content {
    padding: 48px 56px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.project-view-description {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-secondary);
    padding: 24px 28px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    margin-bottom: 12px;
    backdrop-filter: blur(8px);
}

.project-view-instructions {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    padding: 18px 22px;
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: pre-wrap;
    backdrop-filter: blur(4px);
}

.project-section {
    margin-bottom: 48px;
}

.project-section > h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.project-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.project-section-header h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 0;
}

.project-items-list {
    display: grid;
    gap: 10px;
}

.project-item-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    backdrop-filter: blur(4px);
}

.project-item-nav:hover {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--project-color, var(--primary)) 50%, var(--border));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 20%, transparent), 0 2px 8px color-mix(in srgb, var(--project-color, var(--primary)) 8%, transparent);
}

.project-item-nav:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

.project-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--project-color, var(--primary)) 12%, transparent);
    color: var(--project-color, var(--primary));
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.project-item-nav:hover .project-item-icon {
    background: color-mix(in srgb, var(--project-color, var(--primary)) 18%, transparent);
    transform: scale(1.05);
}

.project-item-icon svg {
    width: 18px;
    height: 18px;
}

.project-item-title {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.project-item-nav:hover .project-item-title {
    color: var(--project-color, var(--primary));
}

.project-items-empty {
    text-align: center;
    padding: 56px 32px;
    color: var(--muted);
    font-size: 14px;
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    border-radius: 14px;
    border: 2px dashed color-mix(in srgb, var(--border) 60%, transparent);
    backdrop-filter: blur(4px);
}

.project-actions {
    display: flex;
    gap: 12px;
}

.project-actions .secondary-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    backdrop-filter: blur(4px);
}

.project-actions .secondary-button:hover {
    background: color-mix(in srgb, var(--project-color, var(--primary)) 12%, transparent);
    border-color: color-mix(in srgb, var(--project-color, var(--primary)) 50%, var(--border));
    color: var(--project-color, var(--primary));
}

.project-actions .secondary-button svg {
    width: 16px;
    height: 16px;
}

/* Project Stats Section */
.project-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 48px;
}

.project-stat-card {
    flex: 1;
    padding: 28px 32px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    text-align: center;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.project-stat-card:hover {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 15%, transparent);
}

.project-stat-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--project-color, var(--primary));
    line-height: 1;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

.project-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Mobile adjustments for enhanced project view */
@media (max-width: 768px) {
    .project-view-header {
        padding: 20px 24px;
    }

    .project-view-header::after {
        left: 24px;
        right: 24px;
    }

    .project-view-title {
        font-size: 24px;
    }

    .project-view-content {
        padding: 32px 24px;
    }

    .project-view-description {
        padding: 18px 20px;
    }

    .project-stats {
        flex-direction: column;
        gap: 14px;
    }

    .project-stat-card {
        padding: 20px;
    }

    .project-stat-value {
        font-size: 28px;
    }

    .project-item-nav {
        padding: 16px 18px;
    }

    .project-item-icon {
        width: 36px;
        height: 36px;
    }

    .project-actions {
        width: 100%;
    }

    .project-actions .secondary-button {
        flex: 1;
        justify-content: center;
    }

    /* Note editor mobile adjustments */
    .note-view {
        padding: 16px;
    }

    .note-editor-toolbar {
        padding: 6px 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .toolbar-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    /* Force edit mode on mobile for better UX */
    .note-editor-container {
        min-height: 300px;
    }

    .note-editor-container[data-mode="split"] {
        flex-direction: column;
    }

    .note-editor-container[data-mode="split"] .note-content-input,
    .note-editor-container[data-mode="split"] .note-content-preview {
        width: 100%;
        flex: 0 0 auto;
        min-height: 250px;
    }

    .note-content-input,
    .note-content-preview {
        padding: 16px;
        font-size: 14px;
    }

    .note-title-input {
        font-size: 16px;
    }
}

/* =====================================================
   PROJECT COMMAND CENTER - Professional Redesign
   ===================================================== */

/* Welcome Banner - Dismissible info banner */
.project-welcome-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    border-radius: 4px;
    margin-bottom: 16px;
}

.welcome-banner-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.welcome-banner-content svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--primary);
    opacity: 0.8;
}

.welcome-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.welcome-banner-text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.welcome-banner-text span {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.welcome-banner-dismiss {
    flex-shrink: 0;
    padding: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.welcome-banner-dismiss:hover {
    background: var(--surface-2);
    color: var(--text);
}

.project-welcome-banner[hidden] {
    display: none;
}

/* Compact Metrics Bar */
.project-metrics-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 20px;
}

.metric-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 16px;
    cursor: default;
}

.metric-item:first-child {
    padding-left: 0;
}

.metric-item:last-child {
    padding-right: 0;
}

.metric-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.metric-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metric-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
}

/* Two-Column Command Center Layout */
.project-command-center {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

.project-main-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.project-side-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Section Panel - Clean Card Style */
.project-section-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.panel-header h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0;
    flex: 1;
}

.panel-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 10px;
}

.panel-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.panel-action-btn:hover {
    background: var(--surface-2);
    border-color: var(--muted);
}

.panel-action-btn svg {
    width: 12px;
    height: 12px;
}

.panel-body {
    padding: 16px;
}

/* Description Panel */
.project-section-panel .project-view-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Instructions Panel */
.project-instructions-panel .panel-body {
    background: var(--bg);
}

.project-section-panel .project-view-instructions {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    margin: 0;
}

/* Tasks Panel */
.project-tasks-panel .panel-body {
    padding: 0;
}

.tasks-list {
    max-height: 400px;
    overflow-y: auto;
}

.tasks-list::-webkit-scrollbar {
    width: 6px;
}

.tasks-list::-webkit-scrollbar-track {
    background: transparent;
}

.tasks-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Task Items */
.task-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.task-item:last-child {
    border-bottom: none;
}

.task-item:hover {
    background: var(--bg);
}

.task-item-checkbox {
    flex-shrink: 0;
    margin-top: 2px;
}

.task-item-content {
    flex: 1;
    min-width: 0;
}

.task-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}

.task-item.completed .task-item-title {
    color: var(--muted);
    text-decoration: line-through;
}

.task-item-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.task-item-actions {
    display: none;
    gap: 4px;
}

.task-item:hover .task-item-actions {
    display: flex;
}

.task-item-actions button {
    padding: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.task-item-actions button:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* Task Checkbox */
.task-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}

.task-checkbox svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.task-checkbox:hover {
    border-color: var(--primary);
}

.task-checkbox.checked {
    background: var(--primary);
    border-color: var(--primary);
}

.task-checkbox.checked svg {
    opacity: 1;
    color: white;
}

/* Task Status Badges */
.task-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.task-status.status-in-progress {
    background: color-mix(in srgb, #3b82f6 15%, transparent);
    color: #3b82f6;
}

.task-status.status-blocked {
    background: color-mix(in srgb, #ef4444 15%, transparent);
    color: #ef4444;
}

/* Task Priority Badges */
.task-priority {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.task-priority.priority-urgent {
    background: color-mix(in srgb, #dc2626 15%, transparent);
    color: #dc2626;
}

.task-priority.priority-high {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #f59e0b;
}

.task-priority.priority-low {
    background: color-mix(in srgb, var(--muted) 15%, transparent);
    color: var(--muted);
}

/* Task Due Date */
.task-due-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
}

.task-due-date.overdue {
    color: #dc2626;
}

.task-due-date.due-soon {
    color: #f59e0b;
}

/* Quick Action Toolbar */
.project-toolbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.project-toolbar .toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.project-toolbar .toolbar-btn:hover {
    background: var(--surface-2);
    border-color: var(--muted);
}

.project-toolbar .toolbar-btn svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.project-toolbar .toolbar-btn:hover svg {
    color: var(--text);
}

/* Tabbed Resources Panel */
.project-resources-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.resources-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.resources-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.resources-tab:hover {
    color: var(--text);
    background: var(--surface);
}

.resources-tab.active {
    color: var(--text);
    border-bottom-color: var(--primary);
    background: var(--surface);
}

.tab-count {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 8px;
}

.resources-tab.active .tab-count {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
}

.resources-content {
    min-height: 180px;
    max-height: 280px;
    overflow-y: auto;
}

.resources-content::-webkit-scrollbar {
    width: 6px;
}

.resources-content::-webkit-scrollbar-track {
    background: transparent;
}

.resources-content::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.resources-tab-content {
    display: none;
    padding: 12px;
}

.resources-tab-content.active {
    display: block;
}

/* Activity Panel */
.project-activity-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.project-activity-panel .panel-header {
    padding: 10px 16px;
}

.activity-feed {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 12px;
}

.activity-feed::-webkit-scrollbar {
    width: 6px;
}

.activity-feed::-webkit-scrollbar-track {
    background: transparent;
}

.activity-feed::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Activity Item */
.project-activity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.project-activity-item:hover {
    background: var(--bg);
}

.project-activity-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--bg);
    color: var(--muted);
}

.project-activity-item.activity-chat .project-activity-icon {
    color: #0891b2;
}

.project-activity-item.activity-note .project-activity-icon {
    color: #7c3aed;
}

.project-activity-item.activity-file .project-activity-icon {
    color: #d97706;
}

.project-activity-item.activity-task .project-activity-icon {
    color: #059669;
}

.project-activity-content {
    flex: 1;
    min-width: 0;
}

.project-activity-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-activity-time {
    font-size: 11px;
    color: var(--muted);
}

/* Empty States - Professional and Informative */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    color: var(--muted);
}

.empty-state svg {
    margin-bottom: 8px;
    opacity: 0.5;
}

.empty-state span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.empty-state p {
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0 0;
    max-width: 200px;
}

.empty-state.compact {
    padding: 20px;
}

.empty-state.compact svg {
    display: none;
}

.empty-state.compact p {
    display: none;
}

/* Resource Items in Tabs */
.resource-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.resource-item:hover {
    background: var(--bg);
}

.resource-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--bg);
    color: var(--muted);
}

.resource-item.chat-item .resource-item-icon {
    color: #0891b2;
}

.resource-item.note-item .resource-item-icon {
    color: #7c3aed;
}

.resource-item.file-item .resource-item-icon {
    color: #d97706;
}

.resource-item-info {
    flex: 1;
    min-width: 0;
}

.resource-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-item-meta {
    font-size: 11px;
    color: var(--muted);
}

/* Mobile Responsive - Command Center */
@media (max-width: 900px) {
    .project-command-center {
        grid-template-columns: 1fr;
    }

    .project-side-column {
        order: -1;
    }

    .project-toolbar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .project-welcome-banner {
        flex-direction: column;
        gap: 8px;
    }

    .welcome-banner-dismiss {
        align-self: flex-end;
        margin-top: -28px;
    }

    .project-metrics-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .metric-divider {
        display: none;
    }

    .metric-item {
        padding: 4px 12px;
        background: var(--bg);
        border-radius: 4px;
    }

    .project-toolbar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Legacy compatibility - hide old elements */
.project-stats:not(.project-metrics-bar) {
    display: none;
}

.project-items-list {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TASK MODAL STYLES
   Professional task editor modal with command center aesthetic
   ═══════════════════════════════════════════════════════════════════════════════ */

.task-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease-out;
}

.task-modal[aria-hidden="false"] {
    display: flex;
}

.task-modal-content {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.task-modal-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.task-modal-close:hover {
    background: var(--hover);
    color: var(--text);
}

/* Task Form */
.task-form {
    padding: 20px;
}

.task-form-group {
    margin-bottom: 16px;
}

.task-form-group:last-of-type {
    margin-bottom: 0;
}

.task-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.task-form-group-half {
    flex: 1;
    margin-bottom: 0;
}

.task-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-form-label .required {
    color: var(--error, #ef4444);
}

.task-form-input,
.task-form-select,
.task-form-textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.task-form-input:focus,
.task-form-select:focus,
.task-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}

.task-form-input::placeholder,
.task-form-textarea::placeholder {
    color: var(--muted);
}

.task-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.task-form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.task-form-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--muted);
}

/* Time Estimate Input */
.task-estimate-input {
    position: relative;
    display: flex;
    align-items: center;
}

.task-estimate-input .task-form-input {
    padding-right: 45px;
}

.task-estimate-suffix {
    position: absolute;
    right: 12px;
    font-size: 12px;
    color: var(--muted);
    pointer-events: none;
}

/* Task Modal Footer */
.task-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

.task-modal-footer-left,
.task-modal-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Task Buttons */
.task-btn-primary,
.task-btn-secondary,
.task-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.task-btn-primary {
    background: var(--primary);
    color: white;
}

.task-btn-primary:hover {
    filter: brightness(1.1);
}

.task-btn-primary:active {
    filter: brightness(0.95);
}

.task-btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

.task-btn-secondary:hover {
    background: var(--hover);
    border-color: var(--muted);
}

.task-btn-danger {
    background: transparent;
    color: var(--error, #ef4444);
}

.task-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Task Items in Project View */
.task-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.task-item:hover {
    border-color: var(--muted);
    background: var(--hover);
}

.task-item + .task-item {
    margin-top: 8px;
}

.task-checkbox {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.task-checkbox:hover {
    border-color: var(--primary);
}

.task-checkbox.checked {
    background: var(--primary);
    border-color: var(--primary);
}

.task-checkbox.checked svg {
    display: block;
}

.task-checkbox svg {
    display: none;
    width: 12px;
    height: 12px;
    color: white;
}

.task-content {
    flex: 1;
    min-width: 0;
}

.task-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    margin: 0 0 4px 0;
}

.task-item.completed .task-title {
    text-decoration: line-through;
    color: var(--muted);
}

.task-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.task-priority {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.task-priority.urgent {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.task-priority.high {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.task-priority.medium {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.task-priority.low {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.task-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.task-due.overdue {
    color: #ef4444;
}

.task-due.today {
    color: #f59e0b;
}

.task-due.upcoming {
    color: var(--muted);
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.task-tag {
    display: inline-block;
    padding: 2px 6px;
    background: var(--hover);
    border-radius: 3px;
    font-size: 11px;
    color: var(--muted);
}

/* Status badge for blocked tasks */
.task-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.task-status-badge.blocked {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.task-status-badge.in-progress {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Add Task Button */
.add-task-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-task-btn:hover {
    background: var(--hover);
    border-color: var(--muted);
    color: var(--text);
}

.add-task-btn svg {
    width: 16px;
    height: 16px;
}

/* Task list empty state */
.tasks-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}

.tasks-empty-state svg {
    width: 40px;
    height: 40px;
    color: var(--muted);
    opacity: 0.5;
    margin-bottom: 12px;
}

.tasks-empty-state p {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--muted);
}

/* Mobile adjustments for task modal */
@media (max-width: 600px) {
    .task-modal {
        padding: 12px;
    }

    .task-modal-content {
        max-height: 95vh;
    }

    .task-form-row {
        flex-direction: column;
        gap: 16px;
    }

    .task-form-group-half {
        width: 100%;
    }

    .task-modal-footer {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .task-modal-footer-left,
    .task-modal-footer-right {
        width: 100%;
        justify-content: stretch;
    }

    .task-modal-footer-right {
        flex-direction: column;
    }

    .task-modal-footer-right .task-btn-primary,
    .task-modal-footer-right .task-btn-secondary {
        width: 100%;
        justify-content: center;
    }
}