/* NoteSmart V32: stabilisasi header, WhatsApp, filter siswa, dan prompt PWA. */
@media (max-width: 768px) {
  /* Header aplikasi dikembalikan seperti bawaan: sticky, terlihat, tidak collapse. */
  body:not(.ns-v31-hide-app-header) #root header.md\:hidden,
  body:not(.ns-v31-hide-app-header) #root > div.min-h-screen > header.md\:hidden,
  body:not(.ns-v31-hide-app-header) #root > div > header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 92 !important;
    transform: translateZ(0) !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    backface-visibility: hidden !important;
  }
  body:not(.ns-v31-hide-app-header) #root header.md\:hidden > div,
  body:not(.ns-v31-hide-app-header) #root > div.min-h-screen > header.md\:hidden > div {
    display: flex !important;
    min-height: 64px !important;
  }
  [data-testid="guru-top-header"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 93 !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }

  /* Teks WhatsApp dan value filter tidak ikut transisi/animasi. */
  html.ns-page-guru td[data-ns-key="wa_number"],
  html.ns-page-guru td[data-ns-label="WhatsApp"],
  html.ns-page-guru td[data-ns-label="WA"],
  .ns-v31-student-filter,
  .ns-v31-student-filter *,
  .ns-v32-stable-field,
  .ns-v32-stable-field * {
    animation: none !important;
    transition-property: background-color, border-color, color, box-shadow !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
  }

  .ns-v31-student-filter select,
  .ns-v31-student-filter input,
  .ns-v31-student-filter button {
    touch-action: manipulation !important;
    transform: none !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
  }
}

#ns-pwa-install-card {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483400 !important;
  margin: 0 auto !important;
  max-width: 520px !important;
  border: 1px solid rgba(36,82,61,.16) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.22) !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 12px !important;
  color: #1f2937 !important;
  font-family: inherit !important;
  animation: ns-pwa-card-in .18s ease-out both !important;
}
#ns-pwa-install-card .ns-pwa-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #24523d url('/assets/icons/icon-192.png') center/cover no-repeat !important;
}
#ns-pwa-install-card .ns-pwa-title {
  margin: 0 0 2px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #153527 !important;
}
#ns-pwa-install-card .ns-pwa-text {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
}
#ns-pwa-install-card .ns-pwa-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
#ns-pwa-install-card button {
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transform: none !important;
}
#ns-pwa-install-now { background: #24523d !important; color: #fff !important; }
#ns-pwa-install-later { background: #f1f5f9 !important; color: #334155 !important; }
@keyframes ns-pwa-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (display-mode: standalone) { #ns-pwa-install-card { display: none !important; } }