@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@100;300;400;500;700;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Design system colors */
    --primary: 239 89% 64%;
    --primary-hover: 238 62% 51%;
    --primary-active: 238 65% 43%;
    --secondary: 240 93% 95%;
    --primary-100: 235 85% 97%;
    --white: #ffffff;

    --foreground-secondary: 224 71% 4%;
    --muted-gray: 218 11% 65%;
    --muted-disabled: 220 14% 96%;

    --muted-slate: 215 16%, 47%;
    --light-slate: 215 20% 65%;
    --slate-300: 213 27% 84%;
    --border: 214 32% 92%;
    --breadcrumb-last: 216 20% 40%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --background: 0 0% 100%;
    --foreground: 224 17% 26%;

    --soft-background: 240 20% 99%;

    /* other colors */
    --tooltip: 224 17% 26%;
    --tooltip-foreground: 0 0% 100%;

    --popover-gray: 240 14% 99%;

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

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

    --destructive: 348 86% 61%;
    --destructive-foreground: 210 40% 98%;

    --input: 214.3 31.8% 91.4%;
    --ring: 239 89% 64%;

    --warning: 348 86% 61%;
    --success: 129 100% 42%;

    /* Gray scale for utility classes */
    --gray-100: #f3f4f6;

    /* Special button colors */
    --special-button: #19a979;
    --special-button-hover: #1e8a66;
    --special-button-active: #1a7557;

    /* Toggle colors */
    --toggle-outline-active: #f3f4fe;

    /* CodeMirror theme colors */
    --codemirror-background: #f8fafc;
    --codemirror-gutter: #94a3b8;
    --codemirror-line-highlight: #e6e6fe;
    --codemirror-syntax-blue: #005cc5;

    /* Chart colors */
    --chart-tick-stroke: #373d4d;

    /* DataTable colors */

    /* Trace thread colors */
    --thread-active: #ebf2f5;
    --thread-inactive: #e2effd;
    --thread-icon-background: #dedefd;
    --thread-icon-text: #1b1c7e;
    --message-input-background: #e7ecff;

    /* Action cards */
    --action-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1);

    /* Action types */
    --action-trace-background: #dafbf0;
    --action-trace-text: #295747;
    --action-experiment-background: #fde2f6;
    --action-experiment-text: #72275f;
    --action-guardrail-background: #fee3d7;
    --action-guardrail-text: #73422b;
    --action-playground-background: #efe2fd;
    --action-playground-text: #491b7e;

    /* Feature/brand colors */
    --feature-experiment-management: #6c6ff7;
    --feature-llm: #52aea4;

    /* Error indicator colors */
    --error-indicator-background: #ffd2d2;
    --error-indicator-text: #822c45;

    /* Search highlight colors */
    --search-highlight: #ffdf20;
    --search-current-highlight: #ff8904;

    /* Diff colors */
    --diff-removed-bg: #fde2e7;
    --diff-removed-text: #931a32;
    --diff-added-bg: #e2fde6;
    --diff-added-text: #1d6728;

    /* Upload field colors */
    --upload-icon-bg: 203 213 225;

    /* Code block colors */
    --code-block: #fbfcfd;

    /* Welcome banner gradient colors */
    --banner-gradient-start: #060a28;
    --banner-gradient-end: #604fff;

    /* Scrollbar colors */
    --scrollbar-thumb: #babac0;
    --scrollbar-thumb-hover: #7d7d7d;
    --scrollbar-background: #ffffff;

    /* Modern color variants for tags and charts */
    --color-gray: #64748b;
    --color-purple: #8b5cf6;
    --color-burgundy: #bf399e;
    --color-pink: #f43f5e;
    --color-red: #ef4444;
    --color-orange: #f97316;
    --color-yellow: #eab308;
    --color-green: #10b981;
    --color-turquoise: #06b6d4;
    --color-blue: #3b82f6;
    --color-primary: #6366f1;
    --color-indigo: #6366f1;
    --color-violet: #8b5cf6;
    --color-emerald: #10b981;
    --color-cyan: #06b6d4;
    --color-rose: #f43f5e;

    /* Tag variant background and text colors */
    --tag-gray-bg: #f3f4f6;
    --tag-purple-bg: #efe2fd;
    --tag-purple-text: #491b7e;
    --tag-burgundy-bg: #fde2f6;
    --tag-burgundy-text: #72275f;
    --tag-pink-bg: #fde2ea;
    --tag-pink-text: #822c45;
    --tag-red-bg: #fdc9c9;
    --tag-red-text: #4e1d1d;
    --tag-orange-bg: #fee3d7;
    --tag-orange-text: #73422b;
    --tag-yellow-bg: #fef0c8;
    --tag-yellow-text: #675523;
    --tag-green-bg: #dafbf0;
    --tag-green-text: #295747;
    --tag-turquoise-bg: #cdf5f9;
    --tag-turquoise-text: #15545b;
    --tag-blue-bg: #e2effd;
    --tag-blue-text: #19426b;

    /* Info box colors (blue variant for informational content) */
    --info-box-bg: 214 100% 92%;
    --info-box-text: 224 76% 40%;
    --info-box-icon-bg: 214 100% 92%;
    --info-box-icon-text: 217 91% 60%;

    /* Warning/tip box colors (amber variant for tips and warnings) */
    --warning-box-bg: 45 93% 89%;
    --warning-box-text: 32 85% 32%;
    --warning-box-icon-bg: 45 93% 58%;
    --warning-box-icon-text: 32 85% 32%;

    --radius: 0.5rem;

    --header-height: 60px;
    --sidebar-width: 61px;
  }

  .dark {
    /* Design system colors */
    --primary: 217.2 91.2% 59.8%;
    --primary-hover: 217.2 91.2% 69.8%;
    --primary-active: 217.2 91.2% 49.8%;
    --secondary: 240 93% 95%; /* To replace */
    --primary-100: 217.2 32.6% 17.5%;
    --white: #ffffff;

    --foreground-secondary: 210 40% 98%;
    --muted-gray: 217.2 32.6% 35%;
    --muted-disabled: 217.2 32.6% 25%;

    --muted-slate: 215 16%, 47%; /* To replace */
    --light-slate: 215.4 16.3% 46.9%;
    --slate-300: 213 27% 84%; /* To replace */
    --border: 217.2 32.6% 17.5%;
    --breadcrumb-last: 217.2 32.6% 55%;
    --secondary-foreground: 222.2 47.4% 11.2%; /* To replace */
    --primary-foreground: 217.2 32.6% 25.5%;

    --background: 222 84% 4.9%;
    --foreground: 210 40% 87%;

    --soft-background: 222 84% 6%;

    /* other colors - Dark Mode */
    --tooltip: 210 40% 98%;
    --tooltip-foreground: 222 84% 4.9%;

    /* Legacy variables - Dark Mode (for backward compatibility) */
    --input: 217.2 32.6% 17.5%;
    --ring: 217.2 91.2% 59.8%;

    /* Popover colors - Dark Mode */
    --popover-gray: 217.2 32.6% 10%;

    --muted-foreground: 217.2 32.6% 55%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 348 86% 61%;
    --destructive-foreground: 210 40% 98%;

    --warning: 348 86% 61%;
    --success: 129 100% 42%;

    /* Gray scale for utility classes - Dark Mode */
    --gray-100: 217.2 32.6% 15%;

    /* Special button colors - Dark Mode */
    --special-button: #22c785;
    --special-button-hover: #28b575;
    --special-button-active: #1e9a65;

    /* Action cards - Dark Mode */
    --action-card-shadow: 0 4px 6px -1px rgb(255 255 255 / 0.1),
      0 2px 4px -2px rgb(255 255 255 / 0.05);

    /* Action types - Dark Mode (darker backgrounds, lighter text) */
    --action-trace-background: #1a332a;
    --action-trace-text: #52c794;
    --action-experiment-background: #3d1a36;
    --action-experiment-text: #e48cc7;
    --action-guardrail-background: #3d2a1a;
    --action-guardrail-text: #e8a567;
    --action-playground-background: #2a1a3d;
    --action-playground-text: #b88ce8;

    /* Feature colors - Dark Mode */
    --feature-experiment-management: #8a8eff;
    --feature-llm: #6bd4c9;

    /* Muted colors - Dark Mode */
    --muted: 217.2 32.6% 17.5%;

    /* Toggle colors - Dark Mode */
    --toggle-outline-active: #2c3c56;

    /* Thread colors - Dark Mode */
    --thread-active: #2a3f2f;
    --thread-inactive: #2a3447;
    --message-input-background: #2a2f47;

    /* CodeMirror theme colors - Dark Mode (GitHub Dark theme) */
    --codemirror-background: #2c3c56;
    --codemirror-gutter: #7d8590;
    --codemirror-line-highlight: rgba(255, 255, 255, 0.08);
    --codemirror-syntax-blue: #79c0ff;

    /* Diff colors - Dark Mode */
    --diff-removed-bg: #7f1d1d;
    --diff-removed-text: #fef2f2;
    --diff-added-bg: #14532d;
    --diff-added-text: #bbf7d0;

    /* Upload field colors - Dark Mode */
    --upload-icon-bg: 71 85 105;

    /* Code block colors - Dark Mode */
    --code-block: #1e293b;

    /* Welcome banner gradient colors - Dark Mode */
    --banner-gradient-start: #0f172a;
    --banner-gradient-end: hsl(var(--primary));

    /* Scrollbar colors - Dark Mode */
    --scrollbar-thumb: #64748b;
    --scrollbar-thumb-hover: #94a3b8;
    --scrollbar-background: #000000;

    /* Tag variant background and text colors - Dark Mode */
    --tag-gray-bg: #374151;
    --tag-purple-bg: #4c1d95;
    --tag-purple-text: #c4b5fd;
    --tag-burgundy-bg: #7e1065;
    --tag-burgundy-text: #f3e8ff;
    --tag-pink-bg: #9d174d;
    --tag-pink-text: #fecdd3;
    --tag-red-bg: #7f1d1d;
    --tag-red-text: #fef2f2;
    --tag-orange-bg: #9a3412;
    --tag-orange-text: #fed7aa;
    --tag-yellow-bg: #a16207;
    --tag-yellow-text: #fef3c7;
    --tag-green-bg: #14532d;
    --tag-green-text: #bbf7d0;
    --tag-turquoise-bg: #155e75;
    --tag-turquoise-text: #a7f3d0;
    --tag-blue-bg: #1e3a8a;
    --tag-blue-text: #dbeafe;

    /* Info box colors - Dark Mode */
    --info-box-bg: 224 76% 33%;
    --info-box-text: 221 83% 78%;
    --info-box-icon-bg: 232 94% 48%;
    --info-box-icon-text: 213 93% 68%;

    /* Warning/tip box colors - Dark Mode */
    --warning-box-bg: 32 85% 32%;
    --warning-box-text: 48 96% 64%;
    --warning-box-icon-bg: 32 95% 44%;
    --warning-box-icon-text: 45 93% 58%;
  }

  /* CodeMirror cursor and selection fix for dark mode */
  .dark .cm-cursor {
    border-left-color: hsl(var(--text-primary)) !important;
  }

  .dark .cm-selectionBackground {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  .dark .cm-focused .cm-selectionBackground {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }

  .comet-expanded {
    --sidebar-width: 240px;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground comet-body;
  }
}

