/* ============================================================
   CybrenAI - styles.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ================================================================
   FONT SIZE
   ================================================================ */
html[data-font="sm"] { font-size: 13px; }
html[data-font="md"] { font-size: 15px; }
html[data-font="lg"] { font-size: 17px; }

/* ================================================================
   TOKENS
   ================================================================ */
:root {
  --bg:            #dde3f0;
  --bg-2:          #c8d0e4;
  --bg-solid:      #e8edf8;
  --surface:       rgba(255,255,255,0.72);
  --surface-2:     rgba(255,255,255,0.52);
  --surface-heavy: rgba(255,255,255,0.96);
  --border:        rgba(0,0,0,0.13);
  --border-2:      rgba(0,0,0,0.08);
  --border-hi:     rgba(255,255,255,0.9);
  --text:          #0a0e1a;
  --text-2:        #374151;
  --text-3:        #6b7280;
  --accent:        #2563eb;
  --accent-2:      #3b82f6;
  --accent-glow:   rgba(37,99,235,0.26);
  --danger:        #dc2626;
  --danger-glow:   rgba(220,38,38,0.16);
  --success:       #16a34a;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.09);
  --shadow:        0 8px 32px rgba(0,0,0,0.13);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.18);
  --shadow-glass:  0 8px 32px rgba(31,38,135,0.16),
                   inset 0 1px 0 rgba(255,255,255,0.82),
                   inset 0 -1px 0 rgba(0,0,0,0.05);
  --blur:          blur(40px) saturate(200%);
  --blur-sm:       blur(20px) saturate(180%);
  --radius:        16px;
  --radius-sm:     10px;
  --radius-pill:   999px;
  --sidebar-w:     300px;
  --transition:    0.22s cubic-bezier(0.4,0,0.2,1);
  --font:          'Inter', system-ui, sans-serif;
  --logo-pos:      0% 50%;
}

[data-theme="dark"] {
  --bg:            #07090f;
  --bg-2:          #0d1220;
  --bg-solid:      #101624;
  --surface:       rgba(255,255,255,0.06);
  --surface-2:     rgba(255,255,255,0.035);
  --surface-heavy: rgba(12,18,32,0.97);
  --border:        rgba(255,255,255,0.09);
  --border-2:      rgba(255,255,255,0.05);
  --border-hi:     rgba(255,255,255,0.16);
  --text:          #e8edf5;
  --text-2:        #9aa5b4;
  --text-3:        #4b5563;
  --accent:        #3b82f6;
  --accent-2:      #60a5fa;
  --accent-glow:   rgba(59,130,246,0.24);
  --danger:        #f87171;
  --danger-glow:   rgba(248,113,113,0.16);
  --success:       #4ade80;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.4);
  --shadow:        0 8px 32px rgba(0,0,0,0.55);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.75);
  --shadow-glass:  0 8px 32px rgba(0,0,0,0.45),
                   inset 0 1px 0 rgba(255,255,255,0.10),
                   inset 0 -1px 0 rgba(0,0,0,0.28);
  --logo-pos:      100% 50%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100dvh;
  overflow: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}

/* ================================================================
   AMBIENT
   ================================================================ */
.ambient { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); animation:blobFloat 14s ease-in-out infinite alternate; }
[data-theme="dark"]  .blob { opacity:.28; }
[data-theme="light"] .blob { opacity:.10; }
.blob-1 { width:640px;height:640px;background:#2563eb;top:-220px;left:-120px;animation-delay:0s; }
.blob-2 { width:520px;height:520px;background:#7c3aed;bottom:-160px;right:80px;animation-delay:-5s; }
.blob-3 { width:420px;height:420px;background:#0ea5e9;top:40%;left:50%;animation-delay:-10s; }
@keyframes blobFloat {
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(48px,-36px) scale(1.10); }
}

/* ================================================================
   GLASS UTILITIES  - physical refraction-quality liquid glass
   ================================================================ */

/* Shared glass foundation */
.glass-heavy {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.82) 0%,
    rgba(255,255,255,0.58) 60%,
    rgba(255,255,255,0.40) 100%);
  backdrop-filter: blur(48px) saturate(220%) brightness(1.06);
  -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.06);
  border-top:    1px solid rgba(255,255,255,0.95);
  border-left:   1px solid rgba(255,255,255,0.60);
  border-right:  1px solid rgba(255,255,255,0.20);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    0 8px 32px rgba(31,38,135,0.18),
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 2px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    inset 1px 0 0 rgba(255,255,255,0.55),
    inset -1px 0 0 rgba(0,0,0,0.04);
}
[data-theme="dark"] .glass-heavy {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.05) 60%,
    rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(48px) saturate(240%) brightness(1.12);
  -webkit-backdrop-filter: blur(48px) saturate(240%) brightness(1.12);
  border-top:    1px solid rgba(255,255,255,0.18);
  border-left:   1px solid rgba(255,255,255,0.10);
  border-right:  1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.32);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.30),
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.32),
    inset 1px 0 0 rgba(255,255,255,0.10),
    inset -1px 0 0 rgba(0,0,0,0.14);
}

.glass-panel {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.52) 0%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.14) 100%);
  backdrop-filter: blur(40px) saturate(210%) brightness(1.04);
  -webkit-backdrop-filter: blur(40px) saturate(210%) brightness(1.04);
  border-top:    1px solid rgba(255,255,255,0.80);
  border-left:   1px solid rgba(255,255,255,0.46);
  border-right:  1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(0,0,0,0.09);
  box-shadow:
    0 8px 32px rgba(31,38,135,0.14),
    inset 0 2px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(0,0,0,0.05);
}
[data-theme="dark"] .glass-panel {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.03) 60%,
    rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(40px) saturate(220%) brightness(1.10);
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.10);
  border-top:    1px solid rgba(255,255,255,0.12);
  border-left:   1px solid rgba(255,255,255,0.07);
  border-right:  1px solid rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.28);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.28);
}

.glass-input {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.86) 0%,
    rgba(255,255,255,0.70) 100%);
  backdrop-filter: blur(40px) saturate(210%) brightness(1.03);
  -webkit-backdrop-filter: blur(40px) saturate(210%) brightness(1.03);
  border-top:    1.5px solid rgba(255,255,255,0.95);
  border-left:   1.5px solid rgba(255,255,255,0.58);
  border-right:  1.5px solid rgba(255,255,255,0.22);
  border-bottom: 1.5px solid rgba(0,0,0,0.12);
  box-shadow:
    0 8px 32px rgba(31,38,135,0.12),
    inset 0 2px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.05);
}
[data-theme="dark"] .glass-input {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.03) 100%);
  backdrop-filter: blur(40px) saturate(240%) brightness(1.14);
  -webkit-backdrop-filter: blur(40px) saturate(240%) brightness(1.14);
  border-top:    1.5px solid rgba(255,255,255,0.13);
  border-left:   1.5px solid rgba(255,255,255,0.08);
  border-right:  1.5px solid rgba(255,255,255,0.03);
  border-bottom: 1.5px solid rgba(0,0,0,0.30);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.50),
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.30);
}

/* Glass button - liquid glass with specular highlight + shimmer */
.glass-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.08) 100%);
  backdrop-filter: blur(24px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.04);
  border-top:    1px solid rgba(255,255,255,0.75);
  border-left:   1px solid rgba(255,255,255,0.44);
  border-right:  1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--radius-pill);
  color: var(--text); font-family: var(--font); font-size: .875rem; font-weight: 500;
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.14),
    0 1px 4px rgba(0,0,0,0.08),
    inset 0 2px 0 rgba(255,255,255,0.68),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
}
[data-theme="dark"] .glass-btn {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(24px) saturate(220%) brightness(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(220%) brightness(1.12);
  border-top:    1px solid rgba(255,255,255,0.20);
  border-left:   1px solid rgba(255,255,255,0.12);
  border-right:  1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.30);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.42),
    0 1px 4px rgba(0,0,0,0.22),
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.28);
}
/* Specular top-left shine */
.glass-btn::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:48%;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 100%);
  border-radius: inherit; pointer-events:none;
}
/* Shimmer sweep */
.glass-btn::before {
  content:''; position:absolute; top:0; left:-90%; width:55%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-20deg); pointer-events:none; z-index:1;
}
.glass-btn:hover::before { animation: shimmerSweep .55s ease forwards; }
@keyframes shimmerSweep { to { left: 155%; } }
.glass-btn:hover {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.52) 0%,
    rgba(255,255,255,0.24) 50%,
    rgba(255,255,255,0.12) 100%);
  box-shadow:
    0 0 0 1.5px var(--accent),
    0 8px 28px var(--accent-glow),
    0 2px 8px rgba(0,0,0,0.12),
    inset 0 2px 0 rgba(255,255,255,0.68),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
[data-theme="dark"] .glass-btn:hover {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 100%);
  box-shadow:
    0 0 0 1.5px var(--accent),
    0 8px 28px var(--accent-glow),
    0 2px 8px rgba(0,0,0,0.35),
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.28);
}
.glass-btn:active { transform: translateY(0) scale(.97); }

.accent-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(0,0,0,.20);
  border-left: 1px solid rgba(255,255,255,.18);
  border-right: 1px solid rgba(0,0,0,.12);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.30);
}
.accent-btn:hover {
  box-shadow: 0 0 0 1.5px var(--accent-2), 0 6px 28px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.30);
}

.small-btn { padding: 6px 12px; font-size: .8rem; }

/* Icon button */
/* ── Custom tooltips ─────────────────────────────────────────────── */
[data-tip] { position:relative; }
[data-tip]::after {
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--bg-solid); color:var(--text);
  font-size:.71rem; font-family:var(--font); font-weight:500;
  white-space:nowrap; padding:5px 10px;
  border-radius:8px; border:1px solid var(--border);
  box-shadow:0 4px 18px rgba(0,0,0,.22);
  opacity:0; pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
  z-index:9999;
}
[data-tip]:hover::after {
  opacity:1; transform:translateX(-50%) translateY(0);
}
/* Keep overflow visible so tooltip isn't clipped */
[data-tip].icon-btn { overflow:visible; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  color:var(--text-2); cursor:pointer; font-size:.9rem; flex-shrink:0;
  transition:background var(--transition),color var(--transition),
             border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  position:relative; overflow:hidden;
}
.icon-btn:hover {
  background:linear-gradient(160deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.06) 100%);
  backdrop-filter:blur(20px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter:blur(20px) saturate(200%) brightness(1.04);
  border-top:1px solid rgba(255,255,255,0.70);
  border-left:1px solid rgba(255,255,255,0.38);
  border-right:1px solid rgba(255,255,255,0.12);
  border-bottom:1px solid rgba(0,0,0,0.11);
  color:var(--text);
  box-shadow:0 2px 12px rgba(0,0,0,0.13),inset 0 2px 0 rgba(255,255,255,0.55);
  transform:scale(1.08);
}
[data-theme="dark"] .icon-btn:hover {
  background:linear-gradient(160deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.02) 100%);
  backdrop-filter:blur(20px) saturate(220%) brightness(1.12);
  -webkit-backdrop-filter:blur(20px) saturate(220%) brightness(1.12);
  border-top:1px solid rgba(255,255,255,0.18);
  border-left:1px solid rgba(255,255,255,0.10);
  border-right:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(0,0,0,0.28);
  box-shadow:0 2px 12px rgba(0,0,0,0.40),inset 0 2px 0 rgba(255,255,255,0.12);
}
[data-theme="light"] .icon-btn:hover {
  background:linear-gradient(160deg,rgba(255,255,255,0.90) 0%,rgba(255,255,255,0.70) 100%);
  border-top:1px solid rgba(255,255,255,1);
  border-bottom:1px solid rgba(0,0,0,0.09);
}
.icon-btn:active { transform:scale(.94); }

/* Active state for toggle buttons in toolbar */
.toolbar-toggle-btn.active {
  background:linear-gradient(160deg,rgba(59,130,246,0.28) 0%,rgba(59,130,246,0.12) 100%);
  backdrop-filter:blur(20px) saturate(200%);
  -webkit-backdrop-filter:blur(20px) saturate(200%);
  border-top:1px solid rgba(255,255,255,0.60);
  border-left:1px solid rgba(255,255,255,0.32);
  border-right:1px solid rgba(255,255,255,0.10);
  border-bottom:1px solid rgba(0,0,0,0.12);
  color:var(--accent);
  box-shadow:0 0 0 1.5px var(--accent-glow),0 2px 12px var(--accent-glow),inset 0 2px 0 rgba(255,255,255,0.55);
}
.toolbar-toggle-btn:hover { color:var(--accent); }

/* Speed/depth cycle button */
.toolbar-cycle-btn {
  gap:5px; padding:0 10px; width:auto; min-width:38px; font-size:.8rem; font-weight:500;
}
.toolbar-cycle-btn .speed-label {
  font-size:.72rem; font-weight:600; color:var(--text-3);
  transition:color var(--transition);
}
.toolbar-cycle-btn:hover .speed-label { color:var(--text); }

