index.css

@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@import '@fontsource-variable/inter';

@custom-variant dark (&:is(.dark *));

:root {
  color-scheme: light;
  --radius: 0.5rem;
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.2 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0 0);
  --primary: oklch(0.525 0.195 264);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.96 0 0);
  --secondary-foreground: oklch(0.3 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.95 0.03 264);
  --accent-foreground: oklch(0.525 0.195 264);
  --destructive: oklch(0.585 0.22 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.9 0 0);
  --ring: oklch(0.525 0.195 264);
  --chart-1: oklch(0.525 0.195 264);
  --chart-2: oklch(0.68 0.16 150);
  --chart-3: oklch(0.7 0.18 340);
  --chart-4: oklch(0.75 0.17 50);
  --chart-5: oklch(0.65 0.2 200);
  --chart-6: oklch(0.585 0.22 25);
  --chart-7: oklch(0.75 0.13 280);
  --chart-8: oklch(0.72 0.15 85);
  --chart-9: oklch(0.55 0.18 180);
  --sidebar: oklch(0.99 0 0);
  --sidebar-foreground: oklch(0.2 0 0);
  --sidebar-primary: oklch(0.525 0.195 264);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.96 0 0);
  --sidebar-accent-foreground: oklch(0.525 0.195 264);
  --sidebar-border: oklch(0.92 0 0);
  --sidebar-ring: oklch(0.525 0.195 264);
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  --shadow-color: oklch(0.2 0 264);
  --shadow-opacity: 0.08;
  --shadow-blur: 4px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0;
  --shadow-offset-y: 2px;
  --letter-spacing: 0em;
  --spacing: 0.25rem;
  --shadow-2xs: 0 1px 2px 0px hsl(220 13% 26% / 0.04);
  --shadow-xs: 0 1px 3px 0px hsl(220 13% 26% / 0.06);
  --shadow-sm: 0 2px 4px 0px hsl(220 13% 26% / 0.08);
  --shadow: 0 4px 8px 0px hsl(220 13% 26% / 0.1);
  --shadow-md: 0 6px 12px 0px hsl(220 13% 26% / 0.12);
  --shadow-lg: 0 8px 16px 0px hsl(220 13% 26% / 0.14);
  --shadow-xl: 0 12px 24px 0px hsl(220 13% 26% / 0.16);
  --shadow-2xl: 0 16px 32px 0px hsl(220 13% 26% / 0.2);
  --tracking-normal: 0em;

  /* Provider 品牌色 (OKLCh 格式) */
  --provider-anthropic: oklch(0.7324 0.0867 56.4182); /* #D4A574 金棕色 */
  --provider-openai: oklch(0.6447 0.1234 166.1234); /* #10A37F 绿色 */
  --provider-deepseek: oklch(0.6234 0.1456 234.5678); /* #4A90D9 蓝色 */
  --provider-google: oklch(0.6123 0.1567 245.6789); /* #4285F4 蓝色 */
  --provider-azure: oklch(0.5789 0.1678 234.5678); /* #0089D6 蓝色 */
  --provider-aws: oklch(0.7456 0.189 45.6789); /* #FF9900 橙色 */
  --provider-cohere: oklch(0.6345 0.1678 45.6789); /* #D97706 橙色 */
  --provider-mistral: oklch(0.689 0.1789 34.5678); /* #F97316 橙红 */
  --provider-custom: oklch(0.5789 0.0234 95.6789); /* #8C8C8C 灰色 */
  --provider-antigravity: oklch(0.7123 0.2345 345.6789); /* #EC4899 粉色 */
  --provider-kiro: oklch(0.689 0.1456 195.6789); /* #00BCD4 青色 */
  --provider-codex: oklch(0.6789 0.12 145.6789); /* #10A37F OpenAI 绿色 */
  --provider-claude: oklch(0.65 0.15 28); /* Anthropic 橙色/珊瑚色 */

  /* Client 品牌色 (引用 Provider 颜色) */
  --client-claude: var(--provider-anthropic);
  --client-openai: var(--provider-openai);
  --client-codex: var(--provider-openai);
  --client-gemini: var(--provider-google);
}