/* custom classes */
@layer base {
  .comet-title-xl {
    @apply font-medium text-3xl tracking-normal text-foreground-secondary;
  }

  .comet-title-l {
    @apply font-medium text-2xl tracking-normal text-foreground-secondary;
  }

  .comet-title-m {
    @apply font-medium text-xl tracking-normal text-foreground-secondary;
  }

  .comet-title-s {
    @apply font-medium text-lg tracking-normal text-foreground-secondary;
  }

  .comet-title-xs {
    @apply font-medium text-sm tracking-normal text-foreground-secondary;
  }

  .comet-body {
    @apply font-normal text-base tracking-normal text-foreground-secondary;
  }

  .comet-body-accented {
    @apply comet-body font-medium;
  }

  .comet-body-s {
    @apply font-normal text-sm tracking-normal;
  }

  .comet-body-s-accented {
    @apply comet-body-s font-medium;
  }

  .comet-body-xs {
    @apply font-normal text-xs tracking-normal;
  }

  .comet-body-xs-accented {
    @apply comet-body-xs font-medium;
  }

  .comet-code {
    @apply font-normal text-sm tracking-normal;
    font-family:
      Ubuntu Mono,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
  }

  .comet-header-height {
    height: var(--header-height);
  }

  .comet-header-inset {
    top: var(--header-height);
  }

  .comet-sidebar-width {
    width: var(--sidebar-width);
  }

  .comet-content-inset {
    --comet-content-width: calc(100vw - var(--sidebar-width));
    left: var(--sidebar-width);
  }

  .comet-table-row-active[data-row-active="true"] td {
    background: hsl(var(--primary-foreground));
  }

  code,
  kbd,
  samp,
  pre {
    font-family:
      Ubuntu Mono,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
  }

  /* Custom scrollbar styling that adapts to website theme
   * Problem: Browsers use OS scrollbar appearance which may not match website theme
   * - User has light OS theme + website in dark mode = light scrollbars on dark UI (jarring)
   * - User has dark OS theme + website in light mode = dark scrollbars on light UI (inconsistent)  
   * Solution: Force custom scrollbar styling that adapts to website theme changes
   * - Dark theme: Apply dark scrollbars regardless of OS preference (.dark body)
   * - Light theme (non-Windows): Use default OS scrollbars for better native feel
   * - Windows: Always use custom styling due to poor default scrollbar UX (.comet-custom-scrollbar)
   */
  .dark body,
  body.comet-custom-scrollbar {
    &.firefox {
      scrollbar-color: var(--scrollbar-thumb) transparent;
      scrollbar-width: thin;
    }

    ::-webkit-scrollbar {
      background-color: var(--scrollbar-background);
      width: 16px;
    }

    ::-webkit-scrollbar-track {
      background-color: var(--scrollbar-background);
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: 16px;
      border: 4px solid var(--scrollbar-background);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-thumb-hover);
    }

    ::-webkit-scrollbar-button {
      display: none;
    }
  }

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

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

  .action-card-shadow {
    box-shadow: var(--action-card-shadow);
  }

  .hover\:action-card-shadow:hover {
    box-shadow: var(--action-card-shadow);
  }

  .hover\:bg-\[var\(--thread-active\)\]\/80:hover {
    background-color: rgba(var(--thread-active), 0.8);
  }
}

