/* ── Theme variables (dark default) ─────────────────────────────────────── */
:root {
  --bg-deep: #0a0a0d;
  --bg-mid: #131317;
  --bg-high: #1a1a20;
  --sidebar-bg: #0d0d11;
  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --accent-2: #22c55e;
  --accent-3: #a78bfa;
  --accent-gold: #f5c451;
  --text-light: #ffffff;
  --text-muted: #85868f;
  --card-bg: #15151a;
  --card-border: rgba(255, 255, 255, 0.07);
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  --bg-deep: #f0f2f8;
  --bg-mid: #e6e9f4;
  --bg-high: #dce0ef;
  --sidebar-bg: #e8ebf7;
  --text-light: #12131a;
  --text-muted: #5a5c6e;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.1);
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
}

/* ── Theme transition (smooth, full-page) ───────────────────────────────── */
html {
  transition: filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow, fill, stroke;
  transition-duration: 0.45s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  background: radial-gradient(circle at 12% -10%, rgba(59,130,246,0.14) 0%, transparent 42%),
              radial-gradient(circle at 100% 0%, rgba(34,197,94,0.08) 0%, transparent 40%),
              var(--bg-deep);
  background-attachment: fixed;
  color: var(--text-light);
  min-height: 100vh;
  opacity: 0;
  animation: bodyFadeIn 0.6s var(--ease-soft) forwards;
}

@keyframes bodyFadeIn { from { opacity: 0; } to { opacity: 1; } }

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

@keyframes floatGlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-14px, 18px) scale(1.06); }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-5px); opacity: 1; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes spin { to { transform: rotate(360deg); } }

h1, h2, h3, .brand-name { font-family: 'Quicksand', sans-serif; }

.calyra-mark { color: var(--text-light); flex-shrink: 0; display: block; }
.calyra-mark.big { width: 52px; height: 52px; }

a { transition: color 0.2s var(--ease-soft); }

.reveal { animation: fadeUp 0.65s var(--ease-soft) both; }
.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }
.reveal-delay-3 { animation-delay: 0.24s; }

.stagger-item {
  opacity: 0;
  animation: fadeUp 0.55s var(--ease-soft) forwards;
  animation-delay: calc(var(--i, 0) * 0.06s);
}

.glass {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}

.glass-inset {
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 20px;
  transition: border-color 0.3s var(--ease-soft);
}
[data-theme="light"] .glass-inset { background: rgba(0,0,0,0.025); }
.glass-inset:hover { border-color: rgba(255,255,255,0.25); }
[data-theme="light"] .glass-inset:hover { border-color: rgba(0,0,0,0.2); }

