/* HG_DESKTOP_PANELS_V1 */

/* A creator session is a focused full scene, not another draggable utility
   window.  This file loads last, so it intentionally wins over the generic
   drawer and mobile-sheet rules. */
#hgCreatorModal .hg-v2-modal-card.is-studio {
  width: min(1440px, calc(100vw - 24px));
  height: calc(100dvh - 24px);
  border-radius: 22px;
}

#hgCreatorModal .hg-v2-modal-card.is-studio > header {
  position: absolute !important;
  top: 14px;
  right: 14px;
}

@media (min-width: 721px) and (pointer: fine) {
  html.hg-desktop-panels [data-hg-desktop-drag-handle] {
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  html.hg-desktop-panels [data-hg-desktop-drag-handle]:active,
  html.hg-desktop-panels .hg-window-dragging [data-hg-desktop-drag-handle] {
    cursor: grabbing;
  }

  html.hg-desktop-panels #cityMapDock > header::after,
  html.hg-desktop-panels #streetChatDock > header::after,
  html.hg-desktop-panels #gamePanel > .panel-header::after,
  html.hg-desktop-panels #hgCreatorModal .hg-v2-modal-card > header::after {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: rgba(234, 246, 240, 0.38);
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  html.hg-desktop-panels #cityMapDock > header,
  html.hg-desktop-panels #streetChatDock > header,
  html.hg-desktop-panels #gamePanel > .panel-header,
  html.hg-desktop-panels #hgCreatorModal .hg-v2-modal-card > header {
    position: relative;
  }

  html.hg-desktop-panels .hg-window-positioned {
    z-index: var(--hg-window-z, 80) !important;
    translate: var(--hg-window-x, 0px) var(--hg-window-y, 0px);
    will-change: translate;
  }

  html.hg-desktop-panels .hg-window-dragging {
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.62) !important;
    transition: none !important;
  }

  html.hg-desktop-panels #onboarding .onboarding-copy.hg-window-positioned {
    z-index: var(--hg-window-z, 90) !important;
  }

  html.hg-desktop-panels #hgCreatorModal .hg-v2-modal-card.hg-window-positioned {
    z-index: var(--hg-window-z, 96) !important;
  }

  html.hg-desktop-panels #hgCreatorModal .hg-v2-modal-card.is-studio.hg-window-positioned {
    translate: 0 0 !important;
  }

  html.hg-desktop-panels #hgCreatorModal .hg-v2-modal-card.is-studio > header::after {
    content: none;
  }
}

@media (max-width: 720px) {
  #hgCreatorModal .hg-v2-modal-card.is-studio {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  #hgCreatorModal .hg-v2-modal-card.is-studio > header {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.hg-desktop-panels .hg-window-positioned {
    transition: none !important;
  }
}