/* Perbaikan tampilan HP: tombol tidak tergencet, tabel ringkas, pratinjau slide besar + mode layar penuh. */

/* Tombol di daftar langkah persiapan admin tidak boleh menyempit jadi huruf menurun. */
.setup-step>.btn{flex:none;white-space:nowrap}
.setup-step>.grow{min-width:0}

/* Pratinjau slide hasil desain. */
.designed-slides{padding:20px;gap:22px}
.designed-slide-item{width:100%;max-width:1200px}
.designed-slide-tap{cursor:zoom-in;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px #0000000f,0 6px 18px -12px #00000040}
.designed-slide-meta{display:flex;justify-content:flex-end;padding:5px 2px 0;font-size:11px;color:var(--ink-3)}
.slides-play{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}

/* Mode layar penuh. */
.slide-viewer{position:fixed;inset:0;z-index:1000;background:#0b0b0d;display:flex;flex-direction:column;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slide-viewer-stage{flex:1;min-height:0;display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
.slide-viewer-frame{width:min(100%,calc((100dvh - 76px) * 16 / 9));box-shadow:0 10px 40px #0008}
.slide-viewer-bar{display:flex;align-items:center;gap:6px;padding:10px 14px max(10px,env(safe-area-inset-bottom));color:#f2f2f2}
.slide-viewer-count{flex:1;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;opacity:.85}
.slide-viewer-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:#ffffff14;color:#fff;cursor:pointer}
.slide-viewer-btn:disabled{opacity:.3;cursor:default}
.slide-viewer-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (orientation:landscape) and (max-height:500px){
 .slide-viewer{flex-direction:row}
 .slide-viewer-stage{padding:6px}
 .slide-viewer-frame{width:min(100%,calc((100dvh - 12px) * 16 / 9))}
 .slide-viewer-bar{flex-direction:column;padding:8px max(8px,env(safe-area-inset-right)) 8px 4px}
 .slide-viewer-count{flex:0;order:3;writing-mode:horizontal-tb;font-size:12px}
}

@media (max-width:760px){
 /* Slide memakai lebar layar penuh supaya teks lebih terbaca. */
 .designed-slides{padding:12px 10px;gap:16px}
 .designed-slide-tap{border-radius:4px}
 .deck-template-bar{border-radius:12px;padding:8px 10px 6px}
 .deck-template-head{flex-wrap:wrap}

 /* Tabel di jawaban: kolom tidak terlalu sempit sehingga baris tidak menjulang; geser ke samping bila lebar. */
 .app .chat .table-wrap table,.table-wrap table{width:max-content;min-width:100%;font-size:13.5px}
 .app .chat .table-wrap th,.app .chat .table-wrap td,.table-wrap th,.table-wrap td{min-width:7em;max-width:14em;padding:8px 11px;vertical-align:top}

 /* Alat kerja: deskripsi memakai lebar penuh, tombol kembali tetap di pojok. */
 .wb-heading{position:relative;display:block}
 .wb-heading>.btn{position:absolute;top:0;right:0}
 .wb-heading p{font-size:13px;max-width:none}

 /* Langkah persiapan admin: tombol pindah ke bawah teks agar teks punya ruang. */
 .setup-step{flex-wrap:wrap}
 .setup-step>.grow{flex:1 1 calc(100% - 48px)}
 .setup-step>.btn{margin-left:calc(30px + .9rem)}
}
/* ui-mobile-polish: isian di HP minimal 16px agar iOS tidak memperbesar halaman saat diketuk. Dibatasi ke halaman Koneksi, Pengaturan
   dan kolom cari Pengaturan supaya kontrol ringkas lain (toolbar chat, editor inline) tidak ikut berubah. .preference-select diberi
   14px oleh mobile-polish.css dengan selektor lebih spesifik, jadi Pengaturan ikut ditulis di sini. */
@media (max-width:760px){
 .app .cx-page :is(input.input,select,textarea),.app .preferences-page :is(input.input,select,textarea),.app .settings-home-search input{font-size:16px}
}
/* Kepala panel artefak di HP: tombol aksi satu baris di bawah judul (sebelumnya 3 tombol ikon turun ke baris ketiga). Teks tombol
   dipadatkan, ikon di tombol teks disembunyikan, tombol ikon rata kanan. Bila tetap tidak muat (mis. ada "Tinjau PR" atau huruf perangkat
   lebih lebar), sisa tombol MEMBUNGKUS rata kanan ke baris berikutnya (wrap + flex-end dari app.css), tidak digeser keluar layar:
   "Lainnya" berisi Ganti judul, Riwayat versi, Buat salinan dan Publikasikan, jadi harus selalu terlihat. */
@media (max-width:640px){
 .panel-head>.panel-actions{gap:2px;row-gap:4px}
 .panel-head>.panel-actions>.btn{flex:0 0 auto}
 .panel-head>.panel-actions>.btn.sm:not(.icon){padding-inline:8px;font-size:12.5px}
 .panel-head>.panel-actions>.btn.sm:not(.icon)>svg{display:none}
 .panel-head>.panel-actions>.cm-btn{margin-left:auto}
 /* Strip Cowork inline: label di baris pertama, progres di baris kedua selebar strip, jadi "1/2 langkah selesai" tidak terpotong. */
 .cw-strip-bar>.cw-strip-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot label chev" "step step chev";column-gap:7px;row-gap:1px}
 .cw-strip-bar>.cw-strip-head>.cw-dot{grid-area:dot}
 .cw-strip-bar>.cw-strip-head>.cw-strip-label{grid-area:label;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .cw-strip-bar>.cw-strip-head>.cw-strip-step{grid-area:step}
 .cw-strip-bar>.cw-strip-head>.cw-chevron{grid-area:chev}
}
/* <=400px (360–393px): Studio + Runtime + Jalankan + 5 tombol ikon baru muat sebaris bila jarak & padding tombol teks dipersempit
   lagi (diukur Playwright: di 360px dengan padding 5px masih lebih 1px; tanpa pemadatan, di 384px "Lainnya" turun sendirian ke
   baris ketiga dan di 390px sisa ruangnya hanya ±3px). */
@media (max-width:400px){
 .panel-head>.panel-actions{gap:0}
 .panel-head>.panel-actions>.btn.sm:not(.icon){padding-inline:4px;font-size:12px}
 .panel-head>.panel-actions>.btn.sm:not(.icon)+.btn.sm:not(.icon){margin-left:2px}
}
/* Dok bawah kanvas web lebih lebar dari HP sehingga tombol "Kode" terpotong. "Pas di layar" disembunyikan karena tombol persen
   di sebelahnya melakukan hal yang sama; jarak & lebar alat dipadatkan. */
@media (max-width:480px){
 .wc-dock .wc-tool[aria-label="Pas di layar"]{display:none}
 .wc-dock .wc-tool{width:32px}
 .wc-dock .wc-sep{margin:0 3px}
 .wc-dock .wc-zoom{min-width:44px}
 .wc-dock .wc-pill{padding:0 11px}
}
/* <=380px: semua alat tetap tampil (termasuk "Buka di tab baru"); jarak dirapatkan lagi agar muat di 360px. Bila layar lebih sempit,
   dok tetap bisa digeser (overflow-x:auto) dan "Kode" menempel di kanan (sticky) sehingga aksi utamanya tidak terpotong.
   div.wc-dock: workspace-polish.css dimuat SESUDAH berkas ini dengan .wc-dock{gap;padding}. */
@media (max-width:380px){
 div.wc-dock{gap:0;padding:4px}
 .wc-dock .wc-group{gap:0}
 .wc-dock .wc-tool{width:30px}
 .wc-dock .wc-sep{margin:0 2px}
 .wc-dock .wc-zoom{min-width:40px;padding:0 4px}
 .wc-dock .wc-pill{padding:0 10px;margin-left:2px;position:sticky;right:0}
}