/* ── Landing ─────────────────────────────────────────────────────────────── */
.landing-page { position: relative; min-height: 100vh; }
.landing-glow {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 15%, rgba(59,130,246,0.16), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(34,197,94,0.1), transparent 40%);
  animation: floatGlow 16s ease-in-out infinite;
}
.landing-topbar {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  max-width: 1120px; margin: 0 auto; padding: 28px 24px 0;
}
.landing-brand-inline { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-light); font-weight: 700; }
.landing-topnav { display: flex; gap: 24px; }
.landing-topnav a { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.landing-topnav a:hover { color: var(--text-light); }
.landing-split {
  position: relative; z-index: 1; max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 64px; padding: 72px 24px 40px; min-height: 70vh; flex-wrap: wrap;
}
.landing-pitch { flex: 1 1 420px; min-width: 320px; }
.landing-pitch h1 { font-size: 42px; line-height: 1.12; margin: 0 0 20px; }
.tagline { color: var(--text-muted); font-size: 16px; line-height: 1.6; max-width: 460px; }
.pitch-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pitch-list li { color: var(--text-muted); font-size: 14px; padding-left: 22px; position: relative; }
.pitch-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.landing-authbox { flex: 0 1 380px; min-width: 320px; }
.landing-authbox label { display: block; font-size: 12px; color: var(--text-muted); font-weight: 700; margin: 12px 0 6px; }
.landing-authbox label:first-of-type { margin-top: 0; }
.oauth-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  text-decoration: none; font-weight: 700; color: #14101f;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-soft), filter 0.25s;
  position: relative; overflow: hidden;
}
.btn-oauth:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.08); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
.btn-oauth:active { transform: translateY(0) scale(0.98); }
.btn-google { background: #f2f3f7; }
.btn-discord { background: linear-gradient(135deg, #5865f2, #7289da); color: #fff; }
.btn-oauth-icon { flex-shrink: 0; }
.divider { text-align: center; color: var(--text-muted); margin: 14px 0; position: relative; font-size: 12px; }
.auth-toggle { display: flex; gap: 8px; margin-bottom: 14px; background: rgba(255,255,255,0.03); padding: 4px; border-radius: 12px; }
[data-theme="light"] .auth-toggle { background: rgba(0,0,0,0.04); }
.toggle-btn {
  flex: 1; padding: 10px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 700;
  transition: all 0.25s var(--ease-soft);
}
.toggle-btn.active { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,0.35); }
.auth-form { display: flex; flex-direction: column; gap: 10px; animation: fadeUp 0.4s var(--ease-soft) both; }
.auth-form input {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); color: var(--text-light);
}
[data-theme="light"] .auth-form input { background: rgba(0,0,0,0.03); }
.auth-form input:focus {
  outline: none; border-color: var(--accent); background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}
[data-theme="light"] .auth-form input:focus { background: #fff; }
.btn-primary {
  background: var(--accent);
  border: none; color: #fff; padding: 12px 18px; border-radius: 10px;
  font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { background: var(--accent-strong); box-shadow: 0 8px 20px rgba(59,130,246,0.35); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary.is-loading { pointer-events: none; opacity: 0.85; }
.btn-primary.is-loading .btn-label { visibility: hidden; }
.btn-primary.is-loading::before {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn-disabled { opacity: 0.45; cursor: not-allowed; }
.btn-disabled:hover { transform: none; box-shadow: none; }
.btn-wide { width: 100%; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { position: relative; z-index: 1; padding: 40px 24px 28px; text-align: center; }
.footer-inner { max-width: 720px; margin: 0 auto; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.footer-brand p { width: 100%; margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.footer-links { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 14px 0 12px; flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 700; }
.footer-links a:hover { color: var(--accent-3); }
.footer-discord-link { display: inline-flex; align-items: center; gap: 6px; }
.footer-socials { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 14px; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.06); color: var(--text-muted);
  text-decoration: none; transition: background 0.22s var(--ease-soft), color 0.22s, transform 0.22s var(--ease-spring);
}
[data-theme="light"] .social-link { background: rgba(0,0,0,0.06); }
.social-link:hover { transform: translateY(-3px) scale(1.1); color: var(--text-light); }
.social-discord:hover { background: rgba(88,101,242,0.25); color: #7289da; }
.social-youtube:hover { background: rgba(255,0,0,0.18); color: #ff4444; }
.social-x:hover { background: rgba(255,255,255,0.12); color: var(--text-light); }
[data-theme="light"] .social-x:hover { background: rgba(0,0,0,0.1); }
.social-reddit:hover { background: rgba(255,69,0,0.2); color: #ff6314; }
.social-tiktok:hover { background: rgba(255,255,255,0.1); color: var(--text-light); }
.footer-copy { color: var(--text-muted); font-size: 11px; opacity: 0.7; margin: 0; }

/* ── Legal / article pages ──────────────────────────────────────────────── */
.landing-topbar.article-topbar { max-width: 760px; justify-content: flex-start; }
.legal-page { max-width: 760px; margin: 0 auto; padding: 8px 24px 0; position: relative; z-index: 1; }
.legal-back { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin: 28px 0 40px; }
.legal-back:hover { color: var(--text-light); }
.article-header { margin-bottom: 40px; }
.article-header .calyra-mark { margin-bottom: 18px; }
.article-header h1 { margin: 0 0 10px; font-size: 34px; }
.legal-lede { color: var(--text-muted); font-size: 15px; margin-bottom: 0; }
.article-body h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent);
  margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--card-border);
}
.article-body h2:first-child { padding-top: 0; border-top: none; margin-top: 0; }
.article-body p { line-height: 1.75; color: var(--text-light); font-size: 15px; margin: 0 0 16px; }
.article-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(59,130,246,0.35); }
.article-body a:hover { border-color: var(--accent); }
.article-body ul, .article-body ol { line-height: 1.8; color: var(--text-light); font-size: 15px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body code {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 5px;
  padding: 2px 6px; font-size: 13px; font-family: 'SFMono-Regular', Consolas, monospace;
}
.article-body strong { color: var(--text-light); }
.article-note {
  margin: 24px 0; padding: 14px 16px; border-left: 3px solid var(--accent); background: rgba(59,130,246,0.06);
  border-radius: 0 8px 8px 0; font-size: 14px; color: var(--text-muted);
}
.article-note strong { color: var(--text-light); }

/* ── App shell ──────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 258px; margin: 0; padding: 20px 16px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  background: var(--sidebar-bg); border: none; border-right: 1px solid var(--card-border);
  border-radius: 0; box-shadow: none; overflow: hidden;
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), padding 0.3s cubic-bezier(0.16,1,0.3,1);
}
/* ── Sidebar collapse button ────────────────────────────────────────────── */
.sidebar-collapse-btn {
  margin-left: auto; flex-shrink: 0; background: none; border: none; padding: 4px 5px;
  border-radius: 6px; color: var(--text-muted); cursor: pointer; display: flex;
  align-items: center; transition: color 0.15s, background 0.15s;
}
.sidebar-collapse-btn:hover { color: var(--text-light); background: rgba(255,255,255,0.08); }
[data-theme="light"] .sidebar-collapse-btn:hover { background: rgba(0,0,0,0.07); }
.sidebar-chevron { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
/* ── Collapsed state ────────────────────────────────────────────────────── */
.sidebar.sidebar-collapsed { width: 56px; padding-left: 8px; padding-right: 8px; }
.sidebar.sidebar-collapsed .sidebar-chevron { transform: rotate(180deg); }
.sidebar.sidebar-collapsed .brand-name,
.sidebar.sidebar-collapsed .new-bot-cta,
.sidebar.sidebar-collapsed .side-section-label,
.sidebar.sidebar-collapsed .profile-meta,
.sidebar.sidebar-collapsed .side-footer-links,
.sidebar.sidebar-collapsed .side-socials { display: none; }
.sidebar.sidebar-collapsed .brand { justify-content: center; }
.sidebar.sidebar-collapsed .side-nav a {
  font-size: 0; justify-content: center; padding: 10px 8px; gap: 0;
}
.sidebar.sidebar-collapsed .side-nav a .nav-icon { font-size: initial; }
.sidebar.sidebar-collapsed .profile-card { justify-content: center; padding: 8px; gap: 0; }
.brand { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 0 4px; }
.new-bot-cta { margin-bottom: 18px; box-shadow: 0 4px 14px rgba(59,130,246,0.3); }
.cta-icon { font-size: 16px; font-weight: 900; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.side-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); opacity: 0.6; margin: 14px 4px 4px; font-weight: 700; }
.side-nav a {
  color: rgba(255,255,255,0.78); text-decoration: none; padding: 9px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px;
  position: relative;
}
[data-theme="light"] .side-nav a { color: rgba(0,0,0,0.7); }
.side-nav a:hover { background: rgba(255,255,255,0.05); color: var(--text-light); }
[data-theme="light"] .side-nav a:hover { background: rgba(0,0,0,0.05); }
.side-nav a.active { background: rgba(59,130,246,0.15); color: var(--text-light); }
.side-nav a.active .nav-icon { color: var(--accent); }
.side-contact-link { color: rgba(255,255,255,0.55) !important; }
[data-theme="light"] .side-contact-link { color: rgba(0,0,0,0.5) !important; }
.side-logout-link { color: rgba(255,255,255,0.55) !important; margin-top: 4px; }
[data-theme="light"] .side-logout-link { color: rgba(0,0,0,0.5) !important; }
.side-logout-link:hover { color: #ffb3ba !important; background: rgba(220,80,90,0.12) !important; }
.side-logout-link:hover .nav-icon { color: #ffb3ba !important; }
.nav-icon {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--text-muted);
}
.side-nav a:hover .nav-icon,
.side-nav a.active .nav-icon { color: var(--accent); }

.side-footer-links {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  margin: 14px 0 4px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap;
}
.side-footer-links a { color: var(--text-muted); text-decoration: none; }
.side-footer-links a:hover { color: var(--accent-3); }
.side-footer-links span { opacity: 0.5; }
.side-discord-icon { display: inline-flex; align-items: center; line-height: 0; }

.profile-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  margin-top: 12px; border-radius: 14px;
}
.profile-card:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .profile-card:hover { background: rgba(0,0,0,0.05); }
.profile-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; transition: transform 0.3s var(--ease-spring); }
.profile-card:hover .profile-avatar { transform: scale(1.06); }
.profile-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 800;
}
.profile-meta { display: flex; flex-direction: column; }
.profile-username { font-weight: 700; font-size: 14px; }
.tier-badge { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.tier-badge.tier-pro { color: var(--accent-2); }
.tier-badge.tier-ultra { color: var(--accent-gold); }

.profile-popup {
  position: absolute; bottom: 76px; left: 16px; right: 16px; padding: 16px;
  transform: translateY(16px) scale(0.94); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 0.35s var(--ease-spring), opacity 0.25s var(--ease-soft), visibility 0.35s;
  z-index: 20; max-height: calc(100vh - 140px); overflow-y: auto;
}
.profile-popup.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
.popup-tabs { display: flex; gap: 5px; margin-bottom: 14px; }
.popup-tab {
  flex: 1; text-align: center; padding: 7px 4px; border-radius: 8px; border: none;
  background: rgba(255,255,255,0.05); color: var(--text-muted); cursor: pointer;
  text-decoration: none; font-size: 11px; font-weight: 700;
}
[data-theme="light"] .popup-tab { background: rgba(0,0,0,0.05); }
.popup-tab:hover { background: rgba(255,255,255,0.1); color: var(--text-light); }
[data-theme="light"] .popup-tab:hover { background: rgba(0,0,0,0.1); }
.popup-tab.active { background: var(--accent); color: #fff; }
.popup-tab.danger-tab:hover { background: rgba(220,80,90,0.3); color: #ffb3ba; }
.popup-tab.danger-tab.active { background: rgba(220,80,90,0.8); }
.popup-panel { animation: fadeUp 0.3s var(--ease-soft) both; }
.popup-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 4px; letter-spacing: 0.04em; }
.popup-meta-val { font-size: 13px; margin: 0 0 4px; color: var(--text-light); }

/* Settings form inside popup */
.settings-form { display: flex; flex-direction: column; }
.popup-input {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05); color: var(--text-light); font-family: inherit; font-size: 13px;
  resize: vertical; box-sizing: border-box;
}
[data-theme="light"] .popup-input { background: rgba(0,0,0,0.04); }
.popup-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
.btn-popup-save { margin-top: 14px; padding: 9px 14px; font-size: 13px; }

/* Avatar edit area */
.settings-avatar-wrap {
  position: relative; width: 56px; height: 56px; margin: 4px 0 6px;
}
.settings-avatar-preview {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--glass-border); display: block;
}
.settings-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 22px;
}
.settings-avatar-btn {
  position: absolute; bottom: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: #fff; border: 2px solid var(--bg-deep);
}
.settings-avatar-btn:hover { background: var(--accent-strong); }

.main-viewport { flex: 1; padding: 0; min-width: 0; }
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px; border-bottom: 1px solid var(--card-border);
}
.top-bar-title { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.top-bar-actions { display: flex; align-items: center; gap: 12px; }
.top-bar-icon-btn {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); color: var(--text-light); text-decoration: none; font-size: 15px;
}
.top-bar-icon-btn:hover { background: rgba(255,255,255,0.1); }
.upgrade-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px;
  background: var(--text-light); color: #0a0a0d; font-weight: 700; font-size: 13px; text-decoration: none;
}
[data-theme="light"] .upgrade-pill { background: var(--accent); color: #fff; }
.upgrade-pill:hover { transform: translateY(-1px); }
.main-content { padding: 32px 40px; }
.page-title { margin: 0 0 4px; animation: fadeUp 0.5s var(--ease-soft) both; }
.page-subtitle { color: var(--text-muted); margin: 0 0 24px; animation: fadeUp 0.5s var(--ease-soft) both; animation-delay: 0.05s; }

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
[data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.05); }
.theme-toggle:hover { background: rgba(255,255,255,0.12); color: var(--text-light); }
[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.1); }
.theme-icon { position: absolute; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1); }
.icon-sun { opacity: 1; transform: scale(1) rotate(0deg); }
.icon-moon { opacity: 0; transform: scale(0.6) rotate(-45deg); }
[data-theme="light"] .icon-sun { opacity: 0; transform: scale(0.6) rotate(45deg); }
[data-theme="light"] .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); }

