:root {
  --radius-lg: 24px; 
  --radius-md: 18px; 
  --radius-sm: 12px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --scale: 1;
}

[data-theme="noir"] {
  --bg: #030305;
  --bg-elevated: #08080C;
  --surface: rgba(212, 175, 55, 0.04);
  --surface-solid: #0D0D14;
  --surface-hover: rgba(212, 175, 55, 0.09);
  --border: rgba(212, 175, 55, 0.12);
  --ink: #F5F5FA;
  --ink-soft: #A3A3B3;
  --ink-faint: #525263;
  --primary: #D4AF37;
  --primary-ink: #050508;
  --secondary: #AA7C11;
  --gradient: linear-gradient(135deg, #D4AF37, #AA7C11);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-md: 0 16px 42px rgba(0,0,0,0.65);
  --shadow-lg: 0 32px 84px rgba(0,0,0,0.85);
  --danger: #FF5E7E;
  --danger-soft: rgba(255, 94, 126, 0.12);
  --success: #3DDC97;
}

[data-theme="titanium"] {
  --bg: #090E17;
  --bg-elevated: #101622;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-solid: #151E2E;
  --surface-hover: rgba(255, 255, 255, 0.08);
  --border: rgba(56, 189, 248, 0.18);
  --ink: #F1F5F9;
  --ink-soft: #94A3B8;
  --ink-faint: #475569;
  --primary: #38BDF8;
  --primary-ink: #0B132B;
  --secondary: #818CF8;
  --gradient: linear-gradient(135deg, #38BDF8, #818CF8);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.3);
  --shadow-md: 0 16px 42px rgba(0,0,0,0.45);
  --shadow-lg: 0 32px 84px rgba(0,0,0,0.6);
  --danger: #F43F5E;
  --danger-soft: rgba(244, 63, 94, 0.12);
  --success: #10B981;
}

[data-theme="emerald"] {
  --bg: #040D08;
  --bg-elevated: #0A1C12;
  --surface: rgba(52, 211, 153, 0.04);
  --surface-solid: #102B1D;
  --surface-hover: rgba(52, 211, 153, 0.09);
  --border: rgba(52, 211, 153, 0.15);
  --ink: #ECFDF5;
  --ink-soft: #A7F3D0;
  --ink-faint: #064E3B;
  --primary: #10B981;
  --primary-ink: #022C16;
  --secondary: #059669;
  --gradient: linear-gradient(135deg, #10B981, #059669);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.4);
  --shadow-md: 0 16px 42px rgba(0,0,0,0.55);
  --shadow-lg: 0 32px 84px rgba(0,0,0,0.7);
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --success: #34D399;
}

[data-theme="royal"] {
  --bg: #0A0514;
  --bg-elevated: #120A24;
  --surface: rgba(139, 92, 246, 0.04);
  --surface-solid: #1B1133;
  --surface-hover: rgba(139, 92, 246, 0.09);
  --border: rgba(139, 92, 246, 0.18);
  --ink: #F5F3FF;
  --ink-soft: #C4B5FD;
  --ink-faint: #4C1D95;
  --primary: #8B5CF6;
  --primary-ink: #1E0045;
  --secondary: #D946EF;
  --gradient: linear-gradient(135deg, #8B5CF6, #D946EF);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-md: 0 16px 42px rgba(0,0,0,0.65);
  --shadow-lg: 0 32px 84px rgba(0,0,0,0.85);
  --danger: #FF4E74;
  --danger-soft: rgba(255, 78, 116, 0.12);
  --success: #10B981;
}

[data-theme="crimson"] {
  --bg: #120306;
  --bg-elevated: #1E070D;
  --surface: rgba(244, 63, 94, 0.04);
  --surface-solid: #2B0C15;
  --surface-hover: rgba(244, 63, 94, 0.09);
  --border: rgba(244, 63, 94, 0.18);
  --ink: #FFF1F2;
  --ink-soft: #FECDD3;
  --ink-faint: #4C0519;
  --primary: #E11D48;
  --primary-ink: #2C020B;
  --secondary: #FB7185;
  --gradient: linear-gradient(135deg, #E11D48, #FB7185);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-md: 0 16px 42px rgba(0,0,0,0.65);
  --shadow-lg: 0 32px 84px rgba(0,0,0,0.85);
  --danger: #F43F5E;
  --danger-soft: rgba(244, 63, 94, 0.12);
  --success: #34D399;
}

[data-theme="sunset"] {
  --bg: #120803; --bg-elevated: #1C0F07; --surface: rgba(249, 115, 22, 0.04); --surface-solid: #26150D; --surface-hover: rgba(249, 115, 22, 0.09); --border: rgba(249, 115, 22, 0.15); --ink: #FFF7ED; --ink-soft: #FFEDD5; --ink-faint: #7C2D12; --primary: #F97316; --primary-ink: #1C0F07; --secondary: #EA580C; --gradient: linear-gradient(135deg, #F97316, #EA580C); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="cyberpunk"] {
  --bg: #0C0312; --bg-elevated: #170924; --surface: rgba(236, 72, 153, 0.04); --surface-solid: #220F33; --surface-hover: rgba(236, 72, 153, 0.09); --border: rgba(236, 72, 153, 0.18); --ink: #FDF2F8; --ink-soft: #FBCFE8; --ink-faint: #831843; --primary: #EC4899; --primary-ink: #0C0312; --secondary: #06B6D4; --gradient: linear-gradient(135deg, #EC4899, #06B6D4); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #10B981;
}
[data-theme="deepocean"] {
  --bg: #020813; --bg-elevated: #061124; --surface: rgba(59, 130, 246, 0.04); --surface-solid: #0A1C36; --surface-hover: rgba(59, 130, 246, 0.09); --border: rgba(59, 130, 246, 0.15); --ink: #EFF6FF; --ink-soft: #DBEAFE; --ink-faint: #1E3A8A; --primary: #3B82F6; --primary-ink: #020813; --secondary: #2563EB; --gradient: linear-gradient(135deg, #3B82F6, #2563EB); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="sakurapink"] {
  --bg: #14050A; --bg-elevated: #240E16; --surface: rgba(244, 114, 182, 0.04); --surface-solid: #331520; --surface-hover: rgba(244, 114, 182, 0.09); --border: rgba(244, 114, 182, 0.15); --ink: #FDF2F8; --ink-soft: #FCE7F3; --ink-faint: #701A3E; --primary: #F472B6; --primary-ink: #14050A; --secondary: #FB7185; --gradient: linear-gradient(135deg, #F472B6, #FB7185); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="forestmoss"] {
  --bg: #050D06; --bg-elevated: #0F1F11; --surface: rgba(74, 222, 128, 0.04); --surface-solid: #19331C; --surface-hover: rgba(74, 222, 128, 0.09); --border: rgba(74, 222, 128, 0.15); --ink: #F0FDF4; --ink-soft: #DCFCE7; --ink-faint: #14532D; --primary: #4ADE80; --primary-ink: #050D06; --secondary: #16A34A; --gradient: linear-gradient(135deg, #4ADE80, #16A34A); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="lavenderdream"] {
  --bg: #090614; --bg-elevated: #150F26; --surface: rgba(167, 139, 250, 0.04); --surface-solid: #21193B; --surface-hover: rgba(167, 139, 250, 0.09); --border: rgba(167, 139, 250, 0.15); --ink: #F5F3FF; --ink-soft: #EDE9FE; --ink-faint: #4C1D95; --primary: #A78BFA; --primary-ink: #090614; --secondary: #8B5CF6; --gradient: linear-gradient(135deg, #A78BFA, #8B5CF6); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #10B981;
}
[data-theme="solarflare"] {
  --bg: #140B00; --bg-elevated: #241602; --surface: rgba(245, 158, 11, 0.04); --surface-solid: #332005; --surface-hover: rgba(245, 158, 11, 0.09); --border: rgba(245, 158, 11, 0.15); --ink: #FEF3C7; --ink-soft: #FDE68A; --ink-faint: #78350F; --primary: #F59E0B; --primary-ink: #140B00; --secondary: #D97706; --gradient: linear-gradient(135deg, #F59E0B, #D97706); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="midnightgold"] {
  --bg: #020202; --bg-elevated: #0F0E0D; --surface: rgba(212, 175, 55, 0.04); --surface-solid: #1F1B15; --surface-hover: rgba(212, 175, 55, 0.09); --border: rgba(212, 175, 55, 0.15); --ink: #FAF9F6; --ink-soft: #EAE6DF; --ink-faint: #423522; --primary: #D4AF37; --primary-ink: #020202; --secondary: #996515; --gradient: linear-gradient(135deg, #D4AF37, #996515); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="coffeecrema"] {
  --bg: #120B09; --bg-elevated: #1F1411; --surface: rgba(180, 140, 110, 0.04); --surface-solid: #2B1D19; --surface-hover: rgba(180, 140, 110, 0.09); --border: rgba(180, 140, 110, 0.15); --ink: #FAF6F4; --ink-soft: #ECE0DB; --ink-faint: #402822; --primary: #B48C6E; --primary-ink: #120B09; --secondary: #8B5A2B; --gradient: linear-gradient(135deg, #B48C6E, #8B5A2B); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="arcticice"] {
  --bg: #0B1116; --bg-elevated: #16222D; --surface: rgba(103, 232, 249, 0.04); --surface-solid: #213344; --surface-hover: rgba(103, 232, 249, 0.09); --border: rgba(103, 232, 249, 0.15); --ink: #ECFEFF; --ink-soft: #CFFAFE; --ink-faint: #083344; --primary: #67E8F9; --primary-ink: #0B1116; --secondary: #06B6D4; --gradient: linear-gradient(135deg, #67E8F9, #06B6D4); --shadow-sm: 0 4px 14px rgba(0,0,0,0.3); --shadow-md: 0 16px 42px rgba(0,0,0,0.45); --shadow-lg: 0 32px 84px rgba(0,0,0,0.6); --danger: #F43F5E; --success: #10B981;
}
[data-theme="rosegold"] {
  --bg: #140A0D; --bg-elevated: #241319; --surface: rgba(224, 176, 255, 0.04); --surface-solid: #331C24; --surface-hover: rgba(224, 176, 255, 0.09); --border: rgba(224, 176, 255, 0.15); --ink: #FFF0F5; --ink-soft: #FADADD; --ink-faint: #5C2C35; --primary: #B76E79; --primary-ink: #140A0D; --secondary: #C87584; --gradient: linear-gradient(135deg, #B76E79, #C87584); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="electricviolet"] {
  --bg: #070014; --bg-elevated: #12022C; --surface: rgba(139, 92, 246, 0.04); --surface-solid: #1E0544; --surface-hover: rgba(139, 92, 246, 0.09); --border: rgba(139, 92, 246, 0.18); --ink: #F5F3FF; --ink-soft: #DDD6FE; --ink-faint: #5B21B6; --primary: #8B5CF6; --primary-ink: #070014; --secondary: #6D28D9; --gradient: linear-gradient(135deg, #8B5CF6, #6D28D9); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="matrixgreen"] {
  --bg: #010401; --bg-elevated: #050F05; --surface: rgba(0, 255, 65, 0.03); --surface-solid: #0A1F0A; --surface-hover: rgba(0, 255, 65, 0.07); --border: rgba(0, 255, 65, 0.15); --ink: #D0FFD0; --ink-soft: #99FF99; --ink-faint: #003300; --primary: #00FF41; --primary-ink: #010401; --secondary: #008F11; --gradient: linear-gradient(135deg, #00FF41, #008F11); --shadow-sm: 0 4px 14px rgba(0,0,0,0.55); --shadow-md: 0 16px 42px rgba(0,0,0,0.75); --shadow-lg: 0 32px 84px rgba(0,0,0,0.95); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="dunesand"] {
  --bg: #120D08; --bg-elevated: #1F1811; --surface: rgba(221, 184, 146, 0.04); --surface-solid: #2B2119; --surface-hover: rgba(221, 184, 146, 0.09); --border: rgba(221, 184, 146, 0.15); --ink: #FEFDFB; --ink-soft: #F5EBE0; --ink-faint: #5C4033; --primary: #DDB892; --primary-ink: #120D08; --secondary: #B08968; --gradient: linear-gradient(135deg, #DDB892, #B08968); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="steampunk"] {
  --bg: #140E0A; --bg-elevated: #241A12; --surface: rgba(184, 115, 51, 0.04); --surface-solid: #33251A; --surface-hover: rgba(184, 115, 51, 0.09); --border: rgba(184, 115, 51, 0.15); --ink: #FDF9F6; --ink-soft: #F5EAE1; --ink-faint: #4D331F; --primary: #B87333; --primary-ink: #140E0A; --secondary: #8C5323; --gradient: linear-gradient(135deg, #B87333, #8C5323); --shadow-sm: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 16px 42px rgba(0,0,0,0.65); --shadow-lg: 0 32px 84px rgba(0,0,0,0.85); --danger: #FF5E7E; --success: #3DDC97;
}
[data-theme="mintyfresh"] {
  --bg: #050D0A; --bg-elevated: #0F241E; --surface: rgba(52, 211, 153, 0.04); --surface-solid: #17362C; --surface-hover: rgba(52, 211, 153, 0.09); --border: rgba(52, 211, 153, 0.15); --ink: #ECFDF5; --ink-soft: #D1FAE5; --ink-faint: #064E3B; --primary: #34D399; --primary-ink: #050D0A; --secondary: #10B981; --gradient: linear-gradient(135deg, #34D399, #10B981); --shadow-sm: 0 4px 14px rgba(0,0,0,0.4); --shadow-md: 0 16px 42px rgba(0,0,0,0.55); --shadow-lg: 0 32px 84px rgba(0,0,0,0.7); --danger: #FF5E7E; --success: #3DDC97;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-body); }
html, body { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--ink); font-size: calc(15px * var(--scale)); transition: background .3s, color .3s; }
button { font-family: inherit; }
textarea { font-family: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: .2s; }
.icon-btn.ghost:hover { background: var(--surface-hover); color: var(--ink); box-shadow: 0 0 0 2px var(--border); }
.icon-btn:active { transform: scale(.92); }
.only-mobile { display: none; }

.intro-splash {
  position: fixed;
  inset: 0;
  background: #030305;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
}
.intro-splash.fade-out {
  opacity: 0;
  transform: scale(1.05);
  visibility: hidden;
}
.intro-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 100001;
  animation: fadeInLanding 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  padding: 24px;
}
@keyframes fadeInLanding {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.intro-logo {
  width: 90px;
  height: 90px;
  margin-bottom: 24px;
  border-radius: 22px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
  animation: logoPulse 3s infinite alternate;
  overflow: hidden;
}
@keyframes logoPulse {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(212, 175, 55, 0.25); }
  100% { transform: scale(1.05); box-shadow: 0 0 35px rgba(212, 175, 55, 0.45); }
}
.intro-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-landing h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: .5px;
}
.intro-landing p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 34px;
  max-width: 300px;
  line-height: 1.5;
}

.enter-app-btn {
  background: var(--gradient);
  color: var(--primary-ink);
  border: none;
  padding: 15px 44px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font-display);
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .5px;
}
.enter-app-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.55);
  filter: brightness(1.15);
}
.enter-app-btn:active {
  transform: scale(0.98);
}

