:root {
  --overlay-height: 100vh;
  --overlay-width: 100vw;
  --overlay-top: 0px;
  --overlay-left: 0px;
}
@supports (height: 100dvh) { :root { --overlay-height: 100dvh; } }

/* Native dialogs must be centered in the visible area, including browser bars. */
html body dialog[open] {
  position: fixed;
  top: calc(var(--overlay-top) + var(--overlay-height) / 2) !important;
  bottom: auto !important;
  max-height: calc(var(--overlay-height) - 16px) !important;
  max-width: calc(var(--overlay-width) - 16px) !important;
  margin-block: 0 !important;
  transform: translateY(-50%) !important;
  box-sizing: border-box;
}
body :is(.drawer, dialog, [aria-modal="true"]) { scrollbar-gutter: auto; }
body :is(.drawer-head, .customer-drawer-head, .quick-picker > header, .email-composer > header, .sms-composer > header, .payment-composer > header, .schedule-confirm > header, .integration-detail-dialog > header) {
  min-width: 0;
  align-self: stretch;
}
body :is(.drawer-head, dialog > header, [aria-modal="true"] > header) > div { min-width: 0; }
body :is(.drawer-head, dialog > header, [aria-modal="true"] > header) h2 { overflow-wrap: anywhere; }
body :is(.close-button, .desk-schedule-close, [data-call-close], #closeNotifications) {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}
.window-corner-close { display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #c5d4e5;border-radius:12px;background:#f0f5fb;color:#395571;font-size:24px;cursor:pointer; }
.mfa-proof > .window-corner-close { justify-self:end; }
.window-form-header { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.window-form-header h2 { margin:4px 0;min-width:0; }
.schedule-cancel-dialog header { position:sticky;top:-24px;z-index:2;margin:-24px -24px 0;padding:16px 24px;background:#f5f8fc; }

/* The Calls header has no scrollbar beside it; all long content scrolls below. */
.customer-calls-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.customer-calls-dialog > header { flex: 0 0 auto; }
.calls-scroll-region { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.customer-calls-dialog [data-call-close] { width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 24px; }

.job-schedule-backdrop { padding: 12px; align-items: center; overflow: hidden; }
.job-schedule-picker { box-sizing: border-box; max-height: 100%; overflow: auto; }
.job-schedule-picker > header { gap: 12px; }
.job-schedule-picker > header > div { flex: 1; min-width: 0; }
.job-schedule-picker > header .close-button { margin-left: auto; }
.desk-schedule { --desk-padding: 20px; padding: var(--desk-padding); }
.desk-schedule-header {
  margin: calc(-1 * var(--desk-padding)) calc(-1 * var(--desk-padding)) 0;
  padding: var(--desk-padding);
  background: #edf3fb;
  align-items: flex-start;
}
.desk-schedule-close { margin-left: auto; border-radius: 12px; border: 1px solid #c5d4e5; background: #fff; }

.notification-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.notification-panel[hidden] { display: none; }
.notification-panel > header { gap: 10px; }
.notification-panel > header > div:first-child { min-width: 0; }
.notification-panel .notification-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.notification-panel > header #markNotificationsRead {
  padding: 8px 12px; min-height: 44px; border: 1px solid #b9cde7;
  border-radius: 10px; background: #edf4ff; color: #2356a0;
}
.notification-panel > header #closeNotifications {
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 1px solid #d0dbe8; border-radius: 12px; background: #f4f7fb; color: #395571;
}
#closeNotifications svg { width: 19px; height: 19px; }
.notification-panel #notificationList { min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; }
.notification-panel > footer { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .notification-panel {
    position:fixed;top:calc(var(--overlay-top) + 10px);right:10px;
    width:min(410px,calc(var(--overlay-width) - 20px));min-height:0;
    max-height:calc(var(--overlay-height) - 20px);box-sizing:border-box;
  }
  .notification-panel > footer { min-height:0;max-height:calc(var(--overlay-height) * .3);overflow:auto;box-sizing:border-box; }
  #paymentComposer .payment-manager { max-height: calc(var(--overlay-height) - 12px); }
  .calls-scroll-region .calls-workspace { display: flex; flex-direction: column; padding: 12px; }
  .calls-scroll-region .call-script-card { order: -1; width: 100%; box-sizing: border-box; max-height: none; overflow: visible; }
  .calls-scroll-region .calls-layout { width: 100%; }
  .calls-scroll-region .calls-layout > :is(nav,section) { max-height: none; }
  .calls-scroll-region .script-step-copy > span { white-space: normal; }
  .status-tabs {
    flex-wrap: wrap; overflow: visible; padding: 8px; gap: 6px;
  }
  .status-tabs button {
    flex: 1 1 auto; min-width: 0; min-height: 44px; height: auto;
    white-space: normal; overflow-wrap: anywhere; padding: 10px 12px;
  }
  .status-tabs button span { flex-shrink: 0; }
}
@media (max-width: 760px) {
  .notification-panel {
    top: calc(var(--overlay-top) + 10px); left: 10px; right: 10px;
    max-height: calc(var(--overlay-height) - var(--mobile-nav-height) - 24px);
  }
  .notification-panel > header { display: grid; grid-template-columns: minmax(0,1fr) 44px; padding: 14px; }
  .notification-panel .notification-header-actions { display: contents; }
  #closeNotifications { grid-column: 2; grid-row: 1; }
  #markNotificationsRead { grid-column: 1 / -1; justify-self: start; }
  .notification-panel > footer { padding: 12px 14px; }
}
@media (max-width: 480px) { .desk-schedule { --desk-padding: 17px; } }