/* The notification bell (TP-559, public/notifications): in the tab bar between the Setup gear and the person, drawn like
   them; its red count on the bell; the list under it — right-aligned on a wide screen, the full width under the top bar
   on a phone. Built without a design: poc-ui. */
.notif-bell { position: relative; flex: none; display: flex; align-items: stretch; }
.notif-btn {
  flex: none; width: 44px;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.notif-btn svg { width: 22px; height: 22px; }
.notif-bell.open .notif-btn { color: var(--accent); border-bottom-color: var(--accent); }
@media (hover: hover) { .notif-btn:hover { color: var(--accent); } }
.notif-count {
  position: absolute; top: 2px; left: 24px; pointer-events: none;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center;
}
/* A tap outside closes the list: a clear layer behind it. */
.notif-scrim { position: fixed; inset: 0; z-index: 40; background: transparent; }
.notif-panel {
  position: absolute; top: 100%; right: 0; z-index: 41;
  width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.notif-head {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.notif-title { font-weight: 600; }
.notif-rows { display: flex; flex-direction: column; }
.notif-row {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: baseline; gap: 8px;
  width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.notif-row > .notif-text { grid-column: 2; overflow-wrap: anywhere; }
.notif-row > .notif-when { grid-column: 3; white-space: nowrap; }
.notif-row.unseen .notif-text { font-weight: 600; }
.notif-dot { grid-column: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); align-self: center; }
@media (hover: hover) { .notif-row:hover { background: var(--surface-2); } }
.notif-empty { margin: 0; padding: 14px 12px; }
.notif-more { display: block; margin: 8px auto; }
/* A phone: the list takes the full width under the top bar. */
@media (max-width: 640px) {
  .notif-panel { position: fixed; top: var(--topbar-h, 56px); left: 0; right: 0; width: auto; border-radius: 0 0 10px 10px; max-height: calc(100vh - var(--topbar-h, 56px) - 16px); }
}