.app { display: flex; width: 100%; height: 100%; overflow: hidden; position: relative; }
.app::before {
  content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none; opacity: .45;
  background:
    radial-gradient(38% 30% at 15% 12%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 70%),
    radial-gradient(34% 28% at 88% 18%, color-mix(in srgb, var(--secondary) 24%, transparent), transparent 70%),
    radial-gradient(30% 26% at 30% 92%, color-mix(in srgb, var(--secondary) 15%, transparent), transparent 70%);
  filter: blur(80px);
  animation: auroraDrift 25s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(3%,-2%) scale(1.06); }
  100% { transform: translate(-3%,3%) scale(1.02); }
}
.sidebar, .main { position: relative; z-index: 1; }

.sidebar {
  width: 300px; flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 22px 18px; z-index: 200; transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.sidebar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-orb {
  width: 40px; height: 40px; border-radius: 14px; background: var(--gradient); display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 16px;
  box-shadow: var(--shadow-sm), 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
  overflow: hidden; animation: orbGlow 3.5s ease-in-out infinite;
}
@keyframes orbGlow {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent); }
  50% { box-shadow: var(--shadow-sm), 0 0 16px 4px color-mix(in srgb, var(--primary) 40%, transparent); }
}
.brand-orb img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; font-family: var(--font-display); line-height: 1.2; }
.brand-text strong { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.brand-text small { font-size: 10.5px; color: var(--ink-soft); font-weight: 500; }

.new-chat-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; margin-bottom: 14px;
  background: var(--gradient); color: var(--primary-ink); border: none; border-radius: var(--radius-md); font-weight: 700; font-size: 13.5px;
  font-family: var(--font-display); cursor: pointer; box-shadow: var(--shadow-sm); transition: .2s;
}
.new-chat-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.15); }
.new-chat-btn:active { transform: translateY(0) scale(.98); }

