/* Panacea mobile shell compactness v49
   Screenshot-driven repair: the command bar must remain a toolbar, never a
   viewport-sized card. Notification badges must be fully visible outside the
   circular control. */

@media (max-width: 1023px) {
  header.kaca.panacea-command-bar {
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: 68px !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    /* `viewport-fit=cover` + translucent iOS status bars make top:0
       overlap the notch/status region in standalone PWA mode. Keep the same
       .45rem breathing room on ordinary browsers, but never cross the device
       safe-area boundary. */
    top: max(.45rem, env(safe-area-inset-top)) !important;
    margin: .45rem .55rem .2rem !important;
    padding: .4rem .5rem !important;
    gap: .35rem !important;
    border-radius: 1.45rem !important;
    overflow: visible !important;
    align-items: center !important;
  }

  header.kaca.panacea-command-bar > div {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
  }

  /* Judulnya TIDAK boleh dibatasi lebar tetap. `min-width: 0` sudah cukup
     membuatnya mengalah terhadap tombol-tombol di sampingnya; batas keras di
     sini memotong nama halaman walaupun ruangnya masih ada — pada 390px ia
     mengunci judul di 78px padahal tersedia sekitar 170px, sehingga "Your
     Body" terbaca "Panacea...". Biarkan flexbox yang memutuskan, dan biarkan
     `truncate` bekerja hanya saat ruangnya benar-benar habis. */
  header.kaca.panacea-command-bar h1 {
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: .95rem !important;
    line-height: 1.1 !important;
  }

  header.kaca.panacea-command-bar :where(
    .header-icon-btn,
    button[aria-label^='Search'],
    button[aria-label^='Notifications']
  ) {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  header.kaca.panacea-command-bar .pmd-notification-button {
    overflow: visible !important;
    isolation: isolate;
  }

  header.kaca.panacea-command-bar .pmd-notification-badge {
    top: -5px;
    right: -5px;
    height: 19px;
    min-width: 19px;
    max-width: 32px;
    padding-inline: 4px;
    border: 2px solid #080b0d;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 3px 10px rgba(0,0,0,.34);
    overflow: visible;
  }

  /* A tall descendant must never enlarge the toolbar. Menus/dialogs are
     positioned independently and therefore do not need to contribute height. */
  header.kaca.panacea-command-bar .pmd-command-spaces {
    max-height: min(70dvh, 34rem);
    overflow-y: auto;
  }
}

@media (max-width: 430px) {
  header.kaca.panacea-command-bar {
    min-height: 54px !important;
    max-height: 62px !important;
    margin-inline: .45rem !important;
    padding-inline: .42rem !important;
  }

  header.kaca.panacea-command-bar h1 {
    max-width: none !important;
    font-size: .9rem !important;
  }

  /* Preserve every breadcrumb level when the toolbar has only a narrow
     title slot. Wrapping keeps the existing readable type and controls. */
  header.kaca.panacea-command-bar h1[data-navigation-hierarchy] {
    white-space: normal !important;
    max-height: 2.2em !important;
  }

  header.kaca.panacea-command-bar :where(
    .header-icon-btn,
    button[aria-label^='Search'],
    button[aria-label^='Notifications']
  ) {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  header.kaca.panacea-command-bar .pmd-notification-badge {
    border-color: #0b0d0e;
  }
}