/* Builder Page - Core Layout
 * Body, top panel overrides, main layout container, dividers, and responsive adjustments
 */

body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
  /* No footer on this page (see --notice-bottom, common/style.css). */
  --notice-bottom: var(--notice-bottom-bare);
}

/* Top Panel - override fixed positioning for flex layout */
.panel-menu {
  position: relative;
  flex-shrink: 0;
}

/* The hamburger button, its menu's position, and the show-at-768px swap
   of the toolbar's icon row for the button all live in common/style.css,
   shared with the global header's menu. */

/* Import/Export menu positioning. The container is intentionally NOT positioned,
   so the menu -- like the hamburger -- anchors to .panel-menu: it hangs from the
   bar (the shared header-dropdown rule in common/style.css sets the top) and
   right-aligns to the bar's right edge. */
.menu-inst-import-export {
  right: 0;
}

/* Folded by fit (builder.js #fitToolbar), not by the screen: where the
   clusters and the project name do not fit side by side, the left cluster
   and undo/redo/copy/paste go into the hamburger menu, which lists them
   all. */
.panel-menu.toolbar-folded .hamburger-button {
  display: flex;
}

.panel-menu.toolbar-folded .buttons-desktop,
.panel-menu.toolbar-folded #undo-button,
.panel-menu.toolbar-folded #redo-button,
.panel-menu.toolbar-folded #copy-button,
.panel-menu.toolbar-folded #paste-button {
  display: none;
}

/* The hamburger button carries --space-2 of internal padding, so --space-1
   outside lands its icon on the same 15px edge as the footer's EULA link. */
.panel-menu.toolbar-folded .panel-left {
  padding-left: var(--space-1);
}

/* The project name deliberately has no mobile override: it keeps the shared
   rule's absolute centering at every width, so it sits on the bar's true
   center instead of the center of whatever space the (unequal) hamburger and
   save/share clusters leave over. */