.sidebar-search { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 16px; }
.sidebar-search i { color: var(--ink-faint); font-size: 12px; }
.sidebar-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--ink); font-size: 13px; }
.sidebar-search input::placeholder { color: var(--ink-faint); }

.sidebar-section-label { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint); margin: 10px 4px 8px; }
.chat-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 28vh; margin-bottom: 6px; }
.chat-list:empty { display: none; }

.chat-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--radius-sm); cursor: pointer;
  transition: .15s; position: relative; border: 1px solid transparent;
}
.chat-item:hover { background: var(--surface-hover); }
.chat-item.active { background: var(--surface); border-color: var(--border); }
.chat-item .chat-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--primary); flex-shrink: 0; }
.chat-item .chat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chat-item .chat-info strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .chat-info small { font-size: 10px; color: var(--ink-faint); }
.chat-item .chat-more { opacity: 0; background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 4px; font-size: 12px; }
.chat-item:hover .chat-more { opacity: 1; }
.chat-item .pin-flag { color: var(--primary); font-size: 10px; }
.chat-item .fav-flag { color: #FFC94D; font-size: 10px; }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.usage-block { display: none; }

.sidebar-footer-actions { display: flex; gap: 8px; }
.footer-link-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: .2s; }
.footer-link-btn:hover { color: var(--ink); background: var(--surface-hover); }