/* Glass select */
.glass-select {
  appearance: none;
  padding: 7px 28px 7px 12px;
  background: linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border-top: 1px solid rgba(255,255,255,.50);
  border-bottom: 1px solid rgba(0,0,0,.10);
  border-left: 1px solid rgba(255,255,255,.26);
  border-right: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-pill);
  color: var(--text); font-family: var(--font); font-size: .85rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
[data-theme="light"] .glass-select { background: rgba(255,255,255,.80); }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  width: var(--sidebar-w); height:100dvh;
  display:flex; flex-direction:column; gap:6px; padding:12px 10px;
  position:relative; z-index:10; flex-shrink:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.05) 50%,
    rgba(255,255,255,0.02) 100%);
  backdrop-filter:blur(48px) saturate(220%) brightness(1.06);
  -webkit-backdrop-filter:blur(48px) saturate(220%) brightness(1.06);
  border-right:1px solid rgba(255,255,255,0.12);
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.08), 2px 0 20px rgba(0,0,0,0.06);
  transition:width var(--transition),padding var(--transition);
  overflow:hidden;
}
[data-theme="light"] .sidebar {
  background:linear-gradient(180deg,
    rgba(255,255,255,0.82) 0%,
    rgba(255,255,255,0.62) 50%,
    rgba(255,255,255,0.48) 100%);
  backdrop-filter:blur(48px) saturate(200%) brightness(1.03);
  -webkit-backdrop-filter:blur(48px) saturate(200%) brightness(1.03);
  border-right:1px solid rgba(255,255,255,0.80);
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.90), 2px 0 20px rgba(0,0,0,0.06);
}
.sidebar.collapsed { width:0; padding:12px 0; border-right-color:transparent; }

.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 6px; gap:8px; flex-shrink:0;
}

/* Logo */
.logo, .welcome-logo {
  width:32px; height:32px;
  background-image:url('assets/logo.png');
  background-size:200% 100%; background-position:var(--logo-pos); background-repeat:no-repeat;
  flex-shrink:0;
}
.welcome-logo {
  width:68px; height:68px; margin-bottom:12px;
  filter:drop-shadow(0 0 24px var(--accent-glow));
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { filter:drop-shadow(0 0 18px var(--accent-glow)); transform:scale(1); }
  50%      { filter:drop-shadow(0 0 36px var(--accent-glow)); transform:scale(1.05); }
}
.logo-wrap { display:flex; align-items:center; gap:10px; white-space:nowrap; overflow:hidden; }
.logo-text {
  font-size:1.1rem; font-weight:700; letter-spacing:-.02em;
  color: var(--text);
}

.new-chat-btn { width:100%; justify-content:center; padding:10px 16px; border-radius:var(--radius-sm); flex-shrink:0; }
.new-chat-btn i { transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.new-chat-btn:hover i { transform:rotate(90deg); }

.chat-scroll-area {
  flex:1; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.chat-scroll-area::-webkit-scrollbar { width:3px; }
.chat-scroll-area::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

.sidebar-section-label {
  font-size:.69rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); padding:10px 8px 4px;
  display:flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap;
}
.sidebar-section-label i { font-size:.65rem; }

.sidebar-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:4px 8px; flex-shrink:0;
}

.chat-list { display:flex; flex-direction:column; gap:2px; }

.chat-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  cursor:pointer; position:relative; white-space:nowrap; min-width:0;
  transition:background var(--transition),box-shadow var(--transition);
}
.chat-item::after {
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:3px; height:0;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  border-radius:3px; transition:height var(--transition);
}
.chat-item:hover {
  background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 100%);
  box-shadow:0 1px 8px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.18);
}
[data-theme="light"] .chat-item:hover {
  background:rgba(255,255,255,.68);
  box-shadow:0 1px 8px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.9);
}
.chat-item:hover::after { height:55%; }
.chat-item.active { background:linear-gradient(135deg,rgba(59,130,246,.14) 0%,rgba(59,130,246,.04) 100%); }
[data-theme="light"] .chat-item.active { background:rgba(255,255,255,.82); }
.chat-item.active::after { height:65%; }

.chat-item-icon {
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:var(--surface-2); color:var(--text-3); font-size:.75rem;
  flex-shrink:0; transition:background var(--transition),color var(--transition);
}
.chat-item:hover .chat-item-icon,
.chat-item.active .chat-item-icon { background:var(--accent-glow); color:var(--accent); }

.chat-item-body { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; overflow:hidden; }
.chat-item-title {
  font-size:.85rem; font-weight:500; color:var(--text);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; white-space:normal; word-break:break-word;
  line-height:1.35;
}
.chat-item-title.name-loading {
  color: var(--text-3);
  animation: nameLoadingPulse 1.2s ease-in-out infinite;
}
@keyframes nameLoadingPulse {
  0%,100% { opacity:.4; }
  50%      { opacity:1; }
}
.chat-item-preview { font-size:.72rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; }

.chat-item-actions {
  display:flex; gap:2px; align-items:center;
  opacity:0; transform:translateX(8px);
  transition:opacity var(--transition),transform var(--transition); flex-shrink:0;
}
.chat-item:hover .chat-item-actions { opacity:1; transform:translateX(0); }
.chat-action-btn {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:6px;
  color:var(--text-3); cursor:pointer; font-size:.72rem;
  transition:background var(--transition),color var(--transition),transform var(--transition);
}
.chat-action-btn:hover { background:var(--surface); color:var(--text); transform:scale(1.18); }
.chat-action-btn.danger:hover { color:var(--danger); background:var(--danger-glow); }

/* Sidebar footer */
.sidebar-footer {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 6px 4px; border-top:1px solid var(--border); flex-shrink:0; margin-top:auto;
}
.theme-switch-row { display:flex; align-items:center; gap:8px; }
.theme-sw-icon { font-size:.85rem; color:var(--text-3); transition:color var(--transition); }

.theme-switch { position:relative; width:48px; height:26px; cursor:pointer; }
.theme-switch input { opacity:0; width:0; height:0; position:absolute; }
.theme-track {
  position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 100%);
  backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm);
  border-top:1px solid rgba(255,255,255,.52);
  border-left:1px solid rgba(255,255,255,.28);
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.13);
  border-radius:var(--radius-pill);
  box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.32);
  transition:all var(--transition);
}
[data-theme="light"] .theme-track {
  background:linear-gradient(160deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.60) 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,1);
}
.theme-switch input:checked + .theme-track {
  background:linear-gradient(135deg,rgba(59,130,246,.38) 0%,rgba(59,130,246,.14) 100%);
  box-shadow:0 0 0 1px var(--accent),0 2px 10px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.18);
}
.theme-thumb {
  position:absolute; top:50%; left:3px; width:20px; height:20px;
  transform:translateY(-50%);
  background:linear-gradient(160deg,#fff 0%,#e8edf8 100%);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.theme-switch input:checked + .theme-track .theme-thumb {
  transform:translate(22px,-50%);
  background:linear-gradient(160deg,#bfdbfe 0%,#93c5fd 100%);
}

/* ================================================================
   MAIN / TOPBAR
   ================================================================ */
.main { flex:1; min-width:0; display:flex; flex-direction:column; height:100dvh; position:relative; z-index:1; overflow:visible; }

.topbar {
  display:flex; align-items:center; padding:10px 16px; gap:12px;
  border-bottom:1px solid var(--border); flex-shrink:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 100%);
  backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm);
  position:relative; z-index:20;
}
[data-theme="light"] .topbar {
  background:linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.26) 100%);
}
.topbar-center { flex:1; display:flex; justify-content:center; }

/* ================================================================
   MODEL SWITCHER
   ================================================================ */
.model-switcher {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px;
  cursor:pointer; user-select:none;
  position:relative; z-index:100;
  background:linear-gradient(160deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.07) 100%);
  backdrop-filter:blur(32px) saturate(210%) brightness(1.04);
  -webkit-backdrop-filter:blur(32px) saturate(210%) brightness(1.04);
  border-top:1px solid rgba(255,255,255,0.72);
  border-left:1px solid rgba(255,255,255,0.42);
  border-right:1px solid rgba(255,255,255,0.14);
  border-bottom:1px solid rgba(0,0,0,0.14);
  border-radius:var(--radius-pill);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.14),
    inset 0 2px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  transition:box-shadow var(--transition),transform var(--transition);
}
[data-theme="dark"] .model-switcher {
  background:linear-gradient(160deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.02) 100%);
  backdrop-filter:blur(32px) saturate(230%) brightness(1.14);
  -webkit-backdrop-filter:blur(32px) saturate(230%) brightness(1.14);
  border-top:1px solid rgba(255,255,255,0.18);
  border-left:1px solid rgba(255,255,255,0.10);
  border-right:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(0,0,0,0.32);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.26);
}
.model-switcher::after {
  content:''; position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.22) 0%,transparent 100%);
  border-radius:inherit; pointer-events:none;
}
.model-switcher:hover {
  box-shadow:0 0 0 1.5px var(--accent),0 6px 28px var(--accent-glow),
    inset 0 2px 0 rgba(255,255,255,0.62),inset 0 -1px 0 rgba(0,0,0,0.08);
  transform:translateY(-1px);
}
.ms-favicon {
  width:18px; height:18px; border-radius:5px; flex-shrink:0;
  object-fit:contain; background:transparent;
}
.ms-favicon.logo-inline {
  background:none;
}
.model-name { font-size:.875rem; font-weight:600; color:var(--text); white-space:nowrap; }
.model-chevron { font-size:.7rem; color:var(--text-3); transition:transform var(--transition); }
.model-switcher.open .model-chevron { transform:rotate(180deg); }

/* ---- Model Dropdown - liquid glass ---- */
.model-dropdown {
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-10px);
  width:340px; max-height:72vh; overflow-y:auto;
  border-radius:var(--radius);
  padding:6px;
  z-index:500;
  opacity:0; pointer-events:none;
  transition:opacity var(--transition),transform var(--transition);
  /* Solid background - no see-through */
  background: #eef2fa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top:    1px solid rgba(255,255,255,0.90);
  border-left:   1px solid rgba(255,255,255,0.55);
  border-right:  1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.10);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.18),
    0 6px 20px rgba(0,0,0,0.10),
    inset 0 2px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
[data-theme="dark"] .model-dropdown {
  background: linear-gradient(160deg,
    #0f1628 0%,
    #0c1220 60%,
    #0a0f1c 100%);
  backdrop-filter: blur(48px) saturate(240%) brightness(1.16);
  -webkit-backdrop-filter: blur(48px) saturate(240%) brightness(1.16);
  border-top:    1px solid rgba(255,255,255,0.16);
  border-left:   1px solid rgba(255,255,255,0.10);
  border-right:  1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.35);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.70),
    0 6px 20px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.30);
}
.model-dropdown::-webkit-scrollbar { width:4px; }
.model-dropdown::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.model-switcher.open .model-dropdown { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }

/* Provider group */
.md-provider { margin-bottom:4px; }
.md-provider-header {
  display:flex; align-items:center; gap:7px;
  padding:7px 10px 4px;
  font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3);
}
.md-provider-favicon {
  width:16px; height:16px; border-radius:4px;
  object-fit:contain; flex-shrink:0;
}
.md-provider-favicon.is-logo {
  background-image:url('assets/logo.png');
  background-size:200% 100%; background-position:var(--logo-pos); background-repeat:no-repeat;
}
.md-provider-sep {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:4px 8px 6px;
}

