/* ══════════════════════════════════════════
   THEME EFFECTS — applied via body classes
   ══════════════════════════════════════════ */

/* ── Font variables (set by theme engine) ── */
:root {
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-greeting: 'Cormorant Garamond', serif;
  --accent-secondary: var(--accent);
  --glitch-primary: #ff2d95;
  --glitch-secondary: #00f0ff;
}

/* ══════ NEON TERMINAL: Glow borders ══════ */
.fx-glow .msg-bubble {
  box-shadow: 0 0 8px rgba(var(--accent-rgb, 0,255,136), 0.15),
              inset 0 0 8px rgba(var(--accent-rgb, 0,255,136), 0.05);
}

.fx-glow .hub-card,
.fx-glow .hub-nav-btn {
  box-shadow: 0 0 12px rgba(var(--accent-rgb, 0,255,136), 0.08);
}

.fx-glow .hub-card:hover,
.fx-glow .hub-nav-btn:hover {
  box-shadow: 0 0 20px rgba(var(--accent-rgb, 0,255,136), 0.2);
}

.fx-glow header {
  box-shadow: 0 1px 12px rgba(var(--accent-rgb, 0,255,136), 0.1);
}

.fx-glow input:focus,
.fx-glow textarea:focus,
.fx-glow select:focus {
  box-shadow: 0 0 10px rgba(var(--accent-rgb, 0,255,136), 0.15);
  border-color: var(--accent);
}

/* ══════ TSN GLITCH: Chromatic borders ══════ */
.fx-glitch .msg-bubble.companion {
  border-left: 3px solid var(--glitch-primary);
  box-shadow: -2px 0 0 var(--glitch-secondary), 2px 0 0 var(--glitch-primary);
}

.fx-glitch header {
  border-bottom-color: var(--glitch-primary);
  box-shadow: 0 1px 0 var(--glitch-secondary);
}

.fx-glitch .hub-card,
.fx-glitch .hub-nav-btn {
  border-color: var(--glitch-primary);
  box-shadow: -1px -1px 0 var(--glitch-secondary), 1px 1px 0 var(--glitch-primary);
}

/* Glitch flicker on headings */
.fx-glitch .header-info span,
.fx-glitch .hub-greeting .greeting-text,
.fx-glitch .sidebar-header {
  animation: glitch-text 4s infinite;
}

@keyframes glitch-text {
  0%, 92%, 100% { text-shadow: none; transform: none; }
  93% { text-shadow: -2px 0 var(--glitch-secondary), 2px 0 var(--glitch-primary); transform: translateX(-1px); }
  94% { text-shadow: 2px 0 var(--glitch-primary), -2px 0 var(--glitch-secondary); transform: translateX(1px); }
  95% { text-shadow: none; transform: none; }
  96% { text-shadow: -1px 0 var(--glitch-secondary); transform: translateX(-1px) skewX(-0.5deg); }
  97% { text-shadow: none; transform: none; }
}

/* ══════ TSN GLITCH: Noise overlay ══════ */
.fx-noise::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.03;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise-shift 0.5s steps(10) infinite;
}

@keyframes noise-shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-10px, -10px); }
}

/* ══════ PASTEL DREAM: Soft shadows ══════ */
.fx-soft .msg-bubble {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.fx-soft .hub-card,
.fx-soft .hub-nav-btn {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.06);
}

.fx-soft .hub-card:hover,
.fx-soft .hub-nav-btn:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.fx-soft header {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* ══════ WITCHY: Shimmer on cards ══════ */
.theme-witchy .hub-card,
.theme-witchy .hub-nav-btn {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(var(--accent-rgb),0.06) 50%, var(--bg-card) 100%);
  background-size: 200% 200%;
  animation: shimmer 8s ease infinite;
}

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

/* ══════ NEON TERMINAL: Monospace everything ══════ */
.theme-neon-terminal {
  font-family: var(--font-body) !important;
}

.theme-neon-terminal .msg-text,
.theme-neon-terminal .card-message {
  font-family: var(--font-body);
}

.theme-neon-terminal .hub-greeting .greeting-text::before {
  content: '> ';
  color: var(--accent);
}

