@config "../../tailwind.config.ts";
@import "tailwindcss/theme";
@import "tailwindcss/utilities";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
/*---break---
 */
@custom-variant dark (&:is(.dark *));

/**
 * Define CSS variables for light and dark themes, scoped under a custom class to avoid global conflicts.
 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-highlight: var(--highlight);
  --color-prompt-semantic: var(--prompt-semantic);
  --color-prompt-dialogue: var(--prompt-dialogue);
  --color-panorama-axis-z: var(--panorama-axis-z);
  --color-image-tile-foreground: var(--image-tile-foreground);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --text-\[8px\]: 8px;
  --height-30: calc(var(--spacing) * 30);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-surface-4: var(--surface-4);
  --color-surface-5: var(--surface-5);
  --color-surface-6: var(--surface-6);
  --color-surface-7: var(--surface-7);
  --color-surface-8: var(--surface-8);
  --shadow-surface-1: var(--shadow-1);
  --shadow-surface-2: var(--shadow-2);
  --shadow-surface-3: var(--shadow-3);
  --shadow-surface-4: var(--shadow-4);
  --shadow-surface-5: var(--shadow-5);
  --shadow-surface-6: var(--shadow-6);
  --shadow-surface-7: var(--shadow-7);
  --shadow-surface-8: var(--shadow-8);
  --color-dm-drop: var(--dm-drop);
  --color-dm-ring-high: var(--dm-ring-high);
  --color-dm-ring-mid: var(--dm-ring-mid);
  --color-dm-ring-base: var(--dm-ring-base);
  --color-dm-hi-peak: var(--dm-hi-peak);
  --color-dm-hi-high: var(--dm-hi-high);
  --color-dm-hi-mid: var(--dm-hi-mid);
  --color-dm-hi-base: var(--dm-hi-base);
  --shadow-8: var(--shadow-8);
  --shadow-7: var(--shadow-7);
  --shadow-6: var(--shadow-6);
  --shadow-5: var(--shadow-5);
  --shadow-4: var(--shadow-4);
  --shadow-3: var(--shadow-3);
  --shadow-2: var(--shadow-2);
  --shadow-1: var(--shadow-1);
  --color-shadow-color: var(--shadow-color);
}

/* All styles scoped under .__CUSTOM_NODE_CLASS__ to avoid global conflicts.
 * The placeholder is replaced with the lowercased project name by build.ts
 * after the Tailwind CSS build step. */
@layer base {
  .__CUSTOM_NODE_CLASS__ {
    /* Standard Tailwind-compatible variables - Light theme */
    --checker-a: oklch(1 0 0);
    --checker-b: oklch(1 0 0);
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: var(--comfy-input-bg);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --highlight: oklch(73.286% 0.16689 115.634);
    --prompt-semantic: oklch(0.62 0.19 48);
    --prompt-dialogue: #cf3976;
    --panorama-axis-z: oklch(0.58 0.2 255);
    --image-tile-foreground: oklch(0.985 0 0);
    --warning: oklch(0.922 0.191 90);
    --multitrack-video-bg: oklch(0.42 0.08 195);
    --multitrack-video-bg-strong: oklch(0.34 0.09 195);
    --multitrack-video-border: oklch(0.82 0.08 195);
    --multitrack-video-text: oklch(0.96 0.02 195);
    --multitrack-video-waveform: #0A777E;
    --multitrack-audio-bg: #0E3058;
    --multitrack-audio-bg-strong: #0E3058;
    --multitrack-audio-title-bg: #274569;
    --multitrack-audio-waveform: #1581B3;
    --multitrack-audio-border: oklch(0.7 0.1 220);
    --multitrack-audio-text: oklch(0.96 0.02 245);
    --multitrack-task-bg: #744A82;
    --multitrack-task-bg-strong: #5F3B6A;
    --multitrack-task-border: #A783B2;
    --multitrack-task-text: oklch(0.96 0.01 260);
    --multitrack-subtitle-bg: #9D4937;
    --multitrack-subtitle-bg-strong: #7D3A2C;
    --multitrack-subtitle-border: #C9705A;
    --multitrack-subtitle-text: #ffffff;
    --multitrack-waveform: oklch(0.55 0.09 185);
    --border: var(--border-color);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --radius: 0.5rem;

    .nodeNew{
      --muted:var(--component-node-widget-background);
    }

    @import "tailwindcss/preflight.css";
    * {
        border-color: var(--border);
    }
  }

  /* Dark theme - active when body has dark-theme class */
  .dark-theme .__CUSTOM_NODE_CLASS__{
    --checker-a: oklch(0.145 0 0);
    --checker-b: oklch(0.205 0 0);
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: var(--comfy-input-bg);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --prompt-semantic: oklch(0.78 0.17 65);
    --prompt-dialogue: #cf3976;
    --panorama-axis-z: oklch(0.72 0.16 250);
    --multitrack-video-bg: oklch(0.42 0.08 195);
    --multitrack-video-bg-strong: oklch(0.34 0.09 195);
    --multitrack-video-border: oklch(0.82 0.08 195);
    --multitrack-video-text: oklch(0.96 0.02 195);
    --multitrack-video-waveform: #0A777E;
    --multitrack-audio-bg: #0E3058;
    --multitrack-audio-bg-strong: #0E3058;
    --multitrack-audio-title-bg: #274569;
    --multitrack-audio-waveform: #1581B3;
    --multitrack-audio-border: oklch(0.7 0.1 220);
    --multitrack-audio-text: oklch(0.96 0.02 245);
    --multitrack-task-bg: #744A82;
    --multitrack-task-bg-strong: #5F3B6A;
    --multitrack-task-border: #A783B2;
    --multitrack-task-text: oklch(0.96 0.01 260);
    --multitrack-subtitle-bg: #9D4937;
    --multitrack-subtitle-bg-strong: #7D3A2C;
    --multitrack-subtitle-border: #C9705A;
    --multitrack-subtitle-text: #ffffff;
    --multitrack-waveform: oklch(0.55 0.09 185);
    --border: var(--border-color);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --highlight: oklch(96.109% 0.18336 113.683);
  }
}