/* ── Bot grid ────────────────────────────────────────────────────────────── */
.bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.bot-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.bot-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.4); border-color: rgba(59,130,246,0.35); }
.bot-banner {
  height: 90px; background-size: cover; background-position: center;
  background-color: var(--bg-high); position: relative; overflow: hidden;
}
.bot-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,13,0.6));
}
.bot-banner.tint-1 { background-image: linear-gradient(135deg, #14532d, #052e16); }
.bot-banner.tint-2 { background-image: linear-gradient(135deg, #1e3a8a, #0c1a3d); }
.bot-banner.tint-3 { background-image: linear-gradient(135deg, #581c87, #1e0b2e); }
.bot-banner.tint-4 { background-image: linear-gradient(135deg, #7c2d12, #2e0f04); }
.bot-card-body { display: flex; align-items: center; gap: 12px; padding: 14px; }
.bot-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--glass-border); flex-shrink: 0; transition: transform 0.3s var(--ease-spring); }
.bot-card:hover .bot-avatar { transform: scale(1.08) rotate(-3deg); }
.bot-card-body h3 { margin: 0; font-size: 15px; }
.bot-blurb { color: var(--text-muted); font-size: 12px; margin: 4px 0 0; }
.bot-card-actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.btn-small {
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.08); color: var(--text-light); text-decoration: none; cursor: pointer; border: none;
}
[data-theme="light"] .btn-small { background: rgba(0,0,0,0.07); }
.btn-small:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
[data-theme="light"] .btn-small:hover { background: rgba(0,0,0,0.13); }
.btn-danger { background: rgba(220,80,90,0.25); color: #ffb3ba; }
.btn-danger:hover { background: rgba(220,80,90,0.4); }
.empty-state { padding: 48px 24px; text-align: center; color: var(--text-muted); grid-column: 1 / -1; animation: fadeUp 0.5s var(--ease-soft) both; }
.empty-state-icon { font-size: 34px; display: block; margin-bottom: 10px; animation: pulseSoft 2.6s ease-in-out infinite; }

.studio-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.studio-header .btn-primary { animation: fadeUp 0.5s var(--ease-soft) both; animation-delay: 0.1s; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; background: #999; }
.status-dot.status-online { background: #7ee88b; box-shadow: 0 0 8px #7ee88b; animation: pulseSoft 1.8s ease-in-out infinite; }
.status-dot.status-offline { background: #999; }
.status-dot.status-error { background: #e87e7e; box-shadow: 0 0 8px #e87e7e; }

/* Live sidebar "Status" nav-item dot — reflects overall system health */
.status-nav-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  background: #999;
  transition: background .2s ease;
}
.status-nav-dot.nd-operational    { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.6); }
.status-nav-dot.nd-degraded       { background: #eab308; box-shadow: 0 0 6px rgba(234,179,8,.6); }
.status-nav-dot.nd-partial_outage { background: #f97316; box-shadow: 0 0 6px rgba(249,115,22,.6); }
.status-nav-dot.nd-major_outage   { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.6); }
.status-nav-dot.nd-maintenance    { background: #818cf8; box-shadow: 0 0 6px rgba(99,102,241,.6); }

/* ── Bot form ────────────────────────────────────────────────────────────── */
.bot-form { padding: 28px; max-width: 900px; animation: fadeUp 0.5s var(--ease-soft) both; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.form-col { display: flex; flex-direction: column; }
.form-col label { margin: 10px 0 4px; font-size: 12px; color: var(--text-muted); font-weight: 700; }
.form-col input, .form-col textarea, .form-col select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); color: var(--text-light); font-family: inherit; resize: vertical;
}
[data-theme="light"] .form-col input,
[data-theme="light"] .form-col textarea,
[data-theme="light"] .form-col select { background: rgba(0,0,0,0.03); }
.form-col input:focus, .form-col textarea:focus, .form-col select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}
.discord-portal h3 { margin-top: 0; }
.discord-portal input[type="text"],
.discord-portal input[type="password"] {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); color: var(--text-light); font-family: inherit;
  margin-bottom: 2px;
}
[data-theme="light"] .discord-portal input { background: rgba(0,0,0,0.03); }
.discord-portal input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.reminder-block {
  margin-top: 12px; background: rgba(255,193,7,0.1); border: 1px solid rgba(255,193,7,0.3);
  border-radius: 10px; padding: 12px; font-size: 13px; color: #ffe08a;
}
.reminder-block a { color: var(--accent-2); }

/* ── Upload row (pfp + banner) ───────────────────────────────────────────── */
.upload-row { display: flex; gap: 20px; margin-bottom: 0; flex-wrap: wrap; }
.upload-field { display: flex; flex-direction: column; gap: 6px; }
.upload-field-banner { flex: 1; }
.upload-label { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.upload-hint { font-weight: 400; opacity: 0.7; }
.upload-preview-wrap {
  position: relative; cursor: pointer; border-radius: 12px;
  border: 2px dashed var(--glass-border); overflow: hidden;
  width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03);
  transition: border-color 0.25s, background 0.25s;
}
[data-theme="light"] .upload-preview-wrap { background: rgba(0,0,0,0.03); }
.upload-preview-wrap:hover { border-color: var(--accent); background: rgba(59,130,246,0.06); }
.upload-preview-wrap-banner { width: 100%; min-width: 220px; height: 110px; }
.upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; pointer-events: none; }
.upload-placeholder-avatar { }
.upload-placeholder-banner { }
.upload-preview { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.upload-preview-avatar { border-radius: 50%; }
.upload-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* ── DM toggle switch ───────────────────────────────────────────────────── */
.dm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 10px; }
.dm-toggle-label { display: flex; flex-direction: column; gap: 2px; }
.dm-toggle-label span:first-child { font-size: 13px; font-weight: 700; color: var(--text-light); }
.dm-toggle-hint { font-size: 11px; color: var(--text-muted); }
.toggle-switch-wrap { flex-shrink: 0; }
.toggle-input { display: none; }
.toggle-switch {
  display: block; width: 42px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,0.1); cursor: pointer; position: relative;
  transition: background 0.3s var(--ease-soft);
}
[data-theme="light"] .toggle-switch { background: rgba(0,0,0,0.15); }
.toggle-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.toggle-input:checked + .toggle-switch { background: var(--accent); }
.toggle-input:checked + .toggle-switch::after { transform: translateX(18px); }

/* ── Chat ────────────────────────────────────────────────────────────────── */
.chat-canvas {
  display: flex; flex-direction: column; height: 100%;
  background-size: cover; background-position: center;
  /* No transform-based animation here — transforms create a stacking context
     that traps position:fixed children (the model dropdown). Use opacity only. */
  animation: chatCanvasFadeIn 0.45s var(--ease-soft) both;
  border-radius: 16px; overflow: visible;
}
@keyframes chatCanvasFadeIn { from { opacity: 0; } to { opacity: 1; } }
.chat-header { display: flex; align-items: center; gap: 14px; padding: 20px; border-bottom: 1px solid var(--glass-border); }
.chat-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.chat-header h2 { margin: 0; font-size: 18px; }
.chat-header p { margin: 0; color: var(--text-muted); font-size: 12px; }

.chat-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chat-new-btn {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 7px 13px; border-radius: 9px; white-space: nowrap;
  background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border); color: var(--text-light);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.chat-new-btn:hover { background: rgba(255,255,255,0.14); border-color: var(--accent); }
[data-theme="light"] .chat-new-btn { background: rgba(0,0,0,0.05); }
.model-selector { position: relative; }
.model-trigger {
  background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border); color: var(--text-light);
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-weight: 700;
}
[data-theme="light"] .model-trigger { background: rgba(0,0,0,0.05); }
.model-trigger:hover { background: rgba(255,255,255,0.14); border-color: var(--accent); }
.model-dropdown {
  position: fixed; background: var(--bg-high);
  border: 1px solid var(--glass-border); border-radius: 12px; min-width: 220px; overflow: hidden;
  transform-origin: top; transform: scaleY(0.85) translateY(-6px); opacity: 0;
  transition: transform 0.22s var(--ease-spring), opacity 0.2s ease-out; z-index: 9999; pointer-events: none;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4); color: var(--text-light);
}
[data-theme="light"] .model-dropdown { background: #ffffff; box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
.model-dropdown.open { transform: scaleY(1) translateY(0); opacity: 1; pointer-events: auto; }
.model-option { padding: 10px 14px; cursor: pointer; font-size: 13px; color: var(--text-light); }
.model-option:hover { background: rgba(255,255,255,0.08); padding-left: 18px; }
[data-theme="light"] .model-option:hover { background: rgba(0,0,0,0.05); }

/* Native <select> in dark context — force OS to use dark chrome */
.form-col select { color-scheme: dark; }
[data-theme="light"] .form-col select { color-scheme: light; }
.form-col select option { background: var(--bg-mid); color: var(--text-light); }

.chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.chat-bubble {
  max-width: 60%; padding: 12px 16px; border-radius: 16px; line-height: 1.4; font-size: 14px;
  animation: fadeUp 0.3s var(--ease-soft) both; white-space: pre-wrap;
}
.bubble-assistant { background: rgba(255,255,255,0.1); align-self: flex-start; border: 1px solid var(--glass-border); }
[data-theme="light"] .bubble-assistant { background: var(--card-bg); }
.bubble-user { background: var(--accent); color: #fff; align-self: flex-end; }
.bubble-typing { display: flex; gap: 5px; align-items: center; padding: 14px 18px; }
.bubble-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted);
  animation: dotBounce 1.2s ease-in-out infinite;
}
.bubble-typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble-typing span:nth-child(3) { animation-delay: 0.3s; }

/* ── Chat input row ──────────────────────────────────────────────────────── */
.chat-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 16px; border-top: 1px solid var(--glass-border); position: relative;
}
.chat-action-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.06); color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chat-action-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-light); border-color: var(--accent); }
.chat-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
[data-theme="light"] .chat-action-btn { background: rgba(0,0,0,0.04); }
[data-theme="light"] .chat-action-btn:hover { background: rgba(0,0,0,0.09); }
.chat-send-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; padding: 0; display: flex; align-items: center; justify-content: center; }

