/* popover.css — the notification dropdown.
   Built like the app's menus: translucent, blurred, rounded well past its rows,
   and anchored to the control it came from so it reads as having opened out of
   the bell rather than appeared beside it. */
.popover{position:absolute;right:0;top:44px;width:340px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;z-index:40;transform-origin:top right;animation:popIn 180ms var(--ease-out) both}
.popover .head{padding:12px 16px;border-bottom:1px solid var(--line-mid);font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.popover .notif{padding:12px 16px;border-bottom:1px solid var(--line-soft);display:flex;gap:11px}
.popover .notif:last-of-type{border-bottom:0}
.popover .notif span.d{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:6px;flex:0 0 auto}
/* A row already read keeps its dot's space so the text stays aligned with the
   rows around it, and loses its colour. */
.popover .notif span.d.read{background:var(--line-mid)}
/* A row that leads to a ticket says so by behaving like the queue's own rows. */
.popover .notif.tappable{cursor:pointer}
.popover .notif.tappable:hover{background:var(--hover)}
.popover .notif .txt{font-size:13.5px;line-height:1.4;letter-spacing:-.006em;text-wrap:pretty}
.popover .notif .time{font-size:11.5px;color:var(--muted);margin-top:4px}
.popover .foot{width:100%;border:0;border-top:1px solid var(--line-soft);background:transparent;padding:12px;font-size:13px;color:var(--accent);cursor:pointer;font-weight:590}
.popover .foot:hover{background:var(--hover)}
/* The bell with nothing in it. The table's .empty is sized for a full card;
   inside a 340px popover it needs its own, smaller box. */
.popover .empty{padding:30px 16px;font-size:13px}