.notification-drawer{--notification-accent:#3896fb;--severity-info:#3896fb;--severity-success:#10b981;--severity-warning:#f59e0b;--severity-error:#ef4444;display:flex;height:100%;min-height:0;flex-direction:column}.notification-drawer__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border-bottom:1px solid #f3f4f6;padding:1.25rem 1.5rem}.notification-drawer__title{font-size:1.25rem;font-weight:700;color:#111827;line-height:1.3}.notification-drawer__subtitle{margin-top:.25rem;font-size:.8125rem;color:#6b7280}.notification-drawer__close{display:flex;height:2rem;width:2rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;color:#9ca3af;transition:background-color .15s ease}.notification-drawer__close:hover{background:#f3f4f6;color:#4b5563}.notification-drawer__toolbar{display:flex;flex-direction:column;gap:.625rem;padding:.75rem 1.5rem;border-bottom:1px solid #f3f4f6;background:#fafbfc}.notification-drawer__toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.notification-drawer__chips{display:flex;flex-wrap:wrap;gap:.375rem;flex:1;min-width:0}.notification-drawer__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.3125rem .75rem;border-radius:9999px;border:1px solid #e5e7eb;background:#fff;font-size:.75rem;font-weight:600;color:#4b5563;transition:border-color .15s ease,background .15s ease,color .15s ease;cursor:pointer;white-space:nowrap}.notification-drawer__chip:hover{border-color:#cbd5e1;background:#f9fafb}.notification-drawer__chip.is-active{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}.notification-drawer__mark-all{margin-inline-start:auto;padding:.375rem .75rem;border-radius:6px;border:1px solid #e5e7eb;background:#fff;font-size:.75rem;font-weight:600;color:#1d4ed8;cursor:pointer;transition:background .15s ease;white-space:nowrap}.notification-drawer__mark-all:hover:not(:disabled){background:#eff6ff}.notification-drawer__mark-all:disabled{color:#9ca3af;cursor:not-allowed}.notification-drawer__body{flex:1;overflow-y:auto;padding:.5rem 0}.notification-drawer__list{display:flex;flex-direction:column}.notification-drawer__item{position:relative;display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.5rem;border-bottom:1px solid #f3f4f6;border-inline-start:3px solid transparent}.notification-drawer__item.is-unread{background:#f8fbff}.notification-drawer__item--info{border-inline-start-color:var(--severity-info)}.notification-drawer__item--success{border-inline-start-color:var(--severity-success)}.notification-drawer__item--warning{border-inline-start-color:var(--severity-warning)}.notification-drawer__item--error{border-inline-start-color:var(--severity-error)}.notification-drawer__dot{margin-top:.375rem;height:.625rem;width:.625rem;flex-shrink:0;border-radius:9999px;cursor:pointer;background:var(--notification-accent);border:1px solid var(--notification-accent);transition:filter .15s ease}.notification-drawer__dot:hover{filter:brightness(.9)}.notification-drawer__dot-placeholder{margin-top:.375rem;height:.625rem;width:.625rem;flex-shrink:0}.notification-drawer__item-content{min-width:0;flex:1;display:flex;flex-direction:column;gap:.125rem}.notification-drawer__category-badge{display:inline-flex;align-self:flex-start;padding:.125rem .5rem;border-radius:4px;background:#f3f4f6;font-size:.6875rem;font-weight:600;letter-spacing:.04em;color:#4b5563;text-transform:uppercase;margin-bottom:.25rem}.notification-drawer__item-title{font-size:.875rem;color:#374151;line-height:1.35;word-break:break-word}.notification-drawer__item.is-unread .notification-drawer__item-title{font-weight:700;color:#111827}.notification-drawer__item-link{color:#1d4ed8;text-decoration:none}.notification-drawer__item-link:hover{text-decoration:underline}.notification-drawer__item-message{font-size:.8125rem;color:#6b7280;line-height:1.4;word-break:break-word}.notification-drawer__item-time{margin-top:.25rem;font-size:.75rem;color:#9ca3af}.notification-drawer__dismiss{position:absolute;top:.5rem;inset-inline-end:.75rem;display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;border-radius:9999px;color:#9ca3af;background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease}.notification-drawer__dismiss:hover{background:#f3f4f6;color:#4b5563}.notification-drawer__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:4rem 1.5rem;color:#9ca3af;text-align:center;font-size:.875rem}.notification-drawer__loading{display:flex;align-items:center;justify-content:center;padding:3rem 1rem;color:#6b7280}.notification-drawer__error{display:flex;align-items:flex-start;gap:.5rem;margin:1rem 1.5rem;border-radius:8px;border:1px solid #fecaca;background:#fef2f2;padding:.75rem;font-size:.875rem;color:#dc2626}.notification-drawer__pagination{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.5rem;border-top:1px solid #f3f4f6;background:#fafbfc;padding:.75rem 1.5rem}.notification-drawer__pagination-count{font-size:.75rem;color:#9ca3af;text-align:center}.notification-drawer__pagination-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem}.notification-drawer__page-button{display:flex;height:1.75rem;min-width:1.75rem;align-items:center;justify-content:center;padding:0 .25rem;border-radius:6px;border:1px solid #e5e7eb;background:#fff;font-size:.8125rem;font-weight:600;color:#4b5563;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.notification-drawer__page-button:hover:not(:disabled):not(.is-active){background:#f9fafb;border-color:#cbd5e1}.notification-drawer__page-button.is-active{border-color:#2563eb;background:#2563eb;color:#fff;cursor:default}.notification-drawer__page-button:disabled{opacity:.3;cursor:not-allowed}.notification-drawer[dir=rtl] .notification-drawer__item-message,.notification-drawer[dir=rtl] .notification-drawer__item-time,.notification-drawer[dir=rtl] .notification-drawer__item-title,.notification-drawer[dir=rtl] .notification-drawer__subtitle,.notification-drawer[dir=rtl] .notification-drawer__title{text-align:right}