/* Model option */
.md-model {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 10px;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  cursor:pointer; color:var(--text); font-family:var(--font); text-align:left;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.md-model:hover { background:var(--surface); border-color:var(--border); transform:translateX(3px); }
[data-theme="light"] .md-model:hover { background:rgba(0,0,0,.04); }
.md-model.active { background:var(--accent-glow); border-color:var(--accent); }
.md-model--soon { opacity:.55; cursor:not-allowed; }
.md-model--soon:hover { transform:none; background:transparent; border-color:transparent; }

.md-model-left { display:flex; align-items:center; gap:8px; min-width:0; }
.md-model-favicon { width:16px; height:16px; border-radius:4px; object-fit:contain; flex-shrink:0; }
.md-model-favicon.is-logo { background-image:url('assets/logo.png'); background-size:200% 100%; background-position:var(--logo-pos); background-repeat:no-repeat; }
.md-model-info { min-width:0; }
.md-model-name { font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:6px; }
.md-model-desc { font-size:.72rem; color:var(--text-2); margin-top:1px; }

.soon-badge {
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#7c3aed; background:rgba(124,58,237,.14); border:1px solid rgba(124,58,237,.30);
  border-radius:var(--radius-pill); padding:1px 6px;
}

.md-model-meta { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.md-ctx { font-size:.70rem; color:var(--text-3); white-space:nowrap; }
.md-price { font-size:.68rem; color:var(--text-3); white-space:nowrap; }
.md-check { color:var(--accent); font-size:.78rem; opacity:0; transition:opacity var(--transition); }
.md-model.active .md-check { opacity:1; }

/* ================================================================
   CHAT AREA
   ================================================================ */
.chat-area {
  flex:1; overflow-y:auto; overflow-x:hidden; padding:28px 0;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  overflow-anchor: none;
  display:flex; flex-direction:column;
}
.chat-area::-webkit-scrollbar { width:4px; }
.chat-area::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

/* Welcome */
.welcome-screen {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center;
  animation:fadeUp .5s ease both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.welcome-title { font-size:2.1rem; font-weight:700; letter-spacing:-.03em; color:var(--text); margin-bottom:8px; }
.welcome-sub { color:var(--text-2); font-size:1rem; margin-bottom:32px; }
.welcome-suggestions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.suggestion-chip { border-radius:var(--radius-sm); padding:10px 16px; font-size:.85rem; }
.suggestion-chip:hover { transform:translateY(-3px); }

/* ================================================================
   MESSAGES - user RIGHT, AI LEFT
   ================================================================ */
.messages { width:100%; max-width:100%; margin:0; padding:0 40px; display:flex; flex-direction:column; gap:20px; }

.msg { animation:msgIn .35s ease both; }
.msg.user { display:flex; gap:12px; flex-direction:row-reverse; align-items:flex-start; }
.msg.assistant { display:flex; flex-direction:column; gap:0; }
/* Inner row: avatar + model name only */
.msg-inner-row { display:flex; gap:12px; align-items:center; margin-bottom:4px; }
.msg-name-wrap { flex:1; min-width:0; }
/* Search area sits between header and content */
.msg-search-area:empty { display:none; }
.msg-search-area { margin-bottom:4px; }
@keyframes msgIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* Streaming cursor removed - content fades in transparently */

.msg-avatar {
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; flex-shrink:0; margin-top:2px;
}
.msg.assistant .msg-avatar {
  background:linear-gradient(160deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 100%);
  backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm);
  border-top:1px solid rgba(255,255,255,.46);
  border-left:1px solid rgba(255,255,255,.22);
  border-right:1px solid transparent;
  border-bottom:1px solid rgba(0,0,0,.11);
  box-shadow:0 2px 10px rgba(0,0,0,.13);
}
[data-theme="light"] .msg.assistant .msg-avatar {
  background:rgba(255,255,255,.84);
  border-top:1px solid rgba(255,255,255,1);
  border-bottom:1px solid rgba(0,0,0,.09);
}
.msg.assistant .msg-avatar .logo { width:22px; height:22px; }
.msg.user .msg-avatar {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; box-shadow:0 2px 10px var(--accent-glow);
}

.msg-body { max-width:82%; min-width:0; overflow:hidden; }
/* Assistant: msg-body is now the content block BELOW the header row - indent to align */
.msg.assistant .msg-body { max-width:100%; padding-left:46px; /* 34px avatar + 12px gap */ }
.msg.user .msg-body { display:flex; flex-direction:column; align-items:flex-end; }
.msg-header { display:flex; align-items:baseline; gap:7px; margin-bottom:0; }
.msg.user .msg-header { flex-direction:row-reverse; }
.msg-name { font-size:.83rem; font-weight:600; }
.msg-time { font-size:.70rem; color:var(--text-3); }

/* AI content */
.msg.assistant .msg-content { font-size:.925rem; line-height:1.75; color:var(--text); transition:opacity .35s ease; }
.msg.assistant .msg-content.content-loading { opacity:0; }

/* Loading pulse on avatar while waiting for first token */
@keyframes avatarPulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }
.msg.assistant.is-loading .msg-avatar .logo { animation: avatarPulse 1.4s ease-in-out infinite; }

/* User bubble */
.msg.user .msg-content {
  display:inline-block; font-size:.925rem; line-height:1.65;
  background:linear-gradient(160deg,rgba(59,130,246,.28) 0%,rgba(59,130,246,.10) 100%);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-top:1px solid rgba(255,255,255,.46);
  border-left:1px solid rgba(255,255,255,.22);
  border-right:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(0,0,0,.11);
  border-radius:var(--radius) var(--radius) 4px var(--radius);
  padding:12px 16px; color:var(--text);
  box-shadow:0 4px 16px rgba(59,130,246,.13),inset 0 1px 0 rgba(255,255,255,.42);
}
[data-theme="light"] .msg.user .msg-content {
  background:linear-gradient(160deg,rgba(37,99,235,.13) 0%,rgba(37,99,235,.05) 100%);
  border-top:1px solid rgba(255,255,255,.92);
  box-shadow:0 4px 16px rgba(37,99,235,.09),inset 0 1px 0 rgba(255,255,255,.96);
}

/* Message actions - always visible */
.msg-actions { display:flex; gap:4px; margin-top:7px; flex-wrap:wrap; }
.msg.user .msg-actions { justify-content:flex-end; }
.msg-action-btn {
  display:flex; align-items:center; gap:5px; padding:4px 10px;
  background:linear-gradient(160deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 100%);
  backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm);
  border-top:1px solid rgba(255,255,255,.44);
  border-left:1px solid rgba(255,255,255,.22);
  border-right:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(0,0,0,.09);
  border-radius:var(--radius-pill);
  color:var(--text-3); font-size:.74rem; font-family:var(--font);
  cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.09);
  transition:color var(--transition),box-shadow var(--transition),transform var(--transition);
}
[data-theme="light"] .msg-action-btn {
  background:rgba(255,255,255,.80);
  border-top:1px solid rgba(255,255,255,1);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.msg-action-btn:hover {
  color:var(--text);
  box-shadow:0 0 0 1.5px var(--accent),0 2px 12px var(--accent-glow);
  transform:scale(1.05);
}

/* Typing indicator */
.typing-indicator { display:flex; align-items:center; gap:5px; padding:6px 0 4px; }
.typing-dot {
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  animation:typingPulse 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typingPulse {
  0%,100% { transform:scale(.6); opacity:.3; }
  50%     { transform:scale(1.2); opacity:1; }
}

/* Code blocks */
.msg-content pre {
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 16px; overflow-x:auto; margin:10px 0; font-size:.82rem;
}
.msg-content code {
  font-family:'JetBrains Mono','Fira Code',monospace; font-size:.84em;
  background:var(--bg-2); padding:2px 6px; border-radius:5px;
}
.msg-content pre code { background:transparent; padding:0; }
.msg-content p { margin:6px 0; }
.msg-content h1,.msg-content h2,.msg-content h3 { margin:12px 0 6px; font-weight:600; }
.msg-content ul,.msg-content ol { padding-left:22px; margin:6px 0 8px; }
.msg-content li { margin:4px 0; line-height:1.6; }
.msg-content ul { list-style: disc; }
.msg-content ul ul { list-style: circle; margin:3px 0; }
.msg-content ol { list-style: decimal; }
/* Task list checkboxes */
.msg-content li.task-item { list-style: none; margin-left: -4px; display: flex; align-items: flex-start; gap: 6px; }
.msg-content li.task-item input[type="checkbox"] { margin-top: 4px; accent-color: var(--accent); flex-shrink: 0; cursor: default; }

/* Generated image */
.msg-image { max-width:100%; border-radius:var(--radius-sm); border:1px solid var(--border); margin-top:8px; display:block; }
.img-caption { margin-top:6px; font-size:.78rem; color:var(--text-3); display:flex; align-items:center; gap:5px; }

/* Pasted/sent image preview in message */
.msg-image-preview { margin-top:8px; }
.msg-image-preview img { max-width:260px; max-height:200px; border-radius:var(--radius-sm); border:1px solid var(--border); object-fit:contain; display:block; }

/* Attachment image thumb in input area */
.att-img-wrap { position:relative; display:inline-block; }
.att-img-thumb { width:60px; height:60px; object-fit:cover; border-radius:8px; border:1px solid var(--border); display:block; }
.att-remove-img {
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px; border-radius:50%;
  background:var(--danger); border:none; color:#fff;
  font-size:.6rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}

/* LaTeX math */
.math-block { overflow-x:auto; margin:10px 0; padding:4px 0; }
.math-inline { display:inline; }
.katex { font-size:1.05em; color:var(--text); }

/* ================================================================
   SKELETON LOADING (unified, per-type)
   ================================================================ */
/* Shimmer sweeps once then pauses - cleaner, less noisy */
@keyframes skelShimmer {
  0%   { background-position: 180% 0; }
  100% { background-position: -180% 0; }
}

/* Base shimmer applied to all skel elements */
.skel-base {
  border-radius: 7px;
  background: linear-gradient(100deg,
    var(--bg-2) 0%, var(--bg-2) 38%,
    rgba(255,255,255,.18) 50%,
    var(--bg-2) 62%, var(--bg-2) 100%
  );
  background-size: 400% 100%;
  animation: skelShimmer 2.4s linear infinite;
}
[data-theme="light"] .skel-base {
  background: linear-gradient(100deg,
    var(--bg-2) 0%, var(--bg-2) 38%,
    rgba(255,255,255,.60) 50%,
    var(--bg-2) 62%, var(--bg-2) 100%
  );
  background-size: 400% 100%;
  animation: skelShimmer 2.4s linear infinite;
}

.skel-wrap {
  margin: 10px 0; padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  max-width: 560px;
  animation: msgIn .38s cubic-bezier(.16,1,.3,1) both;
}
.skel-wrap.skel-image { max-width: 420px; }

.skel-header { display: flex; align-items: center; gap: 12px; }

/* Simple bars */
.skel-bar { height: 13px; }
.skel-bar.sm { height: 9px; }

/* Apply shimmer to bars and img blocks */
.skel-bar, .skel-img-block {
  border-radius: 7px;
  background: linear-gradient(100deg,
    var(--bg-2) 0%, var(--bg-2) 38%,
    rgba(255,255,255,.18) 50%,
    var(--bg-2) 62%, var(--bg-2) 100%
  );
  background-size: 400% 100%;
  animation: skelShimmer 2.4s linear infinite;
}
[data-theme="light"] .skel-bar,
[data-theme="light"] .skel-img-block {
  background: linear-gradient(100deg,
    var(--bg-2) 0%, var(--bg-2) 38%,
    rgba(255,255,255,.60) 50%,
    var(--bg-2) 62%, var(--bg-2) 100%
  );
  background-size: 400% 100%;
  animation: skelShimmer 2.4s linear infinite;
}
.skel-bar.sm { height: 9px; }

.skel-img-block {
  width: 100%; height: 200px; border-radius: var(--radius-sm);
}

.skel-label {
  font-size: .74rem; color: var(--text-3); text-align: center; padding-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  letter-spacing: .01em;
}

/* ---- Chart skeleton ---- */
.skel-chart-bars {
  display: flex; align-items: flex-end; gap: 8px; height: 110px; padding-top: 8px;
}
.skel-chart-bar {
  flex: 1; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(100deg,
    var(--bg-2) 0%, var(--bg-2) 38%,
    rgba(255,255,255,.18) 50%,
    var(--bg-2) 62%, var(--bg-2) 100%
  );
  background-size: 400% 100%;
  animation: skelShimmer 2.4s linear infinite;
  animation-delay: calc(var(--bi, 0) * 120ms);
}
[data-theme="light"] .skel-chart-bar {
  background: linear-gradient(100deg,
    var(--bg-2) 0%, var(--bg-2) 38%,
    rgba(255,255,255,.60) 50%,
    var(--bg-2) 62%, var(--bg-2) 100%
  );
  background-size: 400% 100%;
  animation: skelShimmer 2.4s linear infinite;
}

/* ---- Timeline skeleton ---- */
.skel-timeline { display: flex; flex-direction: column; gap: 14px; padding-left: 22px; position: relative; }
.skel-timeline::before {
  content: ''; position: absolute; left: 5px; top: 5px; bottom: 5px; width: 2px;
  background: var(--bg-2); border-radius: 2px;
}
.skel-tl-row { display: flex; flex-direction: column; gap: 5px; position: relative; }
.skel-tl-dot {
  position: absolute; left: -23px; top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-2);
}

/* ---- Compare skeleton ---- */
.skel-compare-cols { display: flex; gap: 12px; }
.skel-compare-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* ---- Kanban skeleton ---- */
.skel-kanban-cols { display: flex; gap: 10px; }
.skel-kanban-col { flex: 1; display: flex; flex-direction: column; gap: 7px; }

/* ================================================================
   SEARCH CARD
   ================================================================ */
.search-card {
  margin:0 0 6px 0;
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  border:1px solid var(--border);
  overflow:hidden;
  animation: msgIn .35s ease both;
}
[data-theme="light"] .search-card { background:rgba(255,255,255,.60); }

.search-card-header {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px 7px 0;
  font-size:.84rem; font-weight:500; color:var(--text-2);
  border-bottom:1px solid var(--border-2);
}
.search-card-header .sc-icon { color:var(--accent); width:16px; text-align:center; }
.search-card-header .sc-icon.spinning { animation:spin .9s linear infinite; }
.search-card-header .sc-icon.done { color:var(--success); animation:none; }
@keyframes spin { to { transform:rotate(360deg); } }

.search-queries { display:flex; flex-wrap:wrap; gap:5px; padding:8px 0; }
.search-query-chip {
  display:flex; align-items:center; gap:5px;
  padding:3px 10px;
  background:var(--accent-glow); border:1px solid rgba(59,130,246,.30);
  border-radius:var(--radius-pill); font-size:.75rem; color:var(--accent);
}

.search-results { display:flex; flex-direction:column; gap:4px; padding:4px 0 10px; }
a.search-result-item {
  display:flex; align-items:flex-start; gap:8px;
  padding:5px 8px; border-radius:8px;
  background:var(--surface); transition:background var(--transition);
  text-decoration:none; color:var(--text); cursor:pointer; outline:none;
  -webkit-text-decoration:none;
}
a.search-result-item:link, a.search-result-item:visited,
a.search-result-item:hover, a.search-result-item:active { text-decoration:none; }
a.search-result-item .sr-title { text-decoration:none; color:var(--text); }
a.search-result-item .sr-url   { text-decoration:none; color:var(--text-3); }
a.search-result-item:hover { background:rgba(59,130,246,.10); }
a.search-result-item:hover .sr-title { color:var(--accent); }
.sr-favicon { width:14px; height:14px; border-radius:3px; margin-top:2px; flex-shrink:0; }
.sr-body { min-width:0; }
.sr-title { font-size:.78rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-url   { font-size:.70rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-used  { font-size:.68rem; color:var(--success); margin-left:auto; flex-shrink:0; padding-top:2px; }

.search-show-more {
  background:none; border:none; cursor:pointer;
  font-size:.74rem; color:var(--text-3); padding:2px 0 8px;
  transition:color var(--transition);
}
.search-show-more:hover { color:var(--accent); }

/* ================================================================
   INPUT AREA
   ================================================================ */
.input-area {
  padding:10px 24px 16px; flex-shrink:0;
  max-width:840px; width:100%; margin:0 auto;
}

.attachments-preview { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.attachment-chip {
  display:flex; align-items:center; gap:7px; padding:6px 12px;
  background:linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 100%);
  backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm);
  border-top:1px solid rgba(255,255,255,.52);
  border-bottom:1px solid rgba(0,0,0,.09);
  border-left:1px solid rgba(255,255,255,.28);
  border-right:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-pill); font-size:.8rem; color:var(--text-2);
  box-shadow:0 2px 8px rgba(0,0,0,.09);
  animation:chipIn .22s ease both;
}
@keyframes chipIn { from{opacity:0;transform:scale(.84);} to{opacity:1;transform:scale(1);} }
.attachment-chip i { color:var(--accent); }
.attachment-remove {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.75rem; padding:0;
  transition:color var(--transition);
}
.attachment-remove:hover { color:var(--danger); }

.preview-bar { margin-bottom:6px; }
.preview-tabs { display:flex; gap:4px; }
.preview-tab {
  display:flex; align-items:center; gap:6px; padding:6px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-pill); font-size:.8rem; font-family:var(--font); font-weight:500;
  color:var(--text-2); cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.preview-tab.active { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }

.input-box { border-radius:var(--radius); padding:12px 12px 8px; }

textarea {
  width:100%; background:transparent; border:none; outline:none;
  color:var(--text); font-family:var(--font); font-size:.95rem;
  resize:none; line-height:1.65; min-height:28px; max-height:280px;
  overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
textarea::placeholder { color:var(--text-3); }
.glass-input:focus-within { outline:none; }
#messageInput:focus { outline:none; box-shadow:none; }

.preview-render { font-size:.95rem; line-height:1.7; color:var(--text); min-height:60px; padding:4px 0; }
.preview-render code { font-family:'JetBrains Mono',monospace; font-size:.85em; background:var(--bg-2); padding:2px 6px; border-radius:5px; }

.input-toolbar { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--border-2); }
.input-toolbar-left  { display:flex; align-items:center; gap:4px; }
.input-toolbar-right { display:flex; align-items:center; gap:6px; }

.voice-btn { position:relative; }
.voice-ripple {
  position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--accent); opacity:0; transform:scale(1); pointer-events:none;
}
.voice-btn.active { color:var(--danger); }
.voice-btn.active .voice-ripple { animation:voiceRipple 1s ease-in-out infinite; }
@keyframes voiceRipple { 0%{opacity:.8;transform:scale(1);} 100%{opacity:0;transform:scale(1.9);} }
.upload-btn { cursor:pointer; }
.upload-btn:hover { color:var(--accent); }