/* ── Emoji picker ────────────────────────────────────────────────────────── */
.emoji-picker {
  position: fixed; /* appended to <body> via JS — viewport coords */
  background: var(--bg-high); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 10px; z-index: 200;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  transform: translateY(8px) scale(0.95); opacity: 0; pointer-events: none;
  transition: transform 0.2s var(--ease-spring), opacity 0.15s ease-out;
}
[data-theme="light"] .emoji-picker { background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
.emoji-picker.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.emoji-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  max-width: 360px;
}
.emoji-item {
  background: none; border: none; cursor: pointer; padding: 6px; border-radius: 7px;
  font-size: 18px; line-height: 1; transition: background 0.1s; text-align: center;
}
.emoji-item:hover { background: rgba(255,255,255,0.1); }
[data-theme="light"] .emoji-item:hover { background: rgba(0,0,0,0.07); }

/* ── Image bubbles ───────────────────────────────────────────────────────── */
.bubble-image { background: transparent !important; border: none !important; padding: 4px !important; }
.chat-bubble-img {
  max-width: 240px; max-height: 240px; border-radius: 14px; object-fit: cover;
  display: block; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.chat-input-row input {
  flex: 1; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.06); color: var(--text-light);
}
[data-theme="light"] .chat-input-row input { background: rgba(0,0,0,0.04); }
.chat-input-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }

/* ── Docs ────────────────────────────────────────────────────────────────── */
.docs-layout { display: flex; gap: 48px; align-items: flex-start; animation: fadeUp 0.5s var(--ease-soft) both; }
.docs-article { flex: 1 1 auto; max-width: 700px; }
.docs-toc {
  position: sticky; top: 92px; flex: 0 0 200px; display: flex; flex-direction: column; gap: 10px;
  padding-left: 20px; border-left: 1px solid var(--card-border);
}
.docs-toc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); opacity: 0.7; margin: 0 0 4px; font-weight: 700; }
.docs-toc a { color: var(--text-muted); text-decoration: none; font-size: 13px; }
.docs-toc a:hover { color: var(--text-light); }
.docs-note { max-width: 700px; }

@media (max-width: 980px) {
  .docs-toc { display: none; }
}

