@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@import './styles/app.css';

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

/* App design tokens + shadcn dark theme tokens */
:root {
  /* App custom tokens */
  --bg: #111111;
  --header: #111111;
  --text: #cccccc;
  --dim: #666;
  --brand: #a78bfa;
  --app-border: #222;
  --delete: #ff5f56;
  --create: #a78bfa;
  --edit: #60a5fa;
  --bash: #f5a623;
  --stop: #ff6b9d;
  --prompt: #c084fc;
  --batch: #22d3ee;
  --session: #64748b;
  --agent: #fb923c;
  --task: #facc15;
  --notify: #60a5fa;
  --permission: #f87171;
  --file: #a78bfa;
  --config: #94a3b8;
  --worktree: #34d399;
  --compact: #60a5fa;
  --cwd: #f59e0b;
  --instruct: #818cf8;
  --display: #e2c4ff;
  --elicit: #ff9f6b;

  /* shadcn semantic tokens — set to dark values since app is always dark */
  --background: #111111;
  --foreground: #cccccc;
  --card: #191919;
  --card-foreground: #cccccc;
  --popover: #1c1c1c;
  --popover-foreground: #cccccc;
  --primary: #cccccc;
  --primary-foreground: #111111;
  --secondary: #1c1c1c;
  --secondary-foreground: #cccccc;
  --muted: #1c1c1c;
  --muted-foreground: #666;
  --accent: #1c1c1c;
  --accent-foreground: #cccccc;
  --destructive: #ff5f56;
  --border: #222;
  --input: #2a2a2a;
  --ring: #555;
  --radius: 0.5rem;
  --chart-1: #f97316;
  --chart-2: #818cf8;
  --chart-3: #a78bfa;
  --chart-4: #ffd97e;
  --chart-5: #ff8e8e;
  --sidebar: #111111;
  --sidebar-foreground: #cccccc;
  --sidebar-primary: #a78bfa;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #1c1c1c;
  --sidebar-accent-foreground: #cccccc;
  --sidebar-border: #1e1e1e;
  --sidebar-ring: #555;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow: hidden;
}

@theme inline {
  --font-heading: var(--font-sans);
  --font-sans: 'JetBrains Mono', monospace;

  /* Expose app tokens as Tailwind utilities */
  --color-bg: var(--bg);
  --color-header: var(--header);
  --color-app-text: var(--text);
  --color-dim: var(--dim);
  --color-brand: var(--brand);
  --color-app-border: var(--app-border);
  --color-delete: var(--delete);
  --color-create: var(--create);
  --color-edit: var(--edit);
  --color-bash: var(--bash);

  /* shadcn color utilities */
  --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-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);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}

.sidebar-label-motion {
  overflow: hidden;
  min-width: 0;
  transform-origin: left center;
  transition-property: opacity, transform, max-width, margin-inline-start;
  transition-duration: 120ms, 240ms, 240ms, 240ms;
  transition-timing-function:
    ease, cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1),
    cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, max-width, margin-inline-start;
}

.sidebar-label-nav {
  --sidebar-label-gap: 0.6rem;
  --sidebar-label-max-width: 10rem;
  white-space: nowrap;
  font-size: 0.8rem;
}

.sidebar-label-toggle {
  --sidebar-label-gap: 0.75rem;
  --sidebar-label-max-width: 9rem;
}

.sidebar-label-open {
  opacity: 1;
  transform: translateX(0);
  max-width: var(--sidebar-label-max-width);
  margin-inline-start: var(--sidebar-label-gap);
  transition-delay: 90ms;
}

.sidebar-label-closed {
  opacity: 0;
  transform: translateX(-0.25rem);
  max-width: 0;
  margin-inline-start: 0;
  transition-delay: 0ms;
}

/* ─── Sidebar root ─── */
.sidebar-root {
  background: #111111;
  border-right: 1px solid #1e1e1e;
}

/* ─── Sidebar nav item active indicator ─── */
.sidebar-nav-active .sidebar-nav-icon {
  color: #e6e6e6;
}

/* ─── Sidebar bottom divider ─── */
.sidebar-bottom-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #1e1e1e 30%, #1e1e1e 70%, transparent);
  margin: 0 4px;
}

@media (prefers-reduced-motion: reduce) {
  .shell-motion,
  .shell-fade,
  .sidebar-label-motion {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .sidebar-label-open,
  .sidebar-label-closed {
    transform: none !important;
    transition-delay: 0ms !important;
  }
}

mark {
  background-color: rgba(167, 139, 250, 0.4);
  color: #fff;
  border-radius: 2px;
  padding: 0 1px;
  box-shadow: 0 0 4px rgba(167, 139, 250, 0.2);
}
