:root {
    --primary-color: #015a6c;
    --secondary-color: #96afb8;
}

body {
    overflow-y: scroll;
}

.rt-AvatarImage {
    object-fit: contain;
}

.rt-TooltipContent,
[data-radix-tooltip-content] {
    /* Match the custom tooltip used in assets/json-schema-form.jsx */
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.75rem !important;
    white-space: pre-wrap !important;
    width: max-content;
    max-width: 300px;
    min-width: 120px;
    z-index: 99999 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 400 !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
    pointer-events: none;
}
/* Reflex/Radix tooltip text can be span/rt-Text/etc (not always <p>) */
.rt-TooltipText,
.rt-TooltipText *,
[data-radix-tooltip-content] .rt-TooltipText,
[data-radix-tooltip-content] .rt-TooltipText * {
    color: #ffffff !important;
}

.rt-TooltipArrow,
[data-radix-tooltip-arrow],
.rt-TooltipArrow svg,
[data-radix-tooltip-arrow] svg,
.rt-TooltipArrow polygon,
[data-radix-tooltip-arrow] polygon {
    /* Keep arrow color aligned with tooltip background */
    fill: #1a1a1a !important;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1px;
}

.recharts-cartesian-grid-horizontal line {
	stroke-dasharray: 0;
	stroke-opacity: 0.6 !important;
	stroke: var(--gray-7);
}

.recharts-cartesian-grid-vertical line {
	stroke-opacity: 0 !important;
}

.rt-BaseTabList {
	box-shadow: none;
}

/* Global select hover styles */
.rt-SelectTrigger:hover {
    background-color: var(--primary-color) !important;
    cursor: pointer !important;
}

.rt-SelectItem:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* JSON Schema Form select dropdown styles */
.json-schema-select {
    /* Use accent-color for better native styling support */
    accent-color: var(--primary-color);
    color-scheme: light dark;
}

/* These rules have limited browser support but included for browsers that respect them */
.json-schema-select option {
    background-color: var(--color-background);
    color: var(--gray-12);
    padding: 0.5rem;
}

.json-schema-select option:hover,
.json-schema-select option:focus {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: white !important;
}

.json-schema-select option:checked {
    background: linear-gradient(var(--primary-color), var(--primary-color));
    color: white;
}

/* Webkit browsers - limited support */
@supports (-webkit-appearance: none) {
    .json-schema-select option:hover {
        background: var(--primary-color);
        color: white;
    }
}

/* Firefox - better option styling support */
@-moz-document url-prefix() {
    .json-schema-select option:hover {
        background-color: var(--primary-color) !important;
        color: white !important;
    }
}

[data-sonner-toaster], .sonner-top { z-index: 2147483647 !important; }

/* Accordion custom styles */
.AccordionHeader {
    color: white !important;
    cursor: pointer !important;
}

.AccordionHeader:hover {
    background-color: var(--primary-color) !important;
    opacity: 0.9 !important;
    cursor: pointer !important;
}

.AccordionHeader * {
    color: white !important;
}

button.AccordionTrigger {
    color: white !important;
    cursor: pointer !important;
}

button.AccordionTrigger:hover {
    background-color: var(--primary-color) !important;
    opacity: 0.9 !important;
    color: white !important;
}

button.AccordionTrigger * {
    color: white !important;
}


/* Checkbox styles - checked state uses primary color */
input[type="checkbox"] {
    accent-color: var(--primary-color);
}

/* Radix UI Checkbox styles - root is the button with rt-BaseCheckboxRoot/rt-CheckboxRoot */
/* Inner box fill (Radix draws the visible box with ::before) */
.rt-BaseCheckboxRoot[data-state="checked"]::before,
.rt-CheckboxRoot[data-state="checked"]::before {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}


/* Checkbox indicator (checkmark) */
.rt-CheckboxIndicator {
    color: white !important;
}

/* Radio button styles - native */
input[type="radio"] {
    accent-color: var(--primary-color);
}

