/* =========================================================
   SEEMOTIONS — GLOBAL SURFACES V1

   Controls only:
   1. Native scrollbar appearance in Day/Night.
   2. Scrollbar gutter behavior inside trays and popovers.
   3. Theme-safe empty states.

   No component layout, generation state or provider logic.
   ========================================================= */

html[data-theme="night"] {
  color-scheme: dark;

  --sm-global-scroll-thumb:
    rgba(251, 251, 251, 0.18);

  --sm-global-scroll-hover:
    rgba(251, 251, 251, 0.30);

  --sm-global-scroll-active:
    rgba(245, 110, 15, 0.66);

  --sm-global-empty-text:
    rgba(251, 251, 251, 0.48);

  --sm-global-empty-title:
    rgba(251, 251, 251, 0.82);

  --sm-global-empty-panel:
    rgba(255, 255, 255, 0.022);

  --sm-global-empty-line:
    rgba(255, 255, 255, 0.075);
}

html[data-theme="day"] {
  color-scheme: light;

  --sm-global-scroll-thumb:
    rgba(20, 20, 20, 0.20);

  --sm-global-scroll-hover:
    rgba(20, 20, 20, 0.34);

  --sm-global-scroll-active:
    rgba(245, 110, 15, 0.72);

  --sm-global-empty-text:
    rgba(20, 20, 20, 0.48);

  --sm-global-empty-title:
    rgba(20, 20, 20, 0.82);

  --sm-global-empty-panel:
    rgba(20, 20, 20, 0.022);

  --sm-global-empty-line:
    rgba(20, 20, 20, 0.085);
}

html,
body {
  color-scheme: inherit;
}

/*
  Universal scrollbar theme.

  Components that intentionally hide their scrollbar already use more
  specific selectors such as .stage-canvas { scrollbar-width:none; } and
  remain hidden.
*/
* {
  scrollbar-color:
    var(--sm-global-scroll-thumb)
    transparent;
}

/* Chromium / Safari / WebKit */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  min-height: 36px;

  border:
    2px solid transparent;

  border-radius: 999px;

  background:
    var(--sm-global-scroll-thumb);

  background-clip:
    padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background:
    var(--sm-global-scroll-hover);

  background-clip:
    padding-box;
}

*::-webkit-scrollbar-thumb:active {
  background:
    var(--sm-global-scroll-active);

  background-clip:
    padding-box;
}

/*
  Safari and iPad may reserve a light scrollbar gutter even in Night Mode.
  Disable the permanent gutter and explicitly inherit the current scheme.
*/
html[data-theme="night"]
:is(
  #cmdModelMenu,
  .csp-model-menu,
  .sm-ref-v1-panel,
  .sm-ref-v1-panel-body,
  .sm-ref-v1-autocomplete,
  .sm-ref-v2-inspector,
  .sm-project-switcher,
  .sm-projects-overlay,
  .sm-projects-shell,
  .sm-project-card-menu,
  .preview-side,
  .pp-text,
  #smV5Mount .sm-v5-tray,
  #smV5Mount .sm-v5-popover,
  #smV5Mount .sm-v5-model-pop,
  #smV5Mount .sm-v5-add-pop,
  #smV5Mount .sm-v5-enhance-pop
) {
  color-scheme: dark !important;
  scrollbar-gutter: auto !important;

  scrollbar-color:
    rgba(251, 251, 251, 0.18)
    transparent !important;
}

html[data-theme="day"]
:is(
  #cmdModelMenu,
  .csp-model-menu,
  .sm-ref-v1-panel,
  .sm-ref-v1-panel-body,
  .sm-ref-v1-autocomplete,
  .sm-ref-v2-inspector,
  .sm-project-switcher,
  .sm-projects-overlay,
  .sm-projects-shell,
  .sm-project-card-menu,
  .preview-side,
  .pp-text,
  #smV5Mount .sm-v5-tray,
  #smV5Mount .sm-v5-popover,
  #smV5Mount .sm-v5-model-pop,
  #smV5Mount .sm-v5-add-pop,
  #smV5Mount .sm-v5-enhance-pop
) {
  color-scheme: light !important;
  scrollbar-gutter: auto !important;

  scrollbar-color:
    rgba(20, 20, 20, 0.20)
    transparent !important;
}

/* Legacy model picker had its own high-specificity white scrollbar. */

