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

@import 'highlight.js/styles/github.css';

.hljs {
  background: transparent;
  padding: 0;
}

@plugin '@tailwindcss/typography';

@custom-variant dark (&:is(.dark *));
@custom-variant dark-or-vivid (&:is(.dark *, [data-vivid], [data-vivid] *));

:root {
  --cursor-pencil:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='150%25'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='.65' flood-color='%23000' flood-opacity='.14'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4L4 16v4'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/g%3E%3C/svg%3E")
      3 17,
    crosshair;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: var(--foreground);
  --popover: oklch(1 0 0);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.64 0 0);
  --accent: oklch(0 0 0 / 0.07);
  --accent-foreground: var(--foreground);
  --success: oklch(0.527 0.154 150.069);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0 0 0 / 0.07);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
  --default-sans: ui-sans-serif, system-ui, sans-serif;
  --sans: var(--default-sans);
  --default-mono: 'Geist Mono', ui-monospace, monospace;
  --mono: var(--default-mono);

  /* Workspace page layout — single source of truth for the widget/chat panel.
     Read by routes/workspace/[id].tsx; don't hardcode equivalents. (The app
     sidebar's own widths live in SidebarLayout.tsx.) */
  --page-pad: 2rem; /* padding around the working area */
  --column-w: 40rem; /* grid content width; also the widget area's min before the chat yields */
  --chat-min: 320px; /* docked chat min width — narrower than this and it floats */
  --chat-max: 460px; /* docked chat max width on wide screens */
  --chat-max-container: 640px; /* contained ChatPanel: max width of the centered history + composer column */
}

@media (max-width: 1024px) {
  :root {
    --page-pad: 1.5rem;
  }
}

@media (max-width: 640px) {
  :root {
    --page-pad: 1rem;
  }
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: var(--foreground);
  --popover: oklch(0.205 0 0);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(1 0 0 / 0.1);
  --accent-foreground: var(--foreground);
  --success: oklch(0.627 0.194 149.214);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(1 0 0 / 0.1);
  --input: oklch(0.35 0 0);
  --ring: oklch(0.556 0 0);
}

/* Theme tokens and texture utilities shared with applet bundles. */
@import './theme.css';

/* Dragged card floats above all others */
.react-grid-item.react-draggable-dragging {
  z-index: 10;
}

/* Drop placeholder shown while dragging a widget — matches card shape */
.react-grid-item.react-grid-placeholder {
  background: var(--muted);
  opacity: 0.75;
  border-radius: var(--radius-2xl);
  corner-shape: superellipse(1.2);
  z-index: 0;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  /* Tailwind v4 dropped the default antialiasing from preflight; opt in
     globally so text matches the lighter "modern web app" look. */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-background font-sans text-foreground;
  }
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Text shimmer — a brighter band sweeps left→right across muted text to signal
   activity. Pair with `bg-clip-text text-transparent` and a 200%-wide gradient
   whose highlight sits in the middle (see <ShimmerText>). */
@keyframes text-shimmer {
  0% {
    background-position: -100% center;
  }
  100% {
    background-position: 100% center;
  }
}

@utility prose-inherit {
  --tw-prose-body: inherit;
  --tw-prose-headings: inherit;
  --tw-prose-lead: inherit;
  --tw-prose-links: inherit;
  --tw-prose-bold: inherit;
  --tw-prose-counters: inherit;
  --tw-prose-bullets: inherit;
}

/* Slim, unobtrusive scrollbar — keeps a clear scroll affordance while taming
   the chunky macOS "always show" scrollbar (a transparent border insets the
   thumb into a thin floating pill). */
@utility scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgb(0 0 0 / 0.2) transparent;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 0.2);
    border-radius: 9999px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0 0 0 / 0.32);
  }
}

@utility cursor-pencil {
  cursor: var(--cursor-pencil);
}

/* Tool details toggle */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] > summary .chevron {
  transform: rotate(90deg);
}