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

@layer base {
  :root,
  html[data-theme="dark"] {
    --theme-bg: 16 11 8;
    --theme-shell: 18 12 9;
    --theme-surface: 28 20 16;
    --theme-elevated: 24 17 13;
    --theme-muted: 43 32 25;
    --theme-border: 75 58 46;
    --theme-fg: 255 247 237;
    --theme-muted-fg: 216 200 184;
    --theme-subtle-fg: 170 153 136;
    --theme-input: 24 17 13;
    --theme-accent: 249 115 22;
    --theme-action: 194 65 12;
    --theme-action-hover: 154 52 18;
    --theme-on-action: 255 255 255;
  }

  html[data-theme="light"] {
    --theme-bg: 255 248 240;
    --theme-shell: 255 244 232;
    --theme-surface: 255 252 247;
    --theme-elevated: 255 255 255;
    --theme-muted: 255 241 226;
    --theme-border: 224 203 181;
    --theme-fg: 31 23 18;
    --theme-muted-fg: 102 88 76;
    --theme-subtle-fg: 129 114 99;
    --theme-input: 255 255 255;
    --theme-accent: 194 65 12;
    --theme-action: 194 65 12;
    --theme-action-hover: 154 52 18;
    --theme-on-action: 255 255 255;
  }

  html,
  body {
    @apply h-full;
  }

  body {
    @apply bg-theme-bg text-theme-fg font-sans antialiased;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold text-theme-fg;
  }

  h1 { @apply text-2xl; }
  h2 { @apply text-xl; }
  h3 { @apply text-lg; }

  input,
  select,
  textarea {
    color-scheme: dark;
  }

  html[data-theme="light"] input,
  html[data-theme="light"] select,
  html[data-theme="light"] textarea {
    color-scheme: light;
  }
}

/* Hide scrollbars while keeping scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Workflow Builder Styles */
.node-port {
  transition: all 0.2s ease;
}

.node-port:hover {
  transform: scale(1.25);
}

.workflow-node {
  min-width: 200px;
  z-index: 10;
}

/* SVG path hover doesn't work with Tailwind classes in some browsers */
path.hover\:stroke-brand:hover {
  stroke: #F97316;
}

/* Chat Layout Modes */
#hero, #chat {
  display: none;
}

[data-chat-layout-mode-value="hero"] #hero {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

[data-chat-layout-mode-value="chat"] #chat {
  display: flex;
  flex: 1 1 0%;
}

@media (max-width: 767px) {
  body.chat-shell-active {
    height: 100dvh;
    overflow: hidden;
  }

  body.chat-shell-active [data-chat-shell="true"] {
    height: 100dvh;
    overflow: hidden;
  }

  body.chat-shell-active [data-chat-shell="true"] > main {
    overflow: hidden;
    padding-bottom: 0;
  }

  body.chat-shell-active [data-chat-shell="true"] > main > .container {
    height: 100%;
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
  }

  body.chat-shell-active #chat-root {
    height: calc(100dvh - 4rem - env(safe-area-inset-bottom, 0px));
  }

  body.chat-shell-active #messages-scroller {
    overscroll-behavior-y: contain;
  }
}

/* Add any further global utility classes or element-level styles as needed */

.mermaid-diagram {
  position: relative;
}

.mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}

.mermaid-loading {
  min-height: 120px;
}

.mermaid-diagram .mermaid-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mermaid-diagram:hover .mermaid-actions {
  opacity: 1;
}

.mermaid-diagram:focus-within .mermaid-actions {
  opacity: 1;
}

@media (max-width: 767px) {
  .mermaid-diagram .mermaid-actions {
    opacity: 1;
  }
}

pre.mermaid-error {
  border-color: rgba(239, 68, 68, 0.3);
}

.mermaid-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.84);
}

.mermaid-zoom-backdrop {
  position: absolute;
  inset: 0;
}

.mermaid-zoom-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  background: rgb(var(--theme-bg) / 0.96);
}

