.notification-zone { position: relative; }
.notification-button.is-open { border-color: #bfd3e3; background: var(--brand-soft); color: var(--brand-dark); }
.work-notification-panel { position: absolute; z-index: 60; top: calc(100% + 13px); right: -6px; width: min(470px, calc(100vw - 110px)); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 48px rgba(15, 23, 42, .2); color: var(--ink); }
.work-notification-panel[hidden] { display: none; }
.work-notification-panel::before { position: absolute; top: -7px; right: 28px; width: 13px; height: 13px; border: 1px solid var(--line); border-right: 0; border-bottom: 0; background: var(--surface); content: ''; transform: rotate(45deg); }
.work-notification-panel > header { position: relative; z-index: 1; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 17px; border-bottom: 1px solid var(--line); background: var(--surface); }
.work-notification-panel h2 { margin: 0; font-size: 15px; }.work-notification-panel button { padding: 0; border: 0; background: transparent; color: #1260c9; font-size: 12px; font-weight: 650; white-space: nowrap; }
.work-notification-scroll { max-height: min(690px, calc(100vh - 184px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.notification-group { border-bottom: 1px solid var(--line); }.notification-group:last-child { border-bottom: 0; }
.notification-group-heading { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 17px 7px; background: #fbfcfd; }.notification-group-heading > span { display: flex; align-items: center; gap: 9px; min-width: 0; }.notification-group-heading svg { width: 18px; height: 18px; flex: 0 0 18px; }.notification-group-heading b { font-size: 13px; }.notification-group.is-danger .notification-group-heading svg { color: var(--danger); }.notification-group.is-today .notification-group-heading svg { color: #ed8509; }.notification-group.is-warning .notification-group-heading svg { color: #e8a400; }
.notification-items { padding: 0 17px 7px; }.notification-item { --notification-tone: var(--warning); position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 10px; gap: 13px; align-items: center; padding: 9px 0 10px 27px; border-radius: 6px; cursor: pointer; transition: background-color .15s ease; }.notification-item:hover, .notification-item:focus-visible { background: #f6f9fc; outline: none; }.notification-item.is-danger { --notification-tone: var(--danger); }.notification-item.is-today { --notification-tone: #ed8509; }.notification-item.is-warning { --notification-tone: #e8a400; }.notification-item + .notification-item { border-top: 1px solid var(--line-soft); }
.notification-item > div { min-width: 0; }.notification-item h3 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }.notification-item.is-unread h3 { font-weight: 750; }.notification-item p { margin: 3px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }.notification-item > i { width: 8px; height: 8px; border-radius: 50%; background: var(--notification-tone); }.notification-item.is-read > i { background: #b7c1cd; opacity: .55; }
.work-notification-panel > footer { min-height: 47px; display: grid; place-items: center; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.notification-state { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px; color: #64748b; text-align: center; }
.notification-state b { color: #0f2f5f; }.notification-state.is-error { color: #dc2626; }
@media (max-width: 700px) { .work-notification-panel { position: fixed; top: 72px; right: 10px; left: 74px; width: auto; }.work-notification-scroll { max-height: calc(100vh - 174px); }.work-notification-panel::before { display: none; } }