.mini-slider-icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--gradient); border-radius: 7px; box-shadow: 0 0 0 2px var(--surface-hover); transition: box-shadow .2s; }
.mini-slider-icon .bar { width: 50%; height: 2px; background: rgba(0,0,0,.5); border-radius: 2px; position: relative; }
[data-theme="noir"] .mini-slider-icon .bar { background: rgba(255,255,255,.5); }
.mini-slider-icon .bar::before { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; border: 2px solid var(--primary); position: absolute; top: 50%; transform: translateY(-50%); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.mini-slider-icon .bar1::before { left: -1px; }
.mini-slider-icon .bar2::before { right: -1px; }
.footer-link-btn:hover .mini-slider-icon { box-shadow: 0 0 0 2px var(--primary); }
.footer-link-btn:hover .mini-slider-icon .bar1::before { transform: translate(9px,-50%); }
.footer-link-btn:hover .mini-slider-icon .bar2::before { transform: translate(-9px,-50%); }

.contact-pill { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: rgba(61,220,151,.08); border: 1px solid rgba(61,220,151,.25); border-radius: var(--radius-sm); color: var(--success); text-decoration: none; font-size: 12px; font-weight: 600; transition: .2s; }
.contact-pill:hover { background: rgba(61,220,151,.15); }
.website-pill { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 600; transition: .2s; }
.website-pill:hover { background: var(--surface-hover); border-color: var(--primary); }
.footer-credit { text-align: center; font-size: 9.5px; color: var(--ink-faint); letter-spacing: .3px; font-family: var(--font-display); }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 150; backdrop-filter: blur(4px); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; position: relative; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); flex-shrink: 0; }
.topbar-title { flex: 1; display: flex; align-items: center; gap: 12px; }
.mode-badge { display: none; }

