src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;750;900&family=Space+Grotesk:wght@400;500;650;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* Custom scrolling inside the panels */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.2);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.4);
}

/* Custom visual pulse for iframe indicators and outlines */
@keyframes outlinePulse {
  0%, 100% { outline-color: rgba(59, 130, 246, 0.8); }
  50% { outline-color: rgba(99, 102, 241, 0.9); }
}

.selected-element-pulse {
  outline: 2px solid rgba(59, 130, 246, 0.8);
  animation: outlinePulse 2s infinite;
}

/* Ensure parsed HTML templates inherit default clean resets, presenting a crisp, clean standard white browser background by default */
.visual-user-content {
  color-scheme: light;
  background-color: #ffffff;
  color: #0d1117;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* If the visual canvas viewport has a custom dark background utility (e.g. bg-slate-900, dark backgrounds) injected, we let .visual-user-content have a transparent background to inherit the custom background correctly */
#visual-canvas-viewport[class*="bg-slate-"] .visual-user-content,
#visual-canvas-viewport[class*="bg-zinc-"] .visual-user-content,
#visual-canvas-viewport[class*="bg-gray-"] .visual-user-content,
#visual-canvas-viewport[class*="bg-[#"] .visual-user-content,
#visual-canvas-viewport[class*="bg-neutral-"] .visual-user-content,
#visual-canvas-viewport[class*="bg-black"] .visual-user-content {
  background-color: transparent !important;
  color: inherit !important;
}

.visual-user-content input, 
.visual-user-content textarea, 
.visual-user-content select {
  color: inherit;
  background-color: transparent;
}

/* Guard the sidebar inputs, textareas, labels and toolbar elements against user-injected style bleeding */
#sidebar-widgets-panel,
#sidebar-widgets-panel *,
#builder-top-bar,
#builder-top-bar *,
#styling-config-fields-panel,
#styling-config-fields-panel * {
  /* Enforce standard dark theme color schemes */
  color-scheme: dark !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

/* Specific shield for input fields inside panels to guarantee text visibility (Image 2 and 3) */
#sidebar-widgets-panel input[type="text"],
#sidebar-widgets-panel input[type="number"],
#sidebar-widgets-panel input[type="color"],
#sidebar-widgets-panel textarea,
#sidebar-widgets-panel select,
#styling-config-fields-panel input[type="text"],
#styling-config-fields-panel input[type="number"],
#styling-config-fields-panel input[type="color"],
#styling-config-fields-panel textarea,
#styling-config-fields-panel select {
  color: #ffffff !important;
  background-color: #181a1c !important;
  border: 1px solid #27272a !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

#sidebar-widgets-panel input[type="text"]::placeholder,
#sidebar-widgets-panel textarea::placeholder,
#styling-config-fields-panel input[type="text"]::placeholder,
#styling-config-fields-panel textarea::placeholder {
  color: #52525b !important;
}

#sidebar-widgets-panel input[type="text"]:focus,
#sidebar-widgets-panel textarea:focus,
#styling-config-fields-panel input[type="text"]:focus,
#styling-config-fields-panel textarea:focus {
  border-color: #ec4899 !important; /* Glow on focus mimicking tailwind focus:border-pink-500 */
}

/* Custom CSS to control floating action buttons at top-right with state triggers based on active hover */
#visual-canvas-viewport .hover-buttons-container {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 50 !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
  opacity: 1 !important;
  transition: box-shadow 120ms ease-in-out, opacity 120ms ease-in-out !important;
}

#visual-canvas-viewport .hover-buttons-container:hover {
  opacity: 0.8 !important;
}

#visual-canvas-viewport .hover-buttons-container button,
#visual-canvas-viewport .hover-buttons-container > div {
  opacity: 0 !important;
  transform: scale(0.95) !important;
  transition: opacity 120ms ease-in-out, transform 120ms ease-in-out !important;
}

.visual-user-content:hover .hover-buttons-container button,
#visual-canvas-viewport:hover .hover-buttons-container button,
#visual-canvas-viewport .hover-buttons-container:hover button,
.visual-user-content:hover .hover-buttons-container > div,
#visual-canvas-viewport:hover .hover-buttons-container > div,
#visual-canvas-viewport .hover-buttons-container:hover > div {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.visual-user-content:hover .hover-buttons-container,
#visual-canvas-viewport:hover .hover-buttons-container,
#visual-canvas-viewport .hover-buttons-container:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Custom Tooltips for hover buttons menu */
#visual-canvas-viewport .hover-buttons-container button[data-tooltip],
#visual-canvas-viewport .hover-buttons-container div[data-tooltip] {
  position: relative !important;
}

#visual-canvas-viewport .hover-buttons-container button[data-tooltip]::after,
#visual-canvas-viewport .hover-buttons-container div[data-tooltip]::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) scale(0.9) !important;
  background: linear-gradient(135deg, #2a2b2e 0%, #151618 100%) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 120ms ease-in-out, transform 120ms ease-in-out !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  z-index: 60 !important;
}

#visual-canvas-viewport .hover-buttons-container button[data-tooltip]:hover::after,
#visual-canvas-viewport .hover-buttons-container div[data-tooltip]:hover::after {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

#visual-canvas-viewport .hover-buttons-container button[data-tooltip]::before,
#visual-canvas-viewport .hover-buttons-container div[data-tooltip]::before {
  content: "" !important;
  position: absolute !important;
  bottom: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  border-width: 4px 4px 0 4px !important;
  border-style: solid !important;
  border-color: #151618 transparent transparent transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 120ms ease-in-out, transform 120ms ease-in-out !important;
  z-index: 60 !important;
}

#visual-canvas-viewport .hover-buttons-container button[data-tooltip]:hover::before,
#visual-canvas-viewport .hover-buttons-container div[data-tooltip]:hover::before {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}