@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Arabic:wght@400;500;700&family=Noto+Naskh+Arabic:wght@400;700&display=swap');

:root{
  --font-display: 'Inter', 'Noto Sans Arabic', 'Tahoma', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Noto Sans Arabic', 'Tahoma', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.25s;
  --dur-slow: 0.4s;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 50px;
}
:where([data-theme])[data-mode="dark"]{
  --bg: #0D0D0D;
  --bg-elevated: #111111;
  --surface: rgba(255,255,255,0.04);
  --surface-solid: #1A1A1A;
  --surface-hover: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.04);
  --text: #FFFFFF;
  --text-dim: #D1D5DB;
  --text-faint: #9CA3AF;
  --accent: #e0e0e0;
  --accent-2: #c0c0c0;
  --accent-contrast: #0D0D0D;
  --danger: #EF4444;
  --success: #22C55E;
  --warning: #F59E0B;
  --glass-blur: 20px;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --scrollbar: rgba(255,255,255,0.1);
  --code-bg: #0a0a0f;
  --code-head-bg: #1c1c22;
  --code-header-bg: rgba(255,255,255,0.04);
  --code-header-border: rgba(255,255,255,0.06);
  --font-base: 13.5px; --font-sm: 12px; --font-lg: 15px;
}
:where([data-theme])[data-mode="light"]{
  --bg: #FFFFFF;
  --bg-elevated: #F8F8F8;
  --surface: rgba(0,0,0,0.03);
  --surface-solid: #FFFFFF;
  --surface-hover: rgba(0,0,0,0.04);
  --border: rgba(0,0,0,0.08);
  --border-light: rgba(0,0,0,0.04);
  --text: #000000;
  --text-dim: #333333;
  --text-faint: #666666;
  --accent: #555555;
  --accent-2: #777777;
  --accent-contrast: #FFFFFF;
  --danger: #DC2626;
  --success: #16A34A;
  --warning: #D97706;
  --glass-blur: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --scrollbar: rgba(0,0,0,0.1);
  --code-bg: #f4f4f4;
  --code-head-bg: #e3e3e3;
  --code-header-bg: rgba(0,0,0,0.03);
  --code-header-border: rgba(0,0,0,0.06);
  --font-base: 13.5px; --font-sm: 12px; --font-lg: 15px;
}
[data-theme="matrix"][data-mode="dark"]{
  --bg: #0A0F0A; --bg-elevated: #0F150F; --surface: rgba(0,255,65,0.04); --surface-solid: #141C14;
  --surface-hover: rgba(0,255,65,0.08); --border: rgba(0,255,65,0.12); --text: #C8FFC8;
  --text-dim: #70B870; --text-faint: #3A6A3A; --accent: #00FF41; --accent-2: #00CC34;
  --accent-contrast: #0A0F0A; --danger: #FF4141; --success: #00FF41; --glass-blur: 20px;
}
[data-theme="matrix"][data-mode="light"]{
  --bg: #FAFAFA; --bg-elevated: #F0F0F0; --surface: rgba(0,0,0,0.03); --surface-solid: #FFFFFF;
  --border: rgba(0,0,0,0.08); --text: #1A1A1A; --text-dim: #444444; --text-faint: #888888;
  --accent: #00CC34; --accent-2: #00AA2A; --accent-contrast: #FFFFFF;
}
[data-theme="red"][data-mode="dark"]{
  --bg: #120A0A; --bg-elevated: #1A1010; --surface: rgba(255,40,40,0.04); --surface-solid: #221515;
  --surface-hover: rgba(255,40,40,0.08); --border: rgba(255,40,40,0.12); --text: #FFD4D4;
  --text-dim: #D08080; --text-faint: #804040; --accent: #FF2828; --accent-2: #CC2020;
  --accent-contrast: #120A0A; --danger: #FF6060; --success: #60D060; --glass-blur: 20px;
}
[data-theme="red"][data-mode="light"]{
  --bg: #FAFAFA; --bg-elevated: #F0F0F0; --surface: rgba(0,0,0,0.03); --surface-solid: #FFFFFF;
  --border: rgba(0,0,0,0.08); --text: #1A1A1A; --text-dim: #444444; --text-faint: #888888;
  --accent: #CC2020; --accent-2: #AA1818; --accent-contrast: #FFFFFF;
}
[data-theme="blue"][data-mode="dark"]{
  --bg: #0A0C14; --bg-elevated: #101420; --surface: rgba(60,120,255,0.04); --surface-solid: #161C2C;
  --surface-hover: rgba(60,120,255,0.08); --border: rgba(60,120,255,0.12); --text: #D4E0FF;
  --text-dim: #8098D0; --text-faint: #405878; --accent: #3C78FF; --accent-2: #3060CC;
  --accent-contrast: #0A0C14; --danger: #FF5050; --success: #50D080; --glass-blur: 20px;
}
[data-theme="blue"][data-mode="light"]{
  --bg: #FAFAFA; --bg-elevated: #F0F0F0; --surface: rgba(0,0,0,0.03); --surface-solid: #FFFFFF;
  --border: rgba(0,0,0,0.08); --text: #1A1A1A; --text-dim: #444444; --text-faint: #888888;
  --accent: #3060CC; --accent-2: #284FA8; --accent-contrast: #FFFFFF;
}
[data-theme="gray"][data-mode="dark"]{
  --bg: #18181B; --bg-elevated: #1E1E22; --surface: rgba(255,255,255,0.045); --surface-solid: #232328;
  --surface-hover: rgba(255,255,255,0.08); --border: rgba(255,255,255,0.09); --text: #E8E8E8;
  --text-dim: #98989E; --text-faint: #68686E; --accent: #C0C0C0; --accent-2: #A0A0A0;
  --accent-contrast: #0A0A0C; --danger: #E0596B; --success: #5CB880; --glass-blur: 20px;
}
[data-theme="gray"][data-mode="light"]{
  --bg: #FAFAFA; --bg-elevated: #F0F0F0; --surface: rgba(0,0,0,0.03); --surface-solid: #FFFFFF;
  --border: rgba(0,0,0,0.08); --text: #1A1A1A; --text-dim: #444444; --text-faint: #888888;
  --accent: #888888; --accent-2: #666666; --accent-contrast: #FFFFFF;
}