/* Hermès Theme - Warm sophistication with iconic orange */
.theme-hermes {
  --background: oklch(0.98 0.01 55);
  --foreground: oklch(0.25 0.02 50);
  --card: oklch(0.99 0.005 55);
  --card-foreground: oklch(0.25 0.02 50);
  --popover: oklch(0.99 0.005 55);
  --popover-foreground: oklch(0.25 0.02 50);
  --primary: oklch(0.62 0.16 50);
  --primary-foreground: oklch(0.99 0.005 55);
  --secondary: oklch(0.88 0.03 55);
  --secondary-foreground: oklch(0.25 0.02 50);
  --muted: oklch(0.94 0.015 55);
  --muted-foreground: oklch(0.5 0.05 50);
  --accent: oklch(0.72 0.14 80);
  --accent-foreground: oklch(0.15 0.02 50);
  --destructive: oklch(0.6201 0.2092 25.7747);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0.02 55);
  --input: oklch(0.9 0.02 55);
  --ring: oklch(0.62 0.16 50);

  /* Chart colors - Arco palette */
  --chart-1: oklch(0.525 0.195 264); /* Blue */
  --chart-2: oklch(0.68 0.16 150); /* Green */
  --chart-3: oklch(0.7 0.18 340); /* Purple */
  --chart-4: oklch(0.75 0.17 50); /* Orange */
  --chart-5: oklch(0.65 0.2 200); /* Cyan */
  --chart-6: oklch(0.585 0.22 25); /* Red */
  --chart-7: oklch(0.75 0.13 280); /* Magenta */
  --chart-8: oklch(0.72 0.15 85); /* Yellow */
  --chart-9: oklch(0.55 0.18 180); /* Teal */

  /* Sidebar */
  --sidebar: oklch(0.98 0.01 55);
  --sidebar-foreground: oklch(0.25 0.02 50);
  --sidebar-primary: oklch(0.62 0.16 50);
  --sidebar-primary-foreground: oklch(0.99 0.005 55);
  --sidebar-accent: oklch(0.88 0.03 55);
  --sidebar-accent-foreground: oklch(0.62 0.16 50); /* Active state uses primary color */
  --sidebar-border: oklch(0.9 0.02 55);
  --sidebar-ring: oklch(0.62 0.16 50);
}

/* Tiffany Theme - Elegant robin's egg blue */
.theme-tiffany {
  --background: oklch(0.98 0.005 205);
  --foreground: oklch(0.25 0.02 200);
  --card: oklch(0.99 0.003 205);
  --card-foreground: oklch(0.25 0.02 200);
  --popover: oklch(0.99 0.003 205);
  --popover-foreground: oklch(0.25 0.02 200);
  --primary: oklch(0.68 0.11 192);
  --primary-foreground: oklch(0.99 0.003 205);
  --secondary: oklch(0.92 0.008 205);
  --secondary-foreground: oklch(0.25 0.02 200);
  --muted: oklch(0.94 0.01 205);
  --muted-foreground: oklch(0.5 0.05 195);
  --accent: oklch(0.72 0.13 188);
  --accent-foreground: oklch(0.15 0.02 200);
  --destructive: oklch(0.6201 0.2092 25.7747);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.88 0.015 205);
  --input: oklch(0.88 0.015 205);
  --ring: oklch(0.68 0.11 192);

  /* Chart colors - Arco palette */
  --chart-1: oklch(0.525 0.195 264); /* Blue */
  --chart-2: oklch(0.68 0.16 150); /* Green */
  --chart-3: oklch(0.7 0.18 340); /* Purple */
  --chart-4: oklch(0.75 0.17 50); /* Orange */
  --chart-5: oklch(0.65 0.2 200); /* Cyan */
  --chart-6: oklch(0.585 0.22 25); /* Red */
  --chart-7: oklch(0.75 0.13 280); /* Magenta */
  --chart-8: oklch(0.72 0.15 85); /* Yellow */
  --chart-9: oklch(0.55 0.18 180); /* Teal */

  /* Sidebar */
  --sidebar: oklch(0.98 0.005 205);
  --sidebar-foreground: oklch(0.25 0.02 200);
  --sidebar-primary: oklch(0.68 0.11 192);
  --sidebar-primary-foreground: oklch(0.99 0.003 205);
  --sidebar-accent: oklch(0.92 0.008 205);
  --sidebar-accent-foreground: oklch(0.68 0.11 192); /* Active state uses primary color */
  --sidebar-border: oklch(0.88 0.015 205);
  --sidebar-ring: oklch(0.68 0.11 192);
}

