@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-brand-50: oklch(0.97 0.02 200);
  --color-brand-100: oklch(0.93 0.04 200);
  --color-brand-200: oklch(0.85 0.08 200);
  --color-brand-300: oklch(0.75 0.14 200);
  --color-brand-400: oklch(0.65 0.18 200);
  --color-brand-500: oklch(0.55 0.16 200);
  --color-brand-600: oklch(0.48 0.14 200);
  --color-brand-700: oklch(0.40 0.12 200);
  --color-brand-800: oklch(0.32 0.08 200);
  --color-brand-900: oklch(0.24 0.06 200);
  --color-brand-950: oklch(0.16 0.04 200);

  --color-surface-primary: oklch(0.08 0.01 240);
  --color-surface-secondary: oklch(0.11 0.015 240);
  --color-surface-elevated: oklch(0.15 0.02 240);
  --color-surface-overlay: oklch(0.18 0.025 240);
  --color-surface-chat-bubble: oklch(0.13 0.02 240);

  --color-border-default: oklch(0.22 0.03 220);
  --color-border-subtle: oklch(0.18 0.02 220);

  --color-fg-primary: oklch(0.92 0.01 220);
  --color-fg-secondary: oklch(0.68 0.02 220);
  --color-fg-tertiary: oklch(0.50 0.02 220);
  --color-fg-muted: oklch(0.38 0.015 220);

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

:root {
  color-scheme: dark;
}

html.light {
  color-scheme: light;
  --color-surface-primary: oklch(1 0 0);
  --color-surface-secondary: oklch(0.97 0.003 270);
  --color-surface-elevated: oklch(1 0 0);
  --color-surface-overlay: oklch(0.93 0.005 270);
  --color-surface-chat-bubble: oklch(0.96 0.01 250);
  --color-border-default: oklch(0.91 0.006 270);
  --color-border-subtle: oklch(0.94 0.004 270);
  --color-fg-primary: oklch(0.18 0.006 264);
  --color-fg-secondary: oklch(0.36 0.012 264);
  --color-fg-tertiary: oklch(0.46 0.012 264);
  --color-fg-muted: oklch(0.56 0.010 264);
  --color-brand-300: oklch(0.50 0.22 270);
  --color-brand-400: oklch(0.45 0.22 270);
  --color-brand-500: oklch(0.48 0.22 270);
  --color-brand-600: oklch(0.42 0.22 270);
}

@media (prefers-color-scheme: light) {
  html:not(.dark):not(.light):not(.cyberpunk):not(.mono) {
    color-scheme: light;
    --color-surface-primary: oklch(1 0 0);
    --color-surface-secondary: oklch(0.97 0.003 270);
    --color-surface-elevated: oklch(1 0 0);
    --color-surface-overlay: oklch(0.93 0.005 270);
    --color-surface-chat-bubble: oklch(0.96 0.01 250);
    --color-border-default: oklch(0.91 0.006 270);
    --color-border-subtle: oklch(0.94 0.004 270);
    --color-fg-primary: oklch(0.18 0.006 264);
    --color-fg-secondary: oklch(0.36 0.012 264);
    --color-fg-tertiary: oklch(0.46 0.012 264);
    --color-fg-muted: oklch(0.56 0.010 264);
    --color-brand-300: oklch(0.50 0.22 270);
    --color-brand-400: oklch(0.45 0.22 270);
    --color-brand-500: oklch(0.48 0.22 270);
    --color-brand-600: oklch(0.42 0.22 270);
  }
}

html.cyberpunk {
  color-scheme: dark;
  --color-brand-50: oklch(0.97 0.04 330);
  --color-brand-100: oklch(0.92 0.06 330);
  --color-brand-200: oklch(0.84 0.12 330);
  --color-brand-300: oklch(0.76 0.18 330);
  --color-brand-400: oklch(0.68 0.24 330);
  --color-brand-500: oklch(0.62 0.28 330);
  --color-brand-600: oklch(0.55 0.28 330);
  --color-brand-700: oklch(0.45 0.22 330);
  --color-brand-800: oklch(0.35 0.16 330);
  --color-brand-900: oklch(0.25 0.10 330);
  --color-brand-950: oklch(0.18 0.06 330);
  --color-surface-primary: oklch(0.10 0.015 300);
  --color-surface-secondary: oklch(0.13 0.020 300);
  --color-surface-elevated: oklch(0.17 0.025 300);
  --color-surface-overlay: oklch(0.20 0.030 300);
  --color-surface-chat-bubble: oklch(0.15 0.025 300);
  --color-border-default: oklch(0.26 0.04 330);
  --color-border-subtle: oklch(0.22 0.03 330);
  --color-fg-primary: oklch(0.95 0.01 330);
  --color-fg-secondary: oklch(0.75 0.02 330);
  --color-fg-tertiary: oklch(0.56 0.03 330);
  --color-fg-muted: oklch(0.40 0.02 330);
}