html[data-theme="night"]
#cmdModelMenu::-webkit-scrollbar-track {
  background: transparent !important;
}

html[data-theme="night"]
#cmdModelMenu::-webkit-scrollbar-thumb {
  border:
    2px solid transparent !important;

  background:
    rgba(251, 251, 251, 0.18) !important;

  background-clip:
    padding-box !important;
}

html[data-theme="day"]
#cmdModelMenu::-webkit-scrollbar-track {
  background: transparent !important;
}

html[data-theme="day"]
#cmdModelMenu::-webkit-scrollbar-thumb {
  border:
    2px solid transparent !important;

  background:
    rgba(20, 20, 20, 0.20) !important;

  background-clip:
    padding-box !important;
}

/* Command Bar V7 trays and popovers. */

#smV5Mount
:is(
  .sm-v5-tray,
  .sm-v5-popover
)::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

#smV5Mount
:is(
  .sm-v5-tray,
  .sm-v5-popover
)::-webkit-scrollbar-track {
  background: transparent !important;
}

html[data-theme="night"]
#smV5Mount
:is(
  .sm-v5-tray,
  .sm-v5-popover
)::-webkit-scrollbar-thumb {
  border:
    2px solid transparent !important;

  background:
    rgba(251, 251, 251, 0.18) !important;

  background-clip:
    padding-box !important;
}

html[data-theme="day"]
#smV5Mount
:is(
  .sm-v5-tray,
  .sm-v5-popover
)::-webkit-scrollbar-thumb {
  border:
    2px solid transparent !important;

  background:
    rgba(20, 20, 20, 0.20) !important;

  background-clip:
    padding-box !important;
}

/* Reference inspector and library scrolling. */

:is(
  .sm-ref-v1-panel,
  .sm-ref-v1-panel-body,
  .sm-ref-v1-autocomplete,
  .sm-ref-v1-library
)::-webkit-scrollbar-track {
  background: transparent !important;
}

html[data-theme="night"]
:is(
  .sm-ref-v1-panel,
  .sm-ref-v1-panel-body,
  .sm-ref-v1-autocomplete,
  .sm-ref-v1-library
)::-webkit-scrollbar-thumb {
  border:
    2px solid transparent !important;

  background:
    rgba(251, 251, 251, 0.18) !important;

  background-clip:
    padding-box !important;
}

html[data-theme="day"]
:is(
  .sm-ref-v1-panel,
  .sm-ref-v1-panel-body,
  .sm-ref-v1-autocomplete,
  .sm-ref-v1-library
)::-webkit-scrollbar-thumb {
  border:
    2px solid transparent !important;

  background:
    rgba(20, 20, 20, 0.20) !important;

  background-clip:
    padding-box !important;
}

/* ---------------------------------------------------------
   CANVAS EMPTY STATE

   The generation grid must never become a white rectangle in Night Mode.
   --------------------------------------------------------- */

#genGrid,
.gen-grid,
[data-generation-grid],
[data-output-grid] {
  background:
    transparent !important;
}

/* Canvas should stay visually open instead of displaying a giant panel. */
#genGrid > .empty-state {
  min-height:
    clamp(
      220px,
      34vh,
      360px
    ) !important;

  padding:
    48px 24px !important;

  border:
    0 !important;

  border-radius:
    18px !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    var(
      --sm-global-empty-text
    ) !important;
}

#genGrid > .empty-state h3 {
  color:
    var(
      --sm-global-empty-title
    ) !important;
}

#genGrid > .empty-state p {
  color:
    var(
      --sm-global-empty-text
    ) !important;
}

#genGrid > .empty-state svg {
  stroke:
    var(
      --sm-global-empty-text
    ) !important;
}

/*
  Other empty states may use a subtle themed surface, but must never use
  a fixed white or fixed black background.
*/
:is(
  .sm-ref-v1-empty,
  .sm-projects-empty,
  .sm-projects-loading
) {
  background:
    var(
      --sm-global-empty-panel
    ) !important;

  color:
    var(
      --sm-global-empty-text
    ) !important;

  border-color:
    var(
      --sm-global-empty-line
    ) !important;
}

:is(
  .sm-ref-v1-empty,
  .sm-projects-empty
) strong {
  color:
    var(
      --sm-global-empty-title
    ) !important;
}