.dark {
  color-scheme: dark;

  /* Arco Design inspired dark theme */
  --background: oklch(0.17 0.01 264);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.22 0.01 264);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.22 0.01 264);
  --popover-foreground: oklch(0.95 0 0);

  /* Primary: Brighter Arco Blue for dark mode */
  --primary: oklch(0.62 0.22 264);
  --primary-foreground: oklch(1 0 0);

  /* Secondary */
  --secondary: oklch(0.28 0.01 264);
  --secondary-foreground: oklch(0.9 0 0);

  /* Muted */
  --muted: oklch(0.28 0.01 264);
  --muted-foreground: oklch(0.65 0 0);

  /* Accent */
  --accent: oklch(0.3 0.03 264);
  --accent-foreground: oklch(0.95 0 0);

  /* Destructive: Brighter red for dark mode */
  --destructive: oklch(0.65 0.24 25);
  --destructive-foreground: oklch(1 0 0);

  /* Borders - more visible in dark mode */
  --border: oklch(0.32 0.01 264);
  --input: oklch(0.32 0.01 264);
  --ring: oklch(0.62 0.22 264);

  /* Chart colors - adjusted for dark mode */
  --chart-1: oklch(0.62 0.22 264); /* Blue */
  --chart-2: oklch(0.72 0.18 150); /* Green */
  --chart-3: oklch(0.75 0.2 340); /* Purple */
  --chart-4: oklch(0.78 0.19 50); /* Orange */
  --chart-5: oklch(0.7 0.22 200); /* Cyan */
  --chart-6: oklch(0.65 0.24 25); /* Red */
  --chart-7: oklch(0.78 0.15 280); /* Magenta */
  --chart-8: oklch(0.76 0.17 85); /* Yellow */
  --chart-9: oklch(0.6 0.2 180); /* Teal */

  /* Sidebar */
  --sidebar: oklch(0.2 0.01 264);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.62 0.22 264);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.28 0.01 264);
  --sidebar-accent-foreground: oklch(0.62 0.22 264); /* Active state uses primary color */
  --sidebar-border: oklch(0.32 0.01 264);
  --sidebar-ring: oklch(0.62 0.22 264);

  /* Fonts */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;

  /* Shadows - darker for depth */
  --shadow-color: oklch(0 0 0);
  --shadow-opacity: 0.3;
  --shadow-blur: 4px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0;
  --shadow-offset-y: 2px;
  --letter-spacing: 0em;
  --spacing: 0.25rem;
  --shadow-2xs: 0 1px 2px 0px hsl(0 0% 0% / 0.2);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.3);
  --shadow-sm: 0 2px 4px 0px hsl(0 0% 0% / 0.4);
  --shadow: 0 4px 8px 0px hsl(0 0% 0% / 0.5);
  --shadow-md: 0 6px 12px 0px hsl(0 0% 0% / 0.6);
  --shadow-lg: 0 8px 16px 0px hsl(0 0% 0% / 0.7);
  --shadow-xl: 0 12px 24px 0px hsl(0 0% 0% / 0.8);
  --shadow-2xl: 0 16px 32px 0px hsl(0 0% 0% / 0.9);
}

