/* Shared popup bounds. Hide scrollbar chrome, not the ability to scroll. */
dialog[class] {
  --popup-gutter:16px;
  max-width:calc(100vw - 2 * var(--popup-gutter));
  max-height:calc(100dvh - 2 * var(--popup-gutter));
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
dialog[class],dialog[class] *,
.customer-service-content,.customer-service-content * {
  scrollbar-width:none;
}
dialog[class]::-webkit-scrollbar,dialog[class] ::-webkit-scrollbar,
.customer-service-content::-webkit-scrollbar,.customer-service-content ::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
}
dialog[class] > *,
dialog[class] :is(form,fieldset,.auth-content,.product-detail-layout,.checkout-payment-panel) {
  min-width:0;
}
dialog[class] :is(p,h2,h3,dd),.customer-service-content {
  overflow-wrap:anywhere;
}

/* The LED spans need the close button, not its header, as their anchor. */
.customer-service-popup-heading .auth-close {
  position:relative;
  inset:auto;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  padding:0;
  line-height:1;
}
button.auth-close {
  display:grid;
  place-items:center;
  padding:0;
  line-height:1;
  flex-shrink:0;
}
.customer-service-card[open] > .customer-service-content {
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.customer-service-content :is(.message-reply,.chat-reply-form,.commerce-field) {
  min-width:0;
  max-width:100%;
}
.customer-service-popup-heading { align-items:center; }

/* Result symbols are UI icons, not the larger illustrated home-page icons. */
.payment-result-dialog .home-info-dialog-icon {
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin:0 auto 16px;
  border-radius:16px;
  font-size:1.7rem;
  filter:none;
}
@media(min-width:821px) {
  dialog.question-dialog:not(#checkoutDialog) { width:min(660px,calc(100vw - 48px)); }
  dialog.order-details-dialog { width:min(780px,calc(100vw - 48px)); }
  dialog.home-info-dialog { width:min(480px,calc(100vw - 48px)); }
  .customer-service-card[open] > .customer-service-content {
    width:min(820px,calc(100vw - 48px));
    max-height:calc(100dvh - 48px);
  }
  .auth-layout { min-height:min(650px,calc(100dvh - 48px)); }
}
@media(min-width:821px) and (max-height:800px) {
  .auth-content { padding:44px 32px 24px; }
  .auth-story { padding:30px 24px; gap:16px; }
}
@media(max-width:640px) {
  dialog[class] { --popup-gutter:8px; }
}

@media(max-width:820px) {
  /* Follow the actual visible screen as the on-screen keyboard opens/moves.
     Only the focused popup scrolls; the background page remains untouched. */
  dialog[class].keyboard-aware-popup,
  .customer-service-card[open] > .customer-service-content.keyboard-aware-popup {
    position:fixed;
    top:calc(var(--popup-visible-top) + 8px);
    bottom:auto;
    max-height:calc(var(--popup-visible-height) - 16px);
    min-height:0;
    margin-top:0;
    margin-bottom:0;
    overflow-y:auto;
    scroll-behavior:auto;
    scroll-padding-block:16px 20px;
    box-sizing:border-box;
  }
  dialog[class].keyboard-aware-popup { left:0; right:0; transform:none; }
  .customer-service-card[open] > .customer-service-content.keyboard-aware-popup { transform:translateX(-50%); }
  /* Avoid iOS zooming the entire page when a small form field is selected. */
  dialog :is(input,textarea,select),
  .customer-service-content :is(input,textarea,select) { font-size:16px; }
}