// Table

// workaround to force firefox work correctly with cell height - https://stackoverflow.com/questions/36575846/how-to-make-div-fill-td-height-in-firefox
.comet-fix-cell-height {
  height: 1px;
}

@-moz-document url-prefix() {
  .comet-fix-cell-height {
    height: 100%;
  }
}

// rewrite padding for first cell for tables that takes full width with sticky behaviour
.comet-sticky-table {
  thead:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: hsl(var(--border));
    z-index: 10;
  }

  thead:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: hsl(var(--border));
    z-index: 10;
  }

  td:first-child [data-cell-wrapper="true"],
  th:first-child [data-header-wrapper="true"] {
    padding-left: 24px !important;
  }

  td:last-child [data-cell-wrapper="true"],
  th:last-child [data-header-wrapper="true"] {
    padding-right: 24px !important;
  }
}

.comet-table {
  /* resets padding for all nested cells wrappers */
  td [data-cell-wrapper="true"] [data-cell-wrapper="true"],
  th [data-header-wrapper="true"] [data-header-wrapper="true"] {
    padding: unset !important;
  }
}

.comet-line-highlight {
  position: relative;

  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -5;
    background: var(--secondary);
  }
}

.comet-markdown {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;

  pre code {
    font-size: 0.875rem !important;
    white-space: preserve-breaks;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

.comet-button-badge {
  position: relative;
  --size: 10px;

  &:before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--size) / 2);
    right: calc(-1 * var(--size) / 2);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 2px solid hsl(var(--background));
    background: hsl(var(--destructive));
  }
}

div.cm-theme div.cm-search.cm-panel {
  @apply px-2 py-1;

  input {
    @apply h-8 px-3 pb-1.5 pt-1 rounded-md bg-background text-sm placeholder:text-light-slate focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-muted-disabled disabled:text-muted-gray disabled:placeholder:text-muted-gray;
  }

  .cm-button {
    @apply leading-none text-foreground h-8 px-3 comet-body-s border border-border bg-background hover:text-foreground active:bg-primary-100 active:text-foreground disabled:border-muted-disabled disabled:text-muted-gray disabled:opacity-100 whitespace-nowrap rounded-md transition-colors focus-visible:outline-none disabled:pointer-events-none bg-none disabled:bg-muted-gray;
  }

  label {
    @apply hidden;
  }

  button[name="close"] {
    @apply top-0 bottom-px my-auto leading-none size-6 opacity-50 hover:opacity-100;
  }
}