.project-name {
  cursor: default;
  padding: var(--space-2);
  background: transparent;
  border: var(--border-width) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  outline: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  height: var(--height-input);
  /* A block box, not a flex one: text-overflow only ellipsizes the inline
     content of a block container, so as a flex box the name just clipped --
     and clipped at both ends, since a centered overflowing flex item spills
     evenly either side. That leaves the line box to do the vertical centering
     flex's align-items used to do, so give it the content box's full height. */
  display: block;
  text-align: center;
  line-height: calc(var(--height-input) - 2 * var(--space-2) - 2 * var(--border-width));
  /* Sitting on the bar's true center, the name has to keep the width of the
     wider button cluster free on BOTH sides, or it runs under the buttons:
     --project-name-max is what they leave, measured (builder.js
     #fitToolbar). Past it, or past the cap, the name ellipsizes. */
  max-width: min(400px, var(--project-name-max, 400px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The pose the toolbar is measured in: the name at its own width, up to the
   cap, so the read says what it needs rather than what it was given. */
.panel-menu.measuring .project-name {
  max-width: 400px;
}

@media (hover: hover) {
  .project-name:hover {
    background: var(--color-background);
    cursor: text;
  }
}

.project-name[contenteditable='true'] {
  background: var(--color-background);
  border-color: var(--color-border);
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

.project-name[contenteditable='true']:focus {
  border-color: var(--color-accent);
}

.project-name.unsaved::before {
  content: '•\00a0';
  color: var(--color-text-dark);
}

.project-name.unsaved::after {
  content: '\00a0•';
  color: var(--color-text-dark);
}

/* Main layout container */
.builder-layout {
  display: flex;
  flex: 1;
  min-height: 0; /* Required for flex child overflow to work */
  background: var(--color-background);
  color: var(--color-text);
  overflow: hidden;
}

/* Safe area padding is applied to internal panel content, not the panel container,
   so the panel background extends to the window edge while content stays in safe area.
   See BuilderPanelAssets.css and BuilderPanelChat.css for the internal padding rules. */

/* Resizable Divider */
.divider {
  width: var(--space-1);
  background: var(--color-border);
  cursor: col-resize;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) {
  .divider:hover {
    background: var(--color-accent);
  }
}

.divider.dragging {
  background: var(--color-accent);
}

/* Collapse button on divider */
.divider-collapse-btn {
  position: absolute;
  width: 20px;
  height: 32px;
  padding: 0;
  background: var(--color-surface);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  z-index: 200;
}

/* Safari/iOS requires explicit SVG dimensions */
.divider-collapse-btn svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .divider-collapse-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
}

/* Position collapse buttons on outer edges (landscape default) */
/* Assets button: on right edge of left divider (towards preview) */
.divider-left .collapse-btn-assets {
  right: calc(-1 * var(--space-4));
  border-left: none;
}

/* Chat button: on left edge of right divider (towards preview) */
.divider-right .collapse-btn-chat {
  left: calc(-1 * var(--space-4));
  border-right: none;
}

/* Disable left divider when assets panel is collapsed (nothing to resize) */
.builder-layout:has(.panel-assets.collapsed) > .divider-left {
  cursor: default;
}

/* Disable right divider when chat panel is collapsed (nothing to resize) */
.builder-layout:has(.panel-chat.collapsed) > .divider-right {
  cursor: default;
}

@media (hover: hover) {
  .builder-layout:has(.panel-assets.collapsed) > .divider-left:hover {
    background: var(--color-border);
  }

  .builder-layout:has(.panel-assets.collapsed) > .divider-left:has(.divider-collapse-btn:hover) {
    background: var(--color-accent);
  }

  .builder-layout:has(.panel-chat.collapsed) > .divider-right:hover {
    background: var(--color-border);
  }

  .builder-layout:has(.panel-chat.collapsed) > .divider-right:has(.divider-collapse-btn:hover) {
    background: var(--color-accent);
  }
}

/* Portrait mode: hide assets button on left divider, show on right divider */
#assets-collapse-button-portrait {
  display: none;
}

/* Preview collapse button: hidden in landscape, shown in portrait */
#preview-collapse-button {
  display: none;
}

/* Preview Panel styles are in BuilderPanelPreview.css */

/* =============================================================================
   RESPONSIVE LAYOUT: Landscape vs Portrait

   Landscape (wider than tall): Assets | Preview | Chat (horizontal)
   Portrait (taller than wide):  Preview on top, Assets | Chat on bottom (split)
   ============================================================================= */

/* Landscape Layout (default - viewport wider than tall) */
@media (min-aspect-ratio: 1/1) {
  .builder-layout {
    flex-direction: row;
  }

  .panel-assets {
    order: 0;
    height: auto;
    border-right: var(--border-width) var(--border-style) var(--color-border);
    border-top: none;
  }

  .divider-left {
    order: 1;
    width: var(--space-1);
    height: auto;
    cursor: col-resize;
  }

  .panel-preview {
    order: 2;
    flex: 1;
  }

  .divider-right {
    order: 3;
    width: var(--space-1);
    height: auto;
    cursor: col-resize;
  }

  .panel-chat {
    order: 4;
    height: auto;
    border-left: var(--border-width) var(--border-style) var(--color-border);
    border-top: none;
  }

  /* When assets panel is collapsed, add safe area margin to left divider */
  .builder-layout:has(.panel-assets.collapsed) > .divider-left {
    margin-left: var(--safe-area-left);
  }

  /* When chat panel is collapsed, add safe area margin to right divider */
  .builder-layout:has(.panel-chat.collapsed) > .divider-right {
    margin-right: var(--safe-area-right);
  }
}

/* Portrait Layout (viewport taller than wide, but less than 2.5:1) - Use CSS Grid */
@media (max-aspect-ratio: 1/1) and (min-aspect-ratio: 2/5) {
  .builder-layout {
    display: grid;
    grid-template-columns: 1fr var(--space-1) 1fr;
    grid-template-rows: 1fr var(--space-1) 1fr;
    grid-template-areas:
      'preview preview preview'
      'divider-h divider-h divider-h'
      'assets divider-v chat';
  }

  .panel-preview {
    grid-area: preview;
    min-height: 0;
    width: 100%;
  }

  .divider-left {
    grid-area: divider-h;
    width: 100%;
    height: var(--space-1);
    cursor: row-resize;
  }

  /* Hide assets button on horizontal divider, show on vertical */
  #assets-collapse-button-landscape {
    display: none;
  }

  #assets-collapse-button-portrait {
    display: flex;
  }

  /* Preview collapse button: hidden by default, shown when a side panel is collapsed */
  #preview-collapse-button {
    display: none;
    top: auto;
    bottom: calc(-1 * var(--space-4));
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 20px;
    border-top: none;
    border-bottom: var(--border-width) var(--border-style) var(--color-border);
  }

  #preview-collapse-button svg {
    width: 16px;
    height: 16px;
  }

  /* Show preview collapse button only when assets or chat panel is collapsed */
  .builder-layout:has(.panel-assets.collapsed) #preview-collapse-button,
  .builder-layout:has(.panel-chat.collapsed) #preview-collapse-button {
    display: flex;
  }

  .builder-layout > .panel-assets {
    grid-area: assets;
    width: unset !important;
    max-width: none !important;
    height: unset;
    border-right: none;
    border-top: none;
    justify-self: stretch;
    align-self: stretch;
    padding-bottom: var(--safe-area-bottom);
  }

  .builder-layout > .divider-right {
    grid-area: divider-v;
    width: var(--space-1);
    height: unset;
    cursor: default;
    justify-self: stretch;
    align-self: stretch;
  }

  @media (hover: hover) {
    .builder-layout > .divider-right:hover {
      background: var(--color-border);
    }

    .builder-layout > .divider-right:has(.divider-collapse-btn:hover) {
      background: var(--color-accent);
    }
  }

  /* Position buttons horizontally on outer edges of vertical divider */
  .builder-layout > .divider-right .collapse-btn-chat {
    top: calc(50% - 16px);
    right: calc(-1 * var(--space-4));
    left: auto;
    border-left: none;
    border-right: var(--border-width) var(--border-style) var(--color-border);
  }

  .builder-layout > .divider-right .collapse-btn-assets {
    top: calc(50% - 16px);
    left: calc(-1 * var(--space-4));
    right: auto;
    border-right: none;
    border-left: var(--border-width) var(--border-style) var(--color-border);
  }

  .builder-layout > .panel-chat {
    grid-area: chat;
    width: unset !important;
    max-width: none !important;
    height: unset;
    border-left: none;
    border-top: none;
    justify-self: stretch;
    align-self: stretch;
    padding-bottom: var(--safe-area-bottom);
  }

  /* When assets is collapsed in portrait, move divider to left edge (with safe area) */
  .builder-layout:has(.panel-assets.collapsed) {
    grid-template-columns: var(--safe-area-left) var(--space-1) 1fr;
  }

  /* When chat is collapsed in portrait, move divider to right edge (with safe area) */
  .builder-layout:has(.panel-chat.collapsed) {
    grid-template-columns: 1fr var(--space-1) var(--safe-area-right);
  }

  /* When both are collapsed */
  .builder-layout:has(.panel-assets.collapsed):has(.panel-chat.collapsed) {
    grid-template-columns: var(--safe-area-left) var(--space-1) var(--safe-area-right);
  }

  /* In portrait, when one panel is collapsed, hide the other panel's collapse button */
  /* (divider is at edge, so only show expand button for collapsed panel) */
  .builder-layout:has(.panel-assets.collapsed) #chat-collapse-button {
    display: none;
  }

  .builder-layout:has(.panel-chat.collapsed) #assets-collapse-button-portrait {
    display: none;
  }

  /* When collapsed, flip button to visible side of divider */
  .builder-layout:has(.panel-assets.collapsed) #assets-collapse-button-portrait {
    left: auto;
    right: calc(-1 * var(--space-4));
    border-left: none;
    border-right: var(--border-width) var(--border-style) var(--color-border);
  }

  .builder-layout:has(.panel-chat.collapsed) #chat-collapse-button {
    right: auto;
    left: calc(-1 * var(--space-4));
    border-right: none;
    border-left: var(--border-width) var(--border-style) var(--color-border);
  }

  /* When preview is expanded, collapse the bottom row */
  .builder-layout:has(.panel-preview.expanded) {
    grid-template-rows: 1fr var(--space-1) 0;
  }

  /* Hide bottom panels when preview is expanded */
  .builder-layout:has(.panel-preview.expanded) > .panel-assets,
  .builder-layout:has(.panel-preview.expanded) > .panel-chat,
  .builder-layout:has(.panel-preview.expanded) > .divider-right {
    display: none;
  }

  /* Disable horizontal divider when preview is expanded (nothing to resize) */
  .builder-layout:has(.panel-preview.expanded) > .divider-left {
    cursor: default;
  }

  @media (hover: hover) {
    .builder-layout:has(.panel-preview.expanded) > .divider-left:hover {
      background: var(--color-border);
    }

    .builder-layout:has(.panel-preview.expanded) > .divider-left:has(.divider-collapse-btn:hover) {
      background: var(--color-accent);
    }
  }

  /* When expanded, flip button to top of divider */
  .builder-layout:has(.panel-preview.expanded) #preview-collapse-button {
    bottom: auto;
    top: calc(-1 * var(--space-4));
    border-bottom: none;
    border-top: var(--border-width) var(--border-style) var(--color-border);
  }

  /* Add extra gap between pause/play buttons when expanded to make room for collapse button */
  .builder-layout:has(.panel-preview.expanded) .preview-controls-center {
    gap: calc(var(--grid-unit) * 9);
  }
}

