/* ==========================================================================
   DockDock — Responsive Layer (Tablet & Mobile)
   --------------------------------------------------------------------------
   Everything here lives inside media queries, so the desktop experience
   (> 1180px) is byte-for-byte identical to what it was before.

   Core idea: the macOS stage is never reflowed. Its internals (dock, Finder,
   switcher, menu bar) stay at their exact desktop pixel geometry and the whole
   1040 x 650 screen is transform-scaled to fit the viewport. `--stage-scale`
   and `--stage-nat-h` are set by applyStageScale() in js/app.js.
   ========================================================================== */

/* ==========================================================================
   TABLET & BELOW — SCALED STAGE, NARROWER SIDEBAR
   ========================================================================== */
@media (max-width: 1180px) {

  :root {
    --sidebar-width: 320px;
  }

  .studio-canvas {
    padding: 26px 28px;
  }

  /* Drop the desktop viewport clamps, and let applyStageScale() decide how much
     desktop area the simulated screen shows. Falling back to the native
     1040x650 keeps this correct if the script has not run yet. */
  .macos-screen,
  .screen-frame-wrap.mode-macbook .macos-screen,
  .screen-frame-wrap.mode-imac .macos-screen {
    width: var(--stage-w, 1040px);
    height: var(--stage-h, 650px);
    max-width: none;
    max-height: none;
  }

  /* The wrap reserves exactly the scaled height so nothing else is pushed. */
  .screen-frame-wrap {
    height: calc(var(--stage-nat-h, 650px) * var(--stage-scale, 1));
  }

  /* Scaling from the centre keeps the stage optically centred inside the
     wrap even though its layout box is still full size. */
  #bare-screen-slot > .macos-screen,
  .device-shell-macbook {
    transform: scale(var(--stage-scale, 1));
    transform-origin: center center;
    flex-shrink: 0;
  }

  /* --- COMPACT SIMULATED DISPLAY -------------------------------------------
     .stage-compact is set by applyStageScale() when the simulated screen is
     too short for the Finder window at full size. Collapsing the sidebar buys
     the grid extra columns, so every app still fits without scrolling and the
     icons being previewed keep their full 54px. */
  .stage-compact .finder-sidebar {
    display: none;
  }

  .stage-compact #pane-finder {
    padding: 10px 14px 84px 14px;
  }

  .stage-compact .finder-grid {
    padding: 14px;
    gap: 14px;
  }

  /* Tightens the cell, never the 54px icon being previewed. */
  .stage-compact .f-app-item {
    padding: 4px 6px;
    gap: 6px;
  }
}

/* ==========================================================================
   STACKED LAYOUT — CANVAS ON TOP, CONTROLS BELOW
   ========================================================================== */