.send-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none; border-radius:var(--radius-pill); color:#fff; cursor:pointer; font-size:.9rem;
  box-shadow:0 4px 16px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.30);
  transition:box-shadow var(--transition),transform var(--transition),opacity var(--transition);
  overflow:visible; position:relative;
  position:relative; overflow:hidden;
}
.send-btn::before { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent); transform:skewX(-20deg); }
.send-btn:not(:disabled):hover::before { animation:shimmerSweep .45s ease forwards; }
.send-btn:not(:disabled):hover { box-shadow:0 0 0 1.5px var(--accent-2),0 6px 24px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.30); transform:scale(1.10); }
.send-btn:disabled { opacity:.3; cursor:not-allowed; }
.send-btn.stop-mode { background:linear-gradient(135deg,var(--accent),var(--accent-2)); opacity:.85; }
.send-btn.stop-mode:hover { opacity:1; box-shadow:0 0 0 1.5px var(--accent-2),0 6px 24px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.30); }
.send-btn i { transition:transform var(--transition); }
.send-btn:not(:disabled):hover i { transform:translateY(-2px); }

.input-disclaimer { text-align:center; font-size:.72rem; color:var(--text-3); margin-top:10px; }
.app-credit {
  text-align: center; font-size: .68rem; color: var(--text-3);
  margin-top: 3px; opacity: .55; letter-spacing: .02em;
}
.app-credit strong { font-weight: 600; color: var(--text-2); }

/* ================================================================
   SETTINGS PANEL
   ================================================================ */
.settings-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.42); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity var(--transition);
}
.settings-overlay.open { opacity:1; pointer-events:all; }

.settings-panel {
  position:fixed; top:0; right:0; height:100dvh; width:340px; z-index:310;
  transform:translateX(100%); transition:transform .30s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  background:var(--bg-solid); border-left:1px solid var(--border); box-shadow:var(--shadow-lg);
}
[data-theme="light"] .settings-panel { background:#f4f7fc; }
.settings-panel.open { transform:translateX(0); }

.settings-header { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid var(--border); }
.settings-header h2 { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--text); }
.settings-header h2 i { color:var(--accent); }
.settings-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:8px; }
.settings-section { background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--radius-sm); overflow:hidden; }
[data-theme="light"] .settings-section { background:rgba(255,255,255,.70); border-color:rgba(0,0,0,.08); }
.settings-section-title { font-size:.69rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:12px 14px 6px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--border-2); font-size:.875rem; color:var(--text-2); }
.settings-row--col { flex-direction:column; align-items:stretch; gap:8px; }

.system-prompt-input {
  width:100%; background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 10px;
  color:var(--text); font-family:var(--font); font-size:.82rem;
  resize:vertical; outline:none; line-height:1.5;
}
.system-prompt-input:focus { border-color:var(--accent); }
.settings-key-input { resize:none; font-family:'JetBrains Mono','Fira Code',monospace; font-size:.78rem; letter-spacing:.02em; }
.settings-label { font-size:.75rem; font-weight:600; color:var(--text-3); margin-bottom:2px; }

.toggle-group { display:flex; gap:4px; }
.toggle-opt {
  padding:5px 12px; background:transparent; border:1px solid var(--border);
  border-radius:var(--radius-pill); font-size:.78rem; font-family:var(--font); font-weight:500;
  color:var(--text-3); cursor:pointer; display:flex; align-items:center; gap:5px;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.toggle-opt.active { background:var(--accent-glow); color:var(--accent); border-color:var(--accent); }
.toggle-opt:hover:not(.active) { background:var(--surface); color:var(--text); }

.switch { position:relative; width:42px; height:24px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-pill); transition:background var(--transition); }
.slider::before { content:''; position:absolute; height:16px; width:16px; left:3px; top:50%; transform:translateY(-50%); background:var(--text-3); border-radius:50%; transition:transform .25s cubic-bezier(.34,1.56,.64,1),background var(--transition); }
.switch input:checked + .slider { background:var(--accent); border-color:var(--accent); }
.switch input:checked + .slider::before { transform:translateX(18px) translateY(-50%); background:#fff; }

/* ================================================================
   VOICE MODAL
   ================================================================ */
.voice-modal-overlay {
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(12px);
  opacity:0; pointer-events:none; transition:opacity var(--transition);
}
.voice-modal-overlay.open { opacity:1; pointer-events:all; }

.voice-modal-box {
  width:360px; border-radius:24px; padding:28px 28px 24px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  transform:scale(.88) translateY(12px);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.voice-modal-overlay.open .voice-modal-box { transform:scale(1) translateY(0); }

.voice-modal-top {
  width:100%; display:flex; align-items:center; justify-content:space-between;
}
.voice-modal-title { font-size:.95rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; }
.voice-modal-title i { color:var(--accent); }

/* Waveform */
.voice-waveform {
  display:flex; align-items:center; justify-content:center;
  gap:3px; height:60px; width:100%; padding:0 10px;
}
.wb {
  display:inline-block; width:4px; min-height:4px;
  background:var(--accent); border-radius:2px; opacity:.45;
  transition:height .1s ease, opacity .1s ease;
}
.voice-waveform.recording .wb {
  opacity:1;
  animation:wbAnim .85s ease-in-out infinite alternate;
}
/* 20 bars with staggered delays */
.wb:nth-child(1)  { animation-delay:.00s; }
.wb:nth-child(2)  { animation-delay:.04s; }
.wb:nth-child(3)  { animation-delay:.08s; }
.wb:nth-child(4)  { animation-delay:.12s; }
.wb:nth-child(5)  { animation-delay:.06s; }
.wb:nth-child(6)  { animation-delay:.10s; }
.wb:nth-child(7)  { animation-delay:.02s; }
.wb:nth-child(8)  { animation-delay:.14s; }
.wb:nth-child(9)  { animation-delay:.07s; }
.wb:nth-child(10) { animation-delay:.03s; }
.wb:nth-child(11) { animation-delay:.09s; }
.wb:nth-child(12) { animation-delay:.05s; }
.wb:nth-child(13) { animation-delay:.13s; }
.wb:nth-child(14) { animation-delay:.01s; }
.wb:nth-child(15) { animation-delay:.11s; }
.wb:nth-child(16) { animation-delay:.06s; }
.wb:nth-child(17) { animation-delay:.08s; }
.wb:nth-child(18) { animation-delay:.04s; }
.wb:nth-child(19) { animation-delay:.10s; }
.wb:nth-child(20) { animation-delay:.02s; }
@keyframes wbAnim {
  0%   { height:4px; }
  100% { height:44px; }
}

.voice-state-row { display:flex; align-items:center; gap:8px; }
.voice-state-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--text-3); flex-shrink:0;
  transition:background var(--transition), box-shadow var(--transition);
}
.voice-state-dot.recording { background:var(--danger); box-shadow:0 0 8px var(--danger); animation:dotPulse 1s ease-in-out infinite; }
.voice-state-dot.done      { background:var(--success); }
@keyframes dotPulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
#voiceStatus { font-size:.85rem; color:var(--text-2); }

.voice-model-row { display:flex; gap:6px; }
.vmodel-opt {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-pill); font-size:.8rem; font-weight:500;
  color:var(--text-3); cursor:pointer;
  transition:all var(--transition);
}
.vmodel-opt.active { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }
.vmodel-opt:hover:not(.active) { color:var(--text); background:var(--surface-2); }

.voice-transcript-box {
  width:100%; min-height:52px;
  background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:var(--radius-sm); padding:10px 14px;
  font-size:.875rem; color:var(--text); line-height:1.5;
  word-break:break-word;
}
.voice-placeholder { color:var(--text-3); font-style:italic; }

.voice-controls { display:flex; align-items:center; gap:10px; width:100%; justify-content:center; }

.voice-record-btn {
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:#fff; cursor:pointer; border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 20px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.30);
  transition:box-shadow var(--transition),transform var(--transition);
  position:relative; overflow:hidden; flex-shrink:0;
}
.voice-record-btn:hover { box-shadow:0 0 0 2px var(--accent-2),0 8px 28px var(--accent-glow); transform:scale(1.07); }
.voice-record-btn.recording {
  background:linear-gradient(135deg,#dc2626,#ef4444);
  box-shadow:0 4px 20px rgba(220,38,38,.4);
  animation:recordPulse 1.5s ease-in-out infinite;
}
@keyframes recordPulse { 0%,100%{box-shadow:0 4px 20px rgba(220,38,38,.4);} 50%{box-shadow:0 4px 28px rgba(220,38,38,.7);} }

.voice-tts-row { display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap; justify-content:center; }

/* ================================================================
   THINKING BLOCK
   ================================================================ */
@keyframes thinkPulse {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 4px var(--accent-glow); }
}

