/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS (CSS Custom Properties)
   ═══════════════════════════════════════════════════════ */

:root {
  --background: oklch(0.985 0.002 250);
  --foreground: oklch(0.175 0.015 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.175 0.015 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.175 0.015 260);
  --primary: oklch(0.488 0.243 264);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.965 0.008 260);
  --secondary-foreground: oklch(0.275 0.03 260);
  --muted: oklch(0.955 0.005 260);
  --muted-foreground: oklch(0.475 0.015 260);
  --accent: oklch(0.955 0.012 260);
  --accent-foreground: oklch(0.275 0.03 260);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.915 0.008 260);
  --input: oklch(0.915 0.008 260);
  --ring: oklch(0.488 0.243 264);
  --radius: 0.75rem;
}

* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS & KEYFRAMES
   ═══════════════════════════════════════════════════════ */

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleSpring {
  0% { transform: scale(0); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

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

@keyframes slideOutUp {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

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

@keyframes chatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.anim-fade-in-up { animation: fadeInUp 0.4s ease-out both; }
.anim-fade-in-down { animation: fadeInDown 0.3s ease-out both; }
.anim-fade-in { animation: fadeIn 0.3s ease-out both; }
.anim-scale-spring { animation: scaleSpring 0.4s ease-out both; }
.anim-bounce-y { animation: bounceY 2s ease-in-out infinite; }
.anim-slide-in-up { animation: slideInUp 0.4s ease-out both; }

/* Scroll-triggered section fade */
.section-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-0 { animation-delay: 100ms; }
.stagger-1 { animation-delay: 150ms; }
.stagger-2 { animation-delay: 200ms; }
.stagger-3 { animation-delay: 250ms; }
.stagger-4 { animation-delay: 300ms; }
.stagger-5 { animation-delay: 350ms; }
.stagger-6 { animation-delay: 400ms; }
.stagger-7 { animation-delay: 450ms; }
.stagger-8 { animation-delay: 500ms; }
.stagger-9 { animation-delay: 550ms; }

/* ═══════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════ */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 0.5rem;
  border-radius: 0.5rem;
  background: var(--muted);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #10b981;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════════════════════
   SHARED UTILITIES
   ═══════════════════════════════════════════════════════ */

.card-ring {
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
}

/* ═══════════════════════════════════════════════════════
   CROSS-COMPONENT: Dashboard layout & chat push
   (these span DashboardView ↔ ChatSidebar boundary)
   ═══════════════════════════════════════════════════════ */

.dashboard-with-chat {
  display: flex;
  min-height: 100vh;
  position: relative;
}

.dashboard-main {
  flex: 1;
  min-width: 0;
  transition: margin-right 0.3s ease;
}

@media (min-width: 769px) {
  /* Sidebar open by default on desktop — push dashboard content */
  .dashboard-with-chat .dashboard-main {
    margin-right: 520px;
  }
  /* Undo push when user explicitly closes sidebar */
  .dashboard-with-chat:has(.chat-sidebar--closed) .dashboard-main {
    margin-right: 0;
  }
  .dashboard-with-chat:has(.chat-sidebar--specialist) .dashboard-main {
    margin-right: 40vw;
  }
  .dashboard-with-chat:has(.chat-sidebar--specialist.chat-sidebar--closed) .dashboard-main {
    margin-right: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   CROSS-COMPONENT: Typing indicator
   (used by ChatSidebar)
   ═══════════════════════════════════════════════════════ */

.chat-typing {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.125rem 0;
}

.chat-typing__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--muted-foreground);
  animation: chatTypingBounce 1.2s ease-in-out infinite;
}

.chat-typing__dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing__dot:nth-child(3) { animation-delay: 0.3s; }

/* ═══════════════════════════════════════════════════════
   CROSS-COMPONENT: Chat markdown
   (used by ChatMessage + ChatSidebar streaming)
   ═══════════════════════════════════════════════════════ */

.chat-markdown p { margin: 0 0 0.5em; }
.chat-markdown p:last-child { margin-bottom: 0; }
.chat-markdown strong { font-weight: 600; }
.chat-markdown em { font-style: italic; }
.chat-markdown ul, .chat-markdown ol { margin: 0.25em 0 0.5em; padding-left: 1.25em; }
.chat-markdown li { margin-bottom: 0.2em; }
.chat-markdown li::marker { color: var(--muted-foreground); }
.chat-markdown code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; padding: 0.125em 0.3em; border-radius: 0.25rem; background: color-mix(in oklch, var(--foreground) 6%, transparent); }
.chat-markdown pre { margin: 0.5em 0; padding: 0.625rem 0.75rem; border-radius: var(--radius); background: color-mix(in oklch, var(--foreground) 5%, transparent); overflow-x: auto; font-size: 0.75rem; }
.chat-markdown pre code { padding: 0; background: none; }
.chat-markdown hr { border: none; border-top: 1px solid var(--border); margin: 0.75em 0; }
.chat-markdown a { color: var(--primary); text-decoration: underline; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3 { font-weight: 600; margin: 0.5em 0 0.25em; line-height: 1.3; }
.chat-markdown h1 { font-size: 1em; }
.chat-markdown h2 { font-size: 0.9375em; }
.chat-markdown h3 { font-size: 0.875em; }
.chat-markdown table { width: 100%; border-collapse: collapse; margin: 0.5em 0; font-size: 0.75rem; }
.chat-markdown th, .chat-markdown td { padding: 0.375rem 0.5rem; border: 1px solid var(--border); text-align: left; }
.chat-markdown th { font-weight: 600; background: color-mix(in oklch, var(--foreground) 4%, transparent); }
.chat-markdown blockquote { margin: 0.5em 0; padding: 0.25em 0.75em; border-left: 3px solid color-mix(in oklch, var(--primary) 30%, transparent); color: var(--muted-foreground); }

/* ═══════════════════════════════════════════════════════
   BLAZOR ERROR UI
   ═══════════════════════════════════════════════════════ */

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}