/* Notification workflow extends the existing engagement center and bell. */
.notification-item.notification-business { background: #fbfdfd; border-color: #dbe7e7; }
.notification-item.notification-business.is-read { opacity: 1; }
.notification-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; color: #526e72; font-size: 12px; }
.notification-panel-foot .notification-action-button { font-weight: 700; }
.notification-desktop-setting { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; margin-bottom:10px; border-bottom:1px solid #dbe7e7; }
.notification-desktop-setting > div:first-child { min-width:0; }
.notification-desktop-setting strong { color:#12393f; font-size:13px; }
.notification-desktop-setting p { margin:4px 0 0; max-width:66ch; color:#526e72; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.notification-desktop-actions { display:flex; gap:6px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.notification-desktop-actions .notification-panel-action { min-height:34px; white-space:nowrap; }
.notification-desktop-setting button:focus-visible { outline:2px solid #087f73; outline-offset:3px; }
.notification-desktop-setting ::selection { background:#d8eeeb; color:#12393f; }
.notification-desktop-setting button:disabled { cursor:default; opacity:.55; }
.notification-center > .notification-desktop-setting { margin-top:12px; }
.notification-approval-context { display: grid; gap: 5px; margin: 6px 0; font-size: 12px; }
.notification-approval-context div { display: grid; grid-template-columns: 5em minmax(0,1fr); gap: 8px; }
.notification-approval-context dt { color: #526e72; }
.notification-approval-context dd { margin: 0; overflow-wrap: anywhere; color: #24484e; }
.notification-center { min-width: 0; color: #24484e; }
#engagement-center-controls[data-active-tab=notifications] .engagement-filter-grid,
#engagement-center-controls[data-active-tab=notifications] .engagement-filter-note { display: none; }
.notification-center-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; }
.notification-center-states, .notification-center-bulk { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.notification-center-states .segmented-button { min-height: 36px; }
.notification-center-bulk .notification-panel-action { min-height: 32px; padding-inline: 10px; }
.notification-center-search { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-top: 18px; }
.notification-center-search label { display: grid; gap: 6px; font-size: 12px; color: #526e72; }
.notification-center-search .notification-center-keyword { flex: 1; min-width: 200px; }
.notification-center-search input, .notification-center-search select { box-sizing: border-box; min-height: 38px; padding: 8px 10px; border: 1px solid #bbd2d5; border-radius: 6px; background: #fff; font: inherit; font-size: 14px; color: #24484e; }
.notification-center-search select { min-width: 150px; }
.notification-center-search input:focus-visible, .notification-center-search select:focus-visible { outline: 2px solid #087f73; outline-offset: 2px; }
.notification-center-hint { margin: 14px 0 8px; color: #526e72; font-size: 12px; line-height: 1.6; }
.notification-center-list { min-width: 0; }
.notification-center .notification-item { grid-template-columns: minmax(0,1fr); gap: 0; padding: 18px 0; border: 0; border-bottom: 1px solid #dbe7e7; border-radius: 0; background: transparent; font-size: 14px; line-height: 1.6; }
.notification-center .notification-item.is-read { opacity: 1; }
.notification-center .notification-item-avatar { display: none; }
.notification-center .notification-item-main { gap: 6px; }
.notification-center .notification-item-main > span:not(.notification-item-head):not(.notification-item-actions) { max-inline-size: 78ch; font-size: 14px; color: #24484e; }
.notification-center .notification-item-main strong { font-size: 14px; color: #12393f; }
.notification-center .notification-item-main span { white-space: normal; overflow-wrap: anywhere; }
.notification-center .notification-item-actions { justify-content: flex-start; flex-wrap: wrap; gap: 14px; }
.notification-center .notification-action-button { font-size: 13px; }
.notification-center .notification-decision-feedback { color: #526e72; font-size: 13px; }
.notification-center .notification-decision-feedback[role=alert] { color: #a32e2e; }
.notification-center .notification-approval-context { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 24px; font-size: 13px; }
.notification-center-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; color: #526e72; font-size: 12px; }
.notification-center .notification-empty { padding: 36px 0; }
#comments-inbox-view #engagement-center-controls[data-active-tab=notifications] #engagement-filter-toggle { display: none !important; }
@media (max-width: 640px) {
 .notification-desktop-setting { flex-wrap:wrap; gap:8px; }
 .notification-desktop-actions .notification-panel-action { min-height:42px; }
 .notification-center-toolbar { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
 .notification-center-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
 .notification-center-search > label:first-child { grid-column: 1 / -1; }
 .notification-center-search > button { align-self: end; min-height: 40px; }
 #comments-inbox-view:has([data-active-tab=notifications]) .engagement-page-head h2 { flex-shrink: 0; white-space: nowrap; }
 .notification-center-search label, .notification-center-search .notification-center-keyword { min-width: 0; }
 .notification-center-search input, .notification-center-search select { width: 100%; font-size: 16px; }
 .notification-center .notification-approval-context { grid-template-columns: minmax(0,1fr); }
 .notification-center-states .segmented-button, .notification-center-bulk .notification-panel-action { min-height: 42px; }
 .notification-center .notification-action-button { min-height: 42px; display: inline-flex; align-items: center; }
}