/* ==========================================================================
   09 · Panel gulir terpisah (pola Suno)
   Rail statis · komposer menggulir sendiri · library menggulir sendiri ·
   player tetap di dasar.

   Tinggi panel dihitung dari viewport, bukan diwarisi lewat rantai
   flex/kisi. Rantai itu sudah dua kali gagal: `.main__scroll` jadi kotak
   gulir yang isinya tidak meluap (roda mouse mati + overscroll contain),
   lalu kisi masuk jalur `auto` dan tumbuh mengikuti isi. Tinggi eksplisit
   tidak bisa salah seperti itu dan mudah diperiksa.

   Riwayat: jangan kembalikan `height:100dvh; overflow-y:auto;
   overscroll-behavior:contain` ke `.main__scroll`.
   ========================================================================== */

@media (min-width: 901px) {
  /* kerangka: setinggi viewport, dokumen tidak menggulir */
  .app-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .layout {
    height: 100%;
    min-height: 0;
  }

  .sidebar {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }

  .main {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .main__scroll {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    /* banner + hero ikut menggulir bersama kolom; tidak perlu jalur kisi */
    display: block;
  }

  #view-generate {
    min-height: 0;
  }

  /* --- tinggi panel -------------------------------------------------- */

  /*  100dvh - banner(53) - padding atas/bawah(32+56) - udara(11)
      Hero dihapus (Suno tidak memakainya di halaman Create), jadi panel
      mendapat ~150px tambahan. */
  .playground-grid {
    --pane-h: calc(100dvh - 152px);
    /* stretch: kedua kartu sama tinggi, mengikuti isi yang terpanjang.
       Dengan `start`, kartu pendek berakhir lebih awal dan dasar kolom
       tidak rata. Dengan tinggi dipatok viewport, muncul ruang mati besar. */
    align-items: stretch;
    min-height: 0;
  }

  .main--with-player .playground-grid {
    --pane-h: calc(100dvh - 152px - var(--player-h));
  }

  .zu-compose-panel,
  .zu-library-card,
  .zu-detail-col {
    /* Tinggi mengikuti isi, dibatasi viewport. Kalau dipatok, tab yang
       isinya pendek (Suara) menyisakan ruang mati besar di bawah tombol. */
    height: auto;
    max-height: var(--pane-h);
    min-height: 240px;
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-gutter: stable;
  }

  /* kartu di dalam tidak punya kotak gulir sendiri: hindari gulir bersarang */
  .zu-recent-list,
  .zu-recent-list--scroll {
    max-height: none;
    overflow: visible;
  }

  /* baris aksi menempel di dasar panel komposer */
  .zu-compose-panel .form-actions {
    position: sticky;
    bottom: 0;
    margin-bottom: calc(var(--s-5) * -1);
    padding-bottom: var(--s-5);
    background: var(--sheet);
  }
}