/* SoloDial Theme System */
:root {
  --bg-body: #0a0a0f;
  --bg-sidebar: #0c0c14;
  --bg-sidebar-hover: rgba(63,63,70,0.4);
  --bg-active: rgba(99,102,241,0.12);
  --bg-active-border: rgba(99,102,241,0.5);
  --bg-card: rgba(24,24,32,0.6);
  --bg-input: rgba(24,24,32,0.8);
  --bg-topbar: rgba(10,10,15,0.8);

  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #52525b;
  --text-accent: #818cf8;
  --text-accent-bright: #a5b4fc;

  --border-default: rgba(39,39,42,0.5);
  --border-subtle: rgba(39,39,42,0.3);

  --flash-success-bg: rgba(6,78,59,0.3);
  --flash-success-border: rgba(6,95,70,0.3);
  --flash-success-text: #6ee7b7;
  --flash-error-bg: rgba(127,29,29,0.3);
  --flash-error-border: rgba(153,27,27,0.3);
  --flash-error-text: #fca5a5;

  --shadow-sidebar: 1px 0 0 var(--border-default);
  --logo-accent: #818cf8;
  --logo-text: #ffffff;
  --user-avatar-bg: rgba(99,102,241,0.2);
  --user-avatar-text: #818cf8;
}

html.light {
  --bg-body: #f8f9fb;
  --bg-sidebar: #ffffff;
  --bg-sidebar-hover: rgba(0,0,0,0.04);
  --bg-active: rgba(99,102,241,0.08);
  --bg-active-border: rgba(99,102,241,0.6);
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-topbar: rgba(255,255,255,0.85);

  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;
  --text-accent: #6366f1;
  --text-accent-bright: #4f46e5;

  --border-default: rgba(0,0,0,0.08);
  --border-subtle: rgba(0,0,0,0.04);

  --flash-success-bg: rgba(220,252,231,0.8);
  --flash-success-border: rgba(187,247,208,0.5);
  --flash-success-text: #166534;
  --flash-error-bg: rgba(254,226,226,0.8);
  --flash-error-border: rgba(254,202,202,0.5);
  --flash-error-text: #991b1b;

  --shadow-sidebar: 1px 0 0 var(--border-default);
  --logo-accent: #6366f1;
  --logo-text: #18181b;
  --user-avatar-bg: rgba(99,102,241,0.1);
  --user-avatar-text: #6366f1;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
}
code, pre { font-family: 'JetBrains Mono', monospace; }

/* Sidebar styles */
.sd-sidebar {
  background: var(--bg-sidebar);
  box-shadow: var(--shadow-sidebar);
}

.sd-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 450;
  border-radius: 0.5rem;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
  position: relative;
}
.sd-nav-link:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-primary);
}
.sd-nav-link.active {
  background: var(--bg-active);
  color: var(--text-accent);
  border-left-color: var(--bg-active-border);
  font-weight: 550;
}
.sd-nav-link.active svg { color: var(--text-accent); }

.sd-section-label {
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sd-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--user-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--user-avatar-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.sd-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  color: var(--text-secondary);
  transition: all 0.15s;
  cursor: pointer;
  border: none;
  background: transparent;
}
.sd-theme-btn:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-primary);
}

/* Flash messages */
.sd-flash-success {
  background: var(--flash-success-bg);
  border-bottom: 1px solid var(--flash-success-border);
  color: var(--flash-success-text);
}
.sd-flash-error {
  background: var(--flash-error-bg);
  border-bottom: 1px solid var(--flash-error-border);
  color: var(--flash-error-text);
}

