/* ========================================================================== 
   Sooich responsive layout

   The original application was intentionally phone-sized (430px).  These
   rules progressively turn that phone canvas into a real application layout
   on foldables, tablets and larger browser windows without changing the
   compact mobile experience.
   ========================================================================== */

/* Very small phones: keep controls tappable while preventing label overflow. */
@media (max-width: 359px) {
  :root {
    --s-4: 14px;
    --fs-md: 13.5px;
    --fs-lg: 15px;
    --fs-xl: 18px;
    --fs-2xl: 21px;
    --fs-3xl: 25px;
  }

  .appbar-title { font-size: var(--fs-md); }
  .theme-toggle { padding-inline: 7px; }
  .nav-item { font-size: 10px; }
  .sticky-cta { gap: var(--s-2); }
  .sticky-cta .btn { padding-inline: var(--s-3); }
  .range-inputs { align-items: stretch; flex-direction: column; }
  .range-inputs .dash { display: none; }
}

/* Large phones, landscape phones and small foldables must stop looking like a
   430px phone floating inside the available screen. */
@media (min-width: 600px) {
  :root { --shell-max: 100%; }

  body { padding: 0; }

  .app-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .sheet {
    width: min(calc(100% - 48px), 680px);
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
  }

  .sheet-body { padding-inline: var(--s-5); }
  .sheet-foot { padding-inline: var(--s-5); border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .dialog-box { max-width: 430px; }
  .toast { max-width: 520px; }

  .auth {
    width: min(100%, 620px);
    margin-inline: auto;
    padding-inline: var(--s-7);
  }

  .splash-content {
    width: min(100%, 660px);
    margin-inline: auto;
  }

  .type-choose,
  .form-page {
    width: min(100%, 860px);
    margin-inline: auto;
  }

  .type-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uploader-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .preview-wrap {
    width: min(100%, 860px);
    margin-inline: auto;
  }

  .publish-note {
    width: min(100%, 820px);
    margin-inline: auto;
  }

  .thread-row,
  .notification-row,
  .session-row,
  .set-group,
  .info-page,
  .brand-block {
    width: min(100%, 900px);
    margin-inline: auto;
  }

  .chat-page,
  .vip-channel-page {
    width: min(100%, 920px);
    margin-inline: auto;
    border-inline: 1px solid var(--border);
  }

  .bubble { max-width: 68%; }
  .bubble.has-image { width: min(58%, 360px); }
}

/* Tablet portrait and larger: persistent side navigation and denser layouts. */
@media (min-width: 768px) {
  :root {
    --tablet-rail: 86px;
    --header-h: 64px;
  }

  .view.has-nav {
    padding-inline-start: var(--tablet-rail);
    padding-bottom: calc(var(--safe-b) + var(--s-4));
  }

  .bottom-nav {
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: var(--tablet-rail);
    height: 100%;
    padding: max(var(--s-4), var(--safe-t)) 0 max(var(--s-4), var(--safe-b));
    flex-direction: column;
    justify-content: center;
    gap: var(--s-2);
    border-top: 0;
    border-inline-end: 1px solid var(--border);
  }

  .nav-item {
    width: 100%;
    height: 80px;
    flex: none;
    gap: 6px;
  }

  .nav-item.is-active::before {
    top: 50%;
    inset-inline-start: 0;
    width: 3px;
    height: 30px;
    transform: translateY(-50%);
  }

  .nav-item-fab .fab {
    width: 50px;
    height: 50px;
    margin-top: 0;
  }

  .nav-badge {
    top: 10px;
    inset-inline-start: calc(50% - 23px);
  }

  .appbar,
  .explore-brandbar {
    padding-inline: var(--s-5);
  }

  .explore-top {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr);
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
  }

  .explore-top .loc-pill { margin-bottom: 0; }

  .cat-tiles {
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5) var(--s-3);
  }

  .cat-tile {
    min-height: 150px;
    padding: var(--s-5);
  }

  .cat-tile .ct-name { font-size: var(--fs-xl); }
  .sort-row { padding-inline: var(--s-5); }

  .feed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5) var(--s-6);
  }

  .rail { gap: var(--s-4); }
  .rail > * { width: 250px; }

  .section { padding: var(--s-6) var(--s-5); }
  .section + .section { border-top-width: 1px; }
  .section-title { font-size: var(--fs-xl); }

  .sticky-cta {
    width: min(calc(100% - 40px), 860px);
    margin-inline: auto;
    bottom: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
  }

  .premium-cta { bottom: var(--s-3); }
  .vip-sales-scroll { padding-bottom: 96px; }

  #dynamic-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-4);
  }

  .manage-listing-page,
  .edit-listing-form,
  .sessions-page,
  .showroom-page,
  .fin-page,
  .vip-page,
  .feature-coming-page {
    width: min(100%, 1040px);
    margin-inline: auto;
  }

  .showroom-benefits,
  .vip-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showroom-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .showroom-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vip-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vip-channel-message { width: min(72%, 560px); }

  .pwa-install-card { width: min(calc(100% - 48px), 520px); }
  .pwa-install-card.is-floating {
    width: min(calc(100% - 48px), 520px);
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: none;
  }
}

/* Tablet landscape / large tablet: detail view becomes a useful split pane. */
@media (min-width: 900px) {
  .listing-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    align-items: start;
    gap: 0;
    border-bottom: 1px solid var(--border);
  }

  .listing-gallery-column {
    position: sticky;
    top: 0;
    align-self: start;
    padding: var(--s-5);
  }

  .listing-gallery-column .ld-gallery {
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
  }

  .listing-content-column {
    min-width: 0;
    border-inline-start: 1px solid var(--border);
  }

  .listing-content-column .ld-head,
  .listing-content-column .ld-crumb {
    padding-inline: var(--s-5);
  }

  .listing-video { max-height: 440px; }
  .photo-viewer-slide .thumb-art { max-width: min(90vw, 1280px); margin-inline: auto; }
}

@media (min-width: 1050px) {
  .feed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uploader-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Desktop keeps the centred product canvas, while tablets remain edge-to-edge. */
@media (min-width: 1280px) {
  :root { --shell-max: 1200px; }

  body {
    padding: 24px 0;
    background:
      radial-gradient(1100px 700px at 50% -12%, rgba(245, 166, 35, 0.09), transparent 62%),
      var(--body-bg);
  }

  .app-shell {
    width: min(calc(100% - 48px), var(--shell-max));
    min-height: min(940px, calc(100dvh - 48px));
    height: min(940px, calc(100dvh - 48px));
    border: 1px solid var(--border);
    border-radius: 30px;
    box-shadow: var(--sh-lg);
  }
}

/* Short landscape screens need compact chrome so content remains usable. */
@media (min-width: 600px) and (max-height: 620px) {
  :root { --header-h: 52px; }
  .nav-item { height: 68px; }
  .cat-tile { min-height: 112px; }
  .splash { padding-block: var(--s-4); }
  .splash-logo { margin-bottom: var(--s-3); }
  .splash-sub { margin-bottom: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .bottom-nav { scroll-behavior: auto; }
}