/* ══════ PASTEL DREAM: Light mode overrides ══════ */
.theme-pastel-dream .icon { background-color: var(--text); }
.theme-pastel-dream .icon.text-color { background-color: var(--text); }
.theme-pastel-dream .icon.muted { background-color: var(--text-muted); }

.theme-pastel-dream #send-btn {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.theme-pastel-dream .sidebar-footer a { color: var(--text-muted); }

/* ══════ PASTEL DREAM: CSS Clouds ══════ */
.theme-pastel-dream .css-clouds {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.theme-pastel-dream .css-clouds .cloud {
  position: absolute;
  border-radius: 100px;
  filter: blur(16px);
}

.theme-pastel-dream .css-clouds .cloud::before,
.theme-pastel-dream .css-clouds .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: inherit;
}

.theme-pastel-dream .css-clouds .cloud::before {
  width: 55%; height: 140%; top: -60%; left: 20%; border-radius: 50%;
}

.theme-pastel-dream .css-clouds .cloud::after {
  width: 40%; height: 110%; top: -40%; left: 50%; border-radius: 50%;
}

/* Cloud 1 — large, high, lavender */
.theme-pastel-dream .css-clouds .cloud-1 {
  width: 450px; height: 100px; top: 8%; left: -350px;
  background: rgba(180,142,204,0.22);
  animation: cloud-scroll 45s linear infinite;
}

/* Cloud 2 — medium, mid, mint */
.theme-pastel-dream .css-clouds .cloud-2 {
  width: 350px; height: 80px; top: 30%; left: -270px;
  background: rgba(142,204,196,0.18);
  animation: cloud-scroll 60s linear infinite;
  animation-delay: -20s;
}

/* Cloud 3 — small, low, lavender */
.theme-pastel-dream .css-clouds .cloud-3 {
  width: 300px; height: 70px; top: 55%; left: -230px;
  background: rgba(180,142,204,0.15);
  animation: cloud-scroll 70s linear infinite;
  animation-delay: -35s;
}

/* Cloud 4 — large, low, mint */
.theme-pastel-dream .css-clouds .cloud-4 {
  width: 420px; height: 90px; top: 72%; left: -330px;
  background: rgba(142,204,196,0.16);
  animation: cloud-scroll 55s linear infinite;
  animation-delay: -10s;
}

/* Cloud 5 — tiny, high, lavender */
.theme-pastel-dream .css-clouds .cloud-5 {
  width: 250px; height: 55px; top: 18%; left: -200px;
  background: rgba(180,142,204,0.12);
  animation: cloud-scroll 35s linear infinite;
  animation-delay: -25s;
}

@keyframes cloud-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 400px)); }
}

/* ══════ NEON TERMINAL: Animated smoke bg ══════ */
.theme-neon-terminal .smoke-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.theme-neon-terminal .smoke-bg .smoke-layer {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background: url('/themes/neon-terminal/bg-smoke.png') center/cover no-repeat;
  opacity: 0.12;
}

.theme-neon-terminal .smoke-bg .smoke-layer-1 {
  animation: smoke-drift-1 40s ease-in-out infinite;
}

.theme-neon-terminal .smoke-bg .smoke-layer-2 {
  animation: smoke-drift-2 55s ease-in-out infinite;
  transform: scaleX(-1);
  opacity: 0.08;
}

@keyframes smoke-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(3%, -2%) scale(1.02); }
  50% { transform: translate(-2%, 3%) scale(0.98); }
  75% { transform: translate(2%, 1%) scale(1.01); }
}

@keyframes smoke-drift-2 {
  0%, 100% { transform: scaleX(-1) translate(0, 0); }
  33% { transform: scaleX(-1) translate(-3%, 2%); }
  66% { transform: scaleX(-1) translate(2%, -2%); }
}

/* ══════ PASTEL DREAM: Content above clouds ══════ */
.theme-pastel-dream header,
.theme-pastel-dream main,
.theme-pastel-dream nav,
.theme-pastel-dream footer,
.theme-pastel-dream #messages-container,
.theme-pastel-dream #input-bar,
.theme-pastel-dream .hub-content,
.theme-pastel-dream .settings-body,
.theme-pastel-dream #main {
  position: relative;
  z-index: 2;
}