/* ══════════════════════════════════════════════════════════════════════════
   NOVA AURORA — exclusive PRO theme. One seamless full-bleed living aurora with
   floating frosted-glass panels. Re-skins the whole app via CSS variables, with
   richer multi-colour aurora animation across the app + thinking + Nova Live.
   Scoped to html[data-theme="aurora"] (Pro only).
   ══════════════════════════════════════════════════════════════════════════ */

html[data-theme="aurora"] {
  --bg-base:     #080614;
  --bg-surface:  rgba(20, 16, 44, 0.42);
  --bg-elevated: rgba(30, 24, 60, 0.6);
  --bg-hover:    rgba(46, 36, 86, 0.5);
  --bg-active:   rgba(60, 46, 110, 0.62);
  --border:      rgba(168, 130, 255, 0.14);
  --border-focus:rgba(0, 224, 200, 0.55);
  --text-primary:#f1ecff;
  --text-secondary:#ada3d8;
  --text-muted:  #6b6390;
  --purple:      #8b5cf6;
  --purple-light:#c4a7ff;
  --cyan:        #00e0c8;
  --cyan-light:  #5af2e4;
  --gradient:     linear-gradient(95deg, #8b5cf6 0%, #ec4899 45%, #00e0c8 100%);
  --gradient-text:linear-gradient(120deg, #c4a7ff 0%, #ff9ad2 50%, #5af2e4 100%);
}

/* ── Full-bleed living aurora behind the whole app ── */
html[data-theme="aurora"], html[data-theme="aurora"] body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: #070512;
}
html[data-theme="aurora"] body::before {
  content: ""; position: fixed; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 40% at 12% 14%, rgba(139,92,246,0.55), transparent 60%),
    radial-gradient(32% 38% at 42% 8%,  rgba(99,102,241,0.45), transparent 62%),
    radial-gradient(36% 42% at 80% 16%, rgba(236,72,153,0.50), transparent 60%),
    radial-gradient(40% 46% at 90% 78%, rgba(0,224,200,0.45), transparent 62%),
    radial-gradient(38% 44% at 60% 90%, rgba(56,189,248,0.40), transparent 60%),
    radial-gradient(40% 46% at 10% 86%, rgba(124,58,237,0.45), transparent 62%);
  background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, 220% 220%, 220% 220%;
  filter: blur(38px) saturate(140%);
  animation: auroraDrift 26s ease-in-out infinite;
}
/* a second, slower band of colour for depth/movement */
html[data-theme="aurora"] body::after {
  content: ""; position: fixed; inset: -25%; z-index: 0; pointer-events: none; opacity: 0.55;
  background:
    conic-gradient(from 0deg at 50% 50%, rgba(139,92,246,0.0), rgba(236,72,153,0.25), rgba(0,224,200,0.22), rgba(99,102,241,0.25), rgba(139,92,246,0.0));
  filter: blur(60px);
  animation: auroraSpin 48s linear infinite;
}
@keyframes auroraDrift {
  0%,100% { background-position: 0% 0%, 100% 0%, 50% 0%, 100% 100%, 50% 100%, 0% 100%; }
  50%     { background-position: 30% 25%, 70% 30%, 40% 20%, 60% 70%, 50% 60%, 30% 80%; }
}
@keyframes auroraSpin { to { transform: rotate(360deg); } }

/* ── SEAMLESS surfaces: everything transparent so there's no gap/seam ── */
html[data-theme="aurora"] body { display: flex; }
html[data-theme="aurora"] .main-content,
html[data-theme="aurora"] #mainContent,
html[data-theme="aurora"] .nc-chatside,
html[data-theme="aurora"] .chat-viewport,
html[data-theme="aurora"] .messages-container,
html[data-theme="aurora"] .topbar,
html[data-theme="aurora"] .welcome-screen,
html[data-theme="aurora"] .input-area-wrap {
  background: transparent !important; border-color: transparent !important;
}
html[data-theme="aurora"] .main-content,
html[data-theme="aurora"] #mainContent { height: 100vh; height: 100dvh; }
/* sidebar = subtle frosted glass over the aurora, no hard edge → no visible "gap" */
html[data-theme="aurora"] .sidebar {
  background: rgba(14, 10, 34, 0.34) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border-right: 1px solid rgba(168,130,255,0.10) !important;
}
html[data-theme="aurora"] .sidebar-footer { border-top-color: rgba(168,130,255,0.12); }

/* floating glass panels (chat bubbles, input, modals) */
html[data-theme="aurora"] .input-container,
html[data-theme="aurora"] .settings-panel .settings-drawer,
html[data-theme="aurora"] .account-dialog,
html[data-theme="aurora"] .msg-bubble.ai-content {
  background: rgba(24, 19, 50, 0.55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(168,130,255,0.16);
}
html[data-theme="aurora"] .input-container { box-shadow: 0 8px 34px rgba(139,92,246,0.20), inset 0 1px 0 rgba(255,255,255,0.06); }
html[data-theme="aurora"] .msg-bubble.user-bubble {
  background: linear-gradient(135deg, rgba(139,92,246,0.92), rgba(236,72,153,0.86)); color: #fff; border: 0;
}
html[data-theme="aurora"] .send-btn.active, html[data-theme="aurora"] .send-btn:not(:disabled) { background: var(--gradient); color: #fff; }
html[data-theme="aurora"] .new-chat-btn { background: var(--gradient); color: #fff; border: 0; box-shadow: 0 6px 22px rgba(139,92,246,0.35); }
html[data-theme="aurora"] .model-chip.active, html[data-theme="aurora"] .mode-chip.active {
  border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(0,224,200,0.5), 0 6px 18px rgba(0,224,200,0.18);
}
html[data-theme="aurora"] ::selection { background: rgba(0,224,200,0.35); }

/* animated aurora brand + welcome title */
html[data-theme="aurora"] .sidebar-brand,
html[data-theme="aurora"] .welcome-title {
  background: linear-gradient(120deg, #c4a7ff, #ff9ad2, #5af2e4, #c4a7ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: auroraTextFlow 8s linear infinite;
}
@keyframes auroraTextFlow { to { background-position: 300% 50%; } }

/* ── RENEWED chat thinking animation in aurora colours ── */
html[data-theme="aurora"] .thinking-row-v2 .thinking-phrase {
  background: linear-gradient(90deg, #c4a7ff, #ff9ad2, #5af2e4, #8b5cf6, #c4a7ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: auroraThink 4.5s linear infinite;
}
@keyframes auroraThink { to { background-position: 300% 50%; } }
html[data-theme="aurora"] .thinking-row .star-animate,
html[data-theme="aurora"] .thinking-row .thinking-avatar { filter: drop-shadow(0 0 6px rgba(0,224,200,0.6)); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="aurora"] body::before,
  html[data-theme="aurora"] body::after,
  html[data-theme="aurora"] .sidebar-brand,
  html[data-theme="aurora"] .welcome-title,
  html[data-theme="aurora"] .thinking-row-v2 .thinking-phrase { animation: none; }
}