/* ── TEMA DEGISKENLERI ── */
[data-theme="dark"] {
  --bg: #09090f;
  --surface: #111118;
  --border: #1e1e2e;
  --accent: #7c6aff;
  --accent2: #ff6ab0;
  --text: #e8e8f0;
  --muted: #555570;
  --msg-self: #1a1a35;
  --msg-other: #16161e;
  --header-bg: rgba(9,9,15,0.8);
  --star-opacity: 1;
}

[data-theme="light"] {
  --bg: #f0f0f5;
  --surface: #ffffff;
  --border: #e0e0e8;
  --accent: #6c5ce7;
  --accent2: #e84393;
  --text: #1a1a2e;
  --muted: #888899;
  --msg-self: #ede8ff;
  --msg-other: #f5f5fa;
  --header-bg: rgba(255,255,255,0.85);
  --star-opacity: 0;
}

:root { --radius: 18px; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.3s, color 0.3s;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: var(--star-opacity);
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 70%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 15%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 40%, rgba(124,106,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 55%, rgba(255,106,176,0.2) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: var(--star-opacity);
  background:
    radial-gradient(ellipse 600px 400px at 20% 100%, rgba(124,106,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 80% 0%, rgba(255,106,176,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s;
}

/* ── TEMA TOGGLE ── */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); transform: scale(1.1); }

/* Toast */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--accent2);
  color: #fff;
  padding: 0.7rem 1.5rem;
  border-radius: 100px;
  font-size: 0.85rem;
  z-index: 999;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

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

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

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}