/* ═══════════════════════════════════════════════════════════════
   ChromaStage Studio v3.0.1 — Responsive & Mobile
   ═══════════════════════════════════════════════════════════════ */

/* Mid-size (1024 + below): collapse to 1 column + stop overflow */
@media (max-width: 1024px) {
  body.studio-body { overflow-x: hidden; }

  .studio-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 16px;
    max-width: 720px;
  }

  /* Stop any nested grid/flex item from blowing out the panel width.
     'min-width: 0' is the canonical fix for grid items that contain
     text or absolutely-sized children (e.g. the preview canvas
     which gets an inline width from preview.js fitPreviewCanvas). */
  .studio-left-panel,
  .studio-right-panel,
  .preview-stage,
  .preview-card-header,
  .settings-section,
  .settings-grid,
  .quickstart-bar,
  .step-card { min-width: 0; max-width: 100%; }

  .studio-right-panel {
    order: -1; /* Show preview above settings on mobile/tablet */
  }

  .studio-canvas-sticky {
    position: static;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  /* Tighter preview on tablets */
  .preview-canvas-wrap {
    max-width: 100%;
    height: 360px !important;
  }

  /* Center segmented controls can overflow — let them scroll horizontally
     rather than pushing the column wider. */
  .seg {
    overflow-x: auto;
    scrollbar-width: thin;
    max-width: 100%;
  }
  .seg button { min-width: 0; }

  /* 9-grid positioner: keep on right of its row on tablet widths */
  .position-visual-wrap { flex-wrap: wrap; }

  /* Lighter aurora on smaller GPUs */
  .aurora-blob { opacity: 0.3; filter: blur(70px); }
  .aurora-grid { display: none; }
}

/* Phones (768 and below): compact header + everything in a column */
@media (max-width: 768px) {
  body.studio-body { padding-bottom: 84px; }

  /* Header: 2 compact rows */
  .studio-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo tools"
      "tabs tabs";
    gap: 8px;
    padding: 8px 12px;
  }

  .studio-header-left { grid-area: logo; display: flex; align-items: center; gap: 8px; min-width: 0; }
  .studio-logo { min-width: 0; flex-shrink: 1; }
  .job-banner { grid-area: logo; display: none; } /* hidden on mobile to make room */
  .studio-header-right { grid-area: tools; display: flex; align-items: center; gap: 6px; }

  .mode-tabs-header {
    grid-area: tabs;
    width: 100%;
    justify-content: center;
  }

  .brand-title { font-size: 16px; }
  .logo-icon { font-size: 22px; }

  .studio-header-right { gap: 6px; }
  .studio-tool-btn, .wiki-pill { padding: 7px 10px; }
  .tool-label { display: none; }

  .mode-tab {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 7px 10px;
    font-size: 12.5px;
    gap: 5px;
  }

  /* Bottom bar: one compact line */
  .studio-bottom-bar { padding: 8px 12px; }

  .bottom-bar-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .summary-pill-group { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
  .summary-chip { padding: 4px 10px; font-size: 12px; flex-shrink: 0; }
  .chip-label { display: none; }
  .summary-chip:has(#sum-duration) { display: none; }
  .readiness-chip { font-size: 11.5px; }

  .render-cta-btn {
    flex-shrink: 0;
    padding: 9px 13px;
    font-size: 13px;
    border-radius: 10px;
    white-space: nowrap;
    gap: 5px;
  }
  .render-cta-btn::after { animation: none; display: none; }

  .person-preview {
    grid-template-columns: 1fr;
  }

  .style-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .opacity-slider-pill {
    grid-column: 1 / -1;
  }

  /* Text/Color/Size/Opacity stacked rows — wrap so width fits */
  .position-visual-wrap { flex-wrap: wrap; }
  .setting input[type="text"], .setting input[type="number"] { min-width: 0; max-width: 100%; }
  .slider-row { flex-wrap: wrap; }

  /* Aurora: smaller, cheaper */
  .aurora-blob { width: 70vw !important; height: 70vw !important; opacity: 0.24; }
  .aurora-grid { display: none; }

  /* Empty preview — tighter */
  .preview-empty { padding: 18px 14px; }
  .preview-empty-glyph { width: 92px; height: 72px; }
  .preview-empty-glyph > span:first-child { font-size: 32px; }
  .preview-empty-steps { font-size: 10px; }

  /* Tighter preview on phones — always fit the column */
  .preview-canvas-wrap {
    max-width: 100%;
    height: 320px !important;
    width: 100% !important;
  }

  /* Tighten card header so the title doesn't crowd the stage below */
  .preview-card-header { gap: 6px; margin-bottom: 10px; padding: 0; }
  .preview-title { font-size: 14px; }

  /* Give the empty state room from the header above and from the canvas below */
  .preview-empty { padding: 18px 14px 12px; }
  .preview-empty-title { font-size: 13.5px; line-height: 1.3; }

  /* Step cards: tighter padding on phones */
  .step-card { padding: 18px; }

  /* Make sure resolution/transition/format 3-up segs fit */
  .seg seg-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); }

  /* Background grid: 2 cols */
  .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  /* Toast + floating pill stay inside small screens */
  .toast-region { top: 10px; max-width: 92vw; }
  .render-floating-pill { right: 12px; bottom: 84px; }
}

@media (max-width: 480px) {
  .mode-full { display: none; }
  .mode-short { display: inline; }
  .render-cta-btn { padding: 9px 11px; font-size: 12.5px; }
  .step-card { padding: 16px; }
}