.think-block {
  margin: 0 0 4px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  overflow: hidden;
  animation: msgIn .35s ease both;
}
/* Pulse only added via JS class after entry animation finishes */
.think-block.think-pulsing { animation: thinkPulse 2.4s ease-in-out infinite; }
[data-theme="light"] .think-block { background: var(--surface); }

.think-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; cursor: pointer; user-select: none;
  font-size: .78rem; font-weight: 600; color: var(--text-2);
  gap: 8px;
}
.think-header-left { display: flex; align-items: center; gap: 8px; flex:1; min-width:0; }
.think-icon-wrap {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.think-icon-wrap i { font-size: .72rem; color: var(--accent); }
.think-label { flex-shrink: 0; }
.think-toggle { font-size: .62rem; color: var(--text-3); transition: transform var(--transition); flex-shrink:0; }
.think-block.collapsed .think-toggle { transform: rotate(-90deg); }

.think-body {
  padding: 8px 12px; border-top: 1px solid var(--border-2);
  font-size: .80rem; color: var(--text-2); line-height: 1.72;
  word-break: break-word;
  max-height: 380px; overflow-y: auto; overflow-x: hidden;
  transition: max-height .32s ease, padding .32s ease;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  display: flex; flex-direction: column; gap: 5px;
}
.think-block.collapsed .think-body {
  max-height: 0; padding-top: 0; padding-bottom: 0; border-top: none; overflow: hidden;
}

/* Formatted think content */
.think-step {
  display: flex; gap: 8px; align-items: flex-start; padding: 4px 0;
  border-bottom: 1px solid var(--border-2);
}
.think-step:last-child { border-bottom: none; }
.think-step-num {
  min-width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); color: var(--accent);
  font-size: .70rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.think-step-text { flex: 1; }
.think-bullet {
  display: flex; gap: 6px; align-items: flex-start; color: var(--text-2);
}
.think-bullet i { color: rgba(124,58,237,.5); font-size: .65rem; margin-top: 4px; flex-shrink:0; }
.think-line { color: var(--text-3); font-style: italic; }

.think-token-count {
  font-size: .68rem; color: rgba(124,58,237,.6);
  background: rgba(124,58,237,.10); border-radius: var(--radius-pill);
  padding: 1px 7px; flex-shrink: 0;
}
.think-dots { display: inline-flex; gap: 3px; align-items: center; }
.think-dots span {
  width: 4px; height: 4px; background: #7c3aed; border-radius: 50%;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.think-dots span:nth-child(2) { animation-delay: .15s; }
.think-dots span:nth-child(3) { animation-delay: .30s; }

/* ================================================================
   ENHANCED CODE BLOCKS
   ================================================================ */
.code-wrap {
  margin: 10px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  background: #1e2130;
}
.code-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px;
  background: #161824;
  border-bottom: 1px solid rgba(255,255,255,.06);
  gap: 8px;
}
.code-lang {
  font-size: .70rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.40); font-family: 'JetBrains Mono','Fira Code',monospace;
}
.code-actions { display: flex; gap: 4px; flex-shrink: 0; }
.code-action-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-pill);
  font-size: .70rem; color: rgba(255,255,255,.55);
  cursor: pointer; font-family: var(--font);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.code-action-btn:hover { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); }
.code-action-btn.success { color: #4ade80; border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); }
.code-action-btn.preview-active { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.08); }

.code-wrap pre[data-lang],
.code-wrap.code-partial pre {
  margin: 0 !important; padding: 14px 16px !important;
  overflow-x: auto; background: transparent !important;
  font-size: .83rem !important; line-height: 1.62 !important;
  border: none !important; border-radius: 0 !important;
  /* Allow user to scroll while streaming */
  overscroll-behavior-x: contain;
}
.code-wrap pre[data-lang] code,
.code-wrap.code-partial pre code {
  background: transparent !important; padding: 0 !important;
  font-size: inherit !important; border-radius: 0 !important;
  font-family: 'JetBrains Mono','Fira Code',monospace !important;
  white-space: pre;
}

.code-preview-frame {
  width: 100%; border: none; border-top: 1px solid rgba(255,255,255,.06);
  background: #fff; min-height: 180px; max-height: 420px;
  display: none; resize: vertical; overflow: auto;
}
.code-preview-frame.active { display: block; }

/* ================================================================
   TABLES
   ================================================================ */
.msg-table-wrap {
  overflow-x: auto; margin: 12px 0;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.msg-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.msg-table th {
  padding: 9px 14px; text-align: left; font-weight: 600; font-size: .78rem;
  background: var(--surface-2); color: var(--text-2);
  border-bottom: 2px solid var(--border); white-space: nowrap;
  letter-spacing: .03em;
}
.msg-table td {
  padding: 9px 14px; color: var(--text);
  border-bottom: 1px solid var(--border-2);
}
.msg-table tr:last-child td { border-bottom: none; }
.msg-table tbody tr { transition: background var(--transition); }
.msg-table tbody tr:hover td { background: var(--surface-2); }

/* ================================================================
   RENDER ERROR
   ================================================================ */
.render-error {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin: 8px 0;
  background: var(--danger-glow); border: 1px solid rgba(220,38,38,.25);
  border-radius: var(--radius-sm);
  font-size: .82rem; color: var(--danger);
}
.render-error i { flex-shrink: 0; }

/* ================================================================
   CHARTS
   ================================================================ */
@keyframes richIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes timelineItemIn {
  from { opacity:0; }
  to   { opacity:1; }
}

.chart-wrap {
  margin: 12px 0; padding: 16px 20px;
  border-radius: var(--radius-sm);
  animation: richIn .4s cubic-bezier(.22,1,.36,1) both;
  background: var(--surface-2); border: 1px solid var(--border);
  max-width: 560px;
}
.chart-wrap canvas { max-height: 300px; }

/* ================================================================
   MESSAGE METADATA FOOTER
   ================================================================ */
.msg-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 5px; padding: 2px 0;
  font-size: .67rem; color: var(--text-3);
  opacity: 0; transition: opacity var(--transition);
  pointer-events: none;
}
.msg:hover .msg-meta { opacity: 1; }
.msg.user .msg-meta { justify-content: flex-end; }
.msg-meta-item { display: flex; align-items: center; gap: 3px; }
.msg-meta-item i { font-size: .60rem; opacity: .7; }
.msg-meta-sep {
  width: 3px; height: 3px; background: var(--text-3);
  border-radius: 50%; opacity: .4; flex-shrink: 0;
}

/* ================================================================
   BLOCKQUOTE / HR / STRIKETHROUGH / HEADINGS
   ================================================================ */
.msg-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 10px 0; padding: 8px 14px;
  background: var(--accent-glow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-2); font-style: italic;
}
.msg-content hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.msg-content del { text-decoration: line-through; color: var(--text-3); }
.msg-content h1 { font-size: 1.65em; font-weight: 700; margin: 18px 0 8px; letter-spacing: -.03em; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.msg-content h2 { font-size: 1.30em; font-weight: 700; margin: 16px 0 6px; letter-spacing: -.02em; color: var(--text); }
.msg-content h3 { font-size: 1.10em; font-weight: 600; margin: 12px 0 5px; color: var(--text); }
.msg-content strong { font-weight: 700; color: var(--text); }

/* ================================================================
   FLASHCARDS
   ================================================================ */
.flashcard-deck {
  margin: 12px 0; user-select: none;
  animation: richIn .4s cubic-bezier(.22,1,.36,1) both;
}
.flashcard-progress {
  text-align: center; font-size: .74rem; color: var(--text-3); margin-bottom: 10px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.flashcard-wrap {
  perspective: 1200px; width: 100%; height: 190px; cursor: pointer; margin-bottom: 12px;
}
.flashcard-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.flashcard-wrap.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 28px; border-radius: var(--radius);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  text-align: center; line-height: 1.6;
}
.flashcard-front {
  background: linear-gradient(135deg, rgba(59,130,246,.18) 0%, rgba(124,58,237,.14) 100%);
  border-top: 1px solid rgba(255,255,255,.46);
  border-left: 1px solid rgba(255,255,255,.22);
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 8px 32px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.38);
}
.flashcard-back {
  background: linear-gradient(135deg, rgba(124,58,237,.18) 0%, rgba(59,130,246,.12) 100%);
  border-top: 1px solid rgba(255,255,255,.46);
  border-left: 1px solid rgba(255,255,255,.22);
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 8px 32px rgba(124,58,237,.12), inset 0 1px 0 rgba(255,255,255,.38);
  transform: rotateY(180deg);
}
.flashcard-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px; opacity: .7;
}
.flashcard-text { font-size: .95rem; font-weight: 500; color: var(--text); }
.flashcard-back .flashcard-text { font-size: .875rem; font-weight: 400; color: var(--text-2); }
.flashcard-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.flashcard-nav button {
  padding: 7px 18px; border-radius: var(--radius-pill);
  background: linear-gradient(160deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 100%);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  border-top: 1px solid rgba(255,255,255,.50);
  border-left: 1px solid rgba(255,255,255,.24);
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.10);
  color: var(--text); font-size: .82rem; font-family: var(--font); font-weight: 500;
  cursor: pointer; transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.flashcard-nav button:hover { box-shadow: 0 0 0 1.5px var(--accent), 0 4px 16px var(--accent-glow); color: var(--accent); transform: translateY(-1px); }
.flashcard-nav .fc-flip { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border: none; box-shadow: 0 4px 14px var(--accent-glow); }

/* ================================================================
   TIMELINE
   ================================================================ */
.timeline-wrap { margin: 12px 0; position: relative; padding-left: 28px; }
.timeline-line {
  position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  border-radius: 2px;
}
.timeline-wrap { animation: richIn .35s cubic-bezier(.22,1,.36,1) both; }
.timeline-item {
  position: relative; margin-bottom: 20px;
  animation: timelineItemIn .38s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 75ms);
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot {
  position: absolute; left: -23px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 12px var(--accent-glow);
}
.timeline-year {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 3px;
}
.timeline-event { font-size: .9rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.timeline-desc { font-size: .80rem; color: var(--text-2); line-height: 1.55; }

/* ================================================================
   PROGRESS BARS
   ================================================================ */
.progress-wrap { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; animation: richIn .35s cubic-bezier(.22,1,.36,1) both; }
.progress-item {}
.progress-label-row { display: flex; justify-content: space-between; margin-bottom: 5px; }
.progress-label { font-size: .82rem; font-weight: 500; color: var(--text); }
.progress-val { font-size: .78rem; color: var(--text-3); }
.progress-track {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); overflow: hidden; position: relative;
}
.progress-fill {
  height: 100%; border-radius: var(--radius-pill);
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
.progress-fill::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  border-radius: inherit;
}

/* ================================================================
   COMPARE CARDS
   ================================================================ */
.compare-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0;
  animation: richIn .4s cubic-bezier(.22,1,.36,1) both;
}
.compare-card {
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden;
}
.compare-card-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(124,58,237,.10));
  border-bottom: 1px solid var(--border);
  font-size: .9rem; font-weight: 700; color: var(--text);
}
.compare-card:nth-child(2) .compare-card-header {
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(59,130,246,.10));
}
.compare-section { padding: 10px 16px; border-bottom: 1px solid var(--border-2); }
.compare-section:last-child { border-bottom: none; }
.compare-section-title {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}
.compare-item {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: .80rem; color: var(--text-2); line-height: 1.5; margin-bottom: 3px;
}
.compare-item:last-child { margin-bottom: 0; }
.compare-item i { font-size: .68rem; margin-top: 3px; flex-shrink: 0; }
.compare-item.pro i { color: var(--success); }
.compare-item.con i { color: var(--danger); }
.compare-item.neutral i { color: var(--text-3); }

/* ================================================================
   KANBAN
   ================================================================ */
.kanban-wrap {
  display: flex; gap: 10px; margin: 12px 0; overflow-x: auto;
  animation: richIn .4s cubic-bezier(.22,1,.36,1) both;
  padding-bottom: 4px; scrollbar-width: thin;
}
.kanban-col {
  min-width: 180px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.kanban-col-header {
  padding: 10px 12px; font-size: .78rem; font-weight: 700;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.kanban-count {
  font-size: .68rem; background: var(--surface); border-radius: var(--radius-pill);
  padding: 1px 7px; color: var(--text-3);
}
.kanban-items { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kanban-item {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 8px 10px;
  font-size: .80rem; color: var(--text); line-height: 1.4;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: default;
}
.kanban-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.14); }

/* ================================================================
   FILE DOWNLOAD CARD
   ================================================================ */
.file-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin: 10px 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg,rgba(59,130,246,.10) 0%,rgba(59,130,246,.04) 100%);
  border: 1px solid rgba(59,130,246,.25);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.file-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px var(--accent-glow); }