/* ── Billing ─────────────────────────────────────────────────────────────── */
.paypal-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; font-size: 13px; color: var(--text-muted);
  border: 1px dashed var(--glass-border); border-radius: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; max-width: 900px; }
.tier-card { padding: 24px; text-align: center; }
.tier-card:hover { transform: translateY(-6px); }
.tier-current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.35); }
.tier-price { font-size: 28px; font-weight: 800; margin: 6px 0 16px; }
.tier-price span { font-size: 14px; color: var(--text-muted); }
.tier-card ul { list-style: none; padding: 0; color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.tier-card ul li { margin-bottom: 6px; }

/* ── Sidebar socials ─────────────────────────────────────────────────────── */
.side-socials {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  margin: 6px 0 4px; flex-wrap: wrap;
}
.side-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.06); color: var(--text-muted);
  text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-spring);
}
[data-theme="light"] .side-social-icon { background: rgba(0,0,0,0.06); }
.side-social-icon:hover { color: var(--text-light); transform: scale(1.15); background: rgba(255,255,255,0.14); }
[data-theme="light"] .side-social-icon:hover { background: rgba(0,0,0,0.12); }

/* ── Bot card clickable / tags / private badge ───────────────────────────── */
.bot-card-clickable { cursor: pointer; user-select: none; }
.bot-card-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bot-private-badge {
  position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.85); padding: 2px 8px; border-radius: 20px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(59,130,246,0.15); color: var(--accent);
  border: 1px solid rgba(59,130,246,0.25);
  text-transform: lowercase; white-space: nowrap;
}
.tag-pill-link { text-decoration: none; cursor: pointer; transition: background .15s; }
.tag-pill-link:hover { background: rgba(59,130,246,0.28); }