.mermaid-zoom-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgb(var(--theme-border) / 0.75);
  background: rgb(var(--theme-surface) / 0.92);
  backdrop-filter: blur(12px);
}

.mermaid-zoom-title {
  color: rgb(var(--theme-muted-fg));
  font-size: 0.875rem;
  font-weight: 600;
}

.mermaid-zoom-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgb(var(--theme-border) / 0.85);
  border-radius: 0.75rem;
  background: rgb(var(--theme-muted) / 0.95);
  color: rgb(var(--theme-fg));
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mermaid-zoom-close:hover,
.mermaid-zoom-close:focus-visible {
  background: rgb(var(--theme-surface) / 0.98);
  color: rgb(var(--theme-fg));
}

.mermaid-zoom-viewport {
  position: relative;
  flex: 1 1 auto;
  max-width: 100vw;
  max-height: calc(100dvh - 4rem);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.mermaid-zoom-viewport.is-panning {
  cursor: grabbing;
}

.mermaid-zoom-content {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform-origin: 0 0;
  will-change: transform;
  touch-action: none;
}

.mermaid-zoom-content svg {
  display: block;
  max-width: none;
  height: auto;
}

.mermaid-zoom-loading,
.mermaid-zoom-error {
  display: grid;
  min-height: 16rem;
  place-items: center;
  color: rgb(var(--theme-subtle-fg));
  font-size: 0.875rem;
}

@layer utilities {
  .bg-dark-950-light {
    background-color: rgb(var(--theme-muted) / 0.7);
  }

  .hover\:bg-dark-950-light:hover {
    background-color: rgb(var(--theme-muted));
  }

  .text-theme-muted {
    color: rgb(var(--theme-muted-fg));
  }

  html[data-theme] :where([class~="bg-brand"][class~="text-white"],
  [class~="bg-brand/90"][class~="text-white"],
  [class~="bg-orange-600"][class~="text-white"]) {
    background-color: rgb(var(--theme-action)) !important;
    color: rgb(var(--theme-on-action)) !important;
  }

  html[data-theme] :where([class~="hover:bg-brand-hover"]:hover,
  [class~="hover:bg-brand"]:hover,
  [class~="hover:bg-orange-500"]:hover,
  [class~="hover:bg-orange-600"]:hover) {
    background-color: rgb(var(--theme-action-hover)) !important;
  }

  html[data-theme="light"] :where([class~="bg-dark"],
  [class~="bg-dark-950"],
  [class~="bg-dark-950/40"],
  [class~="bg-dark-950/60"],
  [class~="bg-dark-950/70"],
  [class~="bg-dark-950/80"],
  [class~="bg-dark-900"],
  [class~="bg-black"]) {
    background-color: rgb(var(--theme-bg)) !important;
  }

  html[data-theme="light"] :where([class~="bg-dark-light"],
  [class~="bg-dark-lighter"],
  [class~="bg-neutral-900/80"],
  [class~="bg-neutral-900/60"]) {
    background-color: rgb(var(--theme-surface) / 0.88) !important;
  }

  html[data-theme="light"] :where([class~="bg-dark-800"],
  [class~="bg-dark-700"],
  [class~="bg-white/5"],
  [class~="bg-white/10"],
  [class~="bg-white/15"]) {
    background-color: rgb(var(--theme-muted)) !important;
  }

  html[data-theme="light"] :where([class~="hover:bg-dark"]:hover,
  [class~="hover:bg-dark-900"]:hover,
  [class~="hover:bg-dark-950"]:hover,
  [class~="hover:bg-white/5"]:hover,
  [class~="hover:bg-white/10"]:hover) {
    background-color: rgb(var(--theme-muted)) !important;
  }

  html[data-theme="light"] :where([class~="bg-black/60"]) {
    background-color: rgb(15 23 42 / 0.36) !important;
  }

  html[data-theme="light"] :where([class~="from-dark"],
  [class~="from-dark-lighter"]) {
    --tw-gradient-from: rgb(var(--theme-surface)) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(var(--theme-surface) / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  }

  html[data-theme="light"] :where([class~="to-dark"],
  [class~="to-dark-lighter"]) {
    --tw-gradient-to: rgb(var(--theme-muted)) var(--tw-gradient-to-position) !important;
  }

  html[data-theme="light"] :where([class~="border-white/5"],
  [class~="border-white/10"],
  [class~="border-white/20"],
  [class~="border-dark"],
  [class~="border-dark-600"],
  [class~="border-dark-700"],
  [class~="border-dark-lighter"],
  [class~="border-dark-lighter/50"],
  [class~="border-dark-lighter/60"],
  [class~="border-gray-700"],
  [class~="border-gray-800"]) {
    border-color: rgb(var(--theme-border)) !important;
  }

  html[data-theme="light"] :where([class~="divide-white/5"],
  [class~="divide-white/10"],
  [class~="divide-gray-800"]) > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--theme-border)) !important;
  }

  html[data-theme="light"] :where([class~="text-white"],
  [class~="text-gray-100"],
  [class~="text-gray-200"],
  [class~="text-gray-300"]) {
    color: rgb(var(--theme-fg)) !important;
  }

  html[data-theme="light"] :where([class~="text-white/80"],
  [class~="text-white/70"],
  [class~="text-white/60"],
  [class~="text-gray-400"]) {
    color: rgb(var(--theme-muted-fg)) !important;
  }

  html[data-theme="light"] :where([class~="text-white/50"],
  [class~="text-white/40"],
  [class~="text-white/30"],
  [class~="text-white/20"],
  [class~="text-gray-500"]) {
    color: rgb(var(--theme-subtle-fg)) !important;
  }

  html[data-theme="light"] :where([class~="text-amber-300/80"],
  [class~="text-amber-400"]) {
    color: #92400e !important;
  }

  html[data-theme="light"] :where([class~="text-green-300"],
  [class~="text-green-400"]) {
    color: #166534 !important;
  }

  html[data-theme="light"] :where([class~="text-red-300"],
  [class~="text-red-400"]) {
    color: #b91c1c !important;
  }

  html[data-theme="light"] :where([class~="text-brand"],
  [class~="text-brand/80"],
  [class~="text-brand/60"],
  [class~="text-orange-300"],
  [class~="text-orange-400"]) {
    color: rgb(var(--theme-accent)) !important;
  }

  html[data-theme="light"] :where([class~="hover:text-brand-hover"]:hover,
  [class~="hover:text-orange-200"]:hover,
  [class~="hover:text-orange-300"]:hover,
  [class~="hover:text-orange-400"]:hover) {
    color: rgb(var(--theme-action-hover)) !important;
  }

  html[data-theme="light"] :where([class~="hover:text-white"]:hover,
  [class~="hover:text-gray-100"]:hover,
  [class~="group-hover:text-white"]) {
    color: rgb(var(--theme-fg)) !important;
  }

  html[data-theme="light"] :where([class~="bg-brand"],
  [class~="bg-brand/90"],
  [class~="bg-orange-600"],
  [class~="bg-orange-500"],
  [class~="bg-red-600"],
  [class~="bg-red-600/80"],
  [class~="bg-red-500"],
  [class~="bg-green-600"],
  [class~="bg-green-600/80"],
  [class~="bg-blue-600"],
  [class~="bg-purple-600"],
  [class~="bg-success"],
  [class~="bg-error"]) :where([class~="text-white"]),
  html[data-theme="light"] :where([class~="text-white"][class~="bg-brand"],
  [class~="text-white"][class~="bg-brand/90"],
  [class~="text-white"][class~="bg-orange-600"],
  [class~="text-white"][class~="bg-orange-500"],
  [class~="text-white"][class~="bg-red-600"],
  [class~="text-white"][class~="bg-red-600/80"],
  [class~="text-white"][class~="bg-red-500"],
  [class~="text-white"][class~="bg-green-600"],
  [class~="text-white"][class~="bg-green-600/80"],
  [class~="text-white"][class~="bg-blue-600"],
  [class~="text-white"][class~="bg-purple-600"],
  [class~="text-white"][class~="bg-success"],
  [class~="text-white"][class~="bg-error"]) {
    color: rgb(var(--theme-on-action)) !important;
  }

  html[data-theme="light"] :where([class~="placeholder-gray-400"])::placeholder {
    color: rgb(var(--theme-subtle-fg)) !important;
  }

  html[data-theme="light"] :where([class~="focus:ring-offset-dark"],
  [class~="focus:ring-offset-dark-950"],
  [class~="focus:ring-offset-neutral-900"],
  [class~="focus-visible:ring-offset-dark-950"]) {
    --tw-ring-offset-color: rgb(var(--theme-bg)) !important;
  }

  html[data-theme="light"] :where([class~="prose-invert"]) {
    --tw-prose-body: rgb(var(--theme-muted-fg));
    --tw-prose-headings: rgb(var(--theme-fg));
    --tw-prose-lead: rgb(var(--theme-muted-fg));
    --tw-prose-links: rgb(var(--theme-accent));
    --tw-prose-bold: rgb(var(--theme-fg));
    --tw-prose-counters: rgb(var(--theme-subtle-fg));
    --tw-prose-bullets: rgb(var(--theme-subtle-fg));
    --tw-prose-hr: rgb(var(--theme-border));
    --tw-prose-quotes: rgb(var(--theme-fg));
    --tw-prose-quote-borders: rgb(var(--theme-border));
    --tw-prose-captions: rgb(var(--theme-subtle-fg));
    --tw-prose-code: rgb(var(--theme-fg));
    --tw-prose-pre-code: rgb(var(--theme-fg));
    --tw-prose-pre-bg: rgb(var(--theme-muted));
    --tw-prose-th-borders: rgb(var(--theme-border));
    --tw-prose-td-borders: rgb(var(--theme-border));
  }

  /* Custom Scrollbar for Webkit (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgb(var(--theme-border));
    border-radius: 9999px;     /* Fully rounded pill shape */
    border: 2px solid transparent; /* Creates padding effect */
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--theme-subtle-fg));
  }

  /* Mobile safe area utilities for notched devices */
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Mobile drawer open state */
  #mobile-sources-drawer.open,
  #mobile-conversation-drawer.open {
    pointer-events: auto;
  }

  #mobile-sources-drawer:not(.open),
  #mobile-conversation-drawer:not(.open) {
    pointer-events: none;
  }
}