/* Radix UI state attributes - needed because Tailwind arbitrary values don't work with data-* attributes */
@layer components {
  .__CUSTOM_NODE_CLASS__ [data-state="active"] {
    background-color: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }

  .__CUSTOM_NODE_CLASS__ [data-state="open"] {
    color: var(--foreground);
  }

  .__CUSTOM_NODE_CLASS__ [data-state="closed"] {
    color: var(--muted-foreground);
  }

  .__CUSTOM_NODE_CLASS__ [data-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
  }

  .__CUSTOM_NODE_CLASS__ .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .__CUSTOM_NODE_CLASS__ .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .__CUSTOM_NODE_CLASS__ .text-gradient{
    background: linear-gradient(90deg, var(--primary), var(--highlight));
    -webkit-text-fill-color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .__CUSTOM_NODE_CLASS__ .task-image-grid-item,
  .__CUSTOM_NODE_CLASS__ .task-image-grid-add {
    transition: opacity 180ms ease;
  }

  .__CUSTOM_NODE_CLASS__ .task-segment-editor {
    container-type: inline-size;
  }

  @container (max-width: 40rem) {
    .__CUSTOM_NODE_CLASS__ .task-segment-editor .task-image-drop-zone {
      aspect-ratio: auto;
      width: clamp(10rem, 40%, 20rem);
    }

    .__CUSTOM_NODE_CLASS__ .task-segment-editor .task-image-picker-empty {
      aspect-ratio: auto;
      width: 100%;
      min-width: 0;
      padding-inline: 0.5rem;
    }

    .__CUSTOM_NODE_CLASS__ .task-segment-editor .task-image-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* React DOM widgets are the containing block for every widget root. In Vue
 * node mode the slot itself may be auto-sized, so keep the container pinned to
 * its allocated node height instead of letting long prompt/content grow it. */
.comfyui-react-widget.__CUSTOM_NODE_CLASS__ {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  contain: size layout paint;
}

/* Timeline's segment editor intentionally extends below the widget slot. */
.comfyui-react-widget.__CUSTOM_NODE_CLASS__.__CUSTOM_NODE_CLASS__-timeline-editor-open {
  overflow: visible;
  contain: size layout;
  z-index: 9999;
}

/* ── Overlay management ─────────────────────────────────────────────────────
 * When a Popover or ContextMenu is open, the widget container is elevated so
 * it stays interactive above the dismiss backdrop (z-9997).
 * The backdrop is a full-screen fixed div that intercepts clicks before they
 * reach the LiteGraph canvas — the only reliable dismiss approach in ComfyUI. */
.comfyui-react-widget.__CUSTOM_NODE_CLASS__-overlay-active {
  position: relative !important;
  z-index: 9999 !important;
}

/* Radix portal wrapper divs rendered into document.body.
 * pointer-events:none on the wrapper avoids capturing clicks in areas
 * where there is no actual popup content. */
body > .__CUSTOM_NODE_CLASS__ {
  display: block;
  visibility: visible;
  pointer-events: none;
}
body > .__CUSTOM_NODE_CLASS__ > * {
  pointer-events: auto;
}