/* Live Top Token Badge formatted cleanly (No heavy pill background/borders) */
.token-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #D4AF37; cursor: pointer; transition: .2s; background: none; border: none; padding: 4px; }
.token-badge:hover { color: #fff; text-shadow: 0 0 8px rgba(212, 175, 55, 0.6); }
.animate-pulse-gold { animation: pulseGold 2s infinite alternate; }
@keyframes pulseGold { 0% { opacity: 0.6; } 100% { opacity: 1; filter: brightness(1.2); } }

/* Live Token popover details dropdown with viewport constraint */
.token-popup {
  position: absolute;
  top: 74px;
  right: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  width: 310px;
  max-width: calc(100vw - 48px);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  display: none;
  flex-direction: column;
  gap: 14px;
  z-index: 1000;
  animation: modalIn .2s cubic-bezier(.16,1,.3,1);
}
.token-popup.active { display: flex; }
.token-popup-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.token-popup-head strong { font-size: 14px; color: var(--primary); }
.token-popup-head i.close-btn { cursor: pointer; color: var(--ink-faint); transition: .2s; }
.token-popup-head i.close-btn:hover { color: var(--danger); }
.token-pop-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.token-pop-row.highlight { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.token-pop-row.highlight strong { color: var(--success); }
.token-pop-info { font-size: 10.5px; color: var(--ink-faint); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }

.panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.panel.active { display: flex; }
.chat-box { flex: 1; overflow-y: auto; padding: 26px 14% 10px; display: flex; flex-direction: column; gap: 20px; }

.message { max-width: 78%; display: flex; flex-direction: column; animation: msgIn .35s cubic-bezier(.16,1,.3,1) forwards; opacity: 0; transform: translateY(14px); }
@keyframes msgIn { to { opacity: 1; transform: translateY(0); } }
.message.user { align-self: flex-end; }
.message.assistant { align-self: flex-start; max-width: 86%; }

.bubble { padding: 15px 19px; font-size: 14.5px; line-height: 1.7; border-radius: var(--radius-md); position: relative; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.message.user .bubble { background: var(--gradient); color: var(--primary-ink); border-radius: 20px 20px 4px 20px; box-shadow: var(--shadow-sm); font-weight: 500; }
.message.assistant .bubble { background: var(--surface-solid); border: 1px solid var(--border); border-radius: 4px 20px 20px 20px; box-shadow: var(--shadow-sm); }
.bubble p { margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 6px 0 6px 18px; }
.bubble a { color: var(--primary); word-break: break-all; }
.bubble table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.bubble img.gen-media { max-width: 100%; width: 100%; height: auto; border-radius: var(--radius-sm); margin-top: 6px; cursor: zoom-in; display: block; border: 1px solid var(--border); }
.bubble video.gen-media { max-width: 100%; width: 100%; height: auto; border-radius: var(--radius-sm); margin-top: 6px; display: block; background: #000; border: 1px solid var(--border); }
.bubble audio { width: 100%; margin-top: 6px; max-width: 280px; display: block; border-radius: 40px; background: var(--bg-elevated); }

.msg-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--ink-faint); }
.msg-actions { display: flex; gap: 4px; opacity: 0; transition: .2s; margin-top: 6px; flex-wrap: wrap; }
.message:hover .msg-actions { opacity: 1; }
.message.user .msg-actions { justify-content: flex-end; }
.mini-btn { background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); font-size: 10.5px; padding: 5px 9px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: .2s; }
.mini-btn:hover { color: var(--ink); background: var(--surface-hover); }

.typing-cursor { display: inline-block; width: 7px; height: 14px; background: var(--primary); margin-left: 2px; animation: blink 1s step-start infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }

.thinking-bubble { display: flex; align-items: center; gap: 10px; }
.thinking-orb { width: 16px; height: 16px; border-radius: 50%; background: var(--gradient); flex-shrink: 0; animation: thinkPulse 1.1s ease-in-out infinite; }
@keyframes thinkPulse { 0%, 100% { transform: scale(0.75); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.thinking-text { font-size: 13px; font-weight: 700; background: var(--gradient); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: thinkShimmer 1.8s linear infinite; }
@keyframes thinkShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.thinking-dots { display: inline-flex; gap: 3px; }
.thinking-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); display: inline-block; animation: thinkDot 1.2s infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .2s; }
.thinking-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes thinkDot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.code-wrapper { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; margin: 12px 0; overflow: hidden; box-shadow: var(--shadow-sm); }
.code-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 9px 16px; display: flex; justify-content: space-between; align-items: center; }
.code-lang { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: 1px; }
.code-actions { display: flex; gap: 6px; }
.code-btn { background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); font-size: 11px; cursor: pointer; padding: 5px 10px; border-radius: 8px; display: flex; align-items: center; gap: 5px; transition: .2s; }
.code-btn:hover { color: var(--ink); background: var(--surface-hover); }
.code-wrapper pre { margin: 0 !important; padding: 15px !important; max-height: 420px; overflow: auto; background: transparent !important; }
.code-wrapper code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; white-space: pre; }

