/* =====================================================
   Frame — Unified Scrollbar Styling
   Applies to all tools & iframe previews
   ===================================================== */

/* WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--frame-bg, #0b0b0c);
}

::-webkit-scrollbar-thumb {
  background: var(--frame-border, #2a2a2d);
  border-radius: 10px;
  transition: background 0.15s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--frame-border-strong, #3a3a3f);
}

/* Corner where vertical + horizontal meet */
::-webkit-scrollbar-corner {
  background: var(--frame-bg, #0b0b0c);
}

/* Firefox */
/* Only style scrollable regions, NOT the whole document */
.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: var(--frame-border) var(--frame-bg);
}

.scroll-area::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scroll-area::-webkit-scrollbar-track {
  background: var(--frame-bg);
}

.scroll-area::-webkit-scrollbar-thumb {
  background: var(--frame-border);
  border-radius: 10px;
}


/* Prevent flash of default scrollbar during load */
html {
  background-color: var(--frame-bg, #0b0b0c);
}

/* Optional: soften scrolling feel */
body {
  overscroll-behavior: none;
}