/* Dialogue Forge Custom Scrollbar Styles */

/* Webkit browsers (Chrome, Safari, Edge) */
.dialogue-forge-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dialogue-forge-scrollbar::-webkit-scrollbar-track {
  background: rgba(15, 15, 25, 0.5);
  border-radius: 4px;
}

.dialogue-forge-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));
  border-radius: 4px;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.dialogue-forge-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.7), rgba(139, 92, 246, 0.7));
}

.dialogue-forge-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
.dialogue-forge-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.5) rgba(15, 15, 25, 0.5);
}

/* Thin variant for smaller containers */
.dialogue-forge-scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.dialogue-forge-scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.dialogue-forge-scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 2px;
}

.dialogue-forge-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}

.dialogue-forge-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.4) transparent;
}

/* Hide scrollbar but keep functionality */
.dialogue-forge-scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.dialogue-forge-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* React Flow Controls Styling */
.react-flow__controls {
  background: #0d0d14 !important;
  border: 1px solid #2a2a3e !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  padding: 4px !important;
  gap: 2px !important;
  display: flex !important;
  flex-direction: column !important;
}

.react-flow__controls-button {
  background: #12121a !important;
  border: 1px solid #2a2a3e !important;
  border-radius: 4px !important;
  width: 24px !important;
  height: 24px !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.react-flow__controls-button:hover {
  background: #1a1a2e !important;
  border-color: #3a3a4e !important;
}

.react-flow__controls-button svg {
  fill: #6b7280 !important;
  max-width: 14px !important;
  max-height: 14px !important;
}

.react-flow__controls-button:hover svg {
  fill: #e5e7eb !important;
}