.highlight {
  background-color: rgb(var(--theme-muted));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  color: rgb(var(--theme-fg));
}

.highlight pre.highlight {
  margin: 0;
  padding: 0;
  background: transparent;
}

.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .kc,
.highlight .kv {
  color: #c084fc;
}

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .sx,
.highlight .dl {
  color: #86efac;
}

.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo,
.highlight .mb,
.highlight .il {
  color: #f97316;
}

.highlight .nf,
.highlight .fm,
.highlight .nx {
  color: #60a5fa;
}

.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs,
.highlight .ch,
.highlight .sd {
  color: #6b7280;
  font-style: italic;
}

.highlight .err {
  color: #f87171;
}

.highlight .gd {
  color: #f87171;
  background-color: rgba(248, 113, 113, 0.1);
}

.highlight .gi {
  color: #86efac;
  background-color: rgba(134, 239, 172, 0.1);
}

.highlight .nb,
.highlight .bp {
  color: #22d3ee;
}

.highlight .no,
.highlight .nc,
.highlight .nn {
  color: #fbbf24;
}

.highlight .na,
.highlight .nt {
  color: #f97316;
}

.highlight .o,
.highlight .ow {
  color: #94a3b8;
}

.highlight .p {
  color: #e5e7eb;
}

.highlight .ss {
  color: #c084fc;
}

.highlight .sr {
  color: #f87171;
}

.highlight .vi,
.highlight .vg,
.highlight .vc {
  color: #f87171;
}

.highlight .w {
  color: #e5e7eb;
}