/* Tombol "Tampilkan sidebar" saat sidebar disembunyikan: selalu ada di pojok kiri atas, di semua halaman
   (Proyek, Artefak, Pengaturan, chat, dll.) supaya pengguna tidak terjebak tanpa navigasi. */
.sb-reveal { display: none; }
@media (min-width: 901px) {
  .app.sidebar-hidden .sb-reveal {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 10px; left: 10px; z-index: 60;
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    box-shadow: var(--shadow-soft); cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
  }
  .app.sidebar-hidden .sb-reveal:hover { background: var(--surface-2); color: var(--ink); }
  .app.sidebar-hidden .sb-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* beri ruang agar tidak menimpa judul/tombol di kiri atas */
  .app.sidebar-hidden .main .topbar { padding-left: 56px; }
  .app.sidebar-hidden .main .chat-mode-bar { padding-left: 56px; }
}

/* Lebar konten di layar lebar: kurangi ruang kosong di kiri-kanan (Koneksi & izin, Pengaturan, halaman workspace). */
@media (min-width: 1200px) {
  .app .experience-page { max-width: 1120px; }
  .app .experience-page.cx-page { max-width: 1120px; padding-left: 40px; padding-right: 40px; }
  .app .settings-body > .anim-fade { max-width: 1000px !important; }
  .app .settings-home-inner { max-width: 880px !important; }
  /* Koneksi & izin: kartu akun & aplikasi chat berdampingan dua kolom */
  .app .cx-page .cx-group:not(.cx-approvals) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .app .cx-page .cx-group > .cx-group-title { grid-column: 1 / -1; }
  .app .cx-page .cx-group > .device-panel { grid-column: 1 / -1; }
  .app .cx-page .cx-group.cx-chat:not(:has(.experience-card)) { display: none; }
}
/* Kartu unduh aplikasi desktop: teks dan tombol selalu terlihat berdampingan/terbungkus rapi */
.cx-page .device-app > div:first-child { flex: 1 1 320px; min-width: 0; }
.cx-page .device-app-cta { flex: 0 0 auto; }

/* Halaman chat kosong (sambutan) pas satu layar di desktop: tanpa gulir atas-bawah.
   Jarak dan ukuran judul mengikuti tinggi layar; bagian sekunder disembunyikan di layar pendek. */
@media (min-width: 901px) {
  html .app .unified-chat > .chat.chat-empty {
    display: flex !important; flex-direction: column !important; justify-content: safe center !important;
    min-height: 0 !important; overflow-y: auto; overflow-x: hidden; padding-top: 0; padding-bottom: clamp(8px, 2vh, 24px);
  }
  html .app .unified-chat > .chat.chat-empty > .welcome {
    flex: 0 0 auto !important; min-height: 0 !important; margin: 0 auto !important;
    padding: clamp(4px, 2vh, 28px) 24px clamp(10px, 2.2vh, 24px) !important; justify-content: center !important;
  }
  html .app .chat.chat-empty .welcome-plan { margin-bottom: clamp(10px, 2.6vh, 28px) !important; }
  html .app .chat.chat-empty .welcome h1 { font-size: clamp(28px, 5.2vh, 46px) !important; line-height: 1.15 !important; }
  html .app .chat.chat-empty .welcome-heading { gap: clamp(8px, 1.4vh, 14px) !important; }
  html .app .chat.chat-empty .conversation-intro { margin: clamp(8px, 1.8vh, 18px) 0 clamp(4px, .8vh, 8px) !important; }
  html .app .chat.chat-empty .conversation-guide { margin: 0 0 clamp(4px, 1vh, 10px) !important; }
  html .app .unified-chat > .chat.chat-empty > .composer-dock { flex: 0 0 auto !important; margin-top: 0 !important; }
  html .app .chat.chat-empty .starter-disclosure { margin-top: clamp(6px, 1.6vh, 16px) !important; }
  html .app .unified-chat .chat-empty .starters { margin: clamp(6px, 1.2vh, 10px) 0 !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
  html .app .unified-chat .chat-empty .starters .chip { min-height: clamp(36px, 5vh, 46px) !important; padding-block: 8px !important; }
}
/* Layar pendek (mis. laptop 768 px atau skala Windows besar): ringkas lagi. */
@media (min-width: 901px) and (max-height: 860px) {
  html .app .chat.chat-empty .conversation-guide { display: none !important; }
}
@media (min-width: 901px) and (max-height: 720px) {
  html .app .chat.chat-empty .getting-started-link, html .app .chat.chat-empty .welcome-plan { display: none !important; }
  html .app .chat.chat-empty .source-studio-welcome { display: none !important; }
}
@media (min-width: 901px) and (max-height: 620px) {
  html .app .chat.chat-empty .conversation-intro { display: none !important; }
  html .app .chat.chat-empty .starter-disclosure:not([open]) { display: none !important; }
}