html, body { height: 100%; }

body {
  background: radial-gradient(1200px 700px at 15% 10%, rgba(34, 211, 238, 0.14), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(251, 113, 133, 0.12), transparent 50%),
    radial-gradient(900px 700px at 50% 90%, rgba(167, 139, 250, 0.14), transparent 55%),
    #020617;
}

.glass {
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: blur(12px);
}

.neon-border {
  border: 1px solid rgba(34, 211, 238, 0.30);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.14), 0 0 36px rgba(167, 139, 250, 0.16);
}

.speech-bubble { position: relative; border-radius: 16px; }

.speech-bubble:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 24px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.86);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}


/* Light mode (wenn html NICHT .dark ist) */
html:not(.dark) body {
  background: radial-gradient(1200px 700px at 15% 10%, rgba(34, 211, 238, 0.10), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(251, 113, 133, 0.08), transparent 50%),
    radial-gradient(900px 700px at 50% 90%, rgba(167, 139, 250, 0.10), transparent 55%),
    #f8fafc;
}

body.light {
  color: #0f172a !important;
}

body.light .glass {
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.14);
}

body.light .neon-border {
  border: 1px solid rgba(34, 211, 238, 0.40);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10), 0 0 28px rgba(167, 139, 250, 0.12);
}

body.light .speech-bubble:after {
  border-top-color: rgba(248, 250, 252, 0.95);
}