app/globals.css

@import "tailwindcss";

/* shadcn theme tokens */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  /* Brand: Orangish Red */
  --primary: 14 90% 50%;
  --primary-foreground: 0 0% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --accent: 14 95% 90%;
  --accent-foreground: 14 90% 20%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 14 90% 45%;

  --radius: 0.75rem;

  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;

  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;

  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;

  /* Brand in dark mode */
  --primary: 14 87% 60%;
  --primary-foreground: 240 10% 3.9%;

  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;

  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;

  --accent: 14 40% 20%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;

  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 14 87% 55%;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    /* Brand in dark mode */
    --primary: 14 87% 60%;
    --primary-foreground: 240 10% 3.9%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 14 40% 20%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 14 87% 55%;
  }
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--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-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Custom scrollbar styling */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: hsl(var(--background) / 0.1);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Firefox */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--background) / 0.1);
}

/* Nano Banana Editor - node visuals */
.nb-node {
  background: hsl(var(--card) / 0.9);
  border: 1px solid hsl(var(--border) / 0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  /* Prevent blurring on zoom */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Prevent text selection on node elements except inputs */
.nb-node * {
  user-select: none;
  -webkit-user-select: none;
}

.nb-node input,
.nb-node textarea,
.nb-node select {
  user-select: text;
  -webkit-user-select: text;
}
.nb-node .nb-header {
  background: linear-gradient(to bottom, hsl(var(--muted) / 0.35), hsl(var(--muted) / 0.08));
}
.nb-port {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 3px solid rgba(255,255,255,0.6);
  background: hsl(var(--popover));
  cursor: crosshair;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.nb-port:hover {
  transform: scale(1.25);
  background: hsl(var(--accent));
  box-shadow: 0 0 12px hsl(var(--ring) / 0.4);
}
.nb-port.out { 
  border-color: hsl(var(--primary)); 
}
.nb-port.out:hover { 
  background: hsl(var(--primary));
  box-shadow: 0 0 16px hsl(var(--primary) / 0.6);
}
.nb-port.in { 
  border-color: #34d399; 
}
.nb-port.in:hover { 
  background: #34d399;
  box-shadow: 0 0 16px rgba(52,211,153,0.6);
}

.nb-line {
  stroke: #7c7c7c;
  stroke-width: 2.5;
}
.nb-line.active { stroke: #8b5cf6; }

/* Canvas grid */
.nb-canvas {
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.18) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.09) 1px, transparent 0);
  background-size: 20px 20px, 100px 100px;
}

/* Ensure crisp text and images at all zoom levels */
.nb-node * {
  text-rendering: optimizeLegibility;
  shape-rendering: crispEdges;
}

.nb-node img {
  image-rendering: auto; /* Keep images smooth */
  image-rendering: -webkit-optimize-contrast;
}

.nb-node input,
.nb-node select,
.nb-node textarea,
.nb-node button {
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;
}

/* Force GPU acceleration for transforms */
.nb-canvas > div {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Prevent blur on scaled elements */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .nb-node {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
  }
}