:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-sidebar: #0a0a0a;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --accent: #ff002f;
}

.dark {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-sidebar: #0a0a0a;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #2e2e2e;
  --accent: #ff002f;
}

html, body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

* { transition: background-color 0.15s ease, border-color 0.15s ease; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
:root:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

.bubble-user {
  background: rgba(255, 0, 47, 0.08);
  border: 1px solid rgba(255, 0, 47, 0.18);
  border-radius: 12px;
  padding: 0.625rem 0.875rem;
}
.dark .bubble-user {
  background: rgba(255, 0, 47, 0.12);
  border: 1px solid rgba(255, 0, 47, 0.28);
}

.bubble-bot {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.625rem 0.875rem;
}
.dark .bubble-bot {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
}

pre.md {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.tab-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.tab-btn:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text-primary);
}
.dark .tab-btn:hover { background: rgba(255,255,255,0.06); }
.tab-btn.active {
  background: rgba(255, 0, 47, 0.08);
  color: #ff002f;
  border-color: rgba(255, 0, 47, 0.18);
}
.dark .tab-btn.active {
  background: rgba(255, 0, 47, 0.12);
  border-color: rgba(255, 0, 47, 0.28);
}