@import "tailwindcss";

@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";

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

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-surface: hsl(var(--surface));
  --color-surface-foreground: hsl(var(--surface-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-warning: hsl(var(--warning));
  --color-warning-foreground: hsl(var(--warning-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-display: var(--font-space-grotesk);
  --font-serif: var(--font-tinos);
  --font-chat-serif: var(--font-tinos);
  --color-sidebar-ring: hsl(var(--sidebar-ring));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar: hsl(var(--sidebar));
  --color-chart-5: hsl(var(--chart-5));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-1: hsl(var(--chart-1));
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

@utility type-display {
  font-family: var(--font-display);
}

@utility type-serif {
  font-family: var(--font-serif);
}

@utility type-chat-serif {
  font-family: var(--font-chat-serif);
}

:root {
  --radius: 0.625rem;
  /* Base background – warm cream, easier on the eyes */
  --background: 36 28% 91%;
  /* Main text with strong contrast */
  --foreground: 20 15% 12%;
  /* Mid surface: side panels, header, footer */
  --surface: 34 22% 87%;
  --surface-foreground: 20 15% 15%;
  /* Cards / main panel: warm cream, not pure-white */
  --card: 38 24% 93%;
  --card-foreground: 20 15% 12%;
  --popover: 38 20% 94%;
  --popover-foreground: 20 15% 12%;
  /* Primary – Arche orange accent */
  --primary: 17.02 87.76% 51.96%;
  --primary-foreground: 0 0% 100%;
  /* Warm secondary */
  --secondary: 30 16% 88%;
  --secondary-foreground: 20 15% 20%;
  /* Muted with better contrast */
  --muted: 30 14% 87%;
  --muted-foreground: 20 12% 38%;
  /* Accent – warm orange tint, more vibrant */
  --accent: 26 50% 78%;
  --accent-foreground: 20 18% 16%;
  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 32 81% 29%;
  /* Tinted borders */
  --border: 30 12% 78%;
  --input: 30 12% 78%;
  --ring: 17.02 87.76% 51.96%;
  /* Charts */
  --chart-1: 17.02 87.76% 51.96%;
  --chart-2: 12 55% 48%;
  --chart-3: 40 48% 48%;
  --chart-4: 18 48% 38%;
  --chart-5: 32 52% 56%;
  /* Sidebar */
  --sidebar: 36 28% 91%;
  --sidebar-foreground: 20 15% 12%;
  --sidebar-primary: 17.02 87.76% 51.96%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 28 45% 80%;
  --sidebar-accent-foreground: 20 15% 20%;
  --sidebar-border: 30 14% 80%;
  --sidebar-ring: 17.02 87.76% 51.96%;
  --grid-line: hsl(20 15% 12% / 0.22);
}

/* Dark mode: neutral base (all color themes share this) */
.dark {
  --background: 0 0% 8%;
  --foreground: 0 0% 92%;
  --surface: 0 0% 11%;
  --surface-foreground: 0 0% 88%;
  --card: 0 0% 14%;
  --card-foreground: 0 0% 92%;
  --popover: 0 0% 10%;
  --popover-foreground: 0 0% 92%;
  --primary: 17.02 87.76% 51.96%;
  --primary-foreground: 0 0% 8%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 92%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 92%;
  --destructive: 0 60% 45%;
  --destructive-foreground: 0 0% 100%;
  --warning: 38 80% 56%;
  --warning-foreground: 40 90% 86%;
  --border: 0 0% 20%;
  --input: 0 0% 20%;
  --ring: 17.02 87.76% 51.96%;
  --chart-1: 17.02 87.76% 51.96%;
  --chart-2: 12 55% 52%;
  --chart-3: 40 48% 52%;
  --chart-4: 18 48% 44%;
  --chart-5: 32 52% 60%;
  --sidebar: 0 0% 9%;
  --sidebar-foreground: 0 0% 92%;
  --sidebar-primary: 17.02 87.76% 51.96%;
  --sidebar-primary-foreground: 0 0% 8%;
  --sidebar-accent: 0 0% 18%;
  --sidebar-accent-foreground: 0 0% 92%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 17.02 87.76% 51.96%;
  --grid-line: hsl(0 0% 92% / 0.18);
}

/* Theme-specific palettes */
.theme-warm-sand {
  --background: 34 22% 96%;
  --surface: 34 18% 93%;
  --card: 36 18% 97%;
  --popover: 36 16% 97%;
  --primary: 17.02 87.76% 51.96%;
  --primary-foreground: 0 0% 100%;
  --secondary: 32 12% 92%;
  --muted: 30 10% 91%;
  --accent: 30 34% 87%;
  --accent-foreground: 20 18% 16%;
  --warning: 36 90% 50%;
  --warning-foreground: 30 75% 28%;
  --border: 30 10% 84%;
  --input: 30 10% 84%;
  --ring: 17.02 87.76% 51.96%;
  --chart-1: 17.02 87.76% 51.96%;
  --sidebar: 34 22% 96%;
  --sidebar-primary: 17.02 87.76% 51.96%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 32 22% 88%;
  --sidebar-border: 30 10% 84%;
  --sidebar-ring: 17.02 87.76% 51.96%;
  --grid-line: hsl(20 15% 12% / 0.18);
}

.theme-ocean-mist {
  --background: 200 18% 93%;
  --foreground: 200 12% 14%;
  --surface: 198 14% 89%;
  --surface-foreground: 200 12% 16%;
  --card: 200 16% 95%;
  --card-foreground: 200 12% 14%;
  --popover: 200 14% 96%;
  --popover-foreground: 200 12% 14%;
  --primary: 195 22% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 198 12% 90%;
  --secondary-foreground: 200 10% 22%;
  --muted: 198 10% 89%;
  --muted-foreground: 198 8% 40%;
  --accent: 194 22% 85%;
  --accent-foreground: 198 14% 22%;
  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --warning: 40 85% 52%;
  --warning-foreground: 35 70% 30%;
  --border: 198 8% 80%;
  --input: 198 8% 80%;
  --ring: 195 22% 50%;
  --chart-1: 195 22% 50%;
  --chart-2: 185 20% 45%;
  --chart-3: 210 22% 48%;
  --chart-4: 175 18% 38%;
  --chart-5: 220 18% 55%;
  --sidebar: 200 18% 93%;
  --sidebar-foreground: 200 12% 14%;
  --sidebar-primary: 195 22% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 198 18% 84%;
  --sidebar-accent-foreground: 200 10% 22%;
  --sidebar-border: 198 10% 82%;
  --sidebar-ring: 195 22% 50%;
  --grid-line: hsl(200 12% 14% / 0.18);
}

.theme-forest-dew {
  --background: 148 16% 93%;
  --foreground: 150 10% 14%;
  --surface: 150 12% 89%;
  --surface-foreground: 150 10% 16%;
  --card: 148 14% 95%;
  --card-foreground: 150 10% 14%;
  --popover: 148 12% 96%;
  --popover-foreground: 150 10% 14%;
  --primary: 152 20% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 150 10% 90%;
  --secondary-foreground: 150 8% 22%;
  --muted: 150 8% 89%;
  --muted-foreground: 150 6% 40%;
  --accent: 150 20% 85%;
  --accent-foreground: 154 12% 22%;
  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --warning: 42 82% 50%;
  --warning-foreground: 38 68% 28%;
  --border: 150 6% 80%;
  --input: 150 6% 80%;
  --ring: 152 20% 46%;
  --chart-1: 152 20% 46%;
  --chart-2: 140 18% 42%;
  --chart-3: 165 20% 44%;
  --chart-4: 130 16% 36%;
  --chart-5: 170 16% 52%;
  --sidebar: 148 16% 93%;
  --sidebar-foreground: 150 10% 14%;
  --sidebar-primary: 152 20% 46%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 150 16% 84%;
  --sidebar-accent-foreground: 150 8% 22%;
  --sidebar-border: 150 8% 82%;
  --sidebar-ring: 152 20% 46%;
  --grid-line: hsl(150 10% 14% / 0.18);
}

.theme-lavender-haze {
  --background: 270 14% 94%;
  --foreground: 272 10% 14%;
  --surface: 272 10% 90%;
  --surface-foreground: 272 10% 16%;
  --card: 270 12% 96%;
  --card-foreground: 272 10% 14%;
  --popover: 270 10% 97%;
  --popover-foreground: 272 10% 14%;
  --primary: 272 20% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 272 8% 91%;
  --secondary-foreground: 272 8% 22%;
  --muted: 272 6% 90%;
  --muted-foreground: 272 6% 40%;
  --accent: 270 18% 86%;
  --accent-foreground: 274 12% 24%;
  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --warning: 40 78% 52%;
  --warning-foreground: 36 65% 30%;
  --border: 272 6% 81%;
  --input: 272 6% 81%;
  --ring: 272 20% 58%;
  --chart-1: 272 20% 58%;
  --chart-2: 260 18% 52%;
  --chart-3: 285 18% 50%;
  --chart-4: 250 14% 44%;
  --chart-5: 290 14% 60%;
  --sidebar: 270 14% 94%;
  --sidebar-foreground: 272 10% 14%;
  --sidebar-primary: 272 20% 58%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 272 14% 85%;
  --sidebar-accent-foreground: 272 8% 22%;
  --sidebar-border: 272 8% 83%;
  --sidebar-ring: 272 20% 58%;
  --grid-line: hsl(272 10% 14% / 0.18);
}

.theme-sunset-glow {
  --background: 345 14% 94%;
  --foreground: 348 8% 14%;
  --surface: 348 10% 90%;
  --surface-foreground: 348 8% 16%;
  --card: 345 12% 96%;
  --card-foreground: 348 8% 14%;
  --popover: 345 10% 97%;
  --popover-foreground: 348 8% 14%;
  --primary: 348 26% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 348 8% 91%;
  --secondary-foreground: 348 6% 22%;
  --muted: 348 6% 90%;
  --muted-foreground: 348 5% 40%;
  --accent: 345 22% 86%;
  --accent-foreground: 348 14% 24%;
  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --warning: 35 85% 52%;
  --warning-foreground: 30 72% 28%;
  --border: 348 5% 81%;
  --input: 348 5% 81%;
  --ring: 348 26% 56%;
  --chart-1: 348 26% 56%;
  --chart-2: 336 22% 50%;
  --chart-3: 0 22% 52%;
  --chart-4: 330 18% 42%;
  --chart-5: 355 18% 58%;
  --sidebar: 345 14% 94%;
  --sidebar-foreground: 348 8% 14%;
  --sidebar-primary: 348 26% 56%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 348 14% 85%;
  --sidebar-accent-foreground: 348 6% 22%;
  --sidebar-border: 348 7% 83%;
  --sidebar-ring: 348 26% 56%;
  --grid-line: hsl(348 8% 14% / 0.18);
}

/* Dark mode: per-color full overrides with hue-tinted backgrounds */

.dark.theme-warm-sand {
  --background: 0 0% 8%;
  --surface: 0 0% 11%;
  --card: 0 0% 14%;
  --popover: 0 0% 10%;
  --primary: 17.02 87.76% 51.96%;
  --primary-foreground: 0 0% 8%;
  --secondary: 0 0% 15%;
  --muted: 0 0% 15%;
  --accent: 30 34% 24%;
  --accent-foreground: 0 0% 92%;
  --warning: 36 85% 58%;
  --warning-foreground: 38 88% 88%;
  --border: 0 0% 20%;
  --input: 0 0% 20%;
  --ring: 17.02 87.76% 51.96%;
  --chart-1: 17.02 87.76% 51.96%;
  --sidebar: 0 0% 9%;
  --sidebar-primary: 17.02 87.76% 51.96%;
  --sidebar-primary-foreground: 0 0% 8%;
  --sidebar-accent: 30 26% 20%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 17.02 87.76% 51.96%;
  --grid-line: hsl(0 0% 92% / 0.18);
}

.dark.theme-ocean-mist {
  --background: 200 10% 8%;
  --foreground: 200 6% 92%;
  --surface: 200 8% 11%;
  --surface-foreground: 200 5% 88%;
  --card: 200 8% 14%;
  --card-foreground: 200 5% 92%;
  --popover: 200 8% 10%;
  --popover-foreground: 200 5% 92%;
  --primary: 195 30% 55%;
  --primary-foreground: 200 10% 8%;
  --secondary: 200 6% 15%;
  --secondary-foreground: 200 5% 92%;
  --muted: 200 6% 15%;
  --muted-foreground: 200 5% 60%;
  --accent: 195 10% 18%;
  --accent-foreground: 200 5% 92%;
  --destructive: 0 60% 45%;
  --destructive-foreground: 0 0% 100%;
  --warning: 40 75% 58%;
  --warning-foreground: 42 82% 88%;
  --border: 200 6% 20%;
  --input: 200 6% 20%;
  --ring: 195 28% 50%;
  --chart-1: 195 30% 55%;
  --chart-2: 185 20% 50%;
  --chart-3: 210 22% 52%;
  --chart-4: 175 18% 42%;
  --chart-5: 220 18% 58%;
  --sidebar: 200 10% 9%;
  --sidebar-foreground: 200 5% 92%;
  --sidebar-primary: 195 30% 55%;
  --sidebar-primary-foreground: 200 10% 8%;
  --sidebar-accent: 195 8% 18%;
  --sidebar-accent-foreground: 200 5% 92%;
  --sidebar-border: 200 6% 20%;
  --sidebar-ring: 195 28% 50%;
  --grid-line: hsl(200 6% 92% / 0.18);
}

.dark.theme-forest-dew {
  --background: 150 8% 8%;
  --foreground: 150 6% 92%;
  --surface: 150 6% 11%;
  --surface-foreground: 150 5% 88%;
  --card: 150 6% 14%;
  --card-foreground: 150 5% 92%;
  --popover: 150 6% 10%;
  --popover-foreground: 150 5% 92%;
  --primary: 152 26% 50%;
  --primary-foreground: 150 10% 8%;
  --secondary: 150 5% 15%;
  --secondary-foreground: 150 5% 92%;
  --muted: 150 5% 15%;
  --muted-foreground: 150 5% 60%;
  --accent: 152 10% 18%;
  --accent-foreground: 150 5% 92%;
  --destructive: 0 60% 45%;
  --destructive-foreground: 0 0% 100%;
  --warning: 42 72% 56%;
  --warning-foreground: 44 78% 86%;
  --border: 150 5% 20%;
  --input: 150 5% 20%;
  --ring: 152 24% 46%;
  --chart-1: 152 26% 50%;
  --chart-2: 140 18% 46%;
  --chart-3: 165 20% 48%;
  --chart-4: 130 16% 40%;
  --chart-5: 170 16% 55%;
  --sidebar: 150 8% 9%;
  --sidebar-foreground: 150 5% 92%;
  --sidebar-primary: 152 26% 50%;
  --sidebar-primary-foreground: 150 10% 8%;
  --sidebar-accent: 152 6% 18%;
  --sidebar-accent-foreground: 150 5% 92%;
  --sidebar-border: 150 5% 20%;
  --sidebar-ring: 152 24% 46%;
  --grid-line: hsl(150 6% 92% / 0.18);
}

.dark.theme-lavender-haze {
  --background: 272 8% 8%;
  --foreground: 272 6% 92%;
  --surface: 272 6% 11%;
  --surface-foreground: 272 5% 88%;
  --card: 272 6% 14%;
  --card-foreground: 272 5% 92%;
  --popover: 272 6% 10%;
  --popover-foreground: 272 5% 92%;
  --primary: 272 26% 62%;
  --primary-foreground: 272 10% 8%;
  --secondary: 272 5% 15%;
  --secondary-foreground: 272 5% 92%;
  --muted: 272 5% 15%;
  --muted-foreground: 272 5% 60%;
  --accent: 272 10% 18%;
  --accent-foreground: 272 5% 92%;
  --destructive: 0 60% 45%;
  --destructive-foreground: 0 0% 100%;
  --warning: 40 70% 58%;
  --warning-foreground: 42 76% 88%;
  --border: 272 5% 20%;
  --input: 272 5% 20%;
  --ring: 272 22% 56%;
  --chart-1: 272 26% 62%;
  --chart-2: 260 18% 56%;
  --chart-3: 285 18% 54%;
  --chart-4: 250 14% 48%;
  --chart-5: 290 14% 62%;
  --sidebar: 272 8% 9%;
  --sidebar-foreground: 272 5% 92%;
  --sidebar-primary: 272 26% 62%;
  --sidebar-primary-foreground: 272 10% 8%;
  --sidebar-accent: 272 6% 18%;
  --sidebar-accent-foreground: 272 5% 92%;
  --sidebar-border: 272 5% 20%;
  --sidebar-ring: 272 22% 56%;
  --grid-line: hsl(272 6% 92% / 0.18);
}

.dark.theme-sunset-glow {
  --background: 348 8% 8%;
  --foreground: 348 6% 92%;
  --surface: 348 6% 11%;
  --surface-foreground: 348 5% 88%;
  --card: 348 6% 14%;
  --card-foreground: 348 5% 92%;
  --popover: 348 6% 10%;
  --popover-foreground: 348 5% 92%;
  --primary: 348 30% 60%;
  --primary-foreground: 348 10% 8%;
  --secondary: 348 5% 15%;
  --secondary-foreground: 348 5% 92%;
  --muted: 348 5% 15%;
  --muted-foreground: 348 5% 60%;
  --accent: 348 10% 18%;
  --accent-foreground: 348 5% 92%;
  --destructive: 0 60% 45%;
  --destructive-foreground: 0 0% 100%;
  --warning: 35 78% 58%;
  --warning-foreground: 38 84% 88%;
  --border: 348 5% 20%;
  --input: 348 5% 20%;
  --ring: 348 26% 54%;
  --chart-1: 348 30% 60%;
  --chart-2: 336 22% 54%;
  --chart-3: 0 22% 56%;
  --chart-4: 330 18% 46%;
  --chart-5: 355 18% 62%;
  --sidebar: 348 8% 9%;
  --sidebar-foreground: 348 5% 92%;
  --sidebar-primary: 348 30% 60%;
  --sidebar-primary-foreground: 348 10% 8%;
  --sidebar-accent: 348 6% 18%;
  --sidebar-accent-foreground: 348 5% 92%;
  --sidebar-border: 348 5% 20%;
  --sidebar-ring: 348 26% 54%;
  --grid-line: hsl(348 6% 92% / 0.18);
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    @apply bg-background text-foreground antialiased;
    --font-display: var(--font-space-grotesk);
    --font-serif: var(--font-tinos);
    --font-chat-serif: var(--font-tinos);
    font-family: var(--font-geist-sans), system-ui, sans-serif;
  }
}

@media (max-width: 767px) {
  html {
    font-size: 106.25%;
  }

  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 1rem;
  }
}

@layer utilities {
  /* Hide native scrollbar */
  .scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  /* Custom scrollbar - minimal style */
  .scrollbar-custom {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--foreground) / 0.15) transparent;
  }
  .scrollbar-custom::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar-custom::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px;
  }
  .scrollbar-custom::-webkit-scrollbar-thumb {
    background: hsl(var(--foreground) / 0.15);
    border-radius: 3px;
  }
  .scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--foreground) / 0.25);
  }
  .scrollbar-custom::-webkit-scrollbar-thumb:active {
    background: hsl(var(--foreground) / 0.35);
  }

  .dark .scrollbar-custom {
    scrollbar-color: hsl(var(--foreground) / 0.2) transparent;
  }
  .dark .scrollbar-custom::-webkit-scrollbar-thumb {
    background: hsl(var(--foreground) / 0.2);
  }
  .dark .scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--foreground) / 0.3);
  }
  .dark .scrollbar-custom::-webkit-scrollbar-thumb:active {
    background: hsl(var(--foreground) / 0.4);
  }

  /* Markdown content styles */
  .markdown-content {
    @apply text-sm leading-relaxed;
  }
  .markdown-content p {
    @apply my-2;
  }
  .markdown-content h1 {
    @apply text-xl font-semibold mt-6 mb-3;
  }
  .markdown-content h2 {
    @apply text-lg font-semibold mt-5 mb-2;
  }
  .markdown-content h3 {
    @apply text-base font-semibold mt-4 mb-2;
  }
  .markdown-content h4,
  .markdown-content h5,
  .markdown-content h6 {
    @apply text-sm font-semibold mt-3 mb-1;
  }
  .markdown-content ul {
    @apply my-2 ml-4 list-disc;
  }
  .markdown-content ol {
    @apply my-2 ml-4 list-decimal;
  }
  .markdown-content li {
    @apply my-1;
  }
  .markdown-content li.task-list-item {
    @apply my-1 list-none;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .markdown-content ul.contains-task-list {
    @apply list-none pl-0;
  }
  .markdown-content .markdown-task-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
  }
  .markdown-content .markdown-task-checkbox {
    @apply mt-[0.18rem] inline-flex h-4 w-4 items-center justify-center rounded border border-border bg-background text-transparent;
    flex: 0 0 auto;
  }
  .markdown-content .markdown-task-checkbox.is-checked {
    @apply border-primary bg-primary text-primary-foreground;
  }
  .markdown-content li > ul,
  .markdown-content li > ol {
    @apply my-1;
  }
  .markdown-content pre {
    @apply my-3 p-3 bg-muted border border-border rounded-lg overflow-x-auto;
  }
  .markdown-content code {
    @apply bg-muted px-1.5 py-0.5 rounded text-sm;
  }
  .markdown-content pre code {
    @apply bg-transparent p-0;
  }
  .markdown-content a {
    @apply text-primary hover:underline;
  }
  .markdown-content blockquote {
    @apply my-3 pl-4 border-l-2 border-primary/30 text-muted-foreground italic;
  }
  .markdown-content hr {
    @apply my-4 border-border;
  }
  .markdown-content table {
    @apply my-3 w-full border-collapse;
  }
  .markdown-content th,
  .markdown-content td {
    @apply border border-border px-3 py-2 text-left;
  }
  .markdown-content th {
    @apply bg-muted font-medium;
  }
  .markdown-content img {
    @apply my-3 max-w-full rounded-lg;
  }

  .workspace-chat-content {
    --workspace-chat-font-family: var(--font-geist-sans), system-ui, sans-serif;
    --workspace-chat-font-size: 15px;
    --workspace-chat-font-size-xs: 13px;
    --workspace-chat-font-size-note: 12px;
    --workspace-chat-font-size-micro: 11px;
    --workspace-chat-line-height: 1.65;
    font-family: var(--workspace-chat-font-family);
  }

  .workspace-chat-content .text-sm {
    font-size: var(--workspace-chat-font-size);
    line-height: var(--workspace-chat-line-height);
  }

  .workspace-chat-content .text-xs {
    font-size: var(--workspace-chat-font-size-xs);
    line-height: 1.5;
  }

  .workspace-chat-content .chat-text-note {
    font-size: var(--workspace-chat-font-size-note);
    line-height: 1.45;
  }

  .workspace-chat-content .chat-text-micro {
    font-size: var(--workspace-chat-font-size-micro);
    line-height: 1.4;
  }

  .workspace-chat-content .markdown-content {
    font-size: var(--workspace-chat-font-size);
    line-height: var(--workspace-chat-line-height);
  }

  .workspace-chat-content .markdown-content h1 {
    font-size: calc(var(--workspace-chat-font-size) * 1.43);
  }

  .workspace-chat-content .markdown-content h2 {
    font-size: calc(var(--workspace-chat-font-size) * 1.29);
  }

  .workspace-chat-content .markdown-content h3 {
    font-size: calc(var(--workspace-chat-font-size) * 1.14);
  }

  .workspace-chat-content .markdown-content h4,
  .workspace-chat-content .markdown-content h5,
  .workspace-chat-content .markdown-content h6,
  .workspace-chat-content .markdown-content code {
    font-size: 1em;
  }

  .workspace-chat-content .markdown-content pre code {
    font-size: 0.95em;
  }

  /* Tiptap rich editor (Markdown-backed) styles */
  .workspace-tiptap .tiptap-editor {
    outline: none;
    min-height: 100%;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .workspace-tiptap .tiptap-editor p {
    margin: 0.5rem 0;
  }

  .workspace-tiptap .tiptap-editor h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.2rem 0 0.6rem;
  }

  .workspace-tiptap .tiptap-editor h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.1rem 0 0.5rem;
  }

  .workspace-tiptap .tiptap-editor h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
  }

  .workspace-tiptap .tiptap-editor ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    list-style: disc;
  }

  .workspace-tiptap .tiptap-editor ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    list-style: decimal;
  }

  .workspace-tiptap .tiptap-editor li {
    margin: 0.25rem 0;
  }

  .workspace-tiptap .tiptap-editor ul[data-type="taskList"] {
    list-style: none;
    padding-left: 0;
  }

  .workspace-tiptap .tiptap-editor li[data-type="taskItem"],
  .workspace-tiptap .tiptap-editor li.task-list-item,
  .workspace-tiptap .tiptap-editor ul[data-type="taskList"] > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.5rem;
    list-style: none;
  }

  .workspace-tiptap .tiptap-editor li[data-type="taskItem"] > label,
  .workspace-tiptap .tiptap-editor li.task-list-item > label,
  .workspace-tiptap .tiptap-editor ul[data-type="taskList"] > li > label {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-top: 0.2rem;
  }

  .workspace-tiptap .tiptap-editor li[data-type="taskItem"] > label input,
  .workspace-tiptap .tiptap-editor li.task-list-item > label input,
  .workspace-tiptap .tiptap-editor ul[data-type="taskList"] > li > label input {
    margin: 0;
  }

  .workspace-tiptap .tiptap-editor li[data-type="taskItem"] > div,
  .workspace-tiptap .tiptap-editor li.task-list-item > div,
  .workspace-tiptap .tiptap-editor ul[data-type="taskList"] > li > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .workspace-tiptap .tiptap-editor li[data-type="taskItem"] > div p,
  .workspace-tiptap .tiptap-editor li.task-list-item > div p,
  .workspace-tiptap .tiptap-editor ul[data-type="taskList"] > li > div p {
    margin: 0;
  }

  .workspace-tiptap .tiptap-editor table {
    margin: 0.75rem 0;
    width: 100%;
    border-collapse: collapse;
  }

  .workspace-tiptap .tiptap-editor th,
  .workspace-tiptap .tiptap-editor td {
    border: 1px solid hsl(var(--border));
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
  }

  .workspace-tiptap .tiptap-editor th {
    background: hsl(var(--muted));
    font-weight: 600;
  }

  .workspace-tiptap .tiptap-editor blockquote {
    margin: 0.75rem 0;
    padding-left: 1rem;
    border-left: 2px solid hsl(var(--primary) / 0.3);
    color: hsl(var(--muted-foreground));
    font-style: italic;
  }

  .workspace-tiptap .tiptap-editor code {
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.08rem 0.35rem;
    font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    font-size: 0.85em;
  }

  .workspace-tiptap .tiptap-editor pre {
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    padding: 0.75rem;
    overflow-x: auto;
    margin: 0.75rem 0;
  }

  .workspace-tiptap .tiptap-editor pre code {
    background: transparent;
    border: 0;
    padding: 0;
  }

  .workspace-tiptap .tiptap-editor a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-decoration-color: hsl(var(--primary) / 0.4);
  }

  .workspace-tiptap .tiptap-editor .kb-internal-link {
    display: inline-block;
    cursor: pointer;
    font-size: 0;
    line-height: inherit;
    vertical-align: baseline;
  }

  .workspace-tiptap .tiptap-editor .kb-internal-link::after {
    color: hsl(var(--primary));
    content: attr(data-link-label);
    font-size: 0.95rem;
    line-height: inherit;
    text-decoration-line: underline;
    text-decoration-color: hsl(var(--primary) / 0.45);
    text-underline-offset: 2px;
  }

  .workspace-tiptap .tiptap-editor .kb-internal-link:hover::after {
    text-decoration-color: hsl(var(--primary) / 0.8);
  }

  .workspace-tiptap .tiptap-editor p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: hsl(var(--muted-foreground) / 0.75);
    pointer-events: none;
    height: 0;
  }

  /* Subtle organic background - legacy, now we use dynamic themes */
  .organic-background {
    background-image: radial-gradient(
        ellipse 80% 60% at 50% -10%,
        hsl(30 35% 94% / 0.9),
        transparent 60%
      ),
      radial-gradient(
        ellipse 60% 50% at 100% 0%,
        hsl(24 45% 92% / 0.6),
        transparent 50%
      ),
      linear-gradient(180deg, hsl(40 20% 97%), hsl(35 18% 95%));
  }

  /* Frosted glass panel effect */
  .glass-panel {
    @apply backdrop-blur-xl;
    background: hsl(var(--card) / 0.82);
    border: 1px solid hsl(0 0% 100% / 0.18);
    box-shadow:
      0 4px 24px hsl(20 15% 15% / 0.06),
      0 1px 3px hsl(20 15% 15% / 0.04),
      inset 0 1px 0 hsl(0 0% 100% / 0.08);
  }

  .dark .glass-panel {
    background: hsl(var(--card) / 0.75);
    border-color: hsl(0 0% 100% / 0.1);
    box-shadow:
      0 4px 24px hsl(0 0% 0% / 0.3),
      0 1px 3px hsl(0 0% 0% / 0.2),
      inset 0 1px 0 hsl(0 0% 100% / 0.05);
  }

  /* Lighter glass for header/footer */
  .glass-bar {
    @apply backdrop-blur-lg;
    background: hsl(var(--card) / 0.72);
    border: 1px solid hsl(0 0% 100% / 0.14);
    box-shadow:
      0 2px 12px hsl(20 15% 15% / 0.04),
      inset 0 1px 0 hsl(0 0% 100% / 0.06);
  }

  .dark .glass-bar {
    background: hsl(var(--card) / 0.65);
    border-color: hsl(0 0% 100% / 0.08);
    box-shadow:
      0 2px 12px hsl(0 0% 0% / 0.25),
      inset 0 1px 0 hsl(0 0% 100% / 0.04);
  }

  .desktop-titlebar-drag {
    -webkit-app-region: drag;
    app-region: drag;
    user-select: none;
  }

  .desktop-titlebar-no-drag {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }

  /* Desktop: disable text selection globally, re-enable in chat */
  .desktop-no-select {
    -webkit-user-select: none;
    user-select: none;
  }

  .desktop-no-select .desktop-select-enabled,
  .desktop-no-select .desktop-select-enabled * {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Surface for elevated cards */
  .surface-elevated {
    background: hsl(var(--card));
    box-shadow: 0 1px 2px hsl(20 15% 15% / 0.03),
      0 2px 4px hsl(20 15% 15% / 0.02);
  }

  /* Minimal shadow for hover states */
  .shadow-subtle {
    box-shadow: 0 1px 3px hsl(20 15% 15% / 0.04),
      0 1px 2px hsl(20 15% 15% / 0.02);
  }

  /* Consistent focus ring */
  .focus-ring {
    @apply outline-none ring-2 ring-ring/20 ring-offset-2 ring-offset-background;
  }
}

@keyframes cosmic-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes progress-sweep {
  0% {
    width: 0%;
    margin-left: 0%;
  }
  50% {
    width: 60%;
    margin-left: 20%;
  }
  100% {
    width: 0%;
    margin-left: 100%;
  }
}