[data-theme="black"][data-mode="dark"]{
  --bg: #050505; --bg-elevated: #0D0D0D; --surface: color-mix(in srgb, #FFFFFF 4%, transparent); --surface-solid: #0B0B0B;
  --surface-hover: color-mix(in srgb, #FFFFFF 8%, transparent); --border: color-mix(in srgb, #FFFFFF 14%, transparent);
  --border-light: color-mix(in srgb, #FFFFFF 7%, transparent); --text: #EBEBEB; --text-dim: #969696; --text-faint: #555555;
  --accent: #FFFFFF; --accent-2: #C7C7C7; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="black"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F5F5F5; --surface: rgba(0,0,0,0.03); --surface-solid: #FFFFFF;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1F1F1F; --text-dim: #616161; --text-faint: #999999;
  --accent: #111111; --accent-2: #0D0D0D; --accent-contrast: #FFFFFF;
}

[data-theme="white"][data-mode="dark"]{
  --bg: #FFFFFF; --bg-elevated: #F5F5F5; --surface: color-mix(in srgb, #111111 4%, transparent); --surface-solid: #F8F8F8;
  --surface-hover: color-mix(in srgb, #111111 8%, transparent); --border: color-mix(in srgb, #111111 14%, transparent);
  --border-light: color-mix(in srgb, #111111 7%, transparent); --text: #1F1F1F; --text-dim: #616161; --text-faint: #999999;
  --accent: #111111; --accent-2: #0D0D0D; --accent-contrast: #FFFFFF; --glass-blur: 20px;
}
[data-theme="white"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F5F5F5; --surface: rgba(0,0,0,0.03); --surface-solid: #FFFFFF;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1F1F1F; --text-dim: #616161; --text-faint: #999999;
  --accent: #111111; --accent-2: #0D0D0D; --accent-contrast: #FFFFFF;
}

[data-theme="green"][data-mode="dark"]{
  --bg: #0A120C; --bg-elevated: #101A12; --surface: color-mix(in srgb, #22C55E 4%, transparent); --surface-solid: #0E1810;
  --surface-hover: color-mix(in srgb, #22C55E 8%, transparent); --border: color-mix(in srgb, #22C55E 14%, transparent);
  --border-light: color-mix(in srgb, #22C55E 7%, transparent); --text: #EBECEC; --text-dim: #989B99; --text-faint: #585E5A;
  --accent: #22C55E; --accent-2: #1B9A49; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="green"][data-mode="light"]{
  --bg: #F2FBF5; --bg-elevated: #E6F8EC; --surface: rgba(0,0,0,0.03); --surface-solid: #F2FBF5;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1D1E1D; --text-dim: #5C5F5D; --text-faint: #919793;
  --accent: #15803D; --accent-2: #106430; --accent-contrast: #FFFFFF;
}

[data-theme="purple"][data-mode="dark"]{
  --bg: #0F0A18; --bg-elevated: #171024; --surface: color-mix(in srgb, #A855F7 4%, transparent); --surface-solid: #150E21;
  --surface-hover: color-mix(in srgb, #A855F7 8%, transparent); --border: color-mix(in srgb, #A855F7 14%, transparent);
  --border-light: color-mix(in srgb, #A855F7 7%, transparent); --text: #ECEBED; --text-dim: #9A989E; --text-faint: #5C5862;
  --accent: #A855F7; --accent-2: #8342C1; --accent-contrast: #FFFFFF; --glass-blur: 20px;
}
[data-theme="purple"][data-mode="light"]{
  --bg: #FAF6FF; --bg-elevated: #F1E9FC; --surface: rgba(0,0,0,0.03); --surface-solid: #FAF6FF;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1E1E1F; --text-dim: #5F5D61; --text-faint: #969499;
  --accent: #7C3AED; --accent-2: #612DB9; --accent-contrast: #FFFFFF;
}

[data-theme="pink"][data-mode="dark"]{
  --bg: #160B11; --bg-elevated: #1E1018; --surface: color-mix(in srgb, #FF69B4 4%, transparent); --surface-solid: #1C0F16;
  --surface-hover: color-mix(in srgb, #FF69B4 8%, transparent); --border: color-mix(in srgb, #FF69B4 14%, transparent);
  --border-light: color-mix(in srgb, #FF69B4 7%, transparent); --text: #ECEBEC; --text-dim: #9D999B; --text-faint: #61595D;
  --accent: #FF69B4; --accent-2: #C7528C; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="pink"][data-mode="light"]{
  --bg: #FFF6FA; --bg-elevated: #FCECF4; --surface: rgba(0,0,0,0.03); --surface-solid: #FFF6FA;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1F1E1E; --text-dim: #615D5F; --text-faint: #999496;
  --accent: #D63384; --accent-2: #A72867; --accent-contrast: #FFFFFF;
}

[data-theme="hellokitty"][data-mode="dark"]{
  --bg: #1A1018; --bg-elevated: #22151D; --surface: color-mix(in srgb, #FF6FA5 4%, transparent); --surface-solid: #20141C;
  --surface-hover: color-mix(in srgb, #FF6FA5 8%, transparent); --border: color-mix(in srgb, #FF6FA5 14%, transparent);
  --border-light: color-mix(in srgb, #FF6FA5 7%, transparent); --text: #EDECED; --text-dim: #9F9B9E; --text-faint: #635C62;
  --accent: #FF6FA5; --accent-2: #C75781; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="hellokitty"][data-mode="light"]{
  --bg: #FFF5F9; --bg-elevated: #FDE9F1; --surface: rgba(0,0,0,0.03); --surface-solid: #FFF5F9;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1F1D1E; --text-dim: #615D5F; --text-faint: #999395;
  --accent: #D6336C; --accent-2: #A72854; --accent-contrast: #FFFFFF;
}

[data-theme="flowers-pink"][data-mode="dark"]{
  --bg: #1C1217; --bg-elevated: #241720; --surface: color-mix(in srgb, #F472B6 4%, transparent); --surface-solid: #22161E;
  --surface-hover: color-mix(in srgb, #F472B6 8%, transparent); --border: color-mix(in srgb, #F472B6 14%, transparent);
  --border-light: color-mix(in srgb, #F472B6 7%, transparent); --text: #EDECEC; --text-dim: #A09B9E; --text-faint: #655E61;
  --accent: #F472B6; --accent-2: #BE598E; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="flowers-pink"][data-mode="light"]{
  --bg: #FFF7FB; --bg-elevated: #FBEAF3; --surface: rgba(0,0,0,0.03); --surface-solid: #FFF7FB;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1F1E1E; --text-dim: #615E5F; --text-faint: #999497;
  --accent: #DB2777; --accent-2: #AB1E5D; --accent-contrast: #FFFFFF;
}

[data-theme="tech"][data-mode="dark"]{
  --bg: #070B10; --bg-elevated: #0E1520; --surface: color-mix(in srgb, #00D4FF 4%, transparent); --surface-solid: #0C121C;
  --surface-hover: color-mix(in srgb, #00D4FF 8%, transparent); --border: color-mix(in srgb, #00D4FF 14%, transparent);
  --border-light: color-mix(in srgb, #00D4FF 7%, transparent); --text: #EBEBEC; --text-dim: #97999B; --text-faint: #56595C;
  --accent: #00D4FF; --accent-2: #00A5C7; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="tech"][data-mode="light"]{
  --bg: #F4FBFF; --bg-elevated: #E6F5FC; --surface: rgba(0,0,0,0.03); --surface-solid: #F4FBFF;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1D1E1F; --text-dim: #5D5F61; --text-faint: #929799;
  --accent: #0284C7; --accent-2: #02679B; --accent-contrast: #FFFFFF;
}

[data-theme="minimal"][data-mode="dark"]{
  --bg: #0A0A0A; --bg-elevated: #141414; --surface: color-mix(in srgb, #F5F5F5 4%, transparent); --surface-solid: #121212;
  --surface-hover: color-mix(in srgb, #F5F5F5 8%, transparent); --border: color-mix(in srgb, #F5F5F5 14%, transparent);
  --border-light: color-mix(in srgb, #F5F5F5 7%, transparent); --text: #EBEBEB; --text-dim: #989898; --text-faint: #585858;
  --accent: #F5F5F5; --accent-2: #BFBFBF; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="minimal"][data-mode="light"]{
  --bg: #FBFBFB; --bg-elevated: #F0F0F0; --surface: rgba(0,0,0,0.03); --surface-solid: #FBFBFB;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1E1E1E; --text-dim: #5F5F5F; --text-faint: #979797;
  --accent: #111111; --accent-2: #0D0D0D; --accent-contrast: #FFFFFF;
}

[data-theme="modern"][data-mode="dark"]{
  --bg: #0B0C12; --bg-elevated: #12141D; --surface: color-mix(in srgb, #7C8CF8 4%, transparent); --surface-solid: #10121A;
  --surface-hover: color-mix(in srgb, #7C8CF8 8%, transparent); --border: color-mix(in srgb, #7C8CF8 14%, transparent);
  --border-light: color-mix(in srgb, #7C8CF8 7%, transparent); --text: #EBECEC; --text-dim: #99999B; --text-faint: #595A5E;
  --accent: #7C8CF8; --accent-2: #616DC1; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="modern"][data-mode="light"]{
  --bg: #F7F7FC; --bg-elevated: #EBECF8; --surface: rgba(0,0,0,0.03); --surface-solid: #F7F7FC;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1E1E1E; --text-dim: #5E5E60; --text-faint: #949497;
  --accent: #4F46E5; --accent-2: #3E37B3; --accent-contrast: #FFFFFF;
}

[data-theme="cyber"][data-mode="dark"]{
  --bg: #050B06; --bg-elevated: #0C140C; --surface: color-mix(in srgb, #39FF14 4%, transparent); --surface-solid: #0A120A;
  --surface-hover: color-mix(in srgb, #39FF14 8%, transparent); --border: color-mix(in srgb, #39FF14 14%, transparent);
  --border-light: color-mix(in srgb, #39FF14 7%, transparent); --text: #EBEBEB; --text-dim: #969996; --text-faint: #555956;
  --accent: #39FF14; --accent-2: #2CC710; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="cyber"][data-mode="light"]{
  --bg: #F1FFF0; --bg-elevated: #DFF8DC; --surface: rgba(0,0,0,0.03); --surface-solid: #F1FFF0;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1D1F1D; --text-dim: #5C615B; --text-faint: #919990;
  --accent: #1B8F06; --accent-2: #157005; --accent-contrast: #FFFFFF;
}

[data-theme="glass"][data-mode="dark"]{
  --bg: #0A1014; --bg-elevated: #122027; --surface: color-mix(in srgb, #9BE8FF 4%, transparent); --surface-solid: #101C22;
  --surface-hover: color-mix(in srgb, #9BE8FF 8%, transparent); --border: color-mix(in srgb, #9BE8FF 14%, transparent);
  --border-light: color-mix(in srgb, #9BE8FF 7%, transparent); --text: #EBECEC; --text-dim: #989B9C; --text-faint: #585C5F;
  --accent: #9BE8FF; --accent-2: #79B5C7; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="glass"][data-mode="light"]{
  --bg: #F2FAFC; --bg-elevated: #E3F1F5; --surface: rgba(0,0,0,0.03); --surface-solid: #F2FAFC;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1D1E1E; --text-dim: #5C5F60; --text-faint: #919697;
  --accent: #0E7490; --accent-2: #0B5A70; --accent-contrast: #FFFFFF;
}

[data-theme="midnight"][data-mode="dark"]{
  --bg: #060810; --bg-elevated: #0D1120; --surface: color-mix(in srgb, #8B9DC3 4%, transparent); --surface-solid: #0B0F1C;
  --surface-hover: color-mix(in srgb, #8B9DC3 8%, transparent); --border: color-mix(in srgb, #8B9DC3 14%, transparent);
  --border-light: color-mix(in srgb, #8B9DC3 7%, transparent); --text: #EBEBEC; --text-dim: #96979B; --text-faint: #56575C;
  --accent: #8B9DC3; --accent-2: #6C7A98; --accent-contrast: #0D0D0D; --glass-blur: 20px;
}
[data-theme="midnight"][data-mode="light"]{
  --bg: #F6F7FB; --bg-elevated: #E9EBF4; --surface: rgba(0,0,0,0.03); --surface-solid: #F6F7FB;
  --surface-hover: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1E1E1E; --text-dim: #5D5E5F; --text-faint: #949497;
  --accent: #334155; --accent-2: #283342; --accent-contrast: #FFFFFF;
}

/* Contrast levels */
[data-contrast="low"]{ --border: rgba(255,255,255,0.06); --border-light: rgba(255,255,255,0.03); --surface-hover: rgba(255,255,255,0.03); }
[data-contrast="medium"]{ }
[data-contrast="increased"]{ --border: rgba(255,255,255,0.2); --border-light: rgba(255,255,255,0.12); --surface-hover: rgba(255,255,255,0.08); --text: #ffffff; --text-dim: #dddddd; --text-faint: #aaaaaa; }

/* Light mode contrast */
[data-mode="light"][data-contrast="low"]{ --border: rgba(0,0,0,0.06); --border-light: rgba(0,0,0,0.03); --surface-hover: rgba(0,0,0,0.02); }
[data-mode="light"][data-contrast="increased"]{ --border: rgba(0,0,0,0.25); --border-light: rgba(0,0,0,0.15); --surface-hover: rgba(0,0,0,0.06); --text: #000000; --text-dim: #333333; --text-faint: #666666; }

/* Animation toggle */
[data-animations="disabled"] *,
[data-animations="disabled"] *::before,
[data-animations="disabled"] *::after {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
  animation-delay: 0s !important;
}

/* Font sizes */
[data-font-size="small"]{ --font-base: 12.5px; --font-sm: 11px; --font-lg: 14px; }
[data-font-size="medium"]{ --font-base: 13.5px; --font-sm: 12px; --font-lg: 15px; }
[data-font-size="large"]{ --font-base: 15px; --font-sm: 13px; --font-lg: 17px; }

/* UI Density */
[data-density="compact"]{ --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; }
[data-density="comfortable"]{ --space-xs: 4px; --space-sm: 6px; --space-md: 10px; --space-lg: 16px; --space-xl: 20px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; }
[data-density="spacious"]{ --space-xs: 6px; --space-sm: 10px; --space-md: 14px; --space-lg: 20px; --space-xl: 28px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; }

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  overflow: hidden; font-size: 14px;
}
*, *::before, *::after{
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(800px 600px at 20% -20%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%),
              radial-gradient(600px 500px at 110% 10%, color-mix(in srgb, var(--accent) 3%, transparent), transparent 60%);
}
a{ color: inherit; text-decoration: none; }
a:hover{ opacity: 0.8; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; }
::selection{ background: color-mix(in srgb, var(--accent) 25%, transparent); }
::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; letter-spacing: -0.02em; font-weight: 600; }
p{ margin:0; }
code, pre{ font-family: var(--font-mono); }

.glass{
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border);
}

.vertex-logo{ display: flex; align-items: center; gap: 10px; }
.vertex-logo .wordmark{
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: -0.03em; color: var(--text);
}
.logo-img-wrap{ position: relative; width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.logo-img-wrap img{ position: absolute; inset: 0; width: 28px; height: 28px; object-fit: contain; }
[data-mode="light"] .logo-img-wrap .logo-dark{ opacity: 0; }
[data-mode="dark"] .logo-img-wrap .logo-light{ opacity: 0; }
.logo-img-wrap img{ transition: opacity 0.25s ease; }

.app-shell{ display: flex; height: 100vh; width: 100vw; position: relative; z-index: 1; }

.sidebar{
  width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--bg-elevated);
  position: relative; z-index: 20; overflow: hidden;
}
.sidebar.collapsed{ width: var(--sidebar-w-collapsed); }
.sidebar-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px; min-height: 56px;
}
.sidebar.collapsed .sidebar-header{ justify-content: center; padding: 14px 0; }

.collapse-btn{
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.collapse-btn:hover{ background: var(--surface-hover); color: var(--text); }

.new-chat-btn{
  display: flex; align-items: center; gap: 8px; margin: 4px 10px 10px;
  padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.new-chat-btn:hover{ background: var(--surface-hover); border-color: var(--accent); color: var(--text); }
.sidebar.collapsed .new-chat-btn{ justify-content: center; padding: 10px 0; margin: 4px 6px 10px; }

.nav-section{ flex: 1; overflow-y: auto; padding: 0 8px; }
.nav-group-title{
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-faint); font-weight: 600; padding: 8px 8px 4px; margin-top: 4px;
}
.nav-item{
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer;
  font-size: 13px;
}
.nav-item:hover{ background: var(--surface-hover); color: var(--text); }
.nav-item.active{ background: var(--surface-hover); color: var(--text); }
.nav-item.disabled{ opacity: 0.5; cursor: default; pointer-events: none; }
.badge{ font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 20px; }
.badge-coming-soon{ background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.badge-exp{ background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); font-size: 10px; letter-spacing: 0.4px; font-weight: 700; }

.sidebar-search{ position: relative; margin: 4px 0 6px; }
.sidebar-search-input{
  width: 100%; padding: 7px 10px 7px 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent; color: var(--text);
  font-size: 12px; outline: none;
}
.sidebar-search-input:focus{ border-color: var(--accent); }
.sidebar-search-input::placeholder{ color: var(--text-faint); }

.chat-list{ margin-bottom: 4px; }
.chat-item{
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12.5px;
}
.chat-item:hover{ background: var(--surface-hover); color: var(--text); }
.chat-item.active{ background: var(--surface-hover); color: var(--text); }
.chat-item .title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex:1; color: var(--text-dim); }
.chat-item .chat-actions{ display: flex; gap: 2px; opacity: 0; }
.chat-item:hover .chat-actions{ opacity: 1; }
.chat-item .chat-actions button{
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--text-faint); cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.chat-item .chat-actions button:hover{ background: var(--surface-hover); color: var(--text); }
.sidebar.collapsed .chat-item .chat-actions{ opacity: 1; }

.chat-more-menu{
  position: fixed; z-index: 1000; min-width: 170px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
  padding: 4px; animation: fadeIn .12s ease;
}
.chat-more-menu button{
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border: none; background: transparent; color: var(--text-dim); font-size: 13px;
  cursor: pointer; border-radius: 6px; text-align: left;
}
.chat-more-menu button:hover{ background: var(--surface-hover); color: var(--text); }
.chat-more-menu button svg{ width: 15px; height: 15px; flex-shrink: 0; }

.feedback-reasons{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.reason-chip{
  padding: 8px 10px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: 12.5px; border-radius: 8px; cursor: pointer; text-align: left;
  transition: border-color .12s ease, color .12s ease;
}
.reason-chip:hover{ border-color: var(--accent); color: var(--text); }
.reason-chip.active{ border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.field-label{ display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
#feedback-comment, #report-description{ width: 100%; resize: vertical; }

.sidebar-footer{ border-top: 1px solid var(--border); padding: 8px; margin-top: auto; }
.user-chip{
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer; position: relative;
  min-width: 0;
}
.user-chip:hover{ background: var(--surface-hover); }
.user-chip .avatar{
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-contrast); display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 11px;
}
.user-chip .who{ flex: 1; min-width: 0; }
.user-chip .name{ font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .email{ font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .chevron{ color: var(--text-faint); flex-shrink: 0; }
.user-chip.open .chevron{ transform: rotate(180deg); }
.sidebar.collapsed .user-chip{ justify-content: center; padding: 6px 0; }
.sidebar.collapsed .user-chip .who{ display: none; }
.sidebar.collapsed .user-chip .chevron{ display: none; }

.user-dropdown{
  position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.1);
  flex-direction: column; padding: 4px; z-index: 30;
  max-height: calc(100vh - 150px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.user-dropdown.open{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.dropdown-item{
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 10px; cursor: pointer; font-size: 13px;
  color: var(--text-dim); transition: background 0.15s, color 0.15s;
}
.dropdown-item:hover{ background: var(--surface-hover); color: var(--text); }
.dropdown-item svg{ width: 16px; height: 16px; flex-shrink: 0; }
.dropdown-divider{ height: 1px; background: var(--border); margin: 4px 8px; }
.dropdown-logout{ color: var(--danger); }
.dropdown-logout:hover{ background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.add-account-list{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 220px; overflow-y: auto; }
.add-account-row{
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.add-account-row .avatar{ width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); }
.add-account-row .aa-who{ flex: 1; min-width: 0; }
.add-account-row .aa-name{ font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-account-row .aa-email{ font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-account-row .aa-active{ font-size: 10px; color: var(--success); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; }
.add-account-row button{ flex-shrink: 0; }
.add-account-divider{ display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--text-faint); font-size: 12px; }
.add-account-divider::before, .add-account-divider::after{ content: ""; flex: 1; height: 1px; background: var(--border); }

.main{
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--bg); position: relative; z-index: 1;
}

.topbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; height: 48px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
}
.model-picker{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; border:0; background:transparent; color:var(--text); cursor:pointer; padding:6px 8px; border-radius:9px; }
.model-picker:hover{ background:var(--surface-hover); }
.model-choice:hover{ border-color:var(--accent)!important; background:var(--surface-hover)!important; }
.vertex-indicator{ width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.vertex-indicator.online{ background: var(--success); }
.topbar-actions{ display: flex; align-items: center; gap: 4px; }

.icon-btn{
  width: 32px; height: 32px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover{ background: var(--surface-hover); color: var(--text); }
.icon-btn svg{ width: 16px; height: 16px; flex-shrink: 0; }

.chat-scroll{
  flex: 1; overflow-y: auto; padding: 0 0 16px;
  scroll-behavior: smooth; position: relative;
}
#scroll-bottom-btn{
  position: fixed; bottom: 180px; right: 24px; z-index: 20;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-faint); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
#scroll-bottom-btn:hover{ background: var(--surface-solid); color: var(--text); border-color: var(--accent); }
#scroll-bottom-btn svg{ width: 16px; height: 16px; }

.empty-state{
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; padding: 40px 20px;
  text-align: center; animation: fadeIn 0.4s var(--ease);
}
.empty-state .logo-wrap{ margin-bottom: 16px; position: relative; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.empty-state .logo-wrap img{ position: absolute; inset: 0; width: 48px; height: 48px; object-fit: contain; transition: opacity 0.25s ease; }
[data-mode="light"] .empty-state .logo-wrap .logo-dark{ opacity: 0; }
[data-mode="dark"] .empty-state .logo-wrap .logo-light{ opacity: 0; }
.empty-state h1{ font-size: 22px; margin-bottom: 6px; }
.empty-state p{ color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }

.suggestion-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  max-width: 500px; width: 100%;
}
.suggestion-card{
  padding: 12px 14px; border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  text-align: left; animation: fadeInUp 0.4s var(--ease);
}
.suggestion-card:nth-child(2){ animation-delay: 0.05s; }
.suggestion-card:nth-child(3){ animation-delay: 0.1s; }
.suggestion-card:nth-child(4){ animation-delay: 0.15s; }
.suggestion-card:hover{ border-color: var(--accent); background: var(--surface-hover); transform: translateY(-1px); }
.suggestion-card .t{ font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.suggestion-card .s{ font-size: 11.5px; color: var(--text-faint); }

.chat-inner{
  padding: 0 14px; display: flex; flex-direction: column; align-items: center;
}
.chat-inner .msg-row{ width: 100%; max-width: 720px; }
.chat-inner .empty-state{ width: 100%; max-width: 720px; }

.msg-row{
  display: flex; gap: 12px; margin: 0 -10px; padding: 6px 10px 12px;
  position: relative; animation: fadeInUp 0.3s var(--ease);
  direction: ltr; unicode-bidi: plaintext;
}
.msg-row.rtl{ direction: rtl; animation: slideInRight 0.3s var(--ease); }
.msg-row.user-rtl{ flex-direction: row-reverse; gap: 8px; padding: 4px 4px 10px; unicode-bidi: normal; animation: slideInRight 0.35s var(--ease); }
.msg-row:not(.rtl):not(.user-rtl){ animation: fadeIn 0.4s var(--ease); }
.msg-row.user-rtl:hover .msg-body{ transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }

.msg-avatar{
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 8px;
  display: flex; align-items: center; justify-content: center;
}
.msg-row.user .msg-avatar{
  background: var(--surface-solid); border: 1px solid var(--border); color: var(--text-dim);
}
.msg-row.assistant .msg-avatar{
  color: var(--text-faint); margin-top: 4px;
}
.msg-body{ flex: 1; min-width: 0; }
.msg-row.user-rtl .msg-body{
  flex: 0 1 auto; max-width: 70%;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.msg-row.user-rtl .msg-meta{ text-align: right; font-size: 10.5px; color: var(--text-faint); font-weight: 500; letter-spacing: 0.3px; margin-bottom: 1px; }
.msg-meta{ font-size: 11.5px; font-weight: 600; margin-bottom: 2px; color: var(--text-dim); }

.msg-content{ font-size: 14px; line-height: 1.65; word-wrap: break-word; }
.msg-content p{ margin: 0 0 8px; }
.msg-content p:last-child{ margin-bottom: 0; }
.msg-content ul, .msg-content ol{ margin: 4px 0; padding-left: 20px; }
.msg-row.rtl .msg-content ul,
.msg-row.rtl .msg-content ol{ padding-left: 0; padding-right: 20px; }
.msg-content blockquote{
  margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--accent);
  color: var(--text-dim); font-size: 13px;
}
.msg-row.rtl .msg-content blockquote{
  border-left: none; border-right: 3px solid var(--accent);
}
.msg-content code{
  font-size: 0.85em; background: var(--surface-hover); padding: 1px 5px;
  border-radius: 4px; font-family: var(--font-mono);
}
.msg-content pre{
  margin: 8px 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--code-bg);
  direction: ltr; text-align: left; unicode-bidi: embed;
}
.msg-content pre code{
  display: block; padding: 12px; overflow-x: auto; font-size: 12.5px;
  line-height: 1.5; background: transparent; color: var(--text-dim);
}
.msg-content table{ border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.msg-content th, .msg-content td{ padding: 6px 10px; border: 1px solid var(--border); text-align: left; }
.msg-row.rtl .msg-content th,
.msg-row.rtl .msg-content td{ text-align: right; }
.msg-content th{ background: var(--surface-hover); font-weight: 600; }
.msg-content a{ color: var(--accent); text-decoration: underline; }

.code-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--code-header-bg);
  border-bottom: 1px solid var(--code-header-border);
  direction: ltr; unicode-bidi: embed;
}
.code-lang{ font-size: 11px; color: var(--text-faint); font-weight: 500; text-transform: uppercase; }
.code-actions{ display: flex; gap: 4px; }
.code-action-btn{
  width: 26px; height: 26px; border-radius: 4px; border: none;
  background: transparent; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.code-action-btn:hover{ background: var(--surface-hover); color: var(--text); }

/* ============ VertexMarkdown code blocks (header + highlight + copy) ============ */
.md-code-block{
  position: relative; border-radius: var(--radius-md);
  border: 1px solid var(--border); overflow: hidden;
  background: var(--code-bg) !important;
  margin: 10px 0; font-size: 13px; line-height: 1.6;
  direction: ltr; text-align: left;
}
.md-code-block .md-code-head{
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px 0 12px;
  background: var(--code-head-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.md-code-block .md-code-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 26px;
}
.md-code-block .md-code-icon svg,
.md-code-block .md-code-icon i{
  width: 24px; height: 24px; display: block;
}
.md-code-block .md-code-icon .devicon-html5-plain,
.md-code-block .md-code-icon .devicon-css3-plain,
.md-code-block .md-code-icon .devicon-javascript-plain,
.md-code-block .md-code-icon .devicon-python-plain,
.md-code-block .md-code-icon .devicon-typescript-plain,
.md-code-block .md-code-icon .devicon-json-plain,
.md-code-block .md-code-icon .devicon-php-plain,
.md-code-block .md-code-icon .devicon-java-plain,
.md-code-block .md-code-icon .devicon-c-plain,
.md-code-block .md-code-icon .devicon-cplusplus-plain,
.md-code-block .md-code-icon .devicon-csharp-plain,
.md-code-block .md-code-icon .devicon-mysql-plain,
.md-code-block .md-code-icon .devicon-go-plain,
.md-code-block .md-code-icon .devicon-rust-plain,
.md-code-block .md-code-icon .devicon-ruby-plain,
.md-code-block .md-code-icon .devicon-bash-plain,
.md-code-block .md-code-icon .devicon-yaml-plain{
  font-size: 24px; line-height: 1;
}
.md-code-block .md-code-lang{
  flex: 1; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-code-block .code-copy,
.md-code-block .code-dl{
  position: relative; top: auto; right: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  color: var(--text-faint);
  background: color-mix(in srgb, var(--code-bg) 70%, var(--surface-hover));
  border: 1px solid var(--border); border-radius: var(--radius-xs); cursor: pointer;
  opacity: .85; transition: all var(--dur-fast) var(--ease);
  font-family: var(--font-body);
}
.md-code-block:hover .code-copy, .md-code-block:hover .code-dl{ opacity: 1; }
.md-code-block .code-copy:hover, .md-code-block .code-dl:hover{ color: var(--text); background: var(--surface-hover); border-color: var(--accent); }
.md-code-block pre{
  margin: 0; padding: 12px 14px; overflow: auto;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  background: transparent !important;
}
.md-code-block pre code{
  display: block; padding: 0; background: transparent !important;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim) !important;
}
/* Syntax tokens */
.md-code-block pre code .vx-tok{ color: inherit; }
.md-code-block pre code .vx-tok-keyword{ color: #c678dd !important; font-weight: 600; }
.md-code-block pre code .vx-tok-string{ color: #98c379 !important; }
.md-code-block pre code .vx-tok-number{ color: #d19a66 !important; }
.md-code-block pre code .vx-tok-comment{ color: #7f848e !important; font-style: italic; }
.md-code-block pre code .vx-tok-plain{ color: var(--text) !important; }
html[data-theme="light"] .md-code-block pre code .vx-tok-keyword{ color: #a626a4 !important; }
html[data-theme="light"] .md-code-block pre code .vx-tok-string{ color: #50a14f !important; }
html[data-theme="light"] .md-code-block pre code .vx-tok-number{ color: #986801 !important; }
html[data-theme="light"] .md-code-block pre code .vx-tok-comment{ color: #a0a1a7 !important; }
html[data-theme="light"] .md-code-block pre code .vx-tok-plain{ color: var(--text) !important; }

.msg-actions{
  display: flex; gap: 2px; margin-top: 4px; opacity: 0; transition: opacity 0.15s var(--ease);
}
.msg-row.user-rtl .msg-actions{ justify-content: flex-end; }
.msg-row:hover .msg-actions{ opacity: 1; }
.msg-actions button{
  width: 26px; height: 26px; border-radius: 4px; border: none;
  background: transparent; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.msg-actions button:hover{ background: var(--surface-hover); color: var(--text); }
.msg-actions button svg{ width: 12px; height: 12px; }
.msg-actions button.liked{ color: var(--success); }
.msg-actions button.disliked{ color: var(--danger); }
.typing-dots{ display: inline-flex; gap: 3px; align-items: center; padding: 4px 0; }
.typing-dots span{
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint);
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2){ animation-delay: 0.15s; }
.typing-dots span:nth-child(3){ animation-delay: 0.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform: translateY(0); } 30%{ transform: translateY(-5px); } }

.thinking-indicator{
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  margin: 0 auto; width: 100%; max-width: 720px; font-size: 12px;
  color: var(--text-faint); animation: fadeIn 0.2s var(--ease);
}
.thinking-dots{ display: inline-flex; gap: 2px; }
.thinking-dots span{
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: typingBounce 1s infinite;
}
.thinking-dots span:nth-child(2){ animation-delay: 0.12s; }
.thinking-dots span:nth-child(3){ animation-delay: 0.24s; }

.todo-panel{
  margin: 0 auto 8px; width: 100%; max-width: 720px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface);
  overflow: hidden;
}
.todo-header{
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border);
}
.todo-toggle{
  margin-left: auto; width: 22px; height: 22px; border-radius: 4px;
  border: none; background: transparent; color: var(--text-faint);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.todo-toggle:hover{ background: var(--surface-hover); color: var(--text); }
.todo-list{ padding: 4px 12px 8px; }
.todo-item{
  display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px;
}
.todo-status{ width: 14px; text-align: center; flex-shrink: 0; }
.todo-status.pending{ color: var(--text-faint); }
.todo-status.running{ color: var(--accent); animation: pulse 1s infinite; }
.todo-status.done{ color: var(--success); }
.todo-status.error{ color: var(--danger); }

.sources-panel-wrapper{ margin: 0 auto 8px; width: 100%; max-width: 720px; }
.sources-toggle{
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 11.5px; color: var(--text-dim);
}
.sources-toggle:hover{ background: var(--surface-hover); color: var(--text); }
.sources-toggle.active{ border-color: var(--accent); color: var(--accent); }
.sources-toggle svg{ width: 12px; height: 12px; }
.sources-panel{
  display: none; margin-top: 4px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  padding: 4px; max-height: 200px; overflow-y: auto;
}
.sources-panel.open{ display: block; }
.source-item{
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 4px; cursor: pointer; font-size: 12px;
}
.source-item:hover{ background: var(--surface-hover); color: var(--text); }
.source-item svg{ width: 12px; height: 12px; flex-shrink: 0; color: var(--text-faint); }

.execution-info{
  margin: 0 auto 4px; padding: 6px 12px; font-size: 11px;
  width: 100%; max-width: 720px;
  color: var(--text-faint); border-radius: var(--radius-sm);
  background: var(--surface); display: none;
}

.composer-wrap{
  padding: 0 14px 4px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
}
.composer-wrap .composer{ width: 100%; max-width: 720px; }
.composer{
  display: flex; align-items: flex-end; gap: 0; flex-wrap: wrap;
  border: 1px solid var(--border); background: var(--surface);
  padding: 6px 6px 6px 14px; border-radius: 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.02);
}
.composer:hover{
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.03);
}
.composer:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), 0 4px 16px rgba(0,0,0,0.04);
}
.composer.drag-over{ border-color: var(--accent); background: var(--surface-hover); }
.composer-previews{ display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 0; width: 100%; }
#composer-input{
  flex: 1; border: none; background: transparent; color: var(--text);
  font-size: 14px; resize: none; outline: none; padding: 6px 8px 6px 0;
  max-height: 160px; line-height: 1.45; min-height: 24px;
  align-self: center;
}
#composer-input::placeholder{ color: var(--text-faint); }

.composer-actions{
  display: flex; align-items: center; gap: 2px; flex-shrink: 0; padding: 0;
  align-self: flex-end;
}
.composer-attach-btn, .search-web-btn{
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.composer-attach-btn:hover{ color: var(--text); background: var(--surface-hover); transform: scale(1.05); }
.composer-attach-btn:active{ transform: scale(0.95); }
.search-web-btn:hover{ background: var(--surface-hover); color: var(--text); }
.search-web-btn.active{ color: var(--accent); }
.composer-attach-btn svg{ width: 18px; height: 18px; }

#stop-btn{
  display: none; align-items: center; gap: 4px; padding: 5px 12px;
  border-radius: 20px; border: 1px solid var(--border); background: transparent;
  color: var(--danger); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
#stop-btn:hover{ background: var(--surface-hover); color: var(--danger); border-color: var(--danger); }
#stop-btn svg{ width: 11px; height: 11px; }

.send-btn{
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--accent-contrast); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s, transform 0.15s;
}
.send-btn:hover{ opacity: 0.85; transform: scale(1.04); }
.send-btn:active{ transform: scale(0.95); }
.send-btn:disabled{ opacity: 0.4; cursor: default; }
.send-btn svg{ width: 16px; height: 16px; stroke-width: 2.2; }

.composer-hint{
  text-align: center; font-size: 10.5px; color: var(--text-faint);
  margin-top: 6px; letter-spacing: 0.01em;
}
.app-footer{
  text-align: center; font-size: 10px; color: var(--text-faint);
  margin-top: 4px; opacity: 0.5;
}
.app-footer a{ text-decoration: underline; }

.btn{
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font-size: 12.5px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn:hover{ background: var(--surface-hover); color: var(--text); border-color: var(--accent); }
.btn-primary{ background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.btn-primary:hover{ background: var(--accent-2); border-color: var(--accent-2); }
.btn-danger{ background: var(--danger); color: white; border-color: var(--danger); }
.btn-danger:hover{ opacity: 0.85; }
.btn-ghost{ border-color: transparent; }
.btn-ghost:hover{ background: var(--surface-hover); color: var(--text); }
.btn-sm{ padding: 4px 10px; font-size: 11.5px; }
.btn-block{ width: 100%; justify-content: center; }

.input{
  width: 100%; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 13px; outline: none;
}
.input:focus{ border-color: var(--accent); }
.input::placeholder{ color: var(--text-faint); }
select.input{ appearance: auto; }

.field{ margin-bottom: 12px; }
.field label{
  display: block; font-size: 12px; font-weight: 600; color: var(--text-dim);
  margin-bottom: 4px;
}
.error-text{ color: var(--danger); font-size: 13px; }

.modal-overlay{
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.open{ display: flex; }
.modal{
  background: var(--bg-elevated); border-radius: var(--radius-lg);
  border: 1px solid var(--border); width: 420px; max-width: calc(100vw - 32px);
  padding: 20px; box-shadow: var(--shadow-lg); animation: scaleIn 0.2s var(--ease);
}
.modal-header{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.modal-header h3{ font-size: 16px; }
.modal-close{
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.modal-close:hover{ background: var(--surface-hover); color: var(--text); }
.modal textarea.input{ min-height: 80px; resize: vertical; }

.tabs{
  display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px; overflow-x: auto;
}
.tab{
  padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-faint);
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover{ color: var(--text); }
.tab.active{ color: var(--text); border-bottom-color: var(--accent); }

.skeleton{
  background: linear-gradient(90deg, var(--surface-hover) 25%, var(--surface) 50%, var(--surface-hover) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm);
}
@keyframes shimmer{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }
.skeleton-pulse{
  background: linear-gradient(90deg, var(--surface-hover) 25%, var(--surface) 50%, var(--surface-hover) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm);
}
.skeleton-line{ height: 10px; margin-bottom: 6px; border-radius: 3px; }
.skeleton-line:last-child{ width: 60%; }
.skeleton-card{ height: 72px; margin-bottom: 8px; border-radius: var(--radius-md); }
.skeleton-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.page-shell{ display: flex; height: 100vh; }
.page-main{ flex: 1; overflow-y: auto; }
.page-header{ padding: 20px 24px 0; }
.page-header h1{ font-size: 20px; }
.page-header p{ color: var(--text-dim); margin-top: 4px; font-size: 13px; }
.page-content{ padding: 16px 24px 60px; max-width: 800px; }
.settings-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.settings-row:last-child{ border-bottom: none; }
.settings-row .info .t{ font-weight: 600; font-size: 14px; }
.settings-row .info .s{ font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }



.prompt-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prompt-card{
  padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border);
  cursor: pointer;
}
.prompt-card:hover{ border-color: var(--accent); transform: translateY(-1px); }
.prompt-card .cat{ font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 700; }
.prompt-card .t{ font-weight: 600; margin: 4px 0 3px; font-size: 13.5px; }
.prompt-card .c{ font-size: 12px; color: var(--text-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.auth-shell{ height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.auth-card{
  width: 380px; max-width: calc(100vw - 32px); border-radius: var(--radius-xl);
  padding: 32px 28px; animation: fadeInUp 0.4s var(--ease);
}
.auth-card .vertex-logo{ justify-content: center; margin-bottom: 20px; }
.auth-card .vertex-logo img{ width: 30px; height: 30px; }
.auth-card h1{ font-size: 20px; text-align: center; margin-bottom: 4px; }
.auth-card .sub{ text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 22px; }
.auth-foot{ text-align: center; font-size: 12.5px; color: var(--text-dim); margin-top: 16px; }
.auth-foot a{ color: var(--accent); font-weight: 600; }
.checkbox-row{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.checkbox-row input{ accent-color: var(--accent); width: 14px; height: 14px; }

#toast-container{
  position: fixed; bottom: 16px; right: 16px; z-index: 99999;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.toast-compact{
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: var(--radius-md); background: var(--bg-elevated);
  border: 1px solid var(--border); color: var(--text);
  font-size: 12.5px; box-shadow: var(--shadow-lg); pointer-events: all;
  opacity: 0; transform: translateY(8px);
  max-width: 360px;
}
.toast-compact.show{ opacity: 1; transform: translateY(0); }
.toast-icon{ font-size: 14px; flex-shrink: 0; }
.toast-success .toast-icon{ color: var(--success); }
.toast-error .toast-icon{ color: var(--danger); }
.toast-warning .toast-icon{ color: var(--warning); }

.search-modal .modal{ width: 520px; }
#search-input{ margin-bottom: 8px; }
#search-results{ max-height: 300px; overflow-y: auto; }
.search-item{
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
}
.search-item:hover{ background: var(--surface-hover); color: var(--text); }

.upload-previews{ display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.upload-preview-item{
  position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border);
}
.upload-preview-item img{ width: 100%; height: 100%; object-fit: cover; }
.upload-preview-remove{
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.6); color: white;
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.file-preview{
  display: flex; align-items: center; gap: 6px; padding: 4px 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); font-size: 11.5px;
}
.file-preview .file-icon{ font-size: 16px; }
.preview-status{ font-size: 10px; }
.preview-status.uploaded{ color: var(--success); }
.preview-status.error{ color: var(--danger); }

.image-search-results{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.image-card{ border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.image-card img{ width: 100%; height: 100px; object-fit: cover; display: block; }
.image-card-caption{ padding: 6px 8px; }
.image-card-title{ font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-card-link{ font-size: 10px; color: var(--text-faint); }

.video-search-results{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0; }
.video-card{ border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-solid); border: 1px solid var(--border); }
.video-thumb-wrap{ position: relative; display: block; }
.video-thumb-wrap img{ width: 100%; height: 110px; object-fit: cover; display: block; }
.video-thumb-placeholder{ height: 110px; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.video-duration{ position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.7); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.video-card-info{ padding: 6px 8px; }
.video-card-title{ font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-card-channel{ font-size: 10.5px; color: var(--text-faint); }
.video-card-link{ font-size: 10.5px; color: var(--accent); }

.source-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0; }
.source-card{ padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.source-card-header{ display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.source-site{ font-size: 10.5px; color: var(--text-faint); font-weight: 500; }
.source-card-title{ font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.source-card-snippet{ font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.source-card-link{ font-size: 11px; color: var(--accent); }
.source-favicon-placeholder{ width: 12px; height: 12px; color: var(--text-faint); flex-shrink: 0; }

.model-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px 24px; }
.model-card{ padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-solid); }
.model-card h3{ font-size: 14px; margin-bottom: 4px; }
.model-card p{ font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.model-tags{ display: flex; gap: 4px; flex-wrap: wrap; }
.model-tag{ font-size: 9.5px; padding: 2px 7px; border-radius: 20px; background: var(--surface-hover); color: var(--text-faint); }
.status-badge{ font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; background: var(--surface-hover); color: var(--text-faint); white-space: nowrap; }
.model-params{ display: flex; gap: 16px; padding: 10px 12px; background: var(--surface); border-radius: var(--radius-sm); }

.avatar{
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-contrast); display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}

.vertex-view{ display: none; flex-direction: column; flex: 1; min-height: 0; position: relative; }

.progress-panel{
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3); backdrop-filter: blur(2px);
}
.progress-panel.hidden{ display: none; }
.progress-card{
  padding: 20px 24px; border-radius: var(--radius-lg); background: var(--bg-elevated);
  border: 1px solid var(--border); min-width: 240px; box-shadow: var(--shadow-lg);
  max-width: 90vw;
}
.progress-label{ font-size: 12px; color: var(--text-dim); text-align: center; margin-bottom: 12px; }
.progress-steps{ display: flex; gap: 4px; align-items: center; justify-content: center; }
.progress-step{ display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); }
.progress-step.completed{ color: var(--success); }
.progress-step.active{ color: var(--text); }
.progress-step .step-icon{ width: 16px; text-align: center; }
.progress-step .step-icon.disabled{ opacity: 0.3; }
.step-dots{ display: inline-flex; gap: 1px; }
.step-dots span{ animation: typingBounce 1s infinite; }
.step-dots span:nth-child(2){ animation-delay: 0.12s; }
.step-dots span:nth-child(3){ animation-delay: 0.24s; }

.image-gen-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
  padding: 16px 14px;
}
.image-gen-card{
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--surface-solid); position: relative;
}
.image-gen-card img{ width: 100%; height: 100%; object-fit: cover; }

.settings-content{ max-width: 700px; margin: 0 auto; padding: 1.5rem 2rem; width: 100%; }






.settings-modal-overlay{
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.settings-modal-overlay.open{ display: flex; }
.settings-modal{
  width: 920px; max-width: calc(100vw - 32px); height: 85vh; max-height: 90vh;
  background: var(--bg-elevated); border-radius: 16px;
  border: 1px solid var(--border); box-shadow: 0 16px 64px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; overflow: hidden;
  animation: settingsModalIn 220ms var(--ease);
}
.settings-modal-overlay.closing .settings-modal{
  animation: settingsModalOut 180ms var(--ease) forwards;
}
@keyframes settingsModalIn{
  from{ opacity: 0; transform: scale(0.96) translateY(4px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes settingsModalOut{
  from{ opacity: 1; transform: scale(1) translateY(0); }
  to{ opacity: 0; transform: scale(0.96) translateY(4px); }
}
.settings-modal-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.settings-modal-header h2{ font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.settings-modal-close{ font-size: 22px; line-height: 1; color: var(--text-faint); width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.settings-modal-close:hover{ background: var(--surface-hover); color: var(--text); }
.settings-modal-body{
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.settings-nav-panel{
  width: 200px; flex-shrink: 0; overflow-y: auto; padding: 10px 8px;
  border-right: 1px solid var(--border);
}
.settings-nav-panel .nav-group-title{ padding: 8px 10px 4px; font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); }
.settings-nav-panel .nav-item{ padding: 7px 10px; font-size: 12.5px; border-radius: 8px; margin-bottom: 1px; }
.settings-nav-panel .nav-item.active{ background: var(--surface-hover); color: var(--text); font-weight: 500; position: relative; }
.settings-nav-panel .nav-item.active::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.settings-nav-panel .nav-item svg{ width: 14px; height: 14px; flex-shrink: 0; }
.settings-modal-body .settings-content{
  flex: 1; overflow-y: auto; padding: 18px 22px;
}

/* Settings cards */
.settings-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 12px; transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-card:hover{ border-color: rgba(255,255,255,0.12); }
.settings-card-header{
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.settings-tip{ font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-bottom: 10px; }
.setting-item{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; gap: 14px; border-bottom: 1px solid var(--border-light);
}
.setting-item:last-child{ border-bottom: none; }
.setting-info{ flex: 1; min-width: 0; }
.setting-title{ display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.setting-desc{ display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 1px; line-height: 1.4; }
.setting-control{ flex-shrink: 0; }

/* Modern dropdown */
.setting-select{
  appearance: none; background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 12.5px; font-weight: 500;
  padding: 7px 30px 7px 12px; cursor: pointer; min-width: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.setting-select:hover{ border-color: var(--accent); }
.setting-select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); outline: none; }
.setting-select option{ background: var(--bg-elevated); color: var(--text); }

/* Modern input */
.setting-input{
  width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-solid); color: var(--text); font-size: 13px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.setting-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.setting-input::placeholder{ color: var(--text-faint); }

/* Modern textarea */
.setting-textarea{
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-solid); color: var(--text); font-size: 13px; outline: none; resize: vertical;
  font-family: var(--font-body); line-height: 1.5; min-height: 60px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.setting-textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.setting-textarea::placeholder{ color: var(--text-faint); }

/* Accent swatches */
.setting-swatches{ display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.setting-swatches .accent-swatch{
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; flex-shrink: 0; transition: transform 0.2s var(--ease-spring), border-color 0.15s, box-shadow 0.15s;
}
.setting-swatches .accent-swatch:hover{ transform: scale(1.15); }
.setting-swatches .accent-swatch.selected{ border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); transform: scale(1.1); }
.setting-swatches .accent-swatch.selected::after{
  content:'\2713'; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:white;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.setting-swatches .accent-swatch:not(.selected){ box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }

/* Slider buttons */
.setting-sliders{ display: flex; gap: 4px; flex-shrink: 0; }
.setting-sliders .slider-btn{
  padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 11.5px; font-weight: 500; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.setting-sliders .slider-btn:hover{ border-color: var(--accent); color: var(--text); }
.setting-sliders .slider-btn.active{ background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* Toggle switch refinement */
.toggle-switch{ position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.toggle-switch input{ opacity: 0; width: 0; height: 0; }
.toggle-switch .toggle-slider{
  position: absolute; inset: 0; background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: 20px; transition: 0.2s;
}
.toggle-switch .toggle-slider::before{
  content:''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--text-faint); transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider{ background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before{ background: var(--accent-contrast); transform: translateX(18px); }
.toggle-switch:hover .toggle-slider{ border-color: var(--accent); }
.toggle-switch input:focus-visible + .toggle-slider{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

/* Storage */
.storage-bar-wrap{ margin: 10px 0; }
.storage-bar{ height: 8px; border-radius: 4px; background: var(--surface-solid); border: 1px solid var(--border); overflow: hidden; }
.storage-bar-fill{ height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.4s var(--ease); }
.storage-info{ display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }

/* Shortcuts */
.shortcut-item{
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border-light); gap: 12px;
}
.shortcut-item:last-child{ border-bottom: none; }
.shortcut-item .label{ font-size: 12.5px; color: var(--text-dim); }
.shortcut-item .keycombo{ display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.shortcut-item kbd{
  display: inline-flex; align-items: center; justify-content: center; padding: 2px 7px;
  border-radius: 4px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 11px; font-family: var(--font-mono); min-width: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Profile info */
.profile-info-list{ display: flex; flex-direction: column; gap: 2px; }
.profile-info-row{ display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.profile-info-row:last-child{ border-bottom: none; }
.profile-info-row .label{ font-size: 11.5px; font-weight: 600; color: var(--text-faint); min-width: 72px; }
.profile-info-row .value{ font-size: 13px; color: var(--text); }

/* Coming soon */
.coming-soon-card{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; text-align: center; }
.coming-soon-card svg{ width: 32px; height: 32px; color: var(--text-faint); margin-bottom: 10px; opacity: 0.5; }
.coming-soon-card h3{ font-size: 15px; margin-bottom: 4px; font-weight: 600; }
.coming-soon-card p{ font-size: 12px; color: var(--text-faint); max-width: 320px; }

/* About you grid */
.about-you-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.about-you-grid .field-full{ grid-column: 1 / -1; }
.about-you-grid .field{ margin-bottom: 0; }
.about-you-grid .field label{ display: block; font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 3px; }

/* Settings standalone page adjustments */
.settings-content .settings-card{ background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Family search modal */
.family-search-result{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; border:1px solid var(--border-light); margin-bottom:4px; }
.family-search-result .name{ font-size:13px; font-weight:500; flex:1; }
.family-search-result .email{ font-size:11px; color:var(--text-faint); }
.family-search-empty{ text-align:center; padding:16px; font-size:12px; color:var(--text-faint); }

/* Delete account modal */
#delete-account-modal .field{ margin-bottom:8px; }
#delete-account-modal label{ font-size:12px; color:var(--text-faint); margin-bottom:3px; display:block; }

/* About-you grid for age/gender */
.about-you-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.about-you-grid .field{ margin-bottom:0; }
.about-you-grid .field-full{ grid-column:1/-1; }

/* Storage bar fix */
.storage-bar-wrap{ margin:6px 0; }
.storage-bar{ height:8px; background:var(--border-light); border-radius:4px; overflow:hidden; }
.storage-bar-fill{ height:100%; background:var(--accent); border-radius:4px; transition:width 0.4s ease; }
.storage-info{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-faint); margin-top:4px; }

/* Save/discard modal */
#save-discard-modal .modal{ max-width:400px; }

@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes fadeInUp{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown{ from{ opacity: 0; transform: translateY(-10px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft{ from{ opacity: 0; transform: translateX(-20px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes slideInRight{ from{ opacity: 0; transform: translateX(20px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes scaleIn{ from{ opacity: 0; transform: scale(0.95); } to{ opacity: 1; transform: scale(1); } }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.5; } }
@keyframes bounce{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }

.fade-in{ animation: fadeIn 0.3s var(--ease); }
.fade-in-up{ animation: fadeInUp 0.3s var(--ease); }
.scale-in{ animation: scaleIn 0.2s var(--ease); }

@media (max-width: 900px){
  .sidebar{ position: fixed; left: 0; top: 0; bottom: 0; width: 280px !important; transform: translateX(-100%); z-index: 100; }
  .sidebar.mobile-open{ transform: translateX(0); }
  .sidebar.collapsed{ width: 280px !important; }
  .sidebar.collapsed .wordmark, .sidebar.collapsed .label-text,
  .sidebar.collapsed .nav-group-title, .sidebar.collapsed .user-chip .who{ display: block; }
  .sidebar-scrim{ display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 90; opacity: 0; pointer-events: none; }
  .sidebar-scrim.show{ opacity: 1; pointer-events: all; }
  .suggestion-grid{ grid-template-columns: 1fr; }
  .composer-wrap{ padding: 4px 10px 8px; }
  .chat-inner{ padding: 0 10px; }
  .page-header, .page-content{ padding-left: 14px; padding-right: 14px; }
  .msg-row{ margin: 0 -6px; padding: 6px 6px 12px; }
  .msg-row.user-rtl .msg-body{ max-width: 85%; }
  .topbar{ padding: 0 10px; }
  #mobile-menu-btn{ display: flex !important; }
  .settings-modal{ width: calc(100vw - 24px); height: 90vh; max-height: 90vh; }
  .settings-modal-body{ flex-direction: column; }
  .settings-nav-panel{ width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: flex; overflow-x: auto; overflow-y: hidden; padding: 6px; gap: 2px; flex-shrink: 0; max-height: none; }
  .settings-nav-panel .nav-group-title{ display: none; }
  .settings-nav-panel .nav-item{ white-space: nowrap; padding: 6px 12px; font-size: 12px; border-radius: 6px; flex-shrink: 0; }
  .settings-nav-panel .nav-item.active::before{ display: none; }
  .settings-nav-panel .nav-item svg{ display: none; }
  .settings-content{ padding: 14px 16px; }
  .setting-item{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .setting-select{ min-width: 100%; }
  .setting-sliders{ flex-wrap: wrap; }
  .theme-gallery{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

@media (max-width: 600px){
  .topbar{ height: 44px; }
  .model-picker{ font-size: 12px; gap: 6px; padding: 5px 6px; }
  .icon-btn{ width: 30px; height: 30px; }
  .chat-inner{ padding: 0 6px; }
  .chat-inner .msg-row{ max-width: 100%; }
  .msg-avatar{ width: 24px; height: 24px; font-size: 10px; }
  .msg-content{ font-size: 13px; }
  .msg-content pre code{ font-size: 11.5px; }
  .composer{ padding: 5px 5px 5px 12px; border-radius: 18px; }
  #composer-input{ font-size: 13px; padding: 4px 6px 4px 0; }
  .send-btn{ width: 30px; height: 30px; }
  .send-btn svg{ width: 14px; height: 14px; }
  .composer-attach-btn{ width: 28px; height: 28px; }
  .composer-hint{ font-size: 9.5px; }
  .app-footer{ font-size: 9px; }
  .empty-state h1{ font-size: 18px; }
  .empty-state p{ font-size: 12px; }
  .suggestion-card{ padding: 10px 12px; }
  .suggestion-card .t{ font-size: 12px; }
  .suggestion-card .s{ font-size: 10.5px; }
  .modal{ padding: 16px; border-radius: 14px; }
  .modal-header h3{ font-size: 15px; }
  .feedback-reasons{ grid-template-columns: 1fr; }
  .settings-modal{ border-radius: 12px; }
  .settings-modal-header{ padding: 10px 16px; }
  .settings-modal-header h2{ font-size: 14px; }
  .settings-nav-panel{ padding: 4px; }
  .settings-nav-panel .nav-item{ padding: 5px 10px; font-size: 11px; }
  .settings-content{ padding: 12px 14px; }
  .settings-card{ padding: 12px 14px; border-radius: 10px; }
  .setting-title{ font-size: 12.5px; }
  .setting-desc{ font-size: 10.5px; }
  .theme-gallery{ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
  .theme-card-preview{ height: 54px; }
  .theme-preview-window{ width: 44px; height: 34px; }
  .theme-card-name{ font-size: 10.5px; padding: 5px 6px 2px; }
}

@media (max-width: 480px){
  .suggestion-grid{ grid-template-columns: 1fr; }
  .auth-card{ padding: 24px 18px; }
  .model-picker-menu{ min-width: 260px; max-width: calc(100vw - 32px); left: -20px; }
  .msg-row.user-rtl .msg-body{ max-width: 90%; }
  .code-card pre{ padding: 16px 14px; font-size: 10.5px; }
  .md-code-block pre{ padding: 10px 12px; font-size: 11px; }
  .md-code-block .md-code-head{ height: 32px; padding: 0 8px; }
  .md-code-block .md-code-lang{ font-size: 10px; }
  .settings-nav-panel .nav-item svg{ display: none; }
  .setting-sliders .slider-btn{ padding: 4px 8px; font-size: 10.5px; }
  .setting-swatches .accent-swatch{ width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* === Memory UI === */
.memory-header-row{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.memory-header-info{ flex: 1; min-width: 0; }
.memory-header-actions{ display: flex; gap: 6px; flex-shrink: 0; }
.memory-stat-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.memory-stat-chip{
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: 11.5px; color: var(--text-faint);
}
.memory-stat-value{ font-weight: 700; font-size: 13px; color: var(--text); }

.memory-toolbar{ display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.memory-toolbar .input{ flex: 1; min-width: 0; }
.memory-toolbar .setting-select{ min-width: 150px; }

.memory-card{
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  margin-bottom: 8px; transition: border-color 0.15s, background 0.15s;
}
.memory-card:hover{ border-color: var(--accent); background: var(--surface-hover); }
.memory-card-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.memory-category{
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); font-weight: 700;
}
.memory-key{ font-size: 13.5px; font-weight: 700; color: var(--text); word-break: break-word; }
.memory-value{ font-size: 12.5px; color: var(--text-dim); line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.memory-meta{ font-size: 10.5px; color: var(--text-faint); }
.memory-actions{ display: flex; gap: 6px; margin-top: 2px; }
.memory-actions .btn[disabled]{ opacity: 0.45; cursor: default; }

.memory-importance{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
}
.memory-importance::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.memory-importance.critical{ color: var(--success); }
.memory-importance.high{ color: #3C78FF; }
.memory-importance.medium{ color: var(--warning); }
.memory-importance.low{ color: #9CA3AF; }

.memory-pagination{ display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.memory-page-info{ font-size: 11.5px; color: var(--text-faint); }
.memory-empty{ text-align: center; padding: 24px 12px; font-size: 13px; color: var(--text-dim); }
.memory-empty-hint{ text-align: center; padding: 0 12px 16px; font-size: 11.5px; color: var(--text-faint); }

.memory-profile-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.memory-profile-item{ display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border-light); }
.memory-profile-label{
  flex-shrink: 0; min-width: 110px; font-size: 11px; font-weight: 600;
  color: var(--text-faint); text-transform: capitalize;
}
.memory-profile-value{ font-size: 12.5px; color: var(--text); word-break: break-word; }

.memory-summary-card{
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 8px;
}
.memory-summary-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.memory-summary-title{ font-size: 12.5px; font-weight: 600; color: var(--text); word-break: break-word; }
.memory-summary-meta{ font-size: 10.5px; color: var(--text-faint); margin: 3px 0 5px; }
.memory-summary-text{
  font-size: 12px; color: var(--text-dim); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}

.danger-text{ color: var(--danger); }
.danger-text:hover{ color: var(--danger); border-color: var(--danger); }

/* === Cursor styles === */
[data-cursor="pointer"] *{ cursor: pointer; }
[data-cursor="crosshair"] *{ cursor: crosshair; }
[data-cursor="cell"] *{ cursor: cell; }
[data-cursor="text"] *{ cursor: text; }
[data-cursor="wait"] *{ cursor: wait; }
[data-cursor="grab"] *{ cursor: grab; }
[data-cursor="zoom-in"] *{ cursor: zoom-in; }
[data-cursor="not-allowed"] *{ cursor: not-allowed; }

/* === Input style variants === */
[data-input="pill"] .composer{ border-radius: 999px; }
[data-input="sharp"] .composer{ border-radius: 4px; }
[data-input="boxy"] .composer{ border-radius: 8px; }
[data-input="minimal"] .composer{ background: transparent; border-color: transparent; box-shadow: none; }
[data-input="minimal"] .composer:focus-within, [data-input="minimal"] .composer:hover{ border-color: var(--border); }
[data-input="underline"] .composer{ border-radius: 10px 10px 0 0; border-bottom: 2px solid var(--accent); }
[data-input="outline"] .composer{ background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
[data-input="soft"] .composer{ background: var(--surface-hover); }
[data-input="elegant"] .composer{ border-radius: 14px; border-width: 1.5px; box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 8%, transparent); }
[data-input="bold"] .composer{ border-color: var(--accent); border-width: 2px; }

/* === Theme gallery === */
.theme-gallery{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.theme-card{
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface); display: flex;
  flex-direction: column; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.theme-card:hover{ border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.theme-card.active{ border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.theme-card-preview{ height: 66px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; position: relative; }
.theme-preview-window{
  width: 52px; height: 40px; border-radius: 6px; border: 1px solid;
  display: flex; flex-direction: column; gap: 3px; padding: 5px;
}
.theme-preview-dot{ width: 7px; height: 7px; border-radius: 50%; }
.theme-preview-bar{ height: 4px; border-radius: 2px; }
.theme-preview-accent{ position: absolute; right: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; }
.theme-card-name{ padding: 7px 8px 2px; font-size: 11.5px; font-weight: 600; color: var(--text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-card .theme-apply-btn{ margin: 4px 8px 8px; justify-content: center; }

/* === Custom theme builder === */
.custom-theme-builder{ }
.color-input{
  width: 100%; height: 34px; padding: 2px; border: 1px solid var(--border);
  border-radius: var(--radius-xs); background: var(--surface-solid); cursor: pointer;
}
.color-input:hover{ border-color: var(--accent); }
.custom-themes-list{ display: flex; flex-direction: column; gap: 6px; }
.custom-theme-row{
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.custom-theme-row:hover{ border-color: var(--accent); }
.custom-theme-row.active{ border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.custom-theme-chip{
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.custom-theme-chip i{ width: 10px; height: 10px; border-radius: 50%; }
.custom-theme-name{ font-size: 12.5px; font-weight: 600; color: var(--text); }
.theme-live-preview{
  width: 52px; height: 34px; border-radius: 8px; border: 2px solid;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s; flex-shrink: 0;
}
.theme-live-accent{ width: 12px; height: 12px; border-radius: 50%; }
.theme-live-bar{ width: 16px; height: 6px; border-radius: 3px; }
.theme-live-text{ font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* === Sessions === */
.sessions-list{ display: flex; flex-direction: column; gap: 6px; }
.session-row{
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.session-row.current{ border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.session-icon{
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-hover); color: var(--text-faint);
}
.session-info{ flex: 1; min-width: 0; }
.session-name{ font-size: 12.5px; font-weight: 600; color: var(--text); }
.session-meta{ font-size: 11px; color: var(--text-faint); margin-top: 1px; line-height: 1.4; }
.session-current{
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 999px; color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
}

/* === Avatar edit === */
.avatar-edit-row{ display: flex; align-items: center; gap: 14px; }
.avatar-preview{
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--surface-hover); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar-preview img{ width: 100%; height: 100%; object-fit: cover; }
.avatar-preview .avatar-initials{
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--text);
}
.avatar-edit-actions{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* === RTL === */
[dir="rtl"] .settings-nav-panel .nav-item.active::before{ left: auto; right: 0; border-radius: 3px 0 0 3px; }
[dir="rtl"] .theme-card-preview{ direction: ltr; }
[dir="rtl"] .session-row{ direction: ltr; text-align: left; }
[dir="rtl"] .avatar-edit-row{ direction: rtl; }


/* ===== VERTEX provider picker / provider settings (chat page) ===== */
.model-picker-wrap{position:relative;}
.model-picker-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;max-width:360px;padding:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);z-index:120;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .16s ease,transform .16s ease;}
.model-picker-menu.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.model-picker-heading{padding:8px 10px 10px;font-size:13px;font-weight:700;color:var(--text);display:flex;justify-content:space-between;gap:12px;}
.model-picker-heading span{color:var(--text-faint);font-size:10px;font-weight:500;}
.model-picker-subtitle{padding:7px 10px 5px;color:var(--text-faint);font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.model-picker-item{width:100%;appearance:none;border:1px solid transparent;background:transparent;color:var(--text);padding:10px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer;font:inherit;}
.model-picker-item:hover,.model-picker-item.active{background:var(--surface-hover);border-color:var(--border);}
.model-picker-item span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.model-picker-item b{font-size:13px;}
.model-picker-item small{color:var(--text-faint);font-size:11px;}
.model-picker-check{color:var(--accent);font-size:13px;}
.model-picker-provider-actions{display:flex;align-items:center;gap:6px;}
.model-picker-add{width:100%;margin-top:6px;appearance:none;border:1px dashed var(--border);background:transparent;color:var(--text-dim);border-radius:9px;padding:9px 10px;cursor:pointer;text-align:left;font:600 12px/1.2 inherit;}
.model-picker-add:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong,var(--border));}

/* Provider controls in the in-page Settings modal */
#tab-provider-keys .provider-keys-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;}
#tab-provider-keys .provider-keys-add-btn{appearance:none;border:1px solid var(--border);background:var(--surface-solid,var(--surface));color:var(--text);}
#tab-provider-keys .provider-keys-add-btn:hover{border-color:var(--accent);background:var(--surface-hover);}
#tab-provider-keys .provider-row-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
#tab-provider-keys .provider-row-actions .btn{min-height:32px;}
#tab-provider-keys .provider-prompt-btn{border-color:color-mix(in srgb, var(--accent) 45%, var(--border));}
#tab-provider-keys .provider-prompt-btn:hover{background:color-mix(in srgb, var(--accent) 10%, transparent);}
#tab-provider-keys .provider-settings-select{appearance:auto;min-width:220px;}
#tab-provider-keys .provider-prompt-panel{display:none;margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
#tab-provider-keys .provider-prompt-panel.open{display:block;}
.provider-prompt-panel{display:none;margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
.provider-prompt-panel.open{display:block;}
.provider-prompt-toggle{appearance:none;border:1px dashed var(--border);background:transparent;color:var(--text-dim);border-radius:9px;padding:8px 10px;cursor:pointer;font:600 12px/1.2 inherit;}
.provider-prompt-toggle:hover{background:var(--surface-hover);color:var(--text);}

/* Shared User Provider modal: hidden until explicitly opened. It must sit above the in-page Settings modal. */
#provider-key-modal{display:none !important;z-index:10050;}
#provider-key-modal.open{display:flex !important;}

/* User-provider editors opened from the Settings modal must be topmost and interactive. */
.provider-settings-overlay { z-index: 11000 !important; pointer-events: auto !important; }
.provider-key-modal-overlay { z-index: 11000 !important; pointer-events: auto !important; }
.provider-settings-overlay .modal, .provider-key-modal-overlay .modal { pointer-events: auto !important; }

/* === Theme-colored code blocks (follow the active theme accent) === */
.md-code-block{
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)) !important;
  border-radius: 14px; box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 10%, transparent);
}
.md-code-block .md-code-head{
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
}
.md-code-block .md-code-lang{ color: var(--accent); }
.md-code-block pre code .vx-tok-plain{ color: var(--text) !important; }

/* Dark mode code/note blocks */
html[data-mode="dark"] .md-code-block,
html[data-mode="dark"] .md-note-block{
  background: color-mix(in srgb, var(--accent) 7%, #14151a) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, #2a2b33) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
html[data-mode="dark"] .md-code-block .md-code-head,
html[data-mode="dark"] .md-note-block .md-code-head{
  background: color-mix(in srgb, var(--accent) 5%, #101118) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 16%, #2a2b33) !important;
}
html[data-mode="dark"] .md-code-block pre,
html[data-mode="dark"] .md-note-body{ background: transparent !important; }

/* Light mode code/note blocks */
html[data-mode="light"] .md-code-block,
html[data-mode="light"] .md-note-block{
  background: color-mix(in srgb, var(--accent) 5%, #fafbfc) !important;
  border-color: color-mix(in srgb, var(--accent) 20%, #dfe2e8) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
html[data-mode="light"] .md-code-block .md-code-head,
html[data-mode="light"] .md-note-block .md-code-head{
  background: color-mix(in srgb, var(--accent) 4%, #f4f5f7) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 14%, #dfe2e8) !important;
}

/* === Note block: modern card with line numbers === */
.md-note-block{
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 12px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  font-family: var(--font-mono, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace);
}
.md-note-block .md-code-head{
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-bottom: 1px solid var(--border);
}
.md-note-block .md-code-lang{
  color: var(--accent); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
}
.md-note-block .code-copy{ margin-left: auto; opacity: 0.5; transition: opacity .15s; }
.md-note-block:hover .code-copy{ opacity: 1; }
.md-note-body{
  max-height: 420px; overflow: auto; padding: 12px 0;
  font-size: 13px; line-height: 1.8;
  counter-reset: noteline;
}
.md-note-line{
  display: block; padding: 0 16px 0 0;
  white-space: pre-wrap; word-break: break-word;
  color: var(--text);
}
.md-note-lno{
  display: inline-block; min-width: 40px; padding: 0 14px 0 0;
  text-align: right; color: var(--text-faint); user-select: none;
  border-right: 1px solid var(--border);
  margin-right: 14px; font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
/* Dark mode note block */
html[data-mode="dark"] .md-note-block{
  background: #1a1b26;
  border-color: #2a2b33;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
html[data-mode="dark"] .md-note-block .md-code-head{
  background: #16161e;
  border-bottom-color: #2a2b33;
}
/* Light mode note block */
html[data-mode="light"] .md-note-block{
  background: #f8f9fa;
  border-color: #e0e0e0;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}
html[data-mode="light"] .md-note-block .md-code-head{
  background: #f0f1f3;
  border-bottom-color: #e0e0e0;
}

/* === Modern suggestion chips (projects & web searches) === */
.suggestion-chips{margin:12px 2px 2px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));display:grid;gap:9px}
.suggestion-label{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--accent);text-transform:uppercase}
.suggestion-spark{font-size:12px;color:var(--accent)}
.suggestion-row{display:flex;flex-direction:column;gap:8px}
.suggestion-chip{appearance:none;display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:10px 14px;font-size:12.5px;font-weight:600;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:transform .12s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;text-align:left;width:100%}
.suggestion-chip:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));transform:translateY(-1px);box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 18%,transparent)}
.suggestion-arrow{font-size:13px;color:var(--accent);opacity:.85;flex-shrink:0}

/* === Real-time clock card (legacy rich cards) === */
.rich-time .time-card-body{display:grid;gap:4px;padding:4px 2px 8px}
.time-card-time{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--text)));-webkit-background-clip:text;background-clip:text;color:transparent}
.time-card-date{font-size:13px;font-weight:650;color:var(--text)}
.time-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.time-card-meta span{font-size:10.5px;font-weight:600;color:var(--text-dim);border:1px solid var(--border);border-radius:99px;padding:3px 9px;background:var(--bg-elevated)}

/* === YouTube: 1 featured + link cards === */
.vx-video-featured{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--surface);margin-bottom:10px}
.vx-video-featured-thumb{position:relative;width:100%;padding-top:56.25%;overflow:hidden}
.vx-video-featured-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-video-featured-thumb .vx-play-btn{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.45);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(2px)}
.vx-video-featured-thumb .vx-play-btn:hover{background:rgba(0,0,0,.7)}
.vx-video-featured-thumb .vx-duration{position:absolute;bottom:6px;right:6px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.75);font-size:11px;font-weight:600;color:#fff}
.vx-video-featured-info{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.vx-video-featured-info .vx-source-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.35}
.vx-video-featured-info .vx-channel-name,.vx-video-featured-info .vx-view-count{font-size:11px;color:var(--text-faint)}
.vx-video-featured-info .vx-open-link{font-size:11.5px;font-weight:600;color:var(--accent);text-decoration:none;margin-top:2px}
.vx-video-featured-info .vx-open-link:hover{text-decoration:underline}
.vx-video-links{display:grid;gap:6px}
.vx-video-link-card{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--text);transition:border-color .15s,transform .12s}
.vx-video-link-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.vx-video-link-title{font-size:12.5px;font-weight:650;line-height:1.35}
.vx-video-link-channel{font-size:10.5px;color:var(--text-faint)}
[data-theme="crimson"][data-mode="dark"]{
  --bg: #0C0A0A; --bg-elevated: #1A0F0F; --surface: rgba(220,38,38,0.06); --surface-solid: #1E1214;
  --surface-hover: rgba(220,38,38,0.10); --border: rgba(220,38,38,0.12); --border-light: rgba(220,38,38,0.06);
  --text: #F5F0F0; --text-dim: #B0A0A0; --text-faint: #807070;
  --accent: #DC2626; --accent-2: #B91C1C; --accent-contrast: #FFFFFF;
}
[data-theme="crimson"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #FFF5F5; --surface: rgba(220,38,38,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(220,38,38,0.08); --border: rgba(220,38,38,0.10); --border-light: rgba(220,38,38,0.05);
  --text: #1A0A0A; --text-dim: #7A4040; --text-faint: #A06060;
  --accent: #DC2626; --accent-2: #B91C1C; --accent-contrast: #FFFFFF;
}
[data-theme="cyan"][data-mode="dark"]{
  --bg: #060D0F; --bg-elevated: #0C1A1E; --surface: rgba(0,200,230,0.05); --surface-solid: #0E1E22;
  --surface-hover: rgba(0,200,230,0.09); --border: rgba(0,200,230,0.10); --border-light: rgba(0,200,230,0.05);
  --text: #E8F4F6; --text-dim: #7AB0BC; --text-faint: #508894;
  --accent: #00C8E6; --accent-2: #00A0B8; --accent-contrast: #000000;
}
[data-theme="cyan"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F0FAFB; --surface: rgba(0,200,230,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(0,200,230,0.07); --border: rgba(0,200,230,0.10); --border-light: rgba(0,200,230,0.05);
  --text: #0A1A1E; --text-dim: #3A8A9A; --text-faint: #60A8B4;
  --accent: #0891B2; --accent-2: #0E7490; --accent-contrast: #FFFFFF;
}
[data-theme="emerald"][data-mode="dark"]{
  --bg: #070D0A; --bg-elevated: #0E1A14; --surface: rgba(16,185,129,0.06); --surface-solid: #101E18;
  --surface-hover: rgba(16,185,129,0.10); --border: rgba(16,185,129,0.12); --border-light: rgba(16,185,129,0.06);
  --text: #EAF5EE; --text-dim: #7AB89C; --text-faint: #509070;
  --accent: #10B981; --accent-2: #059669; --accent-contrast: #000000;
}
[data-theme="emerald"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F0FBF5; --surface: rgba(16,185,129,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(16,185,129,0.07); --border: rgba(16,185,129,0.10); --border-light: rgba(16,185,129,0.05);
  --text: #0A1A10; --text-dim: #3A8A60; --text-faint: #60A880;
  --accent: #059669; --accent-2: #047857; --accent-contrast: #FFFFFF;
}
[data-theme="frost"][data-mode="dark"]{
  --bg: #080C10; --bg-elevated: #10161E; --surface: rgba(140,180,220,0.05); --surface-solid: #141C24;
  --surface-hover: rgba(140,180,220,0.09); --border: rgba(140,180,220,0.10); --border-light: rgba(140,180,220,0.05);
  --text: #E4ECF2; --text-dim: #8AA4B8; --text-faint: #6080A0;
  --accent: #8CB4DC; --accent-2: #6A9AC8; --accent-contrast: #000000;
}
[data-theme="frost"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F2F6FA; --surface: rgba(140,180,220,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(140,180,220,0.07); --border: rgba(140,180,220,0.10); --border-light: rgba(140,180,220,0.05);
  --text: #0C1A28; --text-dim: #4A7A9A; --text-faint: #70A0C0;
  --accent: #6A9AC8; --accent-2: #4A80B4; --accent-contrast: #FFFFFF;
}
[data-theme="graphite"][data-mode="dark"]{
  --bg: #0A0A0A; --bg-elevated: #141414; --surface: rgba(180,180,180,0.05); --surface-solid: #1A1A1A;
  --surface-hover: rgba(180,180,180,0.08); --border: rgba(180,180,180,0.10); --border-light: rgba(180,180,180,0.05);
  --text: #E8E8E8; --text-dim: #999999; --text-faint: #6A6A6A;
  --accent: #A0A0A0; --accent-2: #808080; --accent-contrast: #000000;
}
[data-theme="graphite"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F5F5F5; --surface: rgba(0,0,0,0.03); --surface-solid: #FFFFFF;
  --surface-hover: rgba(0,0,0,0.05); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1A1A1A; --text-dim: #5A5A5A; --text-faint: #8A8A8A;
  --accent: #5A5A5A; --accent-2: #3A3A3A; --accent-contrast: #FFFFFF;
}
[data-theme="neon"][data-mode="dark"]{
  --bg: #08040C; --bg-elevated: #12081A; --surface: rgba(200,50,255,0.06); --surface-solid: #160A1E;
  --surface-hover: rgba(200,50,255,0.10); --border: rgba(200,50,255,0.12); --border-light: rgba(200,50,255,0.06);
  --text: #F4E8FA; --text-dim: #B080C8; --text-faint: #8050A0;
  --accent: #C832FF; --accent-2: #A020D8; --accent-contrast: #000000;
}
[data-theme="neon"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #FBF0FF; --surface: rgba(200,50,255,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(200,50,255,0.07); --border: rgba(200,50,255,0.10); --border-light: rgba(200,50,255,0.05);
  --text: #1A0A28; --text-dim: #7A40A0; --text-faint: #A060C0;
  --accent: #A020D8; --accent-2: #8018B0; --accent-contrast: #FFFFFF;
}
[data-theme="obsidian"][data-mode="dark"]{
  --bg: #080808; --bg-elevated: #111111; --surface: rgba(255,255,255,0.04); --surface-solid: #1A1A1A;
  --surface-hover: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.04);
  --text: #E0E0E0; --text-dim: #909090; --text-faint: #606060;
  --accent: #C0A060; --accent-2: #A08840; --accent-contrast: #000000;
}
[data-theme="obsidian"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F8F6F0; --surface: rgba(0,0,0,0.03); --surface-solid: #FFFFFF;
  --surface-hover: rgba(0,0,0,0.05); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.04);
  --text: #1A1A10; --text-dim: #6A6040; --text-faint: #908060;
  --accent: #8A7030; --accent-2: #6A5420; --accent-contrast: #FFFFFF;
}
[data-theme="ocean"][data-mode="dark"]{
  --bg: #060A0E; --bg-elevated: #0C141C; --surface: rgba(56,140,220,0.06); --surface-solid: #0E1822;
  --surface-hover: rgba(56,140,220,0.10); --border: rgba(56,140,220,0.12); --border-light: rgba(56,140,220,0.06);
  --text: #E0F0FA; --text-dim: #70A4CC; --text-faint: #4880AA;
  --accent: #388CDC; --accent-2: #2070C0; --accent-contrast: #000000;
}
[data-theme="ocean"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F0F6FA; --surface: rgba(56,140,220,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(56,140,220,0.07); --border: rgba(56,140,220,0.10); --border-light: rgba(56,140,220,0.05);
  --text: #0A1A28; --text-dim: #3A7AAA; --text-faint: #60A0CC;
  --accent: #2070C0; --accent-2: #1858A0; --accent-contrast: #FFFFFF;
}
[data-theme="sakura"][data-mode="dark"]{
  --bg: #0C080A; --bg-elevated: #1A1016; --surface: rgba(240,130,170,0.06); --surface-solid: #1E1418;
  --surface-hover: rgba(240,130,170,0.10); --border: rgba(240,130,170,0.12); --border-light: rgba(240,130,170,0.06);
  --text: #F8ECF0; --text-dim: #C890A4; --text-faint: #986078;
  --accent: #F082AA; --accent-2: #D86090; --accent-contrast: #000000;
}
[data-theme="sakura"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #FFF4F8; --surface: rgba(240,130,170,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(240,130,170,0.07); --border: rgba(240,130,170,0.10); --border-light: rgba(240,130,170,0.05);
  --text: #2A0A18; --text-dim: #A05070; --text-faint: #C87090;
  --accent: #D86090; --accent-2: #C04878; --accent-contrast: #FFFFFF;
}
[data-theme="shelby"][data-mode="dark"]{
  --bg: #08080C; --bg-elevated: #101018; --surface: rgba(99,102,241,0.06); --surface-solid: #14141E;
  --surface-hover: rgba(99,102,241,0.10); --border: rgba(99,102,241,0.12); --border-light: rgba(99,102,241,0.06);
  --text: #EDEDF4; --text-dim: #9494C8; --text-faint: #6868A0;
  --accent: #6366F1; --accent-2: #4F46E5; --accent-contrast: #FFFFFF;
}
[data-theme="shelby"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F4F4FC; --surface: rgba(99,102,241,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(99,102,241,0.07); --border: rgba(99,102,241,0.10); --border-light: rgba(99,102,241,0.05);
  --text: #10102A; --text-dim: #4A4A9A; --text-faint: #7070B8;
  --accent: #4F46E5; --accent-2: #4338CA; --accent-contrast: #FFFFFF;
}
[data-theme="sunset"][data-mode="dark"]{
  --bg: #0C0806; --bg-elevated: #1A100C; --surface: rgba(250,140,50,0.06); --surface-solid: #1E160E;
  --surface-hover: rgba(250,140,50,0.10); --border: rgba(250,140,50,0.12); --border-light: rgba(250,140,50,0.06);
  --text: #F8F0E4; --text-dim: #C8A470; --text-faint: #987848;
  --accent: #FA8C32; --accent-2: #E07020; --accent-contrast: #000000;
}
[data-theme="sunset"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #FFF8F0; --surface: rgba(250,140,50,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(250,140,50,0.07); --border: rgba(250,140,50,0.10); --border-light: rgba(250,140,50,0.05);
  --text: #2A1808; --text-dim: #A07030; --text-faint: #C89850;
  --accent: #E07020; --accent-2: #C05818; --accent-contrast: #FFFFFF;
}
[data-theme="techno"][data-mode="dark"]{
  --bg: #06080C; --bg-elevated: #0E1218; --surface: rgba(0,200,160,0.06); --surface-solid: #10161C;
  --surface-hover: rgba(0,200,160,0.10); --border: rgba(0,200,160,0.12); --border-light: rgba(0,200,160,0.06);
  --text: #E4F4EE; --text-dim: #70B8A0; --text-faint: #489078;
  --accent: #00C8A0; --accent-2: #00A880; --accent-contrast: #000000;
}
[data-theme="techno"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F0FAF6; --surface: rgba(0,200,160,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(0,200,160,0.07); --border: rgba(0,200,160,0.10); --border-light: rgba(0,200,160,0.05);
  --text: #0A1A14; --text-dim: #3A8A70; --text-faint: #60B090;
  --accent: #00A880; --accent-2: #008868; --accent-contrast: #FFFFFF;
}
[data-theme="terminal"][data-mode="dark"]{
  --bg: #0A0A08; --bg-elevated: #141410; --surface: rgba(50,220,80,0.05); --surface-solid: #181814;
  --surface-hover: rgba(50,220,80,0.09); --border: rgba(50,220,80,0.10); --border-light: rgba(50,220,80,0.05);
  --text: #E0F0E0; --text-dim: #80B888; --text-faint: #509060;
  --accent: #32DC50; --accent-2: #28C040; --accent-contrast: #000000;
}
[data-theme="terminal"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F2FAF4; --surface: rgba(50,220,80,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(50,220,80,0.07); --border: rgba(50,220,80,0.10); --border-light: rgba(50,220,80,0.05);
  --text: #0A1A0E; --text-dim: #3A8A4A; --text-faint: #60A870;
  --accent: #28C040; --accent-2: #20A838; --accent-contrast: #FFFFFF;
}
[data-theme="vertex"][data-mode="dark"]{
  --bg: #08080C; --bg-elevated: #101018; --surface: rgba(120,100,255,0.06); --surface-solid: #14141E;
  --surface-hover: rgba(120,100,255,0.10); --border: rgba(120,100,255,0.12); --border-light: rgba(120,100,255,0.06);
  --text: #EDEDF6; --text-dim: #9890D0; --text-faint: #7068A8;
  --accent: #7864FF; --accent-2: #6050E0; --accent-contrast: #FFFFFF;
}
[data-theme="vertex"][data-mode="light"]{
  --bg: #FFFFFF; --bg-elevated: #F4F2FC; --surface: rgba(120,100,255,0.04); --surface-solid: #FFFFFF;
  --surface-hover: rgba(120,100,255,0.07); --border: rgba(120,100,255,0.10); --border-light: rgba(120,100,255,0.05);
  --text: #10102A; --text-dim: #5A4AAA; --text-faint: #8070C8;
  --accent: #6050E0; --accent-2: #4A3CC0; --accent-contrast: #FFFFFF;
}

/* ============ Responsive refinements (tablet + mobile) ============ */
@media (max-width: 900px){
  .model-picker-menu{ max-width: calc(100vw - 16px); }
  .settings-modal{ width: 100%; max-width: 100vw; }
}

@media (max-width: 700px){
  .settings-modal{
    width: 100%; max-width: 100vw; height: 100%; max-height: 100vh;
    border-radius: 0; border: none;
  }
  .settings-modal-body{ flex-direction: column; }
  .settings-nav-panel{
    width: 100%; flex-shrink: 0; flex-direction: row; align-items: center;
    overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border);
    display: flex; padding: 6px;
  }
  .settings-nav-panel .nav-group-title{ display: none; }
  .settings-nav-panel .nav-item{ white-space: nowrap; margin-bottom: 0; flex-shrink: 0; }
  .settings-nav-panel .nav-item.active::before{ display: none; }
  .settings-modal-body .settings-content{ overflow-y: auto; }
}

@media (max-width: 640px){
  .topbar{ padding: 0 6px; }
  .model-picker{ gap: 5px; padding: 5px 6px; font-size: 12px; }
  .model-picker #model-picker-label{
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar-actions{ gap: 0; }
  .composer-wrap{ padding: 4px 6px 6px; }
  .composer{ padding: 5px 5px 5px 10px; border-radius: 18px; }
  #composer-input{ font-size: 13.5px; }
  .composer-hint{ font-size: 9.5px; letter-spacing: 0; }
  .chat-inner{ padding: 0 6px; }
  .msg-row{ gap: 8px; }
  .msg-avatar{ width: 24px; height: 24px; }
  .msg-content{ font-size: 13.5px; }
  .msg-content table{ display: block; overflow-x: auto; }
  #scroll-bottom-btn{ right: 12px; bottom: 150px; }
  .sidebar{ width: 92vw; max-width: 320px; }
  .empty-state{ padding: 24px 12px; }
  .empty-state h1{ font-size: 19px; }
  .suggestion-card{ padding: 11px 12px; }
  .feedback-reasons{ grid-template-columns: 1fr; }
  .modal{ padding: 16px; }
  .page-content, .model-grid{ padding-left: 14px; padding-right: 14px; }
  #view-prompts .page-content > div:first-child{ flex-wrap: wrap; }
  #view-prompts .page-content > div:first-child .input{ flex: 1 1 100%; }
  #toast-container{ right: 8px; left: 8px; align-items: stretch; }
  .toast-compact{ max-width: none; }
}

@media (max-width: 480px){
  .setting-item{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .setting-control, .setting-sliders{ width: 100%; }
  .setting-sliders{ flex-wrap: wrap; }
  .setting-sliders .slider-btn{ flex: 1 1 auto; text-align: center; }
  .setting-select{ width: 100%; min-width: 0; }
  .setting-input{ width: 100%; }
  .setting-swatches{ justify-content: center; }
  .about-you-grid{ grid-template-columns: 1fr; }
  #tab-provider-keys .provider-keys-toolbar{ flex-direction: column; align-items: stretch; }
  #tab-provider-keys .provider-keys-toolbar .btn{ width: 100%; justify-content: center; }
  #tab-provider-keys .provider-settings-select{ width: 100%; min-width: 0; }
  #tab-provider-keys .provider-row-actions{ justify-content: flex-start; }
  .auth-card{ padding: 24px 16px; }
  .image-gen-grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .shortcut-item{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .profile-info-row{ flex-direction: column; align-items: flex-start; gap: 2px; }
}