/* Shared public UI resilience: narrow screens, zoom, dialogs and loading states. */
html { overflow-x: clip; }
body, main, section, form, label, .field, .auth-card, .application-panel { min-width: 0; }
input, select, textarea, button { max-width: 100%; box-sizing: border-box; }

.application-frame-loading,
.public-loading-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 120px;
  color: transparent !important;
  border-radius: 14px;
  background: linear-gradient(90deg, #edf4f3 25%, #f8fbfa 42%, #edf4f3 63%);
  background-size: 300% 100%;
  animation: public-skeleton 1.4s ease-in-out infinite;
}
.application-frame-loading::after {
  position: absolute; inset: 45% 20%; height: 12px; border-radius: 999px;
  background: rgba(11, 143, 128, .16); content: "";
}
@keyframes public-skeleton { to { background-position: -100% 0; } }

.repay-recovery-actions { display: grid; gap: 10px; margin-top: 18px; }
.repay-recovery-actions .receipt-button { margin-top: 0; }
.support-action { width: 100%; min-height: 48px; margin: 0; border: 1px solid #9cc9c2; color: #08766b; background: #fff; }

@media (max-width: 767px) {
  body { padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 76px)); }
  .capture-sequence small { min-width: 0; font-size: 12px !important; line-height: 1.25; }
  dialog, .application-modal, .detail-dialog { max-height: 100dvh !important; }
}

@media (max-width: 380px) {
  .public-header, .portal-topbar { flex-wrap: wrap !important; height: auto !important; min-height: 66px; gap: 8px !important; padding: 10px 12px !important; }
  .public-header .portal-brand, .portal-topbar .portal-brand { min-width: 0; }
  .portal-brand .brand-name { font-size: 22px; }
  .portal-brand .brand-mark { width: 29px; height: 29px; flex-basis: 29px; }
  .public-header .header-actions, .portal-topbar .portal-top-actions { min-width: 0; margin-left: auto; }
  .auth-layout, .repay-shell, .otp-shell { width: 100% !important; padding-inline: 10px !important; }
  .auth-card, .repay-card, .otp-card { width: 100% !important; padding-inline: 16px !important; }
  .phone-input, .password-input, .captcha-box, .captcha-row { min-width: 0; }
  .captcha-box, .captcha-row { grid-template-columns: minmax(0, 1fr) auto; }
  .captcha-box button, .captcha-row button { padding-inline: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .application-frame-loading, .public-loading-skeleton { animation: none; }
}