/* Radix UI Radio button styles */
.rt-BaseRadioRoot,
.rt-RadioGroupItem {
    accent-color: var(--primary-color) !important;
}

.rt-BaseRadioRoot[data-state="checked"],
.rt-RadioGroupItem[data-state="checked"] {
    border-color: var(--primary-color) !important;
}

/* Radio button indicator (inner circle) */
.rt-BaseRadioRoot[data-state="checked"]::before,
.rt-RadioGroupIndicator {
    background-color: var(--primary-color) !important;
}

/* Allow the multiselect dropdown list to scroll */
[cmdk-root] {
    position: relative;
    overflow: visible;
    z-index: 20;
    pointer-events: auto;
}

[cmdk-root] [cmdk-list] {
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--background, #ffffff);
}

[cmdk-root] [cmdk-item],
[cmdk-root] [cmdk-group] {
    pointer-events: auto;
}

/* Allow cmdk dropdown to escape dialog scroll container when open */
#chat-settings .flex.flex-col.flex-grow.overflow-y-auto {
    overflow: visible;
}

/* Optional: if the settings container is clipping dropdowns */
.settings-panel-container {
    overflow-y: visible;
}

/* Ensure Tailwind dropdown wrapper doesn't clip */
div.relative.mt-2 {
    overflow: visible;
    z-index: 10000;
}