.context-limit-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14%; border-top: 1px solid var(--border); background: var(--danger-soft); color: var(--danger); font-size: 12.5px; font-weight: 600; animation: bannerIn .3s cubic-bezier(.16,1,.3,1); }
.context-limit-banner[hidden] { display: none; }
.context-limit-banner i { font-size: 15px; flex-shrink: 0; }
.context-limit-banner span { flex: 1; }
.context-limit-banner .drawer-btn { background: var(--danger); color: #fff; border-color: transparent; flex-shrink: 0; }
.context-limit-banner .drawer-btn:hover { filter: brightness(1.1); }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.input-card.frozen { opacity: .55; filter: saturate(.6); pointer-events: none; }

.composer { padding: 12px 14% 18px; display: flex; flex-direction: column; align-items: center; }
.reply-preview { display: none; width: 100%; background: var(--surface); border-left: 3px solid var(--primary); padding: 9px 14px; border-radius: 8px 8px 0 0; font-size: 11.5px; color: var(--ink-soft); justify-content: space-between; align-items: center; }
.reply-preview.active { display: flex; }
.reply-preview i.fa-circle-xmark { cursor: pointer; color: var(--danger); }

.audio-preview-container {
  display: flex; width: 100%; background: var(--surface-solid); border: 1px solid var(--border);
  border-bottom: none; padding: 12px 16px; border-radius: 16px 16px 0 0; justify-content: space-between;
  align-items: center; animation: bannerIn .25s ease; gap: 12px;
}
.audio-preview-container[hidden] { display: none; }
.audio-preview-chip { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.audio-preview-chip i { color: var(--danger); font-size: 13px; }
.animate-pulse-red { animation: pulseRedActive 1s infinite alternate; }
@keyframes pulseRedActive { 0% { transform: scale(0.95); opacity: 0.8; } 100% { transform: scale(1.15); opacity: 1; } }
.audio-preview-title { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.audio-preview-chip audio { height: 32px; flex: 1; max-width: 320px; outline: none; border-radius: 20px; }
.audio-preview-close { background: transparent; border: none; color: var(--ink-soft); cursor: pointer; padding: 6px; font-size: 16px; transition: .2s; }
.audio-preview-close:hover { color: var(--danger); transform: scale(1.15); }

.input-card { width: 100%; display: flex; align-items: flex-end; gap: 12px; padding: 12px 14px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-md); transition: .2s; }
.input-card:focus-within { border-color: var(--primary); box-shadow: var(--shadow-md), 0 0 0 3px rgba(212, 175, 55, 0.15); }
#userInput { flex: 1; resize: none; max-height: 160px; background: transparent; border: none; outline: none; color: var(--ink); font-size: 14.5px; line-height: 1.5; padding: 6px 0; }
#userInput::placeholder { color: var(--ink-faint); }
.input-actions { display: flex; gap: 8px; align-items: center; }

.mode-trigger-wrap { position: relative; flex-shrink: 0; }
.mode-trigger { background: var(--surface); border: 1px solid var(--border); }
.mode-popup { position: absolute; bottom: calc(100% + 10px); left: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: none; flex-direction: column; min-width: 150px; max-width: calc(100vw - 40px); z-index: 50; opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1); }
.mode-popup.active { display: flex; opacity: 1; transform: translateY(0) scale(1); }
.mode-opt { display: flex; align-items: center; gap: 9px; background: none; border: none; text-align: left; padding: 9px 12px; border-radius: 9px; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s; }
.mode-opt:hover { background: var(--surface-hover); color: var(--ink); }
.mode-opt.active { background: var(--gradient); color: var(--primary-ink); }

.mic-hold-btn { background: var(--surface); border: 1px solid var(--border); flex-shrink: 0; border-radius: 50%; width: 40px; height: 40px; color: var(--ink-soft); transition: all 0.25s cubic-bezier(.16,1,.3,1); position: relative; }
.mic-hold-btn:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.05); }
.mic-hold-btn.recording-active { background: var(--danger); border-color: var(--danger); color: #fff; transform: scale(1.15); box-shadow: 0 0 16px var(--danger); }

.send-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--gradient); color: var(--primary-ink); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .25s cubic-bezier(.16,1,.3,1); flex-shrink: 0; box-shadow: var(--shadow-sm); }
.send-btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
.send-btn:active { transform: scale(.92); }
.send-btn.generating { border-radius: 12px; background: var(--danger); }
.send-btn.generating:hover { transform: none; }
.composer-hint { font-size: 10.5px; color: var(--ink-faint); margin-top: 8px; text-align: center; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 3000; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 16px; backdrop-filter: blur(8px); }
.lightbox.active { display: flex; }
.lightbox img { max-width: 88vw; max-height: 76vh; border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.1); }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; }