@theme inline {
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-9: var(--chart-9);
  --color-chart-8: var(--chart-8);
  --color-chart-7: var(--chart-7);
  --color-chart-6: var(--chart-6);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  --color-success: #4ec9b0;
  --color-warning: #ddb359;
  --color-error: #f14c4c;
  --color-info: #4fc1ff;
  --color-accent-hover: var(--primary);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --spacing: 0.25rem;

  /* Animations */
  --animate-fade-in: fadeIn 0.15s ease-in-out;
  --animate-slide-up: slideUp 0.2s ease-out;
  --animate-pulse-soft: pulseSoft 1.5s ease-in-out infinite;
  --animate-marquee: marquee 1s linear infinite;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --radius: 0.5rem;
  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
  --tracking-normal: var(--tracking-normal);
  --shadow-2xl: var(--shadow-2xl);
  --shadow-xl: var(--shadow-xl);
  --shadow-lg: var(--shadow-lg);
  --shadow-md: var(--shadow-md);
  --shadow: var(--shadow);
  --shadow-sm: var(--shadow-sm);
  --shadow-xs: var(--shadow-xs);
  --shadow-2xs: var(--shadow-2xs);
  --spacing: var(--spacing);
  --letter-spacing: var(--letter-spacing);
  --shadow-offset-y: var(--shadow-offset-y);
  --shadow-offset-x: var(--shadow-offset-x);
  --shadow-spread: var(--shadow-spread);
  --shadow-blur: var(--shadow-blur);
  --shadow-opacity: var(--shadow-opacity);
  --color-shadow-color: var(--shadow-color);
  --color-destructive-foreground: var(--destructive-foreground);

  /* Provider 颜色映射 (Tailwind 可用) */
  --color-provider-anthropic: var(--provider-anthropic);
  --color-provider-openai: var(--provider-openai);
  --color-provider-deepseek: var(--provider-deepseek);
  --color-provider-google: var(--provider-google);
  --color-provider-azure: var(--provider-azure);
  --color-provider-aws: var(--provider-aws);
  --color-provider-cohere: var(--provider-cohere);
  --color-provider-mistral: var(--provider-mistral);
  --color-provider-custom: var(--provider-custom);
  --color-provider-antigravity: var(--provider-antigravity);
  --color-provider-kiro: var(--provider-kiro);
  --color-provider-codex: var(--provider-codex);
  --color-provider-claude: var(--provider-claude);

  /* Client 颜色映射 (Tailwind 可用) */
  --color-client-claude: var(--client-claude);
  --color-client-openai: var(--client-openai);
  --color-client-codex: var(--client-codex);
  --color-client-gemini: var(--client-gemini);
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d4cfc9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b8b3ae;
}

/* Dark theme scrollbar */
:root.dark ::-webkit-scrollbar-thumb {
  background: #3c3c3c;
}

:root.dark ::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}

/* ===== Component Styles ===== */

html,
body,
#root {
  width: 100%;
  height: 100svh;
  margin: 0;
  padding: 0;
}

/* Text */
.text-mono {
  font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* Animations */
.animate-hover {
  transition: all 0.15s ease-in-out;
}

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes pulseSoft {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0px rgba(0, 0, 0, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  }
}

/* Dark mode pulse effect */
:root.dark .animate-pulse-soft {
  animation-name: pulseSoftDark;
}

@keyframes pulseSoftDark {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0px rgba(255, 255, 255, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  }
}

@keyframes pulseSlow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes marquee {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 2rem 2rem;
  }
}

@keyframes snowing-near {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 150px 300px;
  }
}

@keyframes snowing-mid {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -120px 240px;
  }
}

@keyframes snowing-far {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 90px 180px;
  }
}

.animate-streaming-badge {
  animation: pulseSoft 1.5s ease-in-out infinite;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.animate-pulse-soft {
  animation: pulseSoft 1.5s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulseSlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-marquee {
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.03) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.03) 50%,
    rgba(0, 0, 0, 0.03) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: marquee 1s linear infinite;
}

/* Dark mode marquee effect */
:root.dark .animate-marquee {
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 75%,
    transparent
  );
}

