/* The bell drops down (the Founder, 8 October 2026, 22:44): a list under the bell, newest first, unread tinted with a
   dot, as Facebook's and Instagram's are. bell-panel.js */

.bell-panel{position:fixed;z-index:60;display:flex;flex-direction:column;width:min(400px,calc(100vw - 16px));overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);color:var(--ink,#24242c);box-shadow:0 18px 44px rgba(30,16,52,.18)}
.bell-panel.bell-sheet{border-radius:0 0 16px 16px;border-inline-start:0;border-inline-end:0;border-top:0}
.bell-head{flex:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 8px 6px 16px;border-bottom:1px solid var(--line)}
.bell-heading{flex:1;min-width:0;margin:0;font-size:1.0625rem;line-height:1.3}
.bell-all-read.text-button{flex:none;min-height:44px;padding:0 8px;font-size:.875rem;font-weight:600;color:var(--purple,#6d28b5);background:none;border:0;cursor:pointer}
.bell-settings.icon-button{flex:none;width:44px;height:44px;color:var(--muted)}
.bell-settings .icon{width:20px;height:20px}
.bell-list{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;padding:4px 0;list-style:none;overscroll-behavior:contain}
.bell-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 16px;border:0;background:none;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer}
.bell-row:hover{background:var(--soft,#f6f3fb)}
.bell-row:focus-visible{outline:2px solid var(--purple,#6d28b5);outline-offset:-2px}
.bell-row.unread{background:color-mix(in srgb,var(--purple,#6d28b5) 8%,transparent)}
.bell-row.unread:hover{background:color-mix(in srgb,var(--purple,#6d28b5) 13%,transparent)}
.bell-face{flex:none;display:grid;place-items:center;width:36px;height:36px;overflow:hidden;border-radius:50%}
.bell-face>*{max-width:36px;max-height:36px}
.bell-copy{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.bell-title,.bell-line{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bell-title{font-size:.9375rem;line-height:1.3;font-weight:400}
.bell-row.unread .bell-title{font-weight:700}
.bell-line{font-size:.8125rem;line-height:1.3;color:var(--muted)}
.bell-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bell-time{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.bell-row.unread .bell-time{color:var(--purple,#6d28b5);font-weight:600}
.bell-dot{width:9px;height:9px;border-radius:50%;background:var(--purple,#6d28b5);visibility:hidden}
.bell-row.unread .bell-dot{visibility:visible}
.bell-empty{margin:0;padding:20px 16px;color:var(--muted)}
.bell-see-all{flex:none;display:flex;align-items:center;justify-content:center;min-height:48px;border-top:1px solid var(--line);color:var(--purple,#6d28b5);font-weight:600;text-decoration:none}
.bell-see-all:hover{background:var(--soft,#f6f3fb)}
.bell-panel .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

[data-theme=dark] .bell-panel{box-shadow:0 18px 44px rgba(0,0,0,.5)}
[data-theme=dark] .bell-row.unread{background:color-mix(in srgb,#c9a6f2 12%,transparent)}
[data-theme=dark] .bell-row.unread .bell-time,[data-theme=dark] .bell-all-read.text-button,[data-theme=dark] .bell-see-all{color:#c9a6f2}
[data-theme=dark] .bell-dot{background:#c9a6f2}