.web-push-device { margin: 16px 18px 0; padding: 16px; border: 1px solid #d7e4f4; border-radius: 14px; background: #f3f6fb; color: #10243f; }
.web-push-device h3 { margin: 0 0 6px; font-size: 16px; }
.web-push-device p { margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.web-push-device-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.web-push-device-actions button { min-height: 42px; padding: 9px 14px; border: 1px solid #0d57c8; border-radius: 10px; background: #0d57c8; color: white; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.web-push-device-actions button.secondary { color: #0d57c8; background: white; }
.web-push-device-actions button:disabled { opacity: .55; cursor: wait; }
.web-push-device [role="status"] { margin-top: 8px; color: #435873; }
.notification-settings-dialog { max-height: calc(100dvh - 28px); overflow-y: auto; }
/* The dialog lives inside the top bar; reset its inherited single-line text. */
#webPushDeviceSettings p { white-space: normal; min-width: 0; max-width: 100%; text-overflow: clip; word-break: keep-all; overflow-wrap: anywhere; }

/* Launch permission guidance and the mobile super-admin employee picker. */
#webPushEnablePrompt, #webPushStaffDialog { padding: 0; border: 1px solid #d7e4f4; border-radius: 20px; background: #fff; color: #10243f; width: min(440px, calc(100vw - 28px)); max-width: calc(100vw - 28px); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: 0 22px 70px #10243f40; }
#webPushEnablePrompt::backdrop, #webPushStaffDialog::backdrop { background: #10243f88; backdrop-filter: blur(3px); }
#webPushEnablePrompt > section, #webPushStaffDialog > section { padding: 22px; min-width: 0; }
#webPushEnablePrompt header, #webPushStaffDialog header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
#webPushEnablePrompt h2, #webPushStaffDialog h2 { margin: 0; font-size: 20px; line-height: 1.4; white-space: normal; }
.web-push-guide-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: #0d57c8; color: white; font-weight: 800; }
#webPushEnablePrompt p, #webPushStaffDialog p { white-space: normal; line-height: 1.65; font-size: 14px; margin: 10px 0; overflow-wrap: anywhere; }
#webPushEnablePrompt .web-push-guide-reason { font-weight: 700; }
#webPushEnablePrompt .web-push-guide-description, #webPushStaffDialog .web-push-staff-help { color: #52667e; }
#webPushEnablePrompt .web-push-guide-feedback, #webPushStaffDialog .web-push-guide-feedback { color: #0d57c8; }
#webPushEnablePrompt .web-push-guide-preference { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 20px; font-size: 14px; cursor: pointer; }
#webPushEnablePrompt input[type=checkbox], #webPushStaffDialog input[type=checkbox] { appearance: auto; flex: 0 0 20px; width: 20px; height: 20px; padding: 0; margin: 0; accent-color: #0d57c8; }
#webPushEnablePrompt footer, #webPushStaffDialog footer { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 0; flex-wrap: wrap; }
#webPushEnablePrompt footer button, #webPushStaffDialog footer button { min-height: 46px; padding: 10px 14px; flex: 1; border: 1px solid #0d57c8; border-radius: 12px; background: #0d57c8; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: normal; }
#webPushEnablePrompt footer button.secondary { background: #fff; color: #52667e; border-color: #cfdbea; }
#webPushEnablePrompt button[hidden] { display: none; }
#webPushEnablePrompt button:disabled, #webPushStaffDialog button:disabled { opacity: .5; cursor: wait; }
#webPushStaffDialog { width: min(540px, calc(100vw - 28px)); }
#webPushStaffDialog .web-push-staff-close { margin-left: auto; flex: 0 0 40px; height: 40px; padding: 0; border: 1px solid #d7e4f4; border-radius: 10px; background: #f3f6fb; color: #10243f; font-size: 24px; }
#webPushStaffDialog input[type=search] { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #cfdbea; border-radius: 12px; font-size: 16px; margin: 4px 0 12px; }
#webPushStaffList { display: grid; gap: 8px; max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain; }
#webPushStaffList label { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 52px; background: #f3f6fb; border: 1px solid #dce7f4; border-radius: 12px; cursor: pointer; }
#webPushStaffList label[hidden] { display: none; }
#webPushStaffList label span { display: grid; gap: 3px; min-width: 0; }
#webPushStaffList strong { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
#webPushStaffList small { color: #61748b; font-size: 12px; }
#webPushStaffDialog footer > span { font-size: 13px; color: #52667e; }
.web-push-staff-entry { display: none; }
@media (max-width: 820px) {
  body .mobile-mypage-footer .web-push-staff-entry { display: block; width: 100%; min-height: 46px; margin-top: 10px; padding: 12px; border: 1px solid #c6d9f5; border-radius: 12px; color: #0d57c8 !important; background: #edf4ff !important; border-color: #c6d9f5 !important; font-size: 14px; font-weight: 700; }
  #webPushEnablePrompt > section, #webPushStaffDialog > section { padding: 20px; }
}