/* ── Companion Modal ─────────────────────────────────────────────────────── */
.companion-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.companion-modal-overlay.active { display: flex; }
.companion-modal {
  position: relative; width: 100%; max-width: 440px;
  border-radius: 20px; overflow: hidden;
  animation: modalSlideUp .25s cubic-bezier(.22,.68,0,1.2);
}
@keyframes modalSlideUp {
  from { transform: translateY(24px) scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.companion-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  background: rgba(0,0,0,0.45); border: none; border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; transition: background .15s;
}
.companion-modal-close:hover { background: rgba(0,0,0,0.7); }
.companion-modal-banner {
  height: 140px; background-size: cover; background-position: center;
  position: relative; flex-shrink: 0;
}
.companion-modal-avatar {
  position: absolute; bottom: -22px; left: 20px;
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--card-bg, #1e1a2e); object-fit: cover;
}
.companion-modal-body { padding: 30px 20px 20px; }
.companion-modal-name { margin: 0 0 2px; font-size: 20px; }
.companion-modal-by { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.companion-modal-desc { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.companion-modal-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 18px; }
.companion-modal-actions { display: flex; gap: 10px; }
.companion-modal-chat-btn { display: inline-flex; align-items: center; flex: 1; justify-content: center; }

/* ── COTW header / view-all / made-by ────────────────────────────────────── */
.cotw-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: nowrap; }
.cotw-header-center { flex: 1; }
.cotw-view-all {
  font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none;
  white-space: nowrap; padding: 4px 12px; border-radius: 20px;
  border: 1px solid rgba(59,130,246,0.3); background: rgba(59,130,246,0.08);
  transition: background .15s;
}
.cotw-view-all:hover { background: rgba(59,130,246,0.18); }
.cotw-made-by { margin: 1px 0 3px; font-size: 11px; color: var(--text-muted); font-weight: 600; opacity: .75; }

/* ── Made By You section ─────────────────────────────────────────────────── */
.my-bots-section { margin-bottom: 32px; }

/* ── COTW All page ───────────────────────────────────────────────────────── */
.cotw-all-header { margin-bottom: 24px; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); text-decoration: none; transition: color .15s;
}
.back-link:hover { color: var(--text-light); }
.cotw-all-grid { display: flex; flex-direction: column; gap: 12px; }
.cotw-all-card {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  border-radius: 14px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.cotw-all-card:hover { transform: translateY(-2px); }
.cotw-all-rank { font-size: 22px; font-weight: 900; min-width: 36px; color: var(--accent-gold); }
.cotw-all-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cotw-all-info { flex: 1; min-width: 0; }
.cotw-all-name { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.cotw-all-desc { margin: 2px 0 6px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.cotw-all-stat { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ── Chat history panel ──────────────────────────────────────────────────── */
.chat-wrap { display: flex; height: 100%; position: relative; overflow: hidden; border-radius: 16px; }
.chat-history-panel {
  position: absolute; top: 0; left: 0; width: 260px; height: 100%;
  z-index: 10; display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.22,.68,0,1.1);
  background: var(--sidebar-bg); border-right: 1px solid var(--glass-border);
  box-shadow: 6px 0 32px rgba(0,0,0,0.35); border-radius: 16px 0 0 16px;
}
.chat-history-panel.open { transform: translateX(0); }
.chat-history-overlay {
  display: none; position: absolute; inset: 0; z-index: 9; background: rgba(0,0,0,0.35);
  border-radius: 16px;
}
.chat-history-overlay.active { display: block; }
.chat-history-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--glass-border);
}
.chat-history-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px;
  border-radius: 6px; display: flex; align-items: center; transition: color .15s;
}
.chat-history-close:hover { color: var(--text-light); }
.new-chat-btn { font-size: 13px; padding: 9px 14px; }
.chat-session-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0 16px; }
.chat-session-item {
  display: block; padding: 10px 14px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--glass-border); transition: background .12s;
  word-break: break-word; overflow-wrap: break-word;
}
.chat-session-item:hover { background: rgba(255,255,255,0.04); }
[data-theme="light"] .chat-session-item:hover { background: rgba(0,0,0,0.04); }
.chat-session-active { background: rgba(59,130,246,0.1); border-left: 3px solid var(--accent); padding-left: 11px; }
.chat-session-date { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.chat-session-preview { font-size: 12px; color: var(--text-light); line-height: 1.4; margin-bottom: 3px; }
.chat-session-count { font-size: 10px; color: var(--text-muted); }
.chat-history-toggle {
  background: rgba(255,255,255,0.07); border: 1px solid var(--glass-border);
  border-radius: 8px; padding: 6px 7px; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; margin-right: 8px; flex-shrink: 0; transition: color .15s, background .15s;
}
.chat-history-toggle:hover { color: var(--text-light); background: rgba(255,255,255,0.12); }
[data-theme="light"] .chat-history-toggle { background: rgba(0,0,0,0.05); }

/* ── Model picker (bot form) ─────────────────────────────────────────────── */
.model-pick-wrap { display: flex; flex-direction: column; gap: 8px; }
.model-pick-option { display: block; cursor: pointer; }
.model-pick-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.model-pick-card {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 12px; border: 2px solid var(--glass-border);
  background: rgba(255,255,255,0.03); transition: border-color .15s, background .15s;
}
.model-pick-option input[type="radio"]:checked + .model-pick-card {
  border-color: var(--accent); background: rgba(59,130,246,0.1);
}
.model-pick-card-locked { opacity: .55; }
.model-pick-locked .model-pick-card { cursor: not-allowed; }
.model-pick-name { font-size: 13px; font-weight: 600; flex: 1; }
.model-pick-tier { font-size: 10px; font-weight: 700; color: #a855f7; background: rgba(168,85,247,0.12); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.model-lock-toast {
  margin-top: 6px; padding: 8px 12px; border-radius: 8px;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
  color: #fca5a5; font-size: 12px;
}

/* ── Model dropdown locked options ──────────────────────────────────────── */
.model-option-locked { opacity: .55; cursor: default; }
.model-option-locked:hover { background: transparent !important; }

/* ── Chat header "by @username" credit (replaces the old model selector) ── */
.chat-bot-creator {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.chat-bot-creator strong { color: var(--text-light); font-weight: 700; }

/* ── Message timestamps ──────────────────────────────────────────────────── */
.chat-bubble-wrap { display: flex; flex-direction: column; max-width: 60%; gap: 3px; }
.chat-bubble-wrap.wrap-user { align-self: flex-end; align-items: flex-end; }
.chat-bubble-wrap.wrap-assistant { align-self: flex-start; align-items: flex-start; }
.chat-bubble-wrap .chat-bubble { max-width: 100%; }
.chat-bubble-time {
  font-size: 11px; color: var(--text-muted); padding: 0 4px; opacity: .75;
}
.chat-bubble-sender {
  font-size: 11px; font-weight: 700; color: var(--accent); padding: 0 4px;
}

/* ── Minimal chat/group shell — sidebar collapsed to just Home + Create Group ── */
.sidebar.sidebar-minimal { width: 64px; padding: 16px 10px; align-items: center; }
.sidebar.sidebar-minimal .brand-name,
.sidebar.sidebar-minimal .sidebar-collapse-btn,
.sidebar.sidebar-minimal .side-section-label,
.sidebar.sidebar-minimal .profile-meta,
.sidebar.sidebar-minimal .side-footer-links,
.sidebar.sidebar-minimal .side-socials { display: none; }
.sidebar.sidebar-minimal .brand { justify-content: center; margin-bottom: 8px; }
.sidebar.sidebar-minimal .minimal-nav { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sidebar.sidebar-minimal .minimal-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: 12px; font-size: 10px; font-weight: 700;
  color: var(--text-muted); text-decoration: none; text-align: center;
  transition: background .15s, color .15s;
}
.sidebar.sidebar-minimal .minimal-nav a:hover { background: rgba(255,255,255,0.08); color: var(--text-light); }
.sidebar.sidebar-minimal .minimal-nav a.minimal-nav-cta { background: var(--accent); color: #fff; }
.sidebar.sidebar-minimal .minimal-nav a.minimal-nav-cta:hover { filter: brightness(1.1); }
.sidebar.sidebar-minimal .profile-card { justify-content: center; padding: 8px 0; }

/* ── Group chat ──────────────────────────────────────────────────────────── */
.group-member-avatars { display: flex; align-items: center; }
.group-member-avatars img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-mid); margin-left: -10px; }
.group-member-avatars img:first-child { margin-left: 0; }
.group-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.group-picker-card {
  position: relative; border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,0.04); transition: border-color .15s, background .15s;
}
.group-picker-card:hover { border-color: var(--accent); }
.group-picker-card.picked { border-color: var(--accent); background: rgba(59,130,246,0.12); }
.group-picker-card img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.group-picker-card input { position: absolute; top: 8px; right: 8px; }
.group-picker-name { font-size: 13px; font-weight: 700; text-align: center; }
.group-picker-owner { font-size: 11px; color: var(--text-muted); }
.group-limit-note { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.panel-card { padding: 28px; border-radius: 16px; }
.group-chat-header-members { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.group-chat-header-members .group-chat-title { font-size: 16px; font-weight: 700; margin: 0; }
.group-chat-header-members .group-chat-subtitle { font-size: 11px; color: var(--text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.group-reminder-banner {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: rgba(99,102,241,0.12); border-bottom: 1px solid rgba(99,102,241,0.25);
  font-size: 12px; color: #c4b5fd; flex-shrink: 0;
}
.group-reminder-banner strong { color: #e9d5ff; }
.group-reminder-close {
  margin-left: auto; background: none; border: none; color: #c4b5fd;
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; opacity: .7;
  flex-shrink: 0;
}
.group-reminder-close:hover { opacity: 1; }
.model-diamond-icon { flex-shrink: 0; vertical-align: middle; }
.model-locked-hint { font-size: 10px; opacity: .7; margin-left: 4px; }

/* ── Billing tier SVG icon ───────────────────────────────────────────────── */
.tf-icon-svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); opacity: .85; }

/* ── Model dropdown (bot form) ───────────────────────────────────────────── */
.model-select {
  width: 100%; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--glass-border);
  background: rgba(255,255,255,0.03); color: var(--text-light); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s;
}
.model-select:focus { border-color: var(--accent); outline: none; }
.model-select option:disabled { color: #888; }
.model-select-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.model-select-hint a, .model-lock-toast a { color: var(--accent); font-weight: 600; }

/* ── Group chat: auto-play + history ─────────────────────────────────────── */
.group-play-btn {
  display: flex; align-items: center; gap: 6px;
}
.group-play-btn.playing { opacity: .6; cursor: not-allowed; }
.group-autoplay-banner {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 14px; margin: 0 16px 10px; border-radius: 10px; font-size: 12px;
  background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.3); color: #d8b4fe;
}
.group-autoplay-banner .dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: #d8b4fe; animation: pulseDot 1.1s infinite ease-in-out; }
@keyframes pulseDot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ── Discovery: recent activity strip ────────────────────────────────────── */
.recent-activity-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.recent-activity-card {
  flex: 0 0 220px; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 14px; text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.recent-activity-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.recent-activity-avatars { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.recent-activity-avatars img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-mid); }
.recent-activity-avatars.stacked img { position: absolute; width: 26px; height: 26px; }
.recent-activity-avatars.stacked img:nth-child(1) { top: 0; left: 0; z-index: 2; }
.recent-activity-avatars.stacked img:nth-child(2) { bottom: 0; right: 0; z-index: 1; }
.recent-activity-info { min-width: 0; flex: 1; }
.recent-activity-title { font-size: 13px; font-weight: 700; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-activity-sub { font-size: 11px; color: var(--text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-activity-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); flex-shrink: 0; }

/* ── AI select fix (text color) ──────────────────────────────────────────── */
.ai-select {
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: var(--input-bg, rgba(255,255,255,0.06)); color: var(--text-light) !important;
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.ai-select option { background: var(--card-bg, #1e1a2e); color: var(--text-light); }
[data-theme="light"] .ai-select option { background: #fff; color: #111; }

/* ── Docs search ─────────────────────────────────────────────────────────── */
.docs-search-wrap {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 9px 14px;
}
[data-theme="light"] .docs-search-wrap { background: rgba(0,0,0,0.04); }
.docs-search-icon { color: var(--text-muted); flex-shrink: 0; }
.docs-search-input {
  flex: 1; background: none; border: none; outline: none; color: var(--text-light);
  font-family: inherit; font-size: 14px;
}
.docs-search-input::placeholder { color: var(--text-muted); }
.docs-search-clear {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0;
  display: flex; align-items: center; transition: color .15s;
}
.docs-search-clear:hover { color: var(--text-light); }
.docs-search-noresult { font-size: 13px; color: var(--text-muted); margin-top: 12px; }

/* ── Discovery greeting ──────────────────────────────────────────────────── */
.discovery-greeting { margin-bottom: 28px; }
.discovery-greeting-title {
  font-size: clamp(26px, 4vw, 36px); margin: 0 0 4px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
}
.greeting-wave { animation: wave 1.6s ease-in-out 0.4s 1; display: inline-block; transform-origin: 70% 80%; }
@keyframes wave {
  0%,100% { transform: rotate(0deg); }
  20%      { transform: rotate(20deg); }
  40%      { transform: rotate(-8deg); }
  60%      { transform: rotate(16deg); }
  80%      { transform: rotate(-4deg); }
}
.discovery-greeting-sub { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ── Horizontal companion scroll ─────────────────────────────────────────── */
.bot-scroll-wrap {
  position: relative;
  margin: 0 -4px;
}
.bot-grid-h-scroll {
  display: flex !important;
  flex-direction: row !important;
  grid-template-columns: none !important;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
[data-theme="light"] .bot-grid-h-scroll { scrollbar-color: rgba(0,0,0,0.15) transparent; }
.bot-grid-h-scroll::-webkit-scrollbar { height: 5px; }
.bot-grid-h-scroll::-webkit-scrollbar-track { background: transparent; }
.bot-grid-h-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 10px; }
[data-theme="light"] .bot-grid-h-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
.bot-grid-h-scroll .bot-card {
  min-width: 220px;
  max-width: 240px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.bot-grid-h-scroll .empty-state { min-width: 260px; }

/* ── Calyras of the Week ─────────────────────────────────────────────────── */
.cotw-section { margin-bottom: 36px; }
.cotw-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cotw-crown-svg { flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(245,184,0,0.45)); }
.cotw-title { margin: 0; font-size: 20px; }
.cotw-subtitle { margin: 0; color: var(--text-muted); font-size: 13px; }
.cotw-scroll-wrap {
  overflow-x: auto;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
[data-theme="light"] .cotw-scroll-wrap { scrollbar-color: rgba(0,0,0,0.15) transparent; }
.cotw-scroll-wrap::-webkit-scrollbar { height: 5px; }
.cotw-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 10px; }
.cotw-grid {
  display: flex; flex-direction: row; gap: 16px; width: max-content;
}
.cotw-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 240px; max-width: 260px; }
.cotw-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.4); border-color: rgba(245,196,81,0.4); }
.cotw-banner {
  height: 80px; background-size: cover; background-position: center;
  background-color: var(--bg-high); position: relative;
}
.cotw-rank {
  position: absolute; top: 8px; left: 10px;
  background: rgba(0,0,0,0.55); color: var(--accent-gold); font-weight: 800; font-size: 12px;
  padding: 2px 8px; border-radius: 20px; backdrop-filter: blur(4px);
}
.cotw-body { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.cotw-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--glass-border); }
.cotw-info { min-width: 0; }
.cotw-info h3 { margin: 0 0 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cotw-desc { color: var(--text-muted); font-size: 12px; margin: 0 0 6px; line-height: 1.4; }
.cotw-stat { font-size: 11px; font-weight: 700; color: var(--accent-gold); }
.section-label-mid { margin: 8px 0 16px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

/* ── Explore page ────────────────────────────────────────────────────────── */
.explore-search-wrap { margin-bottom: 20px; }
.explore-search-form { width: 100%; }
.explore-search-inner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 10px 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
[data-theme="light"] .explore-search-inner { background: rgba(0,0,0,0.03); }
.explore-search-inner:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }
.explore-search-icon { color: var(--text-muted); flex-shrink: 0; }
.explore-search-input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--text-light);
  font-size: 15px; font-family: inherit;
}
.explore-search-clear { color: var(--text-muted); text-decoration: none; display: flex; align-items: center; }
.explore-search-clear:hover { color: var(--text-light); }
.explore-results-label { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.explore-grid { margin-top: 0; }

/* ── Settings page ───────────────────────────────────────────────────────── */
.settings-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; align-items: start; }
@media (max-width: 720px) { .settings-page-grid { grid-template-columns: 1fr; } }
.settings-card { padding: 24px; }
.settings-danger-card { border-color: rgba(220,80,90,0.3); }
.settings-section-title { margin: 0 0 18px; font-size: 16px; }
.settings-avatar-section { margin-bottom: 18px; }
.settings-page-avatar-wrap { position: relative; display: inline-block; }
.settings-page-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid var(--glass-border);
}
.settings-page-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 28px;
}
.settings-page-avatar-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 12px; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: none;
}
.settings-page-avatar-btn:hover { color: var(--accent-strong); }
.settings-field-group { display: flex; flex-direction: column; gap: 14px; }
.settings-field { display: flex; flex-direction: column; gap: 4px; }
.settings-field-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.settings-field-input {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); color: var(--text-light); font-family: inherit; font-size: 14px;
  resize: vertical; width: 100%; box-sizing: border-box;
}
[data-theme="light"] .settings-field-input { background: rgba(0,0,0,0.03); }
.settings-field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }
.settings-field-hint { font-size: 11px; color: var(--text-muted); margin: 0; }
.settings-save-btn { margin-top: 20px; }
.settings-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--card-border); font-size: 13px; }
.settings-stat-row:last-of-type { border-bottom: none; }
.settings-stat-label { color: var(--text-muted); }
.settings-tier-badge { font-size: 13px; }
.settings-danger-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 6px; line-height: 1.6; }
.settings-delete-btn { margin-top: 12px; width: 100%; padding: 10px; justify-content: center; }

