/* =============================================
   THEMES
   ============================================= */

/* ── Weiß-Mode ──────────────────────────────── */
body[data-theme="light"] {
  --bg-0:       #f0f2f5;
  --bg-1:       #ffffff;
  --bg-2:       #e8eaed;
  --bg-3:       #d8dade;
  --border:     #bfc3cb;
  --text-1:     #111318;
  --text-2:     #44474f;
  --text-3:     #72767e;
  --purple:     #7c2ce8;
  --purple-dim: #5a1eb8;
  --teal:       #007a6e;
  --orange:     #d44e00;
  --gold:       #b07a00;
  --blue:       #1565a8;
}

/* ── Lila Nacht ─────────────────────────────── */
body[data-theme="purple"] {
  --bg-0:       #0d0b1a;
  --bg-1:       #14102a;
  --bg-2:       #1c1838;
  --bg-3:       #251f4a;
  --border:     #352d60;
  --text-1:     #e8e0ff;
  --text-2:     #a89dcc;
  --text-3:     #6b5f99;
  --purple:     #c084fc;
  --purple-dim: #9333ea;
  --teal:       #67e8f9;
  --orange:     #fb923c;
  --gold:       #fbbf24;
  --blue:       #93c5fd;
}

/* ── Neon Grün ──────────────────────────────── */
body[data-theme="neon"] {
  --bg-0:       #020c04;
  --bg-1:       #091608;
  --bg-2:       #0e2010;
  --bg-3:       #152a16;
  --border:     #1c4020;
  --text-1:     #c8ffd4;
  --text-2:     #7ec890;
  --text-3:     #3a7a48;
  --purple:     #00e55a;
  --purple-dim: #00b844;
  --teal:       #00ffcc;
  --orange:     #ff6600;
  --gold:       #ccff00;
  --blue:       #00ccff;
}

/* ── Warmton ────────────────────────────────── */
body[data-theme="warm"] {
  --bg-0:       #100b06;
  --bg-1:       #1c1208;
  --bg-2:       #261a0c;
  --bg-3:       #322410;
  --border:     #4a3218;
  --text-1:     #ffe8cc;
  --text-2:     #c09060;
  --text-3:     #7a5030;
  --purple:     #ff9933;
  --purple-dim: #cc6600;
  --teal:       #ffcc44;
  --orange:     #ff4400;
  --gold:       #ffee00;
  --blue:       #cc9900;
}

/* Light-Theme: spezifische Overrides für Container, die eigene bg-Farben setzen */
body[data-theme="light"] .chat-message        { border-bottom-color: var(--border); }
body[data-theme="light"] .event-card          { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
body[data-theme="light"] #header              { background: var(--bg-1); border-bottom: 1px solid var(--border); }
body[data-theme="light"] #settings-panel      { background: var(--bg-0); }
body[data-theme="light"] .setting-group       { background: var(--bg-1); border: 1px solid var(--border); }
body[data-theme="light"] .mod-menu-card       { background: var(--bg-1); border-color: var(--border); }
body[data-theme="light"] .toast               { background: #2a2a2a; color: #fff; }
body[data-theme="light"] .summary-card        { background: var(--bg-1); }

/* =============================================
   THEME-PICKER
   ============================================= */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.theme-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 600;
  outline: none;
}
.theme-chip:hover  { border-color: var(--border); }
.theme-chip.active { border-color: var(--purple); color: var(--text-1); }

.theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* =============================================
   CHAT HISTORY DIVIDER
   ============================================= */

.chat-history-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  user-select: none;
  pointer-events: none;
}
.chat-history-divider::before,
.chat-history-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  opacity: 0.6;
}