/* Impersonation bar */
.sd-impersonation-bar {
  background: #d97706;
  color: white;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Mobile overlay */
.sd-overlay {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

/* Utility: hide scrollbar on sidebar */
.sd-sidebar nav::-webkit-scrollbar { display: none; }
.sd-sidebar nav { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================
   LIGHT MODE OVERRIDES
   Remap dark Tailwind classes to light values
   so all existing pages "just work" in light mode
   ============================================ */

/* Backgrounds */
html.light .bg-zinc-900\/50,
html.light .bg-zinc-900\/40,
html.light .bg-zinc-900\/60 {
  background-color: #ffffff !important;
}
html.light .bg-zinc-900 {
  background-color: #f9fafb !important;
}
html.light .bg-zinc-800 {
  background-color: #f3f4f6 !important;
}
html.light .bg-zinc-800\/30,
html.light .bg-zinc-800\/50 {
  background-color: rgba(0,0,0,0.03) !important;
}
html.light .bg-\[\#0a0a0f\],
html.light .bg-\[\#0c0c12\],
html.light .bg-\[\#0c0c14\] {
  background-color: #f8f9fb !important;
}

/* Text colors */
html.light .text-zinc-100 {
  color: #18181b !important;
}
html.light .text-zinc-200 {
  color: #27272a !important;
}
html.light .text-zinc-300 {
  color: #3f3f46 !important;
}
html.light .text-zinc-400 {
  color: #52525b !important;
}
html.light .text-zinc-500 {
  color: #71717a !important;
}
html.light .text-zinc-600 {
  color: #a1a1aa !important;
}
html.light .text-white {
  color: #18181b !important;
}

/* Borders */
html.light .border-zinc-800,
html.light .border-zinc-800\/50,
html.light .border-zinc-800\/30 {
  border-color: rgba(0,0,0,0.08) !important;
}
html.light .border-zinc-700,
html.light .border-zinc-700\/30 {
  border-color: rgba(0,0,0,0.12) !important;
}

/* Hover states */
html.light .hover\:border-zinc-700:hover {
  border-color: rgba(0,0,0,0.15) !important;
}
html.light .hover\:bg-zinc-800\/30:hover,
html.light .hover\:bg-zinc-800\/50:hover {
  background-color: rgba(0,0,0,0.04) !important;
}
html.light .hover\:text-zinc-300:hover {
  color: #18181b !important;
}

/* Status badges — keep colored but lighten for light mode */
html.light .bg-emerald-900\/50 {
  background-color: rgba(220,252,231,0.8) !important;
}
html.light .text-emerald-400 {
  color: #059669 !important;
}
html.light .border-emerald-700\/30 {
  border-color: rgba(16,185,129,0.2) !important;
}
html.light .bg-amber-900\/50 {
  background-color: rgba(254,243,199,0.8) !important;
}
html.light .text-amber-400 {
  color: #d97706 !important;
}
html.light .border-amber-700\/30 {
  border-color: rgba(217,119,6,0.2) !important;
}
html.light .bg-blue-900\/50 {
  background-color: rgba(219,234,254,0.8) !important;
}
html.light .text-blue-400 {
  color: #2563eb !important;
}
html.light .bg-violet-900\/50 {
  background-color: rgba(237,233,254,0.8) !important;
}
html.light .text-violet-400 {
  color: #7c3aed !important;
}
html.light .bg-red-900\/50,
html.light .bg-red-900\/30 {
  background-color: rgba(254,226,226,0.8) !important;
}

/* Accent colors — slightly deeper in light mode for contrast */
html.light .text-indigo-400 {
  color: #4f46e5 !important;
}
html.light .hover\:text-indigo-300:hover {
  color: #4338ca !important;
}
html.light .text-cyan-400 {
  color: #0891b2 !important;
}

/* Cards and panels get subtle shadow in light mode */
html.light .rounded-xl {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* Table rows */
html.light tr.border-b {
  border-color: rgba(0,0,0,0.06) !important;
}

/* Keep buttons visible */
html.light .bg-indigo-600 {
  color: #ffffff !important;
}
html.light .bg-indigo-600 .text-white,
html.light a.bg-indigo-600 {
  color: #ffffff !important;
}

/* Login/signup pages */
html.light .bg-gray-900,
html.light .bg-gray-800 {
  background-color: #ffffff !important;
}
html.light .text-gray-400 {
  color: #52525b !important;
}
html.light .text-gray-300 {
  color: #3f3f46 !important;
}
html.light .border-gray-700 {
  border-color: rgba(0,0,0,0.1) !important;
}

/* ============================================
   VOICE CONFIG — Cards & Sliders
   ============================================ */

.sd-voice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid var(--border-default);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  min-width: 0;
}
.sd-voice-card:hover {
  border-color: rgba(99,102,241,0.3);
}
.sd-voice-selected {
  border-color: var(--text-accent) !important;
  background: var(--bg-active) !important;
  box-shadow: 0 0 0 1px var(--text-accent);
}
.sd-voice-unselected {
  opacity: 0.7;
}
.sd-voice-unselected:hover {
  opacity: 1;
}

.sd-voice-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

/* Sliders */
.sd-slider-container {
  position: relative;
  padding: 1.5rem 0 2.5rem;
  user-select: none;
  touch-action: none;
}
.sd-slider-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--border-default);
  cursor: pointer;
}
.sd-slider-track::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--text-accent), rgba(99,102,241,0.3));
  opacity: 0.4;
}
.sd-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--text-accent);
  box-shadow: 0 0 0 4px var(--bg-body), 0 0 0 5px var(--text-accent);
  pointer-events: none;
  transition: left 0.1s ease;
}
.sd-slider-label {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-accent);
  white-space: nowrap;
  pointer-events: none;
  transition: left 0.1s ease;
}
.sd-slider-endpoints {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ============================================
   CHAT TRANSCRIPT BUBBLES
   ============================================ */

.sd-chat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 100%;
}
.sd-bubble {
  max-width: 80%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  word-wrap: break-word;
}
.sd-bubble-caller {
  align-self: flex-start;
  background: var(--bg-input);
  color: var(--text-primary);
  border-bottom-left-radius: 0.25rem;
}
.sd-bubble-agent {
  align-self: flex-end;
  background: rgba(99,102,241,0.15);
  color: var(--text-accent-bright);
  border-bottom-right-radius: 0.25rem;
}
.sd-bubble-label {
  font-size: 0.6875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.sd-bubble-caller .sd-bubble-label {
  color: var(--text-muted);
}
.sd-bubble-agent .sd-bubble-label {
  color: var(--text-accent);
}

html.light .sd-bubble-caller {
  background: #f3f4f6 !important;
}
html.light .sd-bubble-agent {
  background: rgba(99,102,241,0.1) !important;
  color: #4338ca !important;
}

/* Integration logos — white background for transparent PNGs */
.sd-integration-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  object-fit: contain;
  background: #ffffff;
  padding: 0.25rem;
}