.dark, .dark-theme, [data-theme="dark"], .radix-themes[data-theme="dark"] {
    --sky-1: #081316;
    --sky-2: #0e1b1e;
    --sky-3: #042c35;
    --sky-4: #003947;
    --sky-5: #004656;
    --sky-6: #005567;
    --sky-7: #01687d;
    --sky-8: #00819b;
    --sky-9: #015a6c;
    --sky-10: #004a5a;
    --sky-11: #64c9e4;
    --sky-12: #b6ecfb;
  
    --sky-a1: #0067e606;
    --sky-a2: #00c8fe0e;
    --sky-a3: #00c2fd27;
    --sky-a4: #00c1ff3a;
    --sky-a5: #00c8ff4a;
    --sky-a6: #00ccfd5d;
    --sky-a7: #00d1ff74;
    --sky-a8: #00d2ff94;
    --sky-a9: #00cffe62;
    --sky-a10: #00c9fd4f;
    --sky-a11: #6ee0fee3;
    --sky-a12: #b9f0fffb;
  
    --sky-contrast: #fff;
    --sky-surface: #0c252b80;
    --sky-indicator: #015a6c;
    --sky-track: #015a6c;
  }
  
  @supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
      .dark, .dark-theme, [data-theme="dark"], .radix-themes[data-theme="dark"] {
        --sky-1: oklch(17.8% 0.0177 217.6);
        --sky-2: oklch(21.2% 0.0189 217.6);
        --sky-3: oklch(27.1% 0.0453 217.6);
        --sky-4: oklch(31.5% 0.0647 217.6);
        --sky-5: oklch(36.2% 0.0723 217.6);
        --sky-6: oklch(41.4% 0.077 217.6);
        --sky-7: oklch(47.8% 0.0853 217.6);
        --sky-8: oklch(55.8% 0.1015 217.6);
        --sky-9: oklch(43.2% 0.077 217.6);
        --sky-10: oklch(37.5% 0.0723 217.6);
        --sky-11: oklch(78.6% 0.1015 217.6);
        --sky-12: oklch(91% 0.0583 217.6);
  
        --sky-a1: color(display-p3 0 0.4235 0.9608 / 0.022);
        --sky-a2: color(display-p3 0.0706 0.7804 0.9961 / 0.055);
        --sky-a3: color(display-p3 0.0667 0.7569 0.9961 / 0.148);
        --sky-a4: color(display-p3 0.1412 0.7686 1 / 0.219);
        --sky-a5: color(display-p3 0.2078 0.7922 1 / 0.282);
        --sky-a6: color(display-p3 0.2588 0.8118 1 / 0.353);
        --sky-a7: color(display-p3 0.3059 0.8157 1 / 0.446);
        --sky-a8: color(display-p3 0.3373 0.8275 1 / 0.568);
        --sky-a9: color(display-p3 0.2745 0.8196 1 / 0.374);
        --sky-a10: color(display-p3 0.2275 0.8039 1 / 0.299);
        --sky-a11: color(display-p3 0.5569 0.8824 1 / 0.874);
        --sky-a12: color(display-p3 0.7765 0.9412 1 / 0.975);
  
        --sky-contrast: #fff;
        --sky-surface: color(display-p3 0.0627 0.1412 0.1647 / 0.5);
        --sky-indicator: oklch(43.2% 0.077 217.6);
        --sky-track: oklch(43.2% 0.077 217.6);
      }
    }
  }
  
  .light, .light-theme, [data-theme="light"], .radix-themes[data-theme="light"] {
    --sky-1: #f7feff;
    --sky-2: #eefbff;
    --sky-3: #d8f9ff;
    --sky-4: #c1f3ff;
    --sky-5: #a9ebfe;
    --sky-6: #8ddff6;
    --sky-7: #65d0ec;
    --sky-8: #39b8d7;
    --sky-9: #015a6c;
    --sky-10: #004a5c;
    --sky-11: #007895;
    --sky-12: #045;
  
    --sky-a1: #00e0ff08;
    --sky-a2: #00c3ff11;
    --sky-a3: #00d8ff27;
    --sky-a4: #00ceff3e;
    --sky-a5: #00c4fd56;
    --sky-a6: #00b8eb72;
    --sky-a7: #00b2e09a;
    --sky-a8: #00a4ccc6;
    --sky-a9: #00596bfe;
    --sky-a10: #004a5c;
    --sky-a11: #007895;
    --sky-a12: #004455;
  
    --sky-contrast: #fff;
    --sky-surface: #eafaffcc;
    --sky-indicator: #015a6c;
    --sky-track: #015a6c;
  }
  
  @supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
      :root, .light, .light-theme {
        --sky-1: oklch(99.3% 0.0079 217.6);
        --sky-2: oklch(98% 0.0145 217.6);
        --sky-3: oklch(96% 0.0362 217.6);
        --sky-4: oklch(93.5% 0.0544 217.6);
        --sky-5: oklch(90.2% 0.0708 217.6);
        --sky-6: oklch(86% 0.0864 217.6);
        --sky-7: oklch(80.4% 0.1053 217.6);
        --sky-8: oklch(72.8% 0.1156 217.6);
        --sky-9: oklch(43.2% 0.077 217.6);
        --sky-10: oklch(37.5% 0.077 217.6);
        --sky-11: oklch(52.3% 0.1156 217.6);
        --sky-12: oklch(35.1% 0.077 217.6);
  
        --sky-a1: color(display-p3 0.0235 0.8627 1 / 0.028);
        --sky-a2: color(display-p3 0.0039 0.7373 0.9373 / 0.059);
        --sky-a3: color(display-p3 0.0078 0.7922 0.9725 / 0.13);
        --sky-a4: color(display-p3 0.0039 0.7529 0.9647 / 0.204);
        --sky-a5: color(display-p3 0.0039 0.698 0.9608 / 0.283);
        --sky-a6: color(display-p3 0.0039 0.6431 0.8745 / 0.373);
        --sky-a7: color(display-p3 0.0039 0.6118 0.8275 / 0.495);
        --sky-a8: color(display-p3 0 0.5333 0.7216 / 0.62);
        --sky-a9: color(display-p3 0 0.2392 0.3176 / 0.855);
        --sky-a10: color(display-p3 0 0.1961 0.2706 / 0.887);
        --sky-a11: color(display-p3 0 0.3294 0.4667 / 0.8);
        --sky-a12: color(display-p3 0 0.1804 0.2471 / 0.899);
  
        --sky-contrast: #fff;
        --sky-surface: color(display-p3 0.9333 0.9804 0.9961 / 0.8);
        --sky-indicator: oklch(43.2% 0.077 217.6);
        --sky-track: oklch(43.2% 0.077 217.6);
      }
    }
  }