/* ── Google Fonts loaded in base.html ── */

/* ── Theme Variables ── */
:root,
[data-theme="dark"] {
  --bg:          #08080f;
  --bg-2:        #0e0e1a;
  --surface:     rgba(255,255,255,0.04);
  --surface-2:   rgba(255,255,255,0.08);
  --border:      rgba(255,255,255,0.08);
  --border-2:    rgba(255,255,255,0.14);
  --text:        #e8e8f2;
  --text-muted:  rgba(255,255,255,0.45);
  --text-faint:  rgba(255,255,255,0.2);
  --accent:      #0077dd;
  --accent-2:    #00c8ff;
  --accent-glow: rgba(0,200,255,0.18);
  --bubble-bot-bg:     rgba(255,255,255,0.05);
  --bubble-bot-border: rgba(255,255,255,0.08);
  --bubble-bot-text:   rgba(255,255,255,0.88);
  --bubble-user-bg:    linear-gradient(135deg,#0077cc,#0044aa);
  --bubble-user-text:  #ffffff;
  --input-bg:    rgba(255,255,255,0.05);
  --input-border:rgba(255,255,255,0.1);
  --shadow:      0 24px 64px rgba(0,0,0,0.6);
  --radius:      16px;
}

[data-theme="light"] {
  --bg:          #f4f5f9;
  --bg-2:        #ecedf3;
  --surface:     #ffffff;
  --surface-2:   #f0f1f6;
  --border:      rgba(0,0,0,0.08);
  --border-2:    rgba(0,0,0,0.14);
  --text:        #1a1a2e;
  --text-muted:  rgba(0,0,0,0.5);
  --text-faint:  rgba(0,0,0,0.3);
  --accent:      #0055cc;
  --accent-2:    #0099dd;
  --accent-glow: rgba(0,100,220,0.12);
  --bubble-bot-bg:     #ffffff;
  --bubble-bot-border: rgba(0,0,0,0.08);
  --bubble-bot-text:   #1a1a2e;
  --bubble-user-bg:    linear-gradient(135deg,#0066cc,#0044aa);
  --bubble-user-text:  #ffffff;
  --input-bg:    #ffffff;
  --input-border:rgba(0,0,0,0.12);
  --shadow:      0 12px 40px rgba(0,0,0,0.12);
  --radius:      16px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.25s, color 0.25s;
}

a { color: var(--accent-2); }

/* ── Theme toggle button (shared) ── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background 0.2s, border-color 0.2s;
  color: var(--text);
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--accent-2); }

/* ── Status badge ── */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: rgba(0,200,100,0.08);
  border: 1px solid rgba(0,200,100,0.18);
  border-radius: 20px;
  font-size: 0.75rem; color: #3dffa0; font-weight: 500;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3dffa0;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.4); }
}