html.mono {
  color-scheme: dark;
  --color-brand-50: oklch(1 0 0);
  --color-brand-100: oklch(1 0 0);
  --color-brand-200: oklch(1 0 0);
  --color-brand-300: oklch(1 0 0);
  --color-brand-400: oklch(1 0 0);
  --color-brand-500: oklch(1 0 0);
  --color-brand-600: oklch(1 0 0);
  --color-brand-700: oklch(1 0 0);
  --color-brand-800: oklch(0 0 0);
  --color-brand-900: oklch(0 0 0);
  --color-brand-950: oklch(0 0 0);
  --color-surface-primary: oklch(0 0 0);
  --color-surface-secondary: oklch(0 0 0);
  --color-surface-elevated: oklch(0 0 0);
  --color-surface-overlay: oklch(0 0 0);
  --color-surface-chat-bubble: oklch(0 0 0);
  --color-border-default: oklch(0.35 0 0);
  --color-border-subtle: oklch(0.35 0 0);
  --color-fg-primary: oklch(1 0 0);
  --color-fg-secondary: oklch(1 0 0);
  --color-fg-tertiary: oklch(1 0 0);
  --color-fg-muted: oklch(1 0 0);
}
html.mono .btn-primary,
html.mono .bg-brand-600,
html.mono .bg-brand-500 {
  color: oklch(0 0 0);
}

html, body, #root {
  height: 100vh;
  height: 100dvh;
}

body {
  @apply bg-surface-primary text-fg-primary antialiased;
  overflow: hidden;
}

.prose :is(p, li, td, th, dd, dt, figcaption, caption, blockquote) {
  color: var(--color-fg-secondary);
}
.prose :is(h1, h2, h3, h4, h5, h6, strong, b, thead th) {
  color: var(--color-fg-primary);
}
.prose :is(del, s) {
  color: var(--color-fg-tertiary);
}
.prose :is(a) {
  color: var(--color-brand-500);
}

.input,
.input-field {
  @apply w-full px-3 py-2 bg-surface-elevated border border-border-default rounded-lg text-sm text-fg-primary focus:border-brand-500 focus:ring-1 focus:ring-brand-500/25 outline-none transition-all;
}

.input-sm {
  @apply w-full px-2 py-1 bg-surface-elevated border border-border-default rounded text-xs text-fg-primary focus:border-brand-500 focus:ring-1 focus:ring-brand-500/25 outline-none transition-all;
}

.btn-primary {
  @apply px-5 py-2.5 bg-brand-600 hover:bg-brand-500 text-white rounded-lg text-sm font-medium transition-all shadow-md shadow-brand-900/30 hover:shadow-lg hover:shadow-brand-900/40 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none;
}

.btn-secondary {
  @apply px-5 py-2.5 bg-surface-elevated hover:bg-surface-overlay text-fg-secondary border border-border-default rounded-lg text-sm font-medium transition-colors;
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: theme(--color-border-default) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: theme(--color-border-default);
  border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: theme(--color-gray-600);
}

.scrollbar-hide {
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.text-gradient-brand {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-brand-300;
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes border-rotate {
  to { --border-angle: 360deg; }
}
.exec-card-active {
  border-image-source: conic-gradient(from var(--border-angle), oklch(0.58 0.22 270), oklch(0.78 0.12 270), oklch(0.58 0.22 270));
  border-image-slice: 1;
  animation: border-rotate 3s linear infinite;
}
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px -2px var(--color-brand-500); }
  50% { box-shadow: 0 0 16px -2px var(--color-brand-500); }
}

.glow-brand {
  box-shadow: 0 0 12px -3px var(--color-brand-500);
}

.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.03), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.card-shine:hover::before {
  left: 100%;
}

/* Streaming chat bubble: flowing gradient border (cross-browser) */
.streaming-bubble {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(var(--color-surface-chat-bubble), var(--color-surface-chat-bubble)) padding-box,
    conic-gradient(from var(--border-angle), #a855f7, #3b82f6 30%, transparent 50%, transparent 80%, #ec4899 90%, #a855f7) border-box !important;
  animation: border-rotate 2.5s linear infinite;
  position: relative;
}
.streaming-bubble::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from var(--border-angle), #a855f7, #3b82f6 30%, transparent 50%, transparent 80%, #ec4899 90%, #a855f7);
  animation: border-rotate 2.5s linear infinite;
  filter: blur(8px);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}
.animate-slideInLeft {
  animation: slideInLeft 0.25s ease-out;
}
