/* Compact notifications: outline icon, title and relative time. */
.product-topbar .notification-popover { width:min(420px,calc(100vw - 24px)); padding:0; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--foreground); box-shadow:0 8px 24px color-mix(in srgb, var(--shadow-color) 7.1%, transparent); overflow:hidden; }
.product-topbar .notification-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid var(--border); background:var(--card); }
.product-topbar .notification-head > strong { color:var(--foreground); font-size:14px; font-weight:600; }
.product-topbar .notification-head-actions { display:flex; align-items:center; }
.product-topbar [data-notifications-head-count] { display:none; }
.product-topbar .notification-head-actions button { padding:0; border:0; background:transparent; color:var(--muted-foreground); font-size:11px; font-weight:400; cursor:pointer; box-shadow:none; }
.product-topbar .notification-head-actions button:disabled { opacity:.45; cursor:default; }
.product-topbar .notification-list { padding:0 5px; max-height:min(340px,calc(100dvh - 180px)); overflow-y:auto; }
.product-topbar .notification-item,
.product-topbar .notification-item.is-unread { display:flex; align-items:flex-start; gap:14px; margin:0; padding:18px 16px; border:0; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,var(--card)); border-radius:0 0 10px 10px; background:var(--card); color:var(--foreground); text-decoration:none; }
.product-topbar .notification-item:last-child { border-bottom:0; }
.product-topbar .notification-item:hover { background:var(--muted); }
.product-topbar .notification-item::after { content:none; }
.product-topbar .notification-icon { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border:0; border-radius:0; background:transparent; color:var(--foreground); box-shadow:none; }
.product-topbar .notification-icon .icon { width:23px; height:23px; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.product-topbar .notification-item > span:last-child { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.product-topbar .notification-item strong { margin:0; color:var(--foreground); font-size:14px; line-height:1.45; font-weight:500; overflow-wrap:anywhere; }
.product-topbar .notification-item.is-unread strong { font-weight:600; }
.product-topbar .notification-item em { margin:0; color:var(--muted-foreground); font-size:12px; font-style:normal; font-weight:400; }
.product-topbar .notification-more { padding:8px; background:var(--card); border:0; }
.product-topbar .notification-more-button { background:var(--card); color:var(--foreground); border-color:var(--border); box-shadow:none; }
.product-topbar .notification-empty { padding:24px 16px; color:var(--muted-foreground); font-size:13px; }
.notification-popover :is(a,button):focus-visible { outline:2px solid var(--ring); outline-offset:-2px; }
@media(max-width:600px) { .product-topbar .notification-popover { position:fixed; top:70px; right:12px; } .product-topbar .notification-head { flex-wrap:wrap; gap:8px; } }