/* ============================================================
   POD OS — responsive / mobile layer
   ------------------------------------------------------------
   Loaded LAST, so its rules win on equal specificity. Everything
   here lives inside a (max-width) media query (or is a base rule
   for a mobile-only element), so desktop rendering is untouched.
   Targets phones first (<=640px) with a couple of small-phone
   tweaks (<=480px) and a tablet stacking break (<=860px).
   ============================================================ */

/* Mobile-only element: hidden until a small screen turns it on. */
.ked-mobile-note { display: none; }

/* ---- Tablet & below: stop side-by-side panels from overflowing ---- */
@media (max-width: 860px) {
  /* Smart Mockups two-up (Designs | Templates) -> single column. */
  .mockup-top-grid { grid-template-columns: 1fr !important; }
}

/* ---- Bestseller results: stack to one column on narrow screens ----
   The desktop layout pairs each design with its SEO side-by-side in a
   height-capped, internally-scrolling grid (fits one page). Below ~900px the
   side-by-side SEO column gets too cramped, so we drop to a single column, stack
   the SEO under the mockup, lift every height cap (cards, grid and image) and let
   the page scroll naturally — the right behaviour on a small screen. */
@media (max-width: 900px) {
  .bs-results-grid { grid-template-columns: 1fr !important; max-height: none !important; overflow: visible !important; }
  .bs-design-card { flex-direction: column !important; max-height: none !important; }
  .bs-card-media { width: 100% !important; }
  .bs-tile-img { max-height: none !important; }
}

/* ============================== Phones ============================== */
@media (max-width: 640px) {
  /* Use the dynamic viewport height so the mobile URL bar doesn't crop. */
  .app { height: 100dvh; }

  /* Never let a stray fixed width create a horizontal scrollbar. */
  .content { overflow-x: hidden; }
  .view { padding: 18px 14px 64px; }
  img, svg, canvas, video { max-width: 100%; }

  /* ---- Topbar: wrap view actions to a 2nd row so nothing is clipped ---- */
  .topbar {
    flex-wrap: wrap; height: auto; min-height: var(--topbar-h);
    padding: 8px 12px; gap: 8px; row-gap: 8px;
  }
  .topbar__sub { display: none; }
  .topbar__title { font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
  /* The keyboard-shortcuts button is meaningless on touch. */
  .topbar [title^="Keyboard"] { display: none; }
  /* Per-view action buttons (e.g. Delete all / New design) drop to their
     own full-width row instead of pushing credits + avatar off-screen. */
  .topbar__actions { order: 99; flex-basis: 100%; justify-content: flex-end; gap: 8px; }
  .topbar__actions:empty { display: none; }

  /* ---- Component grids: guarantee a clean single/again-fluid column ---- */
  .grid-stats { grid-template-columns: 1fr 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* ---- Modals & overlays: more breathing room ---- */
  .overlay { padding: 12px; }
  .modal__body { padding: 16px; }
  .modal__head { padding: 14px 16px; }
  .modal__foot { padding: 12px 16px; }

  /* ---- Toasts: span the width instead of clipping off the right edge ---- */
  #toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }

  /* ================= Dashboard hero ================= */
  /* The hero is absolutely centered over the whole main area; on a phone
     that clips the top/bottom out of reach. Flow it from the top instead,
     leaving room for the (transparent) topbar and the bottom dock. */
  .dash-container { justify-content: flex-start; }
  .dash-content { margin-top: 0; padding-top: 76px; padding-bottom: 104px; }
  .dash-title { font-size: 34px !important; line-height: 1.15 !important; margin-bottom: 16px !important; }
  .dash-sub { font-size: 15px !important; margin-bottom: 24px !important; }
  .dash-sub br { display: none; }
  .dash-search { padding: 16px 20px !important; font-size: 17px !important; }

  /* Bottom dock: a fixed, full-width nav instead of a fixed-width pill that
     ran off both edges. Items stack icon-over-label and share the width. */
  .dash-dock {
    position: fixed; left: 8px; right: 8px; bottom: 10px;
    transform: none; width: auto; justify-content: space-between;
    gap: 2px; padding: 6px;
  }
  .dash-dock.exit { transform: translateY(160px); }
  .dash-dock-item {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 4px;
    padding: 8px 2px; font-size: 10px; line-height: 1.1; text-align: center;
  }
  .dash-dock-item svg { width: 20px; height: 20px; }

  /* ================= AI Generator ================= */
  /* Stack the uploader + image-count segmented + Generate button vertically,
     each full width, instead of cramming them into one overflowing row. */
  .gen-controls { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .gen-controls .row { flex-wrap: wrap !important; justify-content: center !important; }
  .gen-controls .segmented { flex-wrap: wrap !important; justify-content: center !important; width: 100%; }
  .gen-controls .segmented > button { flex: 1 1 calc(50% - 4px); }
  .gen-controls > .btn { width: 100%; justify-content: center; }
  /* Generated variations stack one per row instead of shrinking off-screen. */
  .gen-results { flex-wrap: wrap !important; }
  .gen-results > * { flex: 1 1 100% !important; min-width: 0 !important; }

  /* ================= Smart Mockups ================= */
  .mockup-top-grid { grid-template-columns: 1fr !important; }
  /* "Mockups per design" / "Shading level" rows: stack label over control. */
  .mockup-field { flex-direction: column !important; align-items: stretch !important; gap: 8px; }
  .mockup-field > .label { width: auto !important; }
  .shading-group { flex-wrap: wrap !important; }

  /* ================= Settings / Exports ================= */
  /* The settings view pins maxWidth:860px inline; keep it fluid on phones. */
  .view.settings-view { max-width: 100% !important; }
  /* Two-up export option grids -> single column. */
  .export-grid { grid-template-columns: 1fr !important; }

  /* ================= Design Editor ================= */
  /* Let the top toolbar wrap to as many rows as it needs. */
  .ked { grid-template-rows: auto 1fr; height: 100dvh; }
  .ked-bar { flex-wrap: wrap; height: auto; padding: 8px 10px; gap: 6px; }
  .ked-bar .ked-grow { display: none; }
  .ked-name { max-width: 150px; min-width: 90px; }
  .ked-btn { height: 34px; padding: 0 10px; }

  /* Stack the workspace vertically and let it scroll; the canvas keeps a
     fixed height so Fabric's ResizeObserver gives it real dimensions. */
  .ked-main { grid-template-columns: 1fr; overflow-y: auto; }
  .ked-left, .ked-right {
    position: static; width: 100%; top: auto; bottom: auto; left: auto; right: auto;
    box-shadow: none; padding: 16px; border: none;
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }
  .ked-left { order: 1; }
  .canvas-wrap { order: 0; height: 58vh; min-height: 320px; }
  .ked-right { order: 2; }

  /* Dismissible "best on desktop" hint, anchored above the content. */
  .ked-mobile-note {
    display: block; position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 60;
    padding: 11px 16px; text-align: center; font-size: 12.5px; font-weight: 600;
    color: var(--text); background: var(--surface-glass);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass); border-radius: var(--r-pill);
    box-shadow: var(--shadow-lg); cursor: pointer;
  }
}

/* ============================ Small phones ============================ */
@media (max-width: 400px) {
  .grid-stats { grid-template-columns: 1fr; }
  .dash-title { font-size: 28px !important; }
}