.drawer-btn { background: var(--surface); border: 1px solid var(--border); color: var(--ink); padding: 8px 16px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: .2s; }
.drawer-btn:hover { background: var(--gradient); color: var(--primary-ink); border-color: transparent; }
.drawer-btn.danger { color: var(--danger); }
.drawer-btn.danger:hover { background: var(--danger); color: #fff; }

.pwa-app-btn {
  width: 100%; justify-content: center; padding: 12px; background: var(--gradient);
  color: var(--primary-ink); border-color: transparent; font-weight: 700; font-family: var(--font-display);
  font-size: 13px; border-radius: 12px; box-shadow: var(--shadow-sm); transition: .2s;
}
.pwa-app-btn:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(6px); animation: overlayIn .2s ease; }
.modal-overlay.active { display: flex; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 440px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; animation: modalIn .28s cubic-bezier(.16,1,.3,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); font-family: var(--font-display); }
.modal-body { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.settings-row { display: flex; flex-direction: column; gap: 10px; }
.settings-row label { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .8px; font-family: var(--font-display); display: flex; align-items: center; gap: 8px; }
.premium-tag { background: var(--gradient); color: var(--primary-ink); font-size: 9px; padding: 2px 8px; border-radius: 999px; text-transform: none; letter-spacing: .3px; font-weight: 700; }
.range-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-faint); }
.settings-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Memory List styling stacked nicely */
.memory-manager { display: flex; flex-direction: column; gap: 10px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; }
.memory-input-row { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.memory-input-row input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); padding: 8px 12px; font-size: 12.5px; outline: none; }
.memory-input-row input:focus { border-color: var(--primary); }
.memory-input-row button { width: 100%; justify-content: center; }
.memory-list { display: flex; flex-direction: column; gap: 6px; max-height: 120px; overflow-y: auto; padding-right: 2px; }
.memory-item { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 6px 10px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); }
.memory-item i { cursor: pointer; color: var(--danger); transition: .2s; }
.memory-item i:hover { transform: scale(1.15); }

/* Data Analytics Stats card */
.stats-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
.stats-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.stats-row span { color: var(--ink-soft); }
.stats-row strong { color: var(--primary); font-family: var(--font-mono); }

.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 200px; overflow-y: auto; padding-right: 2px; }
.theme-grid button { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; color: var(--ink-soft); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: .2s cubic-bezier(.16,1,.3,1); text-align: left; }
.theme-grid button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.theme-grid button.active { border-color: var(--primary); color: var(--ink); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18); background: var(--surface-hover); }
.theme-swatch { width: 16px; height: 16px; border-radius: 50%; display: block; border: 1px solid rgba(255,255,255,.15); flex-shrink: 0; }

