/* VS Code–style overlay scrollbars: hidden until hover / scroll */

:root {
  --vs-scrollbar-size: 10px;
  --vs-scrollbar-thumb: transparent;
  --vs-scrollbar-thumb-hover: rgba(121, 121, 121, 0.42);
  --vs-scrollbar-thumb-scroll: rgba(121, 121, 121, 0.52);
  --vs-scrollbar-thumb-active: rgba(191, 191, 191, 0.62);
}

/* —— Firefox —— */
.scroll-area,
.chat-messages,
.chat-task-bar,
.settings-body,
.workspace-web-preview-pane,
.workspace-preview-pane,
.tool-log-panel,
.file-tree,
.file-editor-area,
.file-editor-highlight,
.chat-code,
.json-pane,
.web-preview-body,
.context-preview,
.image-asset-body,
html.app-view-compose {
  scrollbar-width: thin;
  scrollbar-color: var(--vs-scrollbar-thumb) transparent;
}

.scroll-area:hover,
.chat-messages:hover,
.chat-task-bar:hover,
.settings-body:hover,
.workspace-preview-pane:hover,
.web-preview-body:hover,
.tool-log-panel:hover,
.file-tree:hover,
.file-editor-area:hover,
.file-editor-highlight:hover,
.chat-code:hover,
.json-pane:hover,
.context-preview:hover,
.image-asset-body:hover,
html.app-view-compose:hover,
.is-scrolling {
  scrollbar-color: var(--vs-scrollbar-thumb-hover) transparent;
}

.is-scrolling {
  scrollbar-color: var(--vs-scrollbar-thumb-scroll) transparent;
}

/* —— WebKit / Chromium —— */
.scroll-area::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.chat-task-bar::-webkit-scrollbar,
.settings-body::-webkit-scrollbar,
.workspace-preview-pane::-webkit-scrollbar,
.web-preview-body::-webkit-scrollbar,
.tool-log-panel::-webkit-scrollbar,
.file-tree::-webkit-scrollbar,
.file-editor-area::-webkit-scrollbar,
.file-editor-highlight::-webkit-scrollbar,
.chat-code::-webkit-scrollbar,
.json-pane::-webkit-scrollbar,
.context-preview::-webkit-scrollbar,
.image-asset-body::-webkit-scrollbar,
html.app-view-compose::-webkit-scrollbar {
  width: var(--vs-scrollbar-size);
  height: var(--vs-scrollbar-size);
  background: transparent;
}

.scroll-area::-webkit-scrollbar-corner,
.chat-messages::-webkit-scrollbar-corner,
.file-editor-area::-webkit-scrollbar-corner,
.file-editor-highlight::-webkit-scrollbar-corner,
.chat-code::-webkit-scrollbar-corner {
  background: transparent;
}

.scroll-area::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.chat-task-bar::-webkit-scrollbar-track,
.settings-body::-webkit-scrollbar-track,
.workspace-preview-pane::-webkit-scrollbar-track,
.web-preview-body::-webkit-scrollbar-track,
.tool-log-panel::-webkit-scrollbar-track,
.file-tree::-webkit-scrollbar-track,
.file-editor-area::-webkit-scrollbar-track,
.file-editor-highlight::-webkit-scrollbar-track,
.chat-code::-webkit-scrollbar-track,
.json-pane::-webkit-scrollbar-track,
.context-preview::-webkit-scrollbar-track,
.image-asset-body::-webkit-scrollbar-track,
html.app-view-compose::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.chat-task-bar::-webkit-scrollbar-thumb,
.settings-body::-webkit-scrollbar-thumb,
.workspace-preview-pane::-webkit-scrollbar-thumb,
.web-preview-body::-webkit-scrollbar-thumb,
.tool-log-panel::-webkit-scrollbar-thumb,
.file-tree::-webkit-scrollbar-thumb,
.file-editor-area::-webkit-scrollbar-thumb,
.file-editor-highlight::-webkit-scrollbar-thumb,
.chat-code::-webkit-scrollbar-thumb,
.json-pane::-webkit-scrollbar-thumb,
.context-preview::-webkit-scrollbar-thumb,
.image-asset-body::-webkit-scrollbar-thumb,
html.app-view-compose::-webkit-scrollbar-thumb {
  background-color: var(--vs-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
}

.scroll-area:hover::-webkit-scrollbar-thumb,
.chat-messages:hover::-webkit-scrollbar-thumb,
.chat-task-bar:hover::-webkit-scrollbar-thumb,
.settings-body:hover::-webkit-scrollbar-thumb,
.workspace-preview-pane:hover::-webkit-scrollbar-thumb,
.web-preview-body:hover::-webkit-scrollbar-thumb,
.tool-log-panel:hover::-webkit-scrollbar-thumb,
.file-tree:hover::-webkit-scrollbar-thumb,
.file-editor-area:hover::-webkit-scrollbar-thumb,
.file-editor-highlight:hover::-webkit-scrollbar-thumb,
.chat-code:hover::-webkit-scrollbar-thumb,
.json-pane:hover::-webkit-scrollbar-thumb,
.context-preview:hover::-webkit-scrollbar-thumb,
.image-asset-body:hover::-webkit-scrollbar-thumb,
html.app-view-compose:hover::-webkit-scrollbar-thumb,
.is-scrolling::-webkit-scrollbar-thumb {
  background-color: var(--vs-scrollbar-thumb-hover);
}

.is-scrolling::-webkit-scrollbar-thumb {
  background-color: var(--vs-scrollbar-thumb-scroll);
}

.scroll-area::-webkit-scrollbar-thumb:active,
.chat-messages::-webkit-scrollbar-thumb:active,
.file-editor-area::-webkit-scrollbar-thumb:active,
.file-editor-highlight::-webkit-scrollbar-thumb:active,
.chat-code::-webkit-scrollbar-thumb:active {
  background-color: var(--vs-scrollbar-thumb-active);
}

/* Editor: thin scrollbar at content edge */
.code-editor-main .file-editor-area,
.code-editor-main .file-editor-highlight {
  scrollbar-gutter: auto;
}

/* Horizontal action strips stay chromeless on mobile */
.topbar-actions,
.panel-head-actions,
.chat-compose-actions {
  scrollbar-width: none;
}

.topbar-actions::-webkit-scrollbar,
.panel-head-actions::-webkit-scrollbar,
.chat-compose-actions::-webkit-scrollbar {
  display: none;
}