@media (max-width: 900px) {

  /* Let the document scroll instead of locking to a single viewport. */
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-container {
    width: 100%;
    height: auto;
    min-height: 100vh;
  }

  /* --- TOP BAR: three rows collapse into logo + actions, switcher beneath --- */
  .top-nav {
    position: static;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .nav-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
  }

  .nav-right {
    flex: 0 0 auto;
    gap: 8px;
  }

  /* The switcher island leaves its absolute centring and becomes a full-width,
     horizontally scrollable row. */
  .nav-center {
    position: static;
    transform: none;
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-center::-webkit-scrollbar {
    display: none;
  }

  /* flex:0 0 auto keeps the pill at its natural width so .nav-center can
     actually scroll it; without it the pill shrinks and clips its last view. */
  .view-switch-pill {
    flex: 0 0 auto;
    width: max-content;
    min-width: 100%;
    justify-content: space-between;
  }

  /* --- WORKSPACE: single column --- */
  .workspace {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .studio-canvas {
    flex: none;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px 20px;
  }

  /* The device pill sits above the stage instead of floating over it. */
  .device-frame-pill {
    position: static;
    align-self: center;
    flex: 0 0 auto;
  }

  .sidebar-panel {
    width: 100%;
    min-width: 0;
    height: auto;
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding: 18px 14px calc(24px + env(safe-area-inset-bottom, 0px));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  /* --- FORM CONTROLS: 16px keeps iOS Safari from zooming on focus --- */
  .app-header-left {
    flex: 1;
    min-width: 0;
  }

  .app-name-input {
    flex: 1;
    width: auto;
    min-width: 0;
    font-size: 16px;
  }

  .option-name-input {
    font-size: 16px;
  }

  input, textarea {
    -webkit-user-select: text;
    user-select: text;
  }

  /* --- WALLPAPER MODAL: preview pinned, only the gallery scrolls ------------
     Scrolling the whole sheet meant tapping a wallpaper then scrolling back up
     to reach Apply. Keeping the preview and Apply fixed and scrolling only the
     grid lets you try wallpapers and commit without ever leaving them. */
  .backdrop-modal-backdrop,
  .export-modal-backdrop {
    padding: 12px;
  }

  .backdrop-modal-dialog {
    width: 100%;
    max-width: none;
    /* Definite height, so the grid below has something to scroll within. */
    height: 92vh;
    max-height: 92vh;
  }

  .backdrop-modal-header,
  .export-modal-header {
    padding: 14px 16px 12px 16px;
  }

  .backdrop-modal-split-body {
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }

  .backdrop-left-panel {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 16px;
    gap: 10px;
  }

  .backdrop-right-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .backdrop-gallery-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* --- EXPORT MODAL --- */
  .export-modal-dialog {
    width: 100%;
    max-width: none;
  }

  .export-modal-body {
    padding: 14px;
  }

  .export-canvas-frame {
    max-height: none;
  }

  #modal-preview-canvas {
    max-height: 46vh;
  }

  .export-modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .modal-footer-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .export-modal-footer .btn-primary,
  .modal-footer-left .btn-secondary {
    width: 100%;
  }
}

/* ==========================================================================
   PHONES — TIGHTER CHROME
   ========================================================================== */
@media (max-width: 560px) {

  /* On phones the five labels only fit if the 13px glyphs step aside — having
     every view visible at once beats decorating a row that has to scroll. */
  .view-switch-btn {
    padding: 6px 9px;
    font-size: 11px;
    gap: 5px;
  }

  .view-switch-btn svg {
    display: none;
  }

  /* Social + backdrop pills go icon-only to keep the top row on one line. */
  .nav-right-divider {
    display: none;
  }

  .profile-badge span {
    display: none;
  }

  .profile-badge {
    padding: 7px 9px;
    gap: 0;
  }

  .backdrop-nav-label {
    display: none;
  }

  .backdrop-modal-subtitle,
  .export-modal-subtitle {
    display: none;
  }

  .backdrop-modal-title,
  .export-modal-title {
    font-size: 14.5px;
  }

  .backdrop-selector-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px 12px 16px;
  }

  .upload-custom-compact-btn {
    justify-content: center;
  }

  /* The nowrap category pills would otherwise set the panel's min width and
     push the whole sheet wider than the phone. */
  .backdrop-right-panel,
  .backdrop-selector-header {
    min-width: 0;
  }

  .backdrop-category-tabs {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .backdrop-category-tabs::-webkit-scrollbar {
    display: none;
  }

  /* minmax(0,1fr) lets the tracks shrink past the card titles' min-content,
     which otherwise forces the sheet wider than a 320px phone. */
  .backdrop-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-dock-icon {
    width: 18px;
    height: 18px;
  }

  /* Keep the existing left:50% + translateX(-50%) centring intact. */
  .toast-notice {
    max-width: calc(100vw - 24px);
    text-align: center;
  }
}

/* ==========================================================================
   SHORT VIEWPORTS (LANDSCAPE PHONES) — WALLPAPER MODAL KEEPS ITS SPLIT
   --------------------------------------------------------------------------
   Stacking the panes is right in portrait but ruinous here: the live preview
   is as wide as the sheet, so at 844x390 it rendered 601px tall (154% of the
   screen) and pushed all eight wallpapers ~750px below the fold. Landscape has
   width to spare, so the original side-by-side split is restored and the
   preview is sized against viewport height instead of panel width.
   ========================================================================== */
@media (max-height: 560px) {

  .backdrop-modal-dialog {
    width: 100%;
    max-width: 1100px;
    height: 94vh;
    max-height: 94vh;
  }

  .backdrop-modal-header {
    padding: 8px 16px;
  }

  .backdrop-modal-subtitle {
    display: none;
  }

  .backdrop-modal-split-body {
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
  }

  .backdrop-left-panel {
    flex: 0 0 auto;
    width: 42%;
    min-width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    padding: 10px 12px;
    gap: 8px;
    justify-content: center;
  }

  /* Constrain the WIDTH against viewport height — capping height instead would
     fight the 16/10 aspect-ratio and distort the preview. */
  .modal-live-desktop {
    width: 100%;
    max-width: calc(34vh * 1.6);
    align-self: center;
  }

  .modal-live-actions .btn-primary {
    padding: 8px 14px;
  }

  .backdrop-right-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .backdrop-selector-header {
    padding: 10px 14px 8px 14px;
  }

  .backdrop-gallery-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px;
  }
}

/* ==========================================================================
   TOUCH DEVICES — AFFORDANCES THAT DO NOT DEPEND ON HOVER
   ========================================================================== */
@media (hover: none) {

  button, a, .dock-item, .dock-item-user, .option-thumb-wrap, .wp-card {
    -webkit-tap-highlight-color: transparent;
  }

  /* Without a pointer the full-bleed overlay would just hide the preview, so
     the expand action becomes a persistent pill instead. */
  .export-preview-overlay-btn {
    opacity: 1;
    inset: auto 8px 8px auto;
    width: auto;
    height: auto;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11px;
  }

  /* Tap-triggered :hover would otherwise stick to the last icon touched. */
  .dock-item:hover,
  .dock-item-user:hover {
    transform: none;
  }

  .dock-item:hover .dock-icon-img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }
}