/* ═══════════════════════════════════════════════════════════
   AI Relay — Design Tokens & Reset (shared)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --c-brand: #6366f1;
  --c-brand-light: #818cf8;
  --c-brand-dim: #4f46e5;
  --c-brand-dark: #3730a3;
  --c-brand-glow: rgba(99,102,241,.2);
  --c-accent: #a78bfa;
  --c-accent-light: #c4b5fd;

  /* Semantic */
  --c-danger: #ef4444;
  --c-danger-dim: #dc2626;
  --c-danger-glow: rgba(239,68,68,.2);
  --c-success: #10b981;
  --c-success-dim: #059669;
  --c-warning: #f59e0b;
  --c-warning-dim: #d97706;
  --c-info: #3b82f6;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
  --grad-brand-h: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
  --grad-dark: linear-gradient(180deg, #0b1121 0%, #111827 50%, #0f172a 100%);
  --grad-card: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  /* Backgrounds */
  --bg-root: #f1f5f9;
  --bg-inset: #e8ecf1;
  --bg-surface: #ffffff;
  --bg-raised: #f8fafc;
  --bg-hover: #f1f5f9;
  --bg-overlay: rgba(15,23,42,.25);

  /* Borders */
  --border-subtle: #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong: #94a3b8;

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #f1f5f9;

  /* Sidebar */
  --sidebar-bg: #080c17;
  --sidebar-bg-top: #0a0e1a;
  --sidebar-text: #94a3b8;
  --sidebar-text-dim: rgba(148,163,184,.45);
  --sidebar-hover: rgba(255,255,255,.04);
  --sidebar-active-bg: rgba(99,102,241,.12);
  --sidebar-active-border: #6366f1;
  --sidebar-divider: rgba(255,255,255,.05);

  /* Glass */
  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.08);
  --glass-bg-strong: rgba(255,255,255,.1);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.04);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.15);
  --shadow-glow-brand: 0 0 0 3px var(--c-brand-glow), 0 4px 16px rgba(99,102,241,.15);
  --shadow-card-hover: 0 12px 32px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);

  /* Transitions */
  --transition-fast: .15s cubic-bezier(.4,0,.2,1);
  --transition: .2s cubic-bezier(.4,0,.2,1);
  --transition-slow: .35s cubic-bezier(.4,0,.2,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-back: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
}

/* ═══════════════════════════════════════════════════════════
   Dark Mode — manual toggle (data-theme attribute)
   initTheme() always sets data-theme to "light" or "dark"
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg-root: #0b1121;
  --bg-inset: #0f172a;
  --bg-surface: #111827;
  --bg-raised: #1a2236;
  --bg-hover: #1f2a3f;
  --bg-overlay: rgba(0,0,0,.45);

  --border-subtle: #1e293b;
  --border-default: #334155;
  --border-strong: #475569;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.3);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.6);
}

[data-theme="light"] {
  --bg-root: #f1f5f9;
  --bg-inset: #e8ecf1;
  --bg-surface: #ffffff;
  --bg-raised: #f8fafc;
  --bg-hover: #f1f5f9;
  --bg-overlay: rgba(15,23,42,.25);

  --border-subtle: #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong: #94a3b8;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #f1f5f9;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.04);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.15);
}

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

html {
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}
/* Smooth theme switch */
[data-theme] {
  transition: background-color .35s var(--ease-out-expo), color .35s var(--ease-out-expo), border-color .35s var(--ease-out-expo);
}

body {
  font-family:var(--font-sans);
  color:var(--text-primary);
  background:var(--bg-root);
  line-height:1.55;
  min-height:100vh;
}

a { color:var(--c-brand); text-decoration:none; transition:color var(--transition-fast) }
a:hover { color:var(--c-brand-dim); }

/* Focus ring — use box-shadow for cross-browser consistency */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-brand-glow);
  border-radius: var(--radius-xs);
}

/* Utilities */
.mono, .font-mono { font-family:var(--font-mono); font-size:.85em }
.page-enter { animation:fadeUp .35s var(--ease-out-expo) }

/* Theme toggle button (shared) */
.btn-theme-toggle {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.btn-theme-toggle:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: var(--bg-hover);
  transform: rotate(15deg);
}
.btn-theme-toggle:active {
  transform: rotate(15deg) scale(.92);
}

/* Selection */
::selection { background:rgba(99,102,241,.2); color:var(--text-primary) }
[data-theme="dark"] ::selection { background:rgba(99,102,241,.35); color:var(--text-primary) }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border-default); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--border-strong) }

/* Dark scrollbar for sidebar */
.sidebar ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px }
.sidebar ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2) }

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

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

@keyframes scaleIn {
  from { opacity:0; transform:scale(.94) }
  to   { opacity:1; transform:scale(1) }
}

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

@keyframes toastIn {
  from { opacity:0; transform:translateX(24px) scale(.96) }
  to   { opacity:1; transform:translateX(0) scale(1) }
}

@keyframes toastOut {
  from { opacity:1; transform:translateX(0) scale(1) }
  to   { opacity:0; transform:translateX(24px) scale(.96) }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%) }
  100% { transform: translateX(100%) }
}

/* ═══════════════════════════════════════════════════════════
   Accessibility
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Print
   ═══════════════════════════════════════════════════════════ */

@media print {
  .sidebar, .topbar, .btn, .chat-input-bar, #toastRoot, .modal-overlay,
  .nav-item, .logout-link, .btn-theme-toggle, .user-dropdown {
    display: none !important;
  }
  .main, .portal-content, .chat-shell, .chat-messages {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
}