.theme-swatch-noir { background: linear-gradient(135deg, #D4AF37, #AA7C11); }
.theme-swatch-titanium { background: linear-gradient(135deg, #38BDF8, #818CF8); }
.theme-swatch-emerald { background: linear-gradient(135deg, #10B981, #059669); }
.theme-swatch-royal { background: linear-gradient(135deg, #8B5CF6, #D946EF); }
.theme-swatch-crimson { background: linear-gradient(135deg, #E11D48, #FB7185); }
.theme-swatch-sunset { background: linear-gradient(135deg, #F97316, #EA580C); }
.theme-swatch-cyberpunk { background: linear-gradient(135deg, #EC4899, #06B6D4); }
.theme-swatch-deepocean { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.theme-swatch-sakurapink { background: linear-gradient(135deg, #F472B6, #FB7185); }
.theme-swatch-forestmoss { background: linear-gradient(135deg, #4ADE80, #16A34A); }
.theme-swatch-lavenderdream { background: linear-gradient(135deg, #A78BFA, #8B5CF6); }
.theme-swatch-solarflare { background: linear-gradient(135deg, #F59E0B, #D97706); }
.theme-swatch-midnightgold { background: linear-gradient(135deg, #D4AF37, #996515); }
.theme-swatch-coffeecrema { background: linear-gradient(135deg, #B48C6E, #8B5A2B); }
.theme-swatch-arcticice { background: linear-gradient(135deg, #67E8F9, #06B6D4); }
.theme-swatch-rosegold { background: linear-gradient(135deg, #B76E79, #C87584); }
.theme-swatch-electricviolet { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.theme-swatch-matrixgreen { background: linear-gradient(135deg, #00FF41, #008F11); }
.theme-swatch-dunesand { background: linear-gradient(135deg, #DDB892, #B08968); }
.theme-swatch-steampunk { background: linear-gradient(135deg, #B87333, #8C5323); }
.theme-swatch-mintyfresh { background: linear-gradient(135deg, #34D399, #10B981); }

.model-list { display: flex; flex-direction: column; gap: 6px; }
.model-opt { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .2s; }
.model-opt span { flex: 1; text-align: left; }
.model-opt .check { opacity: 0; color: var(--primary); }
.model-opt.active { border-color: var(--primary); color: var(--ink); }
.model-opt.active .check { opacity: 1; }

.music-player { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.music-now { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.music-now i { color: var(--primary); }
.music-track-list { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; }
.music-track { display: flex; align-items: center; gap: 8px; background: transparent; border: none; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--ink-soft); font-size: 12px; cursor: pointer; }
.music-track:hover { background: var(--surface-hover); color: var(--ink); }
.music-track.active { background: var(--gradient); color: var(--primary-ink); font-weight: 700; }
.music-controls { display: flex; justify-content: center; gap: 14px; }

.about-body { align-items: center; text-align: center; }
.about-orb { width: 62px; height: 62px; border-radius: 18px; background: var(--gradient); display: flex; align-items: center; justify-content: center; color: var(--primary-ink); font-size: 24px; margin: 0 auto; box-shadow: var(--shadow-sm); overflow: hidden; }
.about-body h3 { font-family: var(--font-display); font-size: 17px; }
.about-body p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.about-dev { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
.about-dev div { display: flex; justify-content: space-between; font-size: 12px; }
.about-dev strong { color: var(--ink-soft); font-weight: 600; }
.about-dev a { color: var(--primary); }

.context-menu { position: fixed; z-index: 2200; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: none; flex-direction: column; min-width: 160px; }
.context-menu.active { display: flex; }
.context-menu button { background: none; border: none; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 12.5px; cursor: pointer; display: flex; align-items: center; gap: 9px; }
.context-menu button:hover { background: var(--surface-hover); }
.context-menu button.danger { color: var(--danger); }

.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 4000; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--ink); padding: 12px 16px; border-radius: 12px; font-size: 12.5px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; animation: toastIn .25s ease; max-width: 300px; }
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.success { border-color: var(--success); color: var(--success); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* CSS Overrides for Topbar Model Dropdown */
.mode-popup.top-popup {
  bottom: auto;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  transform: translateY(-6px) scale(.97);
}
.mode-popup.top-popup.active {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width:900px){
  .sidebar { position: fixed; left: 0; top: 0; height: 100%; width: 280px; transform: translateX(-100%); }
  .sidebar.active { transform: translateX(0); }
  .sidebar-overlay.active { display: block; }
  .only-mobile { display: flex; }
  .chat-box { padding: 20px 5% 6px; }
  .composer { padding: 10px 5% 14px; }
  .context-limit-banner { padding: 10px 5%; flex-wrap: wrap; }
  .message { max-width: 92%; }
  .token-popup { right: 10px; left: 10px; width: auto; top: 70px; }
}