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

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