/* Tall Portrait Layout (viewport 2.5x taller than wide or more) - Vertical Stack */
@media (max-aspect-ratio: 2/5) {
  .builder-layout {
    display: flex;
    flex-direction: column;
  }

  .builder-layout > .panel-preview {
    order: 0;
    flex: 1;
    min-height: 0;
  }

  .builder-layout > .divider-left {
    order: 1;
    width: 100%;
    height: var(--space-1);
    cursor: row-resize;
  }

  .builder-layout > .panel-chat {
    order: 2;
    flex: 1;
    width: 100% !important;
    max-width: none !important;
    height: unset;
    min-height: 0;
    border-left: none;
    border-top: none;
  }

  .builder-layout > .divider-right {
    order: 3;
    width: 100%;
    height: var(--space-1);
    cursor: row-resize;
  }

  .builder-layout > .panel-assets {
    order: 4;
    flex: 1;
    width: 100% !important;
    max-width: none !important;
    height: unset;
    min-height: 0;
    border-right: none;
    border-top: none;
    padding-bottom: var(--safe-area-bottom);
  }

  /* Hide collapse buttons in tall portrait mode */
  .divider-collapse-btn {
    display: none;
  }
}

/* Panel lock overlay: darkens + disables a panel while another surface owns
   the session. Play mode locks menu/assets/chat (BuilderPanelPreviewMenu);
   an in-flight AI chat turn locks menu/assets/preview (BuilderPanelChat).
   --z-panel-lock tops the canvas-stack z scale (see style.css) so the lock
   also covers the 2D game-UI layer — fixed-position beside the canvas, in
   a container that is no stacking context, so it competes with this
   panel-scoped overlay in the root one. */
.panel-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-black-75);
  z-index: var(--z-panel-lock);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.panel-lock-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Asset attribution "(i)" button — uses the global .button.button-icon look;
   this only positions it as a compact overlay in the top-right of its
   position:relative host (Asset Finder tiles, Assets Panel preview). */
.asset-author-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--space-4);
  height: var(--space-4);
  padding: 0;
  z-index: 1;
}

.asset-author-button svg {
  width: var(--space-4);
  height: var(--space-4);
}

/* Preset modal (BuilderModalPreset): stacked preset sections, each a
   label + select column. */
.add-asset-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.asset-component-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}