/* ── AI Engine panel ─────────────────────────────────────────────────────── */
.ai-engine-portal { margin-top: 28px; padding: 22px; border-radius: 16px; }
.ai-engine-portal h3 { margin: 0 0 6px; font-size: 16px; }
.ai-engine-desc { margin: 0 0 20px; color: var(--text-muted); font-size: 13px; }
.ai-engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .ai-engine-grid { grid-template-columns: 1fr; } }
.ai-field { display: flex; flex-direction: column; gap: 8px; }
.ai-field-toggle-row { flex-direction: row; align-items: center; justify-content: space-between; }
.ai-field-label {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; display: flex; flex-direction: column; gap: 3px;
}
.ai-field-range { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; opacity: 0.8; }
.ai-field-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.ai-slider-row { display: flex; align-items: center; gap: 10px; }
.ai-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 3px; background: rgba(255,255,255,0.12); outline: none; cursor: pointer;
}
[data-theme="light"] .ai-slider { background: rgba(0,0,0,0.12); }
.ai-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.15s;
}
.ai-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ai-slider-val {
  min-width: 46px; text-align: right; font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
}
.ai-select {
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); color: var(--text-light); font-family: inherit; font-size: 13px; cursor: pointer;
}
[data-theme="light"] .ai-select { background: rgba(0,0,0,0.03); }
.ai-select:focus { outline: none; border-color: var(--accent); }
.ai-plan-cap { font-size: 11px; color: var(--accent-gold); margin: 0; }

