.notifications-wrap{z-index:120;width:min(430px,100vw - 36px);position:absolute;top:calc(100% + 10px);left:0;right:auto}.notifications-panel{max-height:calc(var(--app-visual-viewport-height,100dvh) - 76px - env(safe-area-inset-bottom));flex-direction:column;width:100%;display:flex;overflow:hidden}.notifications-page-panel>.panel-header,.notifications-panel>.panel-header{box-sizing:border-box;min-height:var(--app-subpage-header-height);padding:calc(var(--app-subpage-header-padding) + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) var(--app-subpage-header-padding) calc(12px + env(safe-area-inset-left));gap:8px}.notifications-page-panel>.panel-header .panel-title,.notifications-panel>.panel-header .panel-title{flex:auto}.notifications-panel>.panel-header .panel-title h2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.notifications-panel .topbar-page-back{background:var(--glass-control);border:1px solid var(--line);color:var(--ink);font:inherit;white-space:nowrap;border-radius:12px;flex:none;justify-content:center;align-items:center;gap:4px;width:44px;height:44px;min-height:44px;padding:0 10px;font-weight:800;display:inline-flex}.notifications-page-panel .notifications-read-all-button,.notifications-panel .notifications-read-all-button{white-space:nowrap;flex:none;min-width:44px;min-height:44px}@media (width<=400px){.notifications-panel .notifications-read-all-label{display:none}}.notification-smart-summary{border-bottom:1px solid var(--line);background:linear-gradient(135deg,#eef6f4,#fff7ec);flex:none;gap:3px;padding:12px;display:grid}.notification-smart-summary span{color:var(--accent);font-size:11px;font-weight:900}.notification-smart-summary strong{color:var(--ink);font-size:14px}.notification-smart-summary small{color:var(--muted);font-size:12px;line-height:1.7}.notification-list{overscroll-behavior:contain;flex:auto;grid-auto-rows:max-content;align-content:start;gap:8px;min-height:0;padding:12px;display:grid;overflow-y:auto}.notification-section-label{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;padding:2px 2px 0;font-size:11px;font-weight:900;display:flex}.notification-section-label small{font-size:11px;font-weight:800}.notification-footer{border-top:1px solid var(--line);flex:none;padding:12px}.notification-footer .soft-button{width:100%}.notification-item{border:1px solid var(--line);color:var(--ink);text-align:right;background:#fbf8f1;border-radius:8px;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px;width:100%;padding:10px;transition:border-color .18s,box-shadow .18s,transform .18s;display:grid;overflow:hidden}.notification-item[role=button]{cursor:pointer}.notification-item:focus-visible{outline-offset:2px;outline:2px solid #156b646b}.notification-item>span:nth-child(2){gap:2px;min-width:0;display:grid}.notification-item:hover{border-color:#156b6473;transform:translateY(-1px);box-shadow:0 7px 16px #2a4c4a1c}.notification-item:active{transform:translateY(0);box-shadow:0 3px 8px #2a4c4a29}.notification-item.unread{background:#eef6f4;border-color:#156b6459}.notification-item.priority-urgent{border-color:#9f3e2461}.notification-item.priority-high{border-color:#156b6475}.notification-item.priority-quiet .notification-dot{background:var(--line)}.notification-item.marking-read{border-color:#156b6494;animation:.7s notification-marked;box-shadow:0 8px 18px #156b6433}.notification-item.marking-read-error{border-color:#f2bca8;animation:.7s notification-marked-error;box-shadow:0 8px 18px #9f3e2433}@keyframes notification-marked{0%{background:#eef6f4}to{background:#fbf8f1}}@keyframes notification-marked-error{0%{background:#fff3ef}to{background:#fbf8f1}}.notification-dot{background:var(--line);border-radius:999px;width:9px;height:9px;margin-top:7px}.notification-item.unread .notification-dot{background:var(--accent)}.notification-item.priority-urgent .notification-dot{background:#b6492f}.notification-item.priority-high .notification-dot{background:#156b64}.notification-item.priority-normal .notification-dot{background:#2f7b73}.notification-item em,.notification-item small,.notification-item strong{overflow-wrap:anywhere;min-width:0;max-width:100%;display:block}.notification-item small{-webkit-line-clamp:2;line-clamp:2;white-space:normal;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.notification-item time{white-space:nowrap}.notification-item em{color:var(--accent);margin-top:5px;font-size:11px;font-style:normal;font-weight:800}.notification-actions{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.notification-action-button{border:1px solid var(--line);white-space:nowrap;border-radius:8px;align-items:center;gap:4px;min-height:30px;padding:0 9px;font-size:12px;font-weight:900;display:inline-flex}.notification-action-button.accept{color:#fff;background:#156b64;border-color:#156b64}.notification-action-button.reject{color:var(--muted);background:#fff}.notification-action-button:disabled{cursor:wait;opacity:.64}.notification-empty{background:#f4f8f7;border:1px dashed #156b6466;border-radius:8px;gap:4px;padding:16px;display:grid}.notification-empty strong{color:#1c3433;font-size:13px}.notification-empty small{color:var(--muted);font-size:12px;line-height:1.8}.notifications-read-all-button:disabled{cursor:wait;opacity:.82}.notifications-read-all-button.loading{border-color:#156b646b}.notifications-read-all-button.done{color:#1c4a47;background:#e8f3ef;border-color:#156b646b}.notifications-read-all-button.error{color:#9f3e24;background:#fff0eb;border-color:#f2bca8}@media (width<=760px){.notifications-wrap{z-index:95;width:auto;position:fixed;inset:0}.notifications-panel{box-shadow:none;border:0;border-radius:0;flex-direction:column;width:100%;height:100dvh;max-height:100dvh;display:flex}.notifications-panel .panel-title{flex:auto}.notifications-panel .notification-list{overscroll-behavior:contain;flex:auto;min-height:0;overflow:auto}.notifications-panel .notification-footer{padding-bottom:calc(12px + env(safe-area-inset-bottom));flex:none}.notification-item{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px}.notification-item time{white-space:normal;grid-column:2;justify-self:start}}
