/* Builder Page - Preview
 * Preview panel, controls, canvas, touch controls, and transition overlay
 */

/* Preview Panel */
.panel-preview {
  flex: 1;
  background: var(--color-background);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-focus-indicator {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-surface-light);
  transition: background-color 0.15s ease;
  z-index: var(--z-panel-chrome);
  pointer-events: none;
}

.panel-preview.focused .preview-focus-indicator {
  background: var(--color-accent);
}

.preview-controls {
  background: var(--color-surface);
  border-top: var(--border-width) var(--border-style) var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  height: var(--height-header);
}

.preview-controls-left {
  flex: 1;
}

.preview-controls-right {
  justify-content: flex-end;
  flex: 1;
}

/* Note: .button styles are in common/style.css */

/* Transition Overlay - covers canvas during play mode transitions */
/* Positioned within .preview-canvas-container to avoid covering controls */
.preview-transition-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
  pointer-events: none;
  /* High z-index to appear above canvas */
  z-index: 1000;
  /* Visibility and opacity controlled by JavaScript */
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  opacity: 0;
}

/* Touch Controls - uses base classes from common/style.css */

/* Canvas container - takes remaining space in flex layout */
.preview-canvas-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* Disable browser touch gestures (zoom, scroll) so custom orbit controls work */
  touch-action: none;
}

#three-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--color-background);
}

/* Overlay Container for Stats and Debug panels */
.preview-overlay-container {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-2);
  /* The canvas, less the panel's own gap top and bottom: the statistics
     panel's sections open to more rows than the preview is tall, and what
     does not fit scrolls (StatsPanel.css) instead of being clipped by the
     canvas container. */
  max-height: calc(100% - var(--space-2) * 2);
  z-index: var(--z-panel-chrome);
  pointer-events: none;
}

/* On a tablet the panels sit above the controls, so an open section never
   lands behind a button -- the play page keeps the same clearance. */
.preview-canvas-container:has(> .touch-controls) > .preview-overlay-container {
  bottom: calc(var(--space-2) * 2 + var(--joystick-size) + var(--safe-area-bottom));
  max-height: calc(100% - var(--space-2) * 3 - var(--joystick-size) - var(--safe-area-bottom));
}

/* And the controls still draw over the panels, so a layout that overlaps
   them anyway cannot cost a button its touch -- the statistics panel takes
   its own clicks now. Only the controls rise: the panels stay over the
   game's 2D HUD and the touch-look layer. An end screen keeps them under
   it, as it always has. */
.preview-canvas-container:not(:has(> .end-screen)) > .touch-controls {
  z-index: calc(var(--z-panel-chrome) + 1);
}

/* Debug Panel Base - shared by statistics and visualizer */
.preview-statistics,
.preview-visualizer {
  background: var(--overlay-black-75);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  display: none;
}

/* The statistics panel is a column: the title keeps its place while the body
   under it scrolls (StatsPanel.css). The visualizer is a plain block. */
.preview-statistics.visible {
  display: flex;
  /* Takes its own clicks back from the container, which passes them to the
     canvas: the panel's chevrons and its scrollbar are controls, and a
     control nothing can click is a panel that never opens. The visualizer
     has none, so it stays click-through. */
  pointer-events: auto;
}

.preview-visualizer.visible {
  display: block;
}

/* Shared debug panel styles */
.preview-debug-title {
  color: var(--color-text);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--overlay-white-25);
  padding-bottom: var(--space-1);
}

.preview-debug-row {
  display: flex;
}

/* Visualizer-specific styles */
.preview-visualizer .preview-debug-row {
  align-items: center;
  gap: var(--space-2);
}

.preview-visualizer-color {
  width: 12px;
  height: 3px;
  border-radius: 1px;
}

/* Box Selection */
.selection-box {
  position: absolute;
  border: 1px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  pointer-events: none;
  z-index: var(--z-canvas-gizmo);
}

/* Quick Action Container. Chrome tier: above the 2D gizmo (which is appended
   later in the same parent, so a tie would paint it over the open dropdown),
   below the panel-lock overlay so it darkens during an AI chat turn. */
.quick-action-container {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-panel-chrome);
}

/* Quick Action Button - matches .button with 25% transparent background */
.quick-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  color: var(--color-text);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  transition:
    all 0.15s ease,
    opacity 0.2s ease;
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1;
}

.quick-action-btn:hover {
  background: var(--color-surface-light);
}

.quick-action-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Quick Action Dropdown - matches .menu with 25% transparent background */
.quick-action-dropdown {
  position: absolute;
  top: calc(100% - var(--border-width));
  left: 0;
  min-width: 200px;
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-drop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  /* Start hidden, unfolding from the top. The unfold is a clip, not a
     scaleY: a transform under a backdrop-filter is the combination WebKit
     misrenders (blur sampled from the wrong place, corners left unclipped),
     and a clip reveals the menu without stretching its text on the way.
     The clip box reaches 15px past the menu on the sides it does not fold,
     so the drop shadow (4px down, 8px blur) is not cut off with it. */
  opacity: 0;
  clip-path: inset(-15px -15px 100% -15px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    clip-path 0.2s ease;
}

.quick-action-dropdown.open {
  opacity: 1;
  clip-path: inset(-15px);
  pointer-events: auto;
}

.quick-action-dropdown-inner {
  width: 100%;
}

.quick-action-menu {
  display: flex;
  flex-direction: column;
}

/* Quick Action Item - matches .menu-part-item */
.quick-action-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.quick-action-item:hover {
  background: var(--color-surface-light);
}

.quick-action-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-action-item-icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-dark);
}

.quick-action-item:hover .quick-action-item-icon svg {
  color: var(--color-text);
}

.quick-action-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.quick-action-item-label {
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-action-item-label u {
  text-decoration-color: var(--color-text-dark);
  text-underline-offset: 3px;
}

.quick-action-item-desc {
  color: var(--color-text-dark);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Submenu arrow */
.quick-action-item-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-action-item-arrow svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-dark);
}

.quick-action-item:hover .quick-action-item-arrow svg {
  color: var(--color-text);
}

/* Back button styling */
.quick-action-back .quick-action-item-label {
  font-weight: 500;
}

/* Divider - matches .menu-part-divider */
.quick-action-divider {
  height: 1px;
  background: color-mix(in srgb, var(--color-border) 50%, var(--color-border-light));
}

/* Hide during play mode */
.panel-preview.play-mode .quick-action-container {
  display: none;
}