.office-notification-preview { position: fixed; z-index: 1270; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(19, 32, 42, .52); }
.office-notification-preview > section { position: relative; width: min(560px, 94vw); min-height: 214px; box-sizing: border-box; overflow: hidden; border: 1px solid #edf1f4; border-radius: 3px; background: #fff; box-shadow: 0 16px 36px rgba(0, 0, 0, .22); }
.office-notification-preview-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border: 0; color: #8b98a4; background: transparent; cursor: pointer; font-size: 24px; line-height: 1; }
.office-notification-preview-close:hover { color: #337fe8; }
.office-notification-preview-body { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 15px; align-items: center; min-height: 160px; padding: 28px 52px 18px 26px; }
.office-notification-preview-icon { display: grid; width: 72px; height: 72px; place-items: center; border-radius: 50%; color: #168cf2; background: #e8f4ff; font-size: 30px; }
.office-notification-preview-body small { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border-radius: 2px; color: #fff; background: #168cf2; font-size: 12px; }
.office-notification-preview-body h3 { margin: 9px 0 6px; color: #263744; font-size: 16px; line-height: 1.4; }
.office-notification-preview-body p { margin: 0; color: #687983; font-size: 14px; line-height: 1.75; word-break: break-word; }
.office-notification-preview footer { display: flex; justify-content: flex-end; padding: 0 22px 20px; border-top: 1px solid #f0f2f4; }
.office-notification-preview footer button { min-width: 85px; height: 34px; margin-top: 18px; border: 0; border-radius: 3px; color: #fff; background: #168cf2; cursor: pointer; font: 14px inherit; }
.office-notification-preview footer button:hover { background: #0c79dc; }
@media (max-width: 560px) { .office-notification-preview { padding: 12px; } .office-notification-preview-body { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; min-height: 142px; padding: 24px 38px 14px 18px; } .office-notification-preview-icon { width: 54px; height: 54px; font-size: 23px; } }