/* ── Docs expanded styles ────────────────────────────────────────────────── */
.docs-category-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); padding: 4px 12px;
  background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25);
  border-radius: 30px; margin-bottom: 16px; margin-top: 36px;
}
.docs-settings-table { border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; margin: 16px 0; }
.docs-settings-row {
  display: grid; grid-template-columns: 160px 100px 1fr; gap: 0;
  border-bottom: 1px solid var(--card-border); font-size: 13px;
}
.docs-settings-row:last-child { border-bottom: none; }
.docs-settings-row > span { padding: 10px 14px; }
.docs-settings-row > span:not(:last-child) { border-right: 1px solid var(--card-border); }
.docs-settings-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: rgba(255,255,255,0.03); }
[data-theme="light"] .docs-settings-header { background: rgba(0,0,0,0.03); }
.docs-range { font-size: 11px; font-weight: 700; color: var(--accent-2); }
.docs-tier-table { border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; margin: 16px 0; }
.docs-tier-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; font-size: 13px;
  border-bottom: 1px solid var(--card-border);
}
.docs-tier-row:last-child { border-bottom: none; }
.docs-tier-row > span { padding: 10px 14px; }
.docs-tier-row > span:not(:last-child) { border-right: 1px solid var(--card-border); }
.docs-tier-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: rgba(255,255,255,0.03); }
[data-theme="light"] .docs-tier-header { background: rgba(0,0,0,0.03); }
.docs-example-card { border: 1px solid var(--glass-border); border-radius: 12px; margin: 12px 0; overflow: hidden; }
.docs-example-label { font-size: 13px; font-weight: 700; padding: 10px 16px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--card-border); }
[data-theme="light"] .docs-example-label { background: rgba(0,0,0,0.03); }
.docs-example-block { padding: 14px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.faq-item { border-bottom: 1px solid var(--card-border); padding: 16px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.faq-a { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
.docs-toc-cat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 16px 0 4px; padding: 0; }
.docs-toc-discord { margin-top: 20px; }
.docs-discord-btn { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; text-decoration: none; }

/* ── Billing page ────────────────────────────────────────────────────────── */
.billing-renewal-banner {
  margin-bottom: 20px; padding: 12px 18px; border-radius: 12px; font-size: 14px;
  border-left: 3px solid var(--accent-gold); color: var(--text-light);
}
.tier-name { margin: 0 0 8px; font-size: 18px; }
.tier-badge-best {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-gold); border: 1px solid rgba(245,184,0,0.35); background: rgba(245,184,0,0.1);
  padding: 2px 10px; border-radius: 20px; display: inline-block; margin-bottom: 8px;
}
.tier-features { list-style: none; padding: 0; margin: 12px 0 18px; text-align: left; }
.tier-features li { font-size: 13px; color: var(--text-muted); margin-bottom: 7px; display: flex; align-items: flex-start; gap: 8px; }
.tf-icon { flex-shrink: 0; }
.billing-usage { margin-top: 24px; padding: 18px 20px; border-radius: 14px; max-width: 420px; }
.billing-usage-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.billing-usage-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
[data-theme="light"] .billing-usage-bar { background: rgba(0,0,0,0.1); }
.billing-usage-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.5s ease; }

/* ── Flash / toast ───────────────────────────────────────────────────────── */
.flash-stack { position: fixed; top: 16px; right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 12px 18px; border-radius: 12px; background: var(--bg-mid); border: 1px solid var(--glass-border);
  font-size: 13px; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  animation: toastIn 0.35s var(--ease-spring) both; transition: opacity 0.3s, transform 0.3s;
}
.flash.flash-hide { opacity: 0; transform: translateX(24px); }
.flash-error { border-color: #e87e7e; color: #ffb3ba; }
.flash-success { border-color: #7ee88b; color: #b8ffca; }

/* ── Page transition overlay ─────────────────────────────────────────────── */
.page-transition-overlay {
  position: fixed; inset: 0; background: var(--bg-deep); z-index: 9999;
  pointer-events: none; opacity: 0; transition: opacity 0.28s var(--ease-soft);
}
.page-transition-overlay.active { opacity: 1; pointer-events: auto; }

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 12px;
}

/* ── Group chat: message avatars ─────────────────────────────────────────── */
.group-msg-header { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.group-msg-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--glass-border); flex-shrink: 0; }

/* ── Discord join pill ───────────────────────────────────────────────────── */
.discord-join-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 20px;
  background: rgba(88,101,242,0.15); border: 1px solid rgba(88,101,242,0.35);
  color: #818cf8; font-weight: 700; font-size: 12px; text-decoration: none;
  transition: background .15s, transform .15s; white-space: nowrap;
}
.discord-join-pill:hover { background: rgba(88,101,242,0.28); transform: translateY(-1px); color: #a5b4fc; }

/* ── Bot owner link in card ──────────────────────────────────────────────── */
.bot-owner-link {
  display: inline-block; margin-top: 4px; font-size: 11px; color: var(--text-muted);
  text-decoration: none; font-weight: 600; transition: color .12s;
}
.bot-owner-link:hover { color: var(--accent); }

/* ── CotW made-by link ───────────────────────────────────────────────────── */
.cotw-made-by {
  display: block; margin: 1px 0 3px; font-size: 11px; color: var(--text-muted);
  font-weight: 600; opacity: .8; text-decoration: none; transition: color .12s, opacity .12s;
}
.cotw-made-by:hover { color: var(--accent); opacity: 1; }

/* ── Recent activity: nav buttons + improved cards ───────────────────────── */
.recent-activity-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.recent-activity-nav { display: flex; gap: 6px; }
.ra-nav-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.06); color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s;
}
.ra-nav-btn:hover { background: rgba(255,255,255,0.14); color: var(--text-light); }
[data-theme="light"] .ra-nav-btn { background: rgba(0,0,0,0.05); }
.recent-activity-scroll {
  scrollbar-width: none; -ms-overflow-style: none;
}
.recent-activity-scroll::-webkit-scrollbar { display: none; }
.recent-activity-card { border: 1px solid var(--glass-border); }
.ra-badge-group { color: #a78bfa !important; }

/* ── User profile ────────────────────────────────────────────────────────── */
.profile-hero-badge { }

/* ── Mobile bottom nav ───────────────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--sidebar-bg); border-top: 1px solid var(--card-border);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  justify-content: space-around; align-items: stretch;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.mob-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px; text-decoration: none; color: var(--text-muted);
  font-size: 10px; font-weight: 600; letter-spacing: .02em; transition: color .15s;
  border-radius: 10px; margin: 0 2px;
}
.mob-nav-item svg { transition: transform .15s; }
.mob-nav-item:active svg { transform: scale(.88); }
.mob-nav-item.mob-active { color: var(--accent); }
.mob-nav-item.mob-active svg { stroke: var(--accent); }

@media (max-width: 860px) {
  /* Hide desktop sidebar entirely */
  .sidebar { display: none !important; }
  /* Show mobile bottom nav */
  .mobile-bottom-nav { display: flex; }
  /* Content fills full width, pad bottom for nav bar */
  .app-shell { flex-direction: row; }
  .main-wrap { flex: 1; min-width: 0; }
  .main-content { padding: 16px; padding-bottom: 80px; }
  /* Top bar compact */
  .top-bar { padding: 10px 16px; }
  .top-bar-title { font-size: 11px; }
  .discord-join-pill { display: none; }
  /* Grid fixes */
  .form-grid { grid-template-columns: 1fr; }
  .upload-row { flex-direction: column; }
  .upload-preview-wrap-banner { width: 100%; height: 90px; }
  /* Tier cards stack */
  .tier-grid { grid-template-columns: 1fr; }
  /* Profile page grid */
  .profile-bots-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  /* Discovery cotw strip: scroll on mobile */
  .cotw-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  /* Chat takes full height minus top bar and bottom nav */
  .chat-wrap { height: calc(100dvh - 56px - 62px); }
  /* On chat pages, strip main-content padding so chat-wrap fills correctly */
  .main-content:has(.chat-wrap) { padding: 0 !important; }
}