.bellwrap{position:relative;display:flex;align-items:center;flex:none}
.bell{position:relative;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
background:rgba(255,255,255,.04);color:var(--ink);display:grid;place-items:center;cursor:pointer;
padding:0;-webkit-appearance:none;appearance:none}
.bell:hover{background:rgba(255,255,255,.1);color:var(--accent-text)}
.bell svg{width:19px;height:19px}
.bellcount{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:900;
line-height:19px;text-align:center;letter-spacing:0}

.tray{position:absolute;top:calc(100% + 12px);right:0;width:370px;max-height:min(70vh,520px);
overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;
box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:40;-webkit-overflow-scrolling:touch}
.trayhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 16px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;
background:var(--surface)}
.trayhead b{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.clearall{border:0;background:none;color:var(--accent-text);font:inherit;font-size:12px;
font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:2px 0}
.clearall:hover{color:var(--accent-hover,#FF9F4D)}
.traylist{list-style:none;margin:0;padding:6px}
.trayrow{display:flex;align-items:flex-start;gap:6px;border-radius:12px;
scroll-margin:52px 0 10px}
.trayrow:hover{background:var(--raise)}
.trayrow.unread{background:rgba(var(--accent-rgb,245,132,38),.08)}
.trayrow.unread:hover{background:rgba(var(--accent-rgb,245,132,38),.14)}
.trayhit{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;padding:11px 8px 12px 12px;
color:var(--ink)}
.trayhit:hover{color:var(--ink)}
.trayline{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.traykind{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
color:var(--accent-text)}
.trayago{font-size:11px;font-weight:700;color:var(--dim)}
.traytitle{font-size:14px;font-weight:800;line-height:1.25}
.traybody{font-size:13px;font-weight:500;color:var(--soft);line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.traydrop,.toastx{flex:none;width:30px;height:30px;margin:8px 8px 0 0;border:0;border-radius:50%;
background:none;color:var(--dim);display:grid;place-items:center;cursor:pointer;padding:0}
.traydrop svg,.toastx svg{width:13px;height:13px}
.traydrop:hover,.toastx:hover{background:rgba(255,255,255,.1);color:var(--ink)}
.traynone{padding:22px 14px;color:var(--dim);font-size:13px;font-weight:600;text-align:center}

.fwtoasts{position:fixed;top:14px;right:14px;width:370px;max-width:calc(100vw - 28px);
display:flex;flex-direction:column;gap:10px;z-index:60;pointer-events:none}
.fwtoast{display:flex;align-items:flex-start;gap:6px;background:var(--surface);
border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;
box-shadow:0 18px 44px rgba(0,0,0,.55);pointer-events:auto;opacity:0;
transform:translateY(-10px);transition:opacity .2s ease,transform .2s cubic-bezier(0,0,.2,1)}
.fwtoast.on{opacity:1;transform:translateY(0)}
.toasthit{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;
padding:12px 6px 13px 14px;color:var(--ink)}
.toasthit:hover{color:var(--ink)}
.toastkind{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
color:var(--accent-text)}
.toasttitle{font-size:15px;font-weight:800;line-height:1.2}
.toastbody{font-size:13px;font-weight:500;color:var(--soft);line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .fwtoast{transition:none;transform:none;opacity:1}
  .fwtoast.on{transform:none}
}

@media (max-width: 768px){
  .bell{width:36px;height:36px}
  .tray{position:fixed;top:64px;left:8px;right:8px;width:auto;max-height:60vh}
  .fwtoasts{top:8px;left:8px;right:8px;width:auto;max-width:none}
  .toasttitle{font-size:14px}
}