.animate-snowing {
  /* Layer 1: Near (Large & Fast) - Semi-transparent with soft edges */
  /* Light mode: dark gray snowflakes */
  background-image:
    radial-gradient(circle 8px at 20% 30%, rgba(100, 116, 139, 0.7) 0%, rgba(100, 116, 139, 0) 70%),
    radial-gradient(
      circle 10px at 40% 70%,
      rgba(100, 116, 139, 0.6) 0%,
      rgba(100, 116, 139, 0) 70%
    ),
    radial-gradient(circle 7px at 60% 40%, rgba(100, 116, 139, 0.7) 0%, rgba(100, 116, 139, 0) 70%),
    radial-gradient(circle 9px at 80% 80%, rgba(100, 116, 139, 0.6) 0%, rgba(100, 116, 139, 0) 70%);
  background-size: 150px 150px;
  animation: snowing-near 6s linear infinite;
}

:root.dark .animate-snowing {
  /* Dark mode: white snowflakes */
  background-image:
    radial-gradient(circle 8px at 20% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(
      circle 10px at 40% 70%,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(circle 7px at 60% 40%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 9px at 80% 80%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
}

.animate-snowing::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Layer 2: Mid (Medium) - Semi-transparent with soft edges */
  /* Light mode: dark gray */
  background-image:
    radial-gradient(circle 6px at 10% 80%, rgba(100, 116, 139, 0.5) 0%, rgba(100, 116, 139, 0) 70%),
    radial-gradient(circle 7px at 30% 20%, rgba(100, 116, 139, 0.5) 0%, rgba(100, 116, 139, 0) 70%),
    radial-gradient(circle 5px at 60% 60%, rgba(100, 116, 139, 0.5) 0%, rgba(100, 116, 139, 0) 70%),
    radial-gradient(circle 6px at 90% 40%, rgba(100, 116, 139, 0.5) 0%, rgba(100, 116, 139, 0) 70%);
  background-size: 120px 120px;
  animation: snowing-mid 8s linear infinite;
}

:root.dark .animate-snowing::before {
  /* Dark mode: white */
  background-image:
    radial-gradient(circle 6px at 10% 80%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 7px at 30% 20%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 5px at 60% 60%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 6px at 90% 40%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
}

.animate-snowing::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Layer 3: Far (Small & Slow) - Semi-transparent with soft edges */
  /* Light mode: dark gray */
  background-image:
    radial-gradient(circle 4px at 5% 45%, rgba(100, 116, 139, 0.35) 0%, rgba(100, 116, 139, 0) 70%),
    radial-gradient(
      circle 4px at 25% 95%,
      rgba(100, 116, 139, 0.35) 0%,
      rgba(100, 116, 139, 0) 70%
    ),
    radial-gradient(
      circle 3px at 55% 15%,
      rgba(100, 116, 139, 0.35) 0%,
      rgba(100, 116, 139, 0) 70%
    ),
    radial-gradient(circle 4px at 85% 55%, rgba(100, 116, 139, 0.35) 0%, rgba(100, 116, 139, 0) 70%);
  background-size: 90px 90px;
  animation: snowing-far 12s linear infinite;
}

:root.dark .animate-snowing::after {
  /* Dark mode: white */
  background-image:
    radial-gradient(circle 4px at 5% 45%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 4px at 25% 95%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 3px at 55% 15%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 4px at 85% 55%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

@keyframes snowing-layer4 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 200px;
  }
}

@keyframes snowing-layer5 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -80px 240px;
  }
}

