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

/* 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 */
}

/* Global styles and base typography */
html, body {
  @apply h-full;
}

body {
  @apply bg-dark text-white font-sans antialiased;
}

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

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

/* 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%;
}

/* 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;
}

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

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

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

  ::-webkit-scrollbar-thumb {
    background-color: #404040; /* dark-700 */
    border-radius: 9999px;     /* Fully rounded pill shape */
    border: 2px solid transparent; /* Creates padding effect */
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #525252; /* dark-600 */
  }

  /* 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: #111827;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  color: #e5e7eb;
}

.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;
}