.file-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
}
.file-card-icon.pdf   { background: linear-gradient(135deg,#dc2626,#ef4444); }
.file-card-icon.xlsx  { background: linear-gradient(135deg,#16a34a,#22c55e); }
.file-card-icon.docx  { background: linear-gradient(135deg,#2563eb,#3b82f6); }
.file-card-icon.pptx  { background: linear-gradient(135deg,#ea580c,#f97316); }
.file-card-icon.csv   { background: linear-gradient(135deg,#0891b2,#06b6d4); }
.file-card-body { flex: 1; min-width: 0; }
.file-card-name { font-size: .9rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-card-meta { font-size: .74rem; color: var(--text-3); margin-top: 2px; }
.file-card-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  border: none; border-radius: var(--radius-pill);
  color: #fff; font-size: .80rem; font-family: var(--font); font-weight: 600;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.file-card-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }

/* ================================================================
   USAGE PANEL
   ================================================================ */
.usage-overlay {
  position: fixed; inset: 0; z-index: 450;
  background: rgba(0,0,0,.50); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.usage-overlay.open { opacity: 1; pointer-events: all; }

.usage-panel {
  position: fixed; top: 50%; left: 50%; z-index: 460;
  transform: translate(-50%,-50%) scale(.92);
  width: min(860px, 95vw); max-height: 86vh;
  background: var(--bg-solid); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .32s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
[data-theme="light"] .usage-panel { background: #f4f7fc; }
.usage-panel.open { opacity: 1; pointer-events: all; transform: translate(-50%,-50%) scale(1); }

.usage-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.usage-header h2 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); }
.usage-header h2 i { color: var(--accent); }
.usage-header-right { display: flex; align-items: center; gap: 8px; }

.usage-stats-row {
  display: flex; gap: 12px; padding: 16px 24px 0; flex-shrink: 0; flex-wrap: wrap;
}
.usage-stat-card {
  flex: 1; min-width: 120px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.usage-stat-label { font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.usage-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1; }
.usage-stat-sub { font-size: .72rem; color: var(--text-3); margin-top: 2px; }

.usage-charts {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 24px 24px; overflow-y: auto; flex: 1;
  scrollbar-width: thin;
}
.usage-chart-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px;
  /* Keep chart canvas from overflowing its box */
  min-width: 0; width: 100%;
}
.usage-chart-box canvas { max-height: 240px; }
.usage-chart-box--wide { /* no special treatment needed in single-column layout */ }
.usage-chart-title { font-size: .78rem; font-weight: 600; color: var(--text-2); margin-bottom: 12px; }

/* ================================================================
   SCROLLBARS & RESPONSIVE
   ================================================================ */
* { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

@media (max-width:700px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; z-index:50; transform:translateX(-100%); }
  .sidebar.mobile-open { transform:translateX(0); }
  #sidebarOpenBtn { display:flex !important; }
  .model-dropdown { width:280px; }
  .msg-body { max-width:90%; }
}

/* ================================================================
   SCROLL TO BOTTOM BUTTON
   ================================================================ */
.scroll-bottom-btn {
  position: absolute; bottom: 14px; right: 18px; z-index: 40;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: var(--shadow);
  color: var(--text-2); font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
  animation: fadeInUp .2s ease;
}
.scroll-bottom-btn:hover { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 4px 20px var(--accent-glow); }
@keyframes fadeInUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* ================================================================
   CODE PREVIEW PANEL (right side)
   ================================================================ */
.preview-panel {
  position: fixed; top: 0; right: -520px; width: 520px; height: 100dvh; z-index: 300;
  display: flex; flex-direction: column;
  background: var(--bg-solid);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,.18);
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.preview-panel.open { right: 0; }
.preview-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.preview-panel-title { font-size: .82rem; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.preview-panel-title i { color: var(--accent); }
.preview-panel-actions { display: flex; gap: 6px; }
.preview-panel-btn {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
  background: transparent; color: var(--text-3); font-size: .8rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--transition);
}
.preview-panel-btn:hover { background: var(--surface-2); color: var(--text); }
.preview-panel #previewPanelFrame {
  flex: 1; border: none; background: #fff;
}

/* rich-loading is replaced by .skel-wrap - keeping selector for safety */
.rich-loading-pulse {
  display: none; /* replaced by skeleton */
}

/* ================================================================
   SEARCH CARD COLLAPSE
   ================================================================ */
.sc-collapse-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: .7rem; padding: 2px 6px; border-radius: 5px;
  transition: color var(--transition);
}
.sc-collapse-btn:hover { color: var(--text); }
.search-card.collapsed .search-queries,
.search-card.collapsed .search-results,
.search-card.collapsed .search-show-more { display: none; }

/* partial/streaming code block */
.code-wrap.code-partial { opacity: .82; }
.code-wrap.code-partial .code-header { background: #161824; }

/* ================================================================
   RENAME MODAL
   ================================================================ */
.rename-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.rename-overlay.open { opacity: 1; pointer-events: all; }

.rename-modal {
  position: fixed; top: 50%; left: 50%; z-index: 601;
  transform: translate(-50%, -48%) scale(.96);
  width: min(380px, calc(100vw - 40px));
  background: var(--bg-solid);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid rgba(255,255,255,.42);
  border-left: 1px solid rgba(255,255,255,.18);
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.rename-modal.open { opacity: 1; pointer-events: all; transform: translate(-50%,-50%) scale(1); }
[data-theme="light"] .rename-modal {
  background: #f4f7fc;
}
.rename-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9rem; font-weight: 600; color: var(--text);
}
.rename-modal-header span { display: flex; align-items: center; gap: 8px; }
.rename-modal-header i { color: var(--accent); }
.rename-input {
  width: 100%; padding: 10px 14px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font); font-size: .9rem;
  outline: none; transition: border-color var(--transition);
}
.rename-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.rename-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.accent-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* ================================================================
   AUTH GUARD - prevents flash of app content before login check
   ================================================================ */

/* If a token exists in localStorage, hide login overlay before first paint - no flash */
html.has-token #loginOverlay { display: none !important; }

/* Hide only the real app content - NOT overlays (they have their own opacity logic) */
body.auth-loading .ambient,
body.auth-loading aside.sidebar,
body.auth-loading main {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Fade app content in once auth resolves */
body.app-visible .ambient,
body.app-visible aside.sidebar,
body.app-visible main {
  opacity: 1;
  transition: opacity .25s ease;
}

/* ================================================================
   LOGIN OVERLAY
   ================================================================ */
.login-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  opacity: 1; transition: opacity .4s ease;
}
.login-overlay.hidden { opacity: 0; pointer-events: none; }

.login-box {
  width: min(400px, calc(100vw - 40px));
  padding: 36px 32px 32px;
  border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: linear-gradient(160deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.07) 100%);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid rgba(255,255,255,.42);
  border-left: 1px solid rgba(255,255,255,.18);
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.14);
  box-shadow: var(--shadow-lg);
  animation: loginBoxIn .5s cubic-bezier(.16,1,.3,1) both;
}
[data-theme="light"] .login-box {
  background: linear-gradient(160deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.60) 100%);
}
@keyframes loginBoxIn {
  from { opacity:0; transform:translateY(24px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.login-logo {
  width: 60px; height: 60px;
  background-image: url('assets/logo.png');
  background-size: 200% 100%;
  background-position: var(--logo-pos);
  background-repeat: no-repeat;
  border-radius: 16px;
  margin-bottom: 14px;
}
.login-title {
  font-size: 1.5rem; font-weight: 700; color: var(--text);
  margin-bottom: 4px; text-align: center;
}
.login-sub {
  font-size: .85rem; color: var(--text-3); margin-bottom: 28px; text-align: center;
}

.login-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }

.login-field {
  position: relative; display: flex; align-items: center;
}
.login-field-icon {
  position: absolute; left: 14px; color: var(--text-3); font-size: .85rem;
  pointer-events: none; z-index: 1;
}
.login-input {
  width: 100%; padding: 11px 14px 11px 38px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font); font-size: .92rem;
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.login-error {
  background: var(--danger-glow); border: 1px solid var(--danger);
  border-radius: var(--radius-sm); padding: 9px 13px;
  font-size: .82rem; color: var(--danger);
  display: flex; align-items: center; gap: 8px;
}

.login-btn {
  width: 100%; padding: 12px !important;
  font-size: .95rem !important; font-weight: 600 !important;
  margin-top: 4px; justify-content: center;
  letter-spacing: .02em;
}
.login-credit {
  margin-top: 20px; font-size: .72rem; color: var(--text-3);
  opacity: .55; text-align: center; letter-spacing: .02em;
}
.login-credit strong { font-weight: 600; color: var(--text-2); }

/* ================================================================
   ADMIN PANEL
   ================================================================ */
.admin-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.admin-overlay.open { opacity: 1; pointer-events: all; }

.admin-panel {
  position: fixed; top: 0; right: -560px; width: min(560px, 100vw); height: 100dvh; z-index: 701;
  display: flex; flex-direction: column;
  background: var(--bg-solid); border-left: 1px solid var(--border);
  box-shadow: -8px 0 40px rgba(0,0,0,.35);
  transition: right .32s cubic-bezier(.4,0,.2,1);
}
.admin-panel.open { right: 0; }

.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.admin-header h2 {
  font-size: 1rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.admin-header h2 i { color: var(--accent); }
.admin-header-right { display: flex; align-items: center; gap: 8px; }

.admin-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

.admin-add-form {
  border-radius: var(--radius-sm); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--accent); background: var(--surface);
}
.admin-add-title {
  font-size: .87rem; font-weight: 600; color: var(--accent);
  display: flex; align-items: center; gap: 7px;
}
.admin-fields { display: flex; flex-direction: column; gap: 8px; }
.admin-fields .login-input { padding: 10px 14px; }
.admin-add-actions { display: flex; gap: 8px; justify-content: flex-end; }
.admin-add-error {
  font-size: .81rem; color: var(--danger); padding: 8px 12px;
  background: var(--danger-glow); border-radius: 7px; border: 1px solid var(--danger);
}

.admin-user-list { display: flex; flex-direction: column; gap: 8px; }
.admin-loading { color: var(--text-3); font-size: .88rem; padding: 20px; text-align: center; }

.admin-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  transition: background var(--transition);
}
.admin-user-row:hover { background: var(--surface-2); }
.admin-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-glow); border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: var(--accent);
  flex-shrink: 0;
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name { font-size: .9rem; font-weight: 600; color: var(--text); }
.admin-user-meta { font-size: .76rem; color: var(--text-3); margin-top: 2px; }
.admin-user-badge {
  font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--accent-glow); color: var(--accent); border: 1px solid var(--accent);
  letter-spacing: .04em; text-transform: uppercase;
}
.admin-user-badge.role-admin { background: rgba(139,92,246,.18); color: #8b5cf6; border-color: #8b5cf6; }
.admin-user-actions { display: flex; gap: 6px; flex-shrink: 0; }

.glass-select {
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font); font-size: .88rem;
  outline: none; cursor: pointer;
}
.glass-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ================================================================
   FLASHCARD SLIDE ANIMATION
   ================================================================ */
.flashcard-wrap {
  transition: opacity .18s ease, transform .18s ease;
}
.flashcard-wrap.fc-slide-out-left  { opacity: 0; transform: translateX(-28px) !important; }
.flashcard-wrap.fc-slide-out-right { opacity: 0; transform: translateX(28px) !important; }
.flashcard-wrap.fc-slide-in-left   { opacity: 0; transform: translateX(-28px) !important; transition: none !important; }
.flashcard-wrap.fc-slide-in-right  { opacity: 0; transform: translateX(28px) !important; transition: none !important; }

/* ================================================================
   MOBILE / RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  :root { --sidebar-w: 240px; }

  body { flex-direction: column; }

  /* Sidebar becomes a drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh;
    transform: translateX(-100%); z-index: 500;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    border-right: 1px solid var(--border);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 40px rgba(0,0,0,.35);
  }
  /* Collapsed sidebar on mobile just hides */
  .sidebar.collapsed { transform: translateX(-100%) !important; }

  /* Mobile backdrop when sidebar open */
  .sidebar-mobile-backdrop {
    position: fixed; inset: 0; z-index: 499;
    background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .sidebar-mobile-backdrop.visible { opacity: 1; pointer-events: all; }

  .main {
    width: 100vw; padding-left: 0;
    margin-left: 0 !important;
  }

  /* Always show the hamburger on mobile */
  #sidebarOpenBtn { display: flex !important; }
  #sidebarToggle { display: none; }

  .topbar { padding: 8px 12px; }
  .topbar-center { flex: 1; justify-content: center; }

  .model-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .chat-area { padding: 12px 20px; }

  .msg { max-width: 100%; padding: 0; }
  .msg-avatar { display: none; }
  .msg.user .msg-body { margin-left: 0; }
  /* On mobile, avatar hidden - remove indent from assistant content */
  .msg.assistant .msg-body { padding-left: 0; }
  .msg.assistant .msg-inner-row { margin-bottom: 2px; }

  /* Mobile: more neutral, less colorful message bubbles */
  .msg.user .msg-content {
    background: rgba(30,58,138,0.18);
    border-top-color: rgba(255,255,255,.20);
    border-left-color: rgba(255,255,255,.10);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }
  [data-theme="light"] .msg.user .msg-content {
    background: rgba(37,99,235,0.10);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }

  /* Input - smaller on mobile */
  .input-area { padding: 6px 12px 8px; }
  .input-box { padding: 6px 8px 6px; }
  /* toolbar never clips: if buttons don't fit (small phones) it scrolls, send stays put */
  .input-toolbar-left { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .input-toolbar-left::-webkit-scrollbar { display: none; }
  .input-toolbar-left .icon-btn { flex: 0 0 auto; }
  .input-toolbar-right { flex-shrink: 0; }
  .speed-label { display: none; }
  .icon-btn { width: 38px; height: 38px; font-size: .9rem; }
  .send-btn { width: 40px; height: 40px; font-size: .95rem; }
  /* Smaller hero gradient zone (blobs) */
  .blob-1 { width: 320px; height: 320px; }
  .blob-2 { width: 260px; height: 260px; }
  .blob-3 { width: 210px; height: 210px; }

  /* Settings panel full-width */
  .settings-panel { width: 100vw; }

  /* Model dropdown */
  .model-dropdown { min-width: 280px; max-width: calc(100vw - 20px); left: 50%; transform: translateX(-50%); }

  /* Welcome screen */
  .welcome-title { font-size: 1.4rem; }
  .welcome-sub   { font-size: .82rem; }
  .welcome-suggestions { gap: 6px; }
  .suggestion-chip span { display: none; }
  .suggestion-chip { padding: 10px 14px; }

  /* Preview panel */
  .preview-panel { width: 100vw; right: -100vw; }

  /* Admin panel */
  .admin-panel { width: 100vw; }

  /* Code wrap */
  .code-wrap { font-size: .78rem; }

  /* Charts */
  .chart-wrap { max-width: 100%; }

  /* Kanban */
  .kanban-wrap { flex-direction: column; }
  .kanban-col { min-width: 0; width: 100%; }

  /* Compare */
  .compare-wrap { flex-direction: column; }
  .compare-card { width: 100%; }
}

@media (max-width: 480px) {
  .chat-area { padding: 10px 16px; }
  .welcome-title { font-size: 1.2rem; }
  .msg { padding: 0; font-size: .88rem; }
  .input-toolbar-left .icon-btn { width: 36px; height: 36px; font-size: .86rem; }
  .send-btn { width: 38px; height: 38px; font-size: .92rem; }
  .model-name { max-width: 90px; }
  .login-box { padding: 28px 20px 24px; }
  .flashcard-wrap { min-height: 140px; }
}

/* Sidebar collapsed state on desktop (non-mobile) */
@media (min-width: 769px) {
  .sidebar-mobile-backdrop { display: none !important; }
  .sidebar.collapsed { transform: translateX(-100%); }
  .sidebar.collapsed ~ .main,
  .main { transition: margin-left .28s cubic-bezier(.4,0,.2,1); }
}

/* ================================================================
   ████  LINEAR / VERCEL OVERHAUL LAYER  ████
   Solid surfaces, hairline borders, one electric-blue accent,
   restrained motion. Appended so the cascade wins over the older
   liquid-glass rules. Selectors prefixed with html[data-theme=...]
   to outrank every existing [data-theme=...] rule. No structure or
   IDs touched - JS/functionality is untouched.
   ================================================================ */

/* ---- Self-hosted Geist (no external font link) ---------------- */
@font-face {
  font-family: 'Geist';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/GeistMono-Variable.woff2') format('woff2');
}

/* ---- Token system: dark (default) ----------------------------- */
html[data-theme="dark"] {
  --bg:            #0a0a0c;
  --bg-2:          #161619;
  --bg-solid:      #0f0f12;
  --surface:       #161619;
  --surface-2:     #121215;
  --surface-heavy: #0f0f12;
  --surface-hover: #1c1c21;
  --surface-active:#232329;
  --border:        rgba(255,255,255,0.09);
  --border-2:      rgba(255,255,255,0.055);
  --border-hi:     rgba(255,255,255,0.15);
  --text:          #ededed;
  --text-2:        #a1a1aa;
  --text-3:        #6c6c76;
  --accent:        #3b82f6;
  --accent-2:      #60a5fa;
  --accent-glow:   rgba(59,130,246,0.16);
  --danger:        #f87171;
  --danger-glow:   rgba(248,113,113,0.14);
  --success:       #4ade80;
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.40);
  --shadow:        0 4px 16px rgba(0,0,0,0.50);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.62);
  --shadow-glass:  0 1px 2px rgba(0,0,0,0.40);
  --blur:          none;
  --blur-sm:       none;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-pill:   999px;
  --transition:    0.15s cubic-bezier(0.4,0,0.2,1);
  --font:          'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- Token system: light -------------------------------------- */
:root,
html[data-theme="light"] {
  --bg:            #fbfbfc;
  --bg-2:          #f0f0f2;
  --bg-solid:      #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f6f6f7;
  --surface-heavy: #ffffff;
  --surface-hover: #f1f1f3;
  --surface-active:#e9e9ec;
  --border:        rgba(0,0,0,0.10);
  --border-2:      rgba(0,0,0,0.06);
  --border-hi:     rgba(0,0,0,0.16);
  --text:          #16161a;
  --text-2:        #52525b;
  --text-3:        #8a8a93;
  --accent:        #2563eb;
  --accent-2:      #3b82f6;
  --accent-glow:   rgba(37,99,235,0.12);
  --danger:        #dc2626;
  --danger-glow:   rgba(220,38,38,0.10);
  --success:       #16a34a;
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.06);
  --shadow:        0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.14);
  --shadow-glass:  0 1px 2px rgba(0,0,0,0.06);
  --blur:          none;
  --blur-sm:       none;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-pill:   999px;
  --transition:    0.15s cubic-bezier(0.4,0,0.2,1);
  --font:          'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- Base typography + clean flat background ------------------ */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html[data-theme="dark"]  body { background: radial-gradient(110% 60% at 50% -12%, rgba(59,130,246,0.055), transparent 55%), var(--bg); }
html[data-theme="light"] body { background: radial-gradient(110% 60% at 50% -12%, rgba(37,99,235,0.05),  transparent 55%), var(--bg); }
.ambient { display: none !important; }

/* Keyboard focus ring (a11y) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Motion restraint: drop decorative pseudo + infinite loops */
.glass-btn::before, .glass-btn::after,
.model-switcher::after, .send-btn::before,
.progress-fill::after { display: none !important; }
.welcome-logo { animation: none !important; }
html[data-theme="dark"]  .welcome-logo { filter: drop-shadow(0 0 22px rgba(59,130,246,0.28)); }
html[data-theme="light"] .welcome-logo { filter: drop-shadow(0 0 18px rgba(37,99,235,0.20)); }
.think-block.think-pulsing { animation: none !important; }
.suggestion-chip:hover { transform: translateY(-1px); }
.kanban-item:hover { transform: none; box-shadow: var(--shadow-sm); }

/* ---- Flatten glass utilities ---------------------------------- */
html[data-theme="dark"] .glass-heavy,  html[data-theme="light"] .glass-heavy,
html[data-theme="dark"] .glass-panel,  html[data-theme="light"] .glass-panel,
html[data-theme="dark"] .glass-input,  html[data-theme="light"] .glass-input {
  background: var(--surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .input-box.glass-input:focus-within,
html[data-theme="light"] .input-box.glass-input:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

html[data-theme="dark"] .glass-btn, html[data-theme="light"] .glass-btn {
  background: var(--surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
html[data-theme="dark"] .glass-btn:hover, html[data-theme="light"] .glass-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-hi) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-1px);
}
.glass-btn:active { transform: translateY(0) scale(.99) !important; }

html[data-theme="dark"] .accent-btn, html[data-theme="light"] .accent-btn,
html .login-btn.accent-btn {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html .accent-btn:hover {
  background: var(--accent-2) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

html[data-theme="dark"] .glass-select, html[data-theme="light"] .glass-select {
  background: var(--bg-2) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Icon buttons: quiet hover, no scale */
html[data-theme="dark"] .icon-btn:hover, html[data-theme="light"] .icon-btn:hover {
  background: var(--surface-hover) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  transform: none !important;
}
.icon-btn:active { transform: scale(.96) !important; }

/* ---- Chrome surfaces ------------------------------------------ */
html[data-theme="dark"] .sidebar, html[data-theme="light"] .sidebar {
  background: var(--bg-solid) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .topbar, html[data-theme="light"] .topbar {
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="dark"] .model-switcher, html[data-theme="light"] .model-switcher {
  background: var(--surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html .model-switcher:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-hi) !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-theme="dark"] .model-dropdown, html[data-theme="light"] .model-dropdown {
  background: var(--bg-solid) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Chat list rows */
html[data-theme="dark"] .chat-item:hover, html[data-theme="light"] .chat-item:hover {
  background: var(--surface-hover) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .chat-item.active, html[data-theme="light"] .chat-item.active {
  background: var(--surface-active) !important;
}

/* ---- Messages ------------------------------------------------- */
html[data-theme="dark"] .msg.user .msg-content {
  background: rgba(59,130,246,0.13) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(59,130,246,0.22) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .msg.user .msg-content {
  background: rgba(37,99,235,0.07) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(37,99,235,0.18) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .msg.assistant .msg-avatar,
html[data-theme="light"] .msg.assistant .msg-avatar {
  background: var(--surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .msg-action-btn, html[data-theme="light"] .msg-action-btn,
html[data-theme="dark"] .attachment-chip, html[data-theme="light"] .attachment-chip {
  background: var(--surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html .msg-action-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-hi) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  transform: none !important;
}

/* ---- Send button + toolbar toggles ---------------------------- */
html .send-btn { background: var(--accent) !important; box-shadow: none !important; }
html .send-btn:not(:disabled):hover {
  background: var(--accent-2) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  transform: translateY(-1px) !important;
}
html .send-btn:not(:disabled):hover i { transform: translateY(-1px); }
html[data-theme="dark"] .toolbar-toggle-btn.active,
html[data-theme="light"] .toolbar-toggle-btn.active {
  background: var(--accent-glow) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

/* ---- Theme toggle track --------------------------------------- */
html[data-theme="dark"] .theme-track, html[data-theme="light"] .theme-track {
  background: var(--surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html .theme-switch input:checked + .theme-track {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* ---- Panels / modals: solid neutral surfaces ------------------ */
html[data-theme="dark"] .login-box, html[data-theme="light"] .login-box,
html[data-theme="dark"] .rename-modal, html[data-theme="light"] .rename-modal {
  background: var(--bg-solid) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-theme="light"] .settings-panel,
html[data-theme="light"] .usage-panel,
html[data-theme="light"] .admin-panel { background: var(--bg-solid) !important; }
html .scroll-bottom-btn {
  background: var(--surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* ---- Purge the second (purple) accent → single blue ----------- */
html .soon-badge {
  color: var(--accent) !important;
  background: var(--accent-glow) !important;
  border-color: var(--accent) !important;
}
html .admin-user-badge.role-admin {
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
html .think-bullet i,
html .think-token-count,
html .think-dots span { color: var(--accent) !important; }
html .think-dots span { background: var(--accent) !important; }
html .think-token-count { background: var(--accent-glow) !important; }

html[data-theme="dark"] .flashcard-front, html[data-theme="light"] .flashcard-front,
html[data-theme="dark"] .flashcard-back,  html[data-theme="light"] .flashcard-back {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] .flashcard-nav button, html[data-theme="light"] .flashcard-nav button {
  background: var(--surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html .flashcard-nav .fc-flip {
  background: var(--accent) !important; border: 1px solid var(--accent) !important; color: #fff !important;
}
html .compare-card-header,
html .compare-card:nth-child(2) .compare-card-header { background: var(--surface-2) !important; }
html .timeline-dot { box-shadow: 0 0 0 3px var(--accent-glow) !important; }
html .file-card:hover { box-shadow: none !important; border-color: var(--accent) !important; }

/* ---- Code block surfaces, retinted to neutral ----------------- */
html .code-wrap { background: #15151a !important; border-color: var(--border) !important; }
html .code-header { background: #0f0f13 !important; border-bottom-color: var(--border) !important; }
html .code-wrap.code-partial .code-header { background: #0f0f13 !important; }

/* ---- Reduced motion (mandatory) ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   GENERATED IMAGE CARD + skeleton shine (post-overhaul fixes)
   ================================================================ */

/* Shine color token for skeleton shimmer */
html[data-theme="dark"]  { --skel-shine: rgba(255,255,255,0.30); }
:root, html[data-theme="light"] { --skel-shine: rgba(255,255,255,0.90); }

/* Generated image: sane scaling, stable layout, clean card */
html .msg-image-card {
  position: relative; display: inline-block; margin-top: 8px; max-width: 100%;
  line-height: 0;
}
html .msg-image {
  display: block; width: auto; height: auto;
  max-width: min(440px, 100%); max-height: 440px;
  object-fit: contain;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  margin-top: 0;
}
html .msg-image-actions {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 6px; line-height: 1;
  opacity: 0; transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease;
}
html .msg-image-card:hover .msg-image-actions,
html .msg-image-card:focus-within .msg-image-actions { opacity: 1; transform: translateY(0); }
html .img-act-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer;
  color: #fff; font-size: .78rem;
  background: rgba(0,0,0,0.58); border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transition: background .15s ease, transform .12s ease;
}
html .img-act-btn:hover { background: rgba(0,0,0,0.78); transform: translateY(-1px); }
html .img-act-btn:active { transform: scale(.94); }
html .img-act-btn.copied { color: var(--success); }

/* Skeleton shimmer: a solid base + a PSEUDO-ELEMENT shine that sweeps across via
   transform. Because transform translateX is relative to each element's own width,
   every skeleton - narrow bar or wide block - shimmers at the exact same speed and
   rhythm. Clean and even. The sweep phase is resumed through the --skel-delay
   custom property (set by JS) so frequent re-renders during streaming never restart
   or flash the animation. Kept alive under reduced-motion (functional feedback). */
html .skel-base, html .skel-bar, html .skel-img-block, html .skel-chart-bar {
  position: relative !important;
  overflow: hidden !important;
  background: var(--bg-2) !important;
  animation: none !important;
}
html .skel-base::after, html .skel-bar::after,
html .skel-img-block::after, html .skel-chart-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skel-shine) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skelSweep 1.5s ease-in-out infinite;
  animation-delay: var(--skel-delay, 0ms);
}
@keyframes skelSweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  html .skel-base::after, html .skel-bar::after,
  html .skel-img-block::after, html .skel-chart-bar::after {
    animation-name: skelSweep !important;
    animation-duration: 1.5s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
  }
}

/* Click-to-enlarge lightbox for generated images */
html .msg-image { cursor: zoom-in; }
html .msg-image-card { width: fit-content; max-width: min(440px, 100%); }
.img-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,0.86);
  opacity: 0; pointer-events: none; cursor: zoom-out;
  transition: opacity .2s ease;
}
.img-lightbox.open { opacity: 1; pointer-events: auto; }
.img-lightbox-img {
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transform: scale(.96); transition: transform .2s ease;
}
.img-lightbox.open .img-lightbox-img { transform: scale(1); }

/* Contain the assistant column + the thought/search boxes so NOTHING stretches
   edge-to-edge on a wide screen. Capping .msg-content also caps every rich visual
   inside it (charts/blue bars, tables, code, timelines, progress, compare, kanban,
   flashcards, file cards, skeletons). */
html .msg.assistant .msg-content,
html .think-block,
html .search-card { max-width: min(760px, 100%); }

/* Markdown lists + headings inside the Thinking box. The global *{padding:0}
   reset strips list indentation, so re-establish it (otherwise bullets/numbers
   don't show in the box). */
html .think-body ul,
html .think-body ol { padding-left: 20px; margin: 4px 0; }
html .think-body ul { list-style: disc; }
html .think-body ol { list-style: decimal; }
html .think-body li { margin: 2px 0; line-height: 1.6; display: list-item; }
html .think-body p  { margin: 4px 0; }
html .think-body h1, html .think-body h2, html .think-body h3 {
  font-size: .9rem; font-weight: 700; margin: 6px 0 3px;
}

/* Code blocks: tall blocks scroll internally and the title bar (lang + Preview /
   Copy / Download) stays pinned at the top while you scroll through the code. */
html .code-wrap {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}
html .code-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Resizable website-preview panel (drag the left edge).
   Slide via transform so it hides fully at ANY width (not a fixed -520px). */
html .preview-panel {
  right: 0 !important;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
html .preview-panel.open { transform: translateX(0); }
.preview-resize-handle {
  position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  cursor: ew-resize; z-index: 5;
  background: transparent;
  transition: background .15s ease;
}
.preview-resize-handle:hover,
.preview-resize-handle.dragging { background: var(--accent); }
body.preview-resizing { cursor: ew-resize; user-select: none; }
body.preview-resizing iframe { pointer-events: none; }

/* ================================================================
   ADMIN: integrations config + per-user plan select
   ================================================================ */
html .admin-plan-select {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: var(--font); font-size: .74rem;
  padding: 5px 8px; cursor: pointer; outline: none; max-width: 96px;
}
html .admin-plan-select:focus { border-color: var(--accent); }

html .admin-config { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; margin-bottom: 14px; }
html .admin-config-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; cursor: pointer; user-select: none;
  font-size: .9rem; font-weight: 600; color: var(--text);
}
html .admin-config-head span { display: flex; align-items: center; gap: 9px; }
html .admin-config-head i.fa-plug { color: var(--accent); }
html .cfg-chev { font-size: .72rem; color: var(--text-3); transition: transform .2s ease; }
html .admin-config-body { padding: 4px 16px 18px; border-top: 1px solid var(--border-2); }
html .admin-cfg-hint { font-size: .8rem; color: var(--text-3); line-height: 1.5; margin: 12px 0 16px; }
html .admin-cfg-hint code { font-family: var(--mono, monospace); background: var(--bg-2); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
html .admin-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html .admin-cfg-field { display: flex; flex-direction: column; gap: 5px; }
html .admin-cfg-field span { font-size: .74rem; color: var(--text-2); font-weight: 500; }
html .admin-cfg-field input {
  width: 100%; padding: 9px 11px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: .82rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
html .admin-cfg-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
html .admin-cfg-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; }
html .admin-cfg-status { font-size: .8rem; }
@media (max-width: 640px) { html .admin-cfg-grid { grid-template-columns: 1fr; } }

/* ================================================================
   LOGO: separate white/black files per theme (favicon stays logo.png)
   ================================================================ */
:root, html[data-theme="light"] { --logo-img: url('assets/logo_black.png'); }
html[data-theme="dark"]        { --logo-img: url('assets/logo_white.png'); }
html .logo, html .welcome-logo, html .login-logo,
html .md-provider-favicon.is-logo, html .md-model-favicon.is-logo {
  background-image: var(--logo-img) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
html .logo, html .md-provider-favicon.is-logo, html .md-model-favicon.is-logo { border-radius: 7px; }
html .login-logo { border-radius: 16px; }

/* ================================================================
   APP BACKGROUND: subtle blue grid + glow (like the landing page)
   ================================================================ */
html .ambient { display: block !important; }
html .ambient .blob { display: none !important; }
html .ambient::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}
html .ambient::after {
  content: ''; position: absolute; top: -280px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 620px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(59,130,246,0.20), transparent 62%);
  filter: blur(60px);
}
html[data-theme="dark"]  { --grid-line: rgba(255,255,255,0.045); }
html[data-theme="light"] { --grid-line: rgba(0,0,0,0.05); }
html[data-theme="light"] .ambient::after { background: radial-gradient(circle, rgba(37,99,235,0.14), transparent 62%); }

/* ================================================================
   ADMIN: tabs, analytics dashboard, support manager
   ================================================================ */
html .admin-tabs { display:flex; gap:4px; margin:0 20px 6px; padding:4px; background:var(--bg-2); border:1px solid var(--border); border-radius:14px; overflow-x:auto; scrollbar-width:none; }
html .admin-tabs::-webkit-scrollbar { display:none; }
html .admin-tab { flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 12px; border:none; background:transparent; color:var(--text-2); font-family:var(--font); font-weight:600; font-size:.82rem; border-radius:10px; cursor:pointer; white-space:nowrap; transition:background var(--transition), color var(--transition); }
html .admin-tab:hover { color:var(--text); background:var(--surface); }
html .admin-tab.active { background:var(--accent); color:#fff; }
html .admin-view { padding-top:12px; }

/* analytics */
html .an-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
html .an-stat { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:14px 16px; }
html .an-stat-ico { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent-glow); color:var(--accent); flex-shrink:0; }
html .an-stat.live .an-stat-ico { background:rgba(74,222,128,.14); color:var(--success); }
html .an-stat-val { font-size:1.5rem; font-weight:700; line-height:1; color:var(--text); }
html .an-stat-lab { font-size:.74rem; color:var(--text-3); margin-top:3px; }
html .an-charts { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
html .an-box { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:16px; min-width:0; }
html .an-box.an-wide { grid-column:1 / -1; }
html .an-box canvas { max-height:220px; }
html .an-t { font-size:.8rem; font-weight:600; color:var(--text-2); margin-bottom:12px; }
html .an-recent { display:flex; flex-direction:column; gap:8px; }
html .an-ru { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:10px 14px; }
html .an-ru-av { width:34px; height:34px; border-radius:50%; background:var(--accent-glow); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0; }
html .an-ru-info { flex:1; min-width:0; }
html .an-ru-name { font-size:.88rem; font-weight:600; color:var(--text); }
html .an-ru-meta { font-size:.74rem; color:var(--text-3); }
html .an-ru-badge { font-size:.68rem; font-family:var(--mono,monospace); text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:var(--radius-pill); border:1px solid var(--border); color:var(--text-3); }
html .an-ru-plan { font-size:.68rem; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:var(--radius-pill); }
html .an-ru-plan.plan-free { background:var(--surface-2); color:var(--text-3); }
html .an-ru-plan.plan-pro { background:var(--accent-glow); color:var(--accent); }
html .an-ru-plan.plan-ultimate { background:rgba(139,92,246,.16); color:#a78bfa; }
@media(max-width:640px){ html .an-stats{grid-template-columns:1fr 1fr;} html .an-charts{grid-template-columns:1fr;} }

/* support tickets (admin) */
html .tk { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:16px; margin-bottom:12px; }
html .tk.solved { opacity:.7; }
html .tk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
html .tk-meta { font-size:.74rem; color:var(--text-3); margin-top:3px; }
html .tk-status { font-size:.68rem; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:var(--radius-pill); }
html .tk-st-open { background:rgba(245,158,11,.16); color:#f59e0b; }
html .tk-st-solved { background:rgba(74,222,128,.16); color:var(--success); }
html .tk-msgs { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; max-height:220px; overflow-y:auto; }
html .tk-msg { font-size:.85rem; color:var(--text-2); line-height:1.5; padding:7px 11px; border-radius:8px; background:var(--bg-2); }
html .tk-msg.tk-admin { background:var(--accent-glow); }
html .tk-msg b { color:var(--text); }
html .tk-actions { display:flex; gap:8px; }
html .tk-actions .tk-reply { flex:1; }

/* ── Admin: Activity Log ─────────────────────────────────────────── */
html .log-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
html .log-search { position:relative; flex:1; min-width:220px; }
html .log-search i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:.82rem; }
html .log-search input { width:100%; padding:9px 12px 9px 34px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--text); font-family:var(--font); font-size:.86rem; outline:none; transition:border-color var(--transition); }
html .log-search input:focus { border-color:var(--accent); }
html .log-chips { display:flex; flex-wrap:wrap; gap:6px; }
html .log-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border:1px solid var(--border); background:var(--bg-2); color:var(--text-2); font-family:var(--font); font-weight:600; font-size:.76rem; border-radius:var(--radius-pill); cursor:pointer; transition:all var(--transition); }
html .log-chip:hover { color:var(--text); border-color:var(--border-hi); }
html .log-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
html .log-chip-n { font-size:.68rem; opacity:.8; background:rgba(255,255,255,.14); padding:1px 6px; border-radius:var(--radius-pill); }
html .log-chip.active .log-chip-n { background:rgba(255,255,255,.22); }
html .log-list { display:flex; flex-direction:column; max-height:460px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
html .log-item { display:flex; align-items:center; gap:13px; padding:11px 15px; border-bottom:1px solid var(--border); }
html .log-item:last-child { border-bottom:none; }
html .log-item:hover { background:var(--bg-2); }
html .log-ico { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--text-2); font-size:.82rem; flex-shrink:0; }
html .log-ico.t-login, html .log-ico.t-signup { background:rgba(59,130,246,.14); color:var(--accent); }
html .log-ico.t-logout { background:var(--surface-2); color:var(--text-3); }
html .log-ico.t-chat { background:rgba(139,92,246,.14); color:#a78bfa; }
html .log-ico.t-image { background:rgba(236,72,153,.14); color:#ec4899; }
html .log-ico.t-upgrade { background:rgba(245,158,11,.16); color:#f59e0b; }
html .log-ico.t-support { background:rgba(74,222,128,.16); color:var(--success); }
html .log-main { flex:1; min-width:0; }
html .log-line { font-size:.86rem; color:var(--text-2); line-height:1.4; }
html .log-name { font-weight:600; color:var(--text); }
html .log-act { color:var(--text-2); }
html .log-model { font-family:var(--font-mono,monospace); font-size:.78rem; color:var(--text); background:var(--bg-2); padding:1px 7px; border-radius:6px; }
html .log-strong { color:var(--text); font-weight:600; }
html .log-plan { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:1px 6px; border-radius:var(--radius-pill); vertical-align:middle; }
html .log-plan.plan-free { background:var(--surface-2); color:var(--text-3); }
html .log-plan.plan-pro { background:var(--accent-glow); color:var(--accent); }
html .log-plan.plan-ultimate { background:rgba(139,92,246,.16); color:#a78bfa; }
html .log-sub { font-size:.74rem; color:var(--text-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .log-time { font-size:.74rem; color:var(--text-3); white-space:nowrap; flex-shrink:0; }