.notification-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-default);border-radius:999px;background:color-mix(in srgb,var(--bg-surface) 86%,transparent);color:var(--text-secondary);box-shadow:var(--shadow-sm);transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.notification-trigger.has-unread,.notification-trigger:focus-visible,.notification-trigger:hover{border-color:color-mix(in srgb,var(--brand) 38%,var(--border-default));background:color-mix(in srgb,var(--brand) 8%,var(--bg-surface));color:var(--text-primary);outline:none}.notification-trigger:active{transform:translateY(1px)}.notification-badge{position:absolute;top:-4px;right:-4px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border:2px solid var(--bg-base);border-radius:999px;padding:0 5px;background:var(--brand);color:var(--text-inverse);font-size:10px;font-weight:800;line-height:1}.notification-panel{z-index:1000;width:min(354px,calc(100vw - 18px));max-height:min(540px,calc(100dvh - var(--app-header-height) - 18px));overflow:hidden;border-color:var(--border-default);border-radius:var(--radius-lg);background:var(--bg-base);padding:0;color:var(--text-primary);box-shadow:0 18px 52px rgba(15,23,42,.2)}.notification-panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 12px;border-bottom:1px solid var(--border-subtle);background:color-mix(in srgb,var(--bg-surface) 78%,transparent)}.notification-panel-header h2{margin:0;font-size:15px;font-weight:760;letter-spacing:0;line-height:1.2}.notification-panel-header p{margin:3px 0 0;color:var(--text-tertiary);font-size:12px;font-weight:650}.notification-mark-all{display:inline-flex;align-items:center;gap:6px;min-height:32px;border:1px solid var(--border-subtle);border-radius:10px;padding:0 10px;background:color-mix(in srgb,var(--bg-elevated) 78%,transparent);color:var(--text-secondary);font-size:12px;font-weight:720;white-space:nowrap;transition:border-color .14s var(--button-ease),background-color .14s var(--button-ease),color .14s var(--button-ease),transform .1s var(--button-ease)}.notification-mark-all:focus-visible,.notification-mark-all:hover:not(:disabled){border-color:color-mix(in srgb,var(--brand) 28%,var(--border-default));color:var(--text-primary);outline:none}.notification-mark-all:active:not(:disabled){transform:scale(.96)}.notification-mark-all:disabled{cursor:not-allowed;opacity:.48}.notification-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:8px;border-bottom:1px solid var(--border-subtle);background:var(--bg-base)}.notification-tabs button{min-height:34px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-tertiary);font-size:12px;font-weight:760;transition:border-color .14s var(--button-ease),background-color .14s var(--button-ease),color .14s var(--button-ease),transform .1s var(--button-ease)}.notification-tabs button.active,.notification-tabs button:focus-visible,.notification-tabs button:hover{border-color:var(--border-subtle);background:color-mix(in srgb,var(--bg-elevated) 82%,transparent);color:var(--text-primary);outline:none}.notification-tabs button:active{transform:scale(.96)}.notification-list{display:grid;max-height:min(460px,calc(100dvh - 232px));overflow-y:auto;padding:6px;overscroll-behavior:contain}.notification-item{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 8px;align-items:start;gap:10px;width:100%;border:1px solid transparent;border-radius:var(--radius-lg);padding:10px;background:transparent;color:var(--text-primary);text-align:left;transition:border-color .14s var(--button-ease),background-color .14s var(--button-ease),transform .1s var(--button-ease)}.notification-item:focus-visible,.notification-item:hover{border-color:var(--border-subtle);background:color-mix(in srgb,var(--bg-elevated) 72%,transparent);outline:none}.notification-item:active{transform:scale(.99)}.notification-item.is-unread{background:color-mix(in srgb,var(--brand) 7%,transparent)}.notification-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-surface);color:var(--text-secondary)}.notification-icon.tone-feedback{background:color-mix(in srgb,#3b82f6 10%,var(--bg-surface));color:#2563eb}.notification-icon.tone-helpful{background:color-mix(in srgb,#16a34a 10%,var(--bg-surface));color:#15803d}.notification-icon.tone-trust{background:color-mix(in srgb,#d4a72c 14%,var(--bg-surface));color:#a16207}.notification-icon.tone-moderation{background:color-mix(in srgb,#ef4444 9%,var(--bg-surface));color:#dc2626}.notification-icon.tone-system{background:color-mix(in srgb,var(--brand) 10%,var(--bg-surface));color:var(--brand-dark)}.notification-copy{display:grid;gap:4px;min-width:0}.notification-title-row{display:flex;align-items:baseline;gap:8px;min-width:0}.notification-title-row strong{min-width:0;overflow:hidden;color:var(--text-primary);font-size:13px;font-weight:760;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.notification-title-row time{margin-left:auto;color:var(--text-tertiary);font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap}.notification-copy>span:last-child:not(.notification-title-row){display:-webkit-box;overflow:hidden;color:var(--text-secondary);font-size:12px;font-weight:560;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.notification-dot{align-self:center;width:7px;height:7px;border-radius:999px;background:var(--brand)}.notification-empty{display:flex;align-items:center;justify-content:center;min-height:148px;padding:18px;color:var(--text-tertiary);font-size:13px;font-weight:650;text-align:center}body.main-app-dark .notification-panel{border-color:var(--app-chrome-border);background:var(--bg-base);box-shadow:0 24px 80px rgba(0,0,0,.42)}body.main-app-dark .notification-badge{border-color:var(--app-chrome-bg)}@media (max-width:520px){.notification-panel{width:calc(100vw - 14px);max-height:min(500px,calc(100dvh - var(--app-header-height) - 14px));border-radius:14px}}