.animate-snowing-secondary {
  /* Layer 4: Micro (Tiny & Slow, high density) - Semi-transparent with soft edges */
  /* Light mode: dark gray */
  background-image:
    radial-gradient(
      circle 3px at 10% 10%,
      rgba(100, 116, 139, 0.45) 0%,
      rgba(100, 116, 139, 0) 70%
    ),
    radial-gradient(
      circle 3px at 30% 50%,
      rgba(100, 116, 139, 0.45) 0%,
      rgba(100, 116, 139, 0) 70%
    ),
    radial-gradient(
      circle 3px at 50% 30%,
      rgba(100, 116, 139, 0.45) 0%,
      rgba(100, 116, 139, 0) 70%
    ),
    radial-gradient(
      circle 3px at 70% 80%,
      rgba(100, 116, 139, 0.45) 0%,
      rgba(100, 116, 139, 0) 70%
    ),
    radial-gradient(circle 3px at 90% 20%, rgba(100, 116, 139, 0.45) 0%, rgba(100, 116, 139, 0) 70%);
  background-size: 200px 200px;
  animation: snowing-layer4 15s linear infinite;
}

:root.dark .animate-snowing-secondary {
  /* Dark mode: white */
  background-image:
    radial-gradient(circle 3px at 10% 10%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 3px at 30% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 3px at 50% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 3px at 70% 80%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 3px at 90% 20%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
}

.animate-snowing-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Layer 5: Gust (Medium & Fast with drift) - Semi-transparent with soft edges */
  /* Light mode: dark gray */
  background-image:
    radial-gradient(circle 5px at 15% 75%, rgba(100, 116, 139, 0.5) 0%, rgba(100, 116, 139, 0) 70%),
    radial-gradient(circle 6px at 45% 25%, rgba(100, 116, 139, 0.5) 0%, rgba(100, 116, 139, 0) 70%),
    radial-gradient(circle 5px at 85% 65%, rgba(100, 116, 139, 0.5) 0%, rgba(100, 116, 139, 0) 70%);
  background-size: 160px 160px;
  animation: snowing-layer5 7s linear infinite;
}

:root.dark .animate-snowing-secondary::before {
  /* Dark mode: white */
  background-image:
    radial-gradient(
      circle 5px at 15% 75%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      circle 6px at 45% 25%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(circle 5px at 85% 65%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Marquee effect for table rows - direct background animation */
.animate-marquee-row {
  background-color: rgba(0, 120, 212, 0.08);
  background-image: linear-gradient(
    135deg,
    rgba(0, 120, 212, 0.08) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 120, 212, 0.08) 50%,
    rgba(0, 120, 212, 0.08) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: marquee 1s linear infinite;
}

.animate-marquee-row:hover {
  background-color: rgba(0, 120, 212, 0.16);
}

/* Provider Colors */
.provider-anthropic {
  color: #d4a574;
}
.provider-openai {
  color: #10a37f;
}
.provider-deepseek {
  color: #4a90d9;
}
.provider-google {
  color: #4285f4;
}
.provider-azure {
  color: #0089d6;
}
.provider-aws {
  color: #ff9900;
}
.provider-cohere {
  color: #d97706;
}
.provider-mistral {
  color: #f97316;
}
.provider-custom {
  color: #8c8c8c;
}

.bg-provider-anthropic {
  background-color: rgba(212, 165, 116, 0.15);
}
.bg-provider-openai {
  background-color: rgba(16, 163, 127, 0.15);
}
.bg-provider-deepseek {
  background-color: rgba(74, 144, 217, 0.15);
}
.bg-provider-google {
  background-color: rgba(66, 133, 244, 0.15);
}
.bg-provider-azure {
  background-color: rgba(0, 137, 214, 0.15);
}
.bg-provider-aws {
  background-color: rgba(255, 153, 0, 0.15);
}
.bg-provider-cohere {
  background-color: rgba(215, 119, 6, 0.15);
}
.bg-provider-mistral {
  background-color: rgba(249, 115, 22, 0.15);
}
.bg-provider-custom {
  background-color: rgba(140, 140, 140, 0.15);
}

@layer base {
  body {
    letter-spacing: var(--tracking-normal);
  }

  /* Global cursor during drag */
  body.is-dragging,
  body.is-dragging * {
    cursor: grab !important;
  }

  button,
  [role='button'] {
    cursor: pointer;
  }
}

@layer utilities {
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
}