/* The shared notification bell (vendored from _local_infrastructure/bell). Kicksaw's look: no fill, no circle,
   the nav's own text color; only the badge has a solid fill, and it carries a number, so unread never rests on
   hue alone. The dropdown follows the app's own light/dark switch (Kumori-style [data-theme="dark"] or Tailwind's
   .dark), never the OS setting directly, which would darken it on a light page; it uses the app's tokens when present. */
.bell-wrap { position: relative; display: inline-flex; align-items: center; }
/* Button and badge copy kicksaw's .notif-bell-btn / .notif-badge (kicksaw/static/css/base.css). Apps set --bell-icon,
   --bell-icon-hover (kicksaw: --text-muted / --text-primary) and --bell-ring (the nav background) for their palette. */
.bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .35rem; border: none;
  border-radius: 6px; background: none; color: var(--bell-icon, inherit); cursor: pointer; transition: color .2s, transform .2s; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { color: var(--bell-icon-hover, inherit); transform: scale(1.1); }
.bell-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bell-badge { position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: .5rem; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--bell-ring, transparent); animation: bell-badge-in .3s ease-out; }
@keyframes bell-badge-in { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

.bell-menu {
  --bell-bg: var(--surface, #ffffff); --bell-fg: var(--ink, #1a1a1a); --bell-muted: var(--ink-3, #6b6b6b);
  --bell-line: var(--line, #e5e5e5); --bell-hover: var(--paper-2, #f5f5f5);
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(340px, 90vw);
  background: var(--bell-bg); color: var(--bell-fg); border: 1px solid var(--bell-line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22); }
:root[data-theme="dark"] .bell-menu, .dark .bell-menu {
  --bell-bg: var(--surface, #1f2125); --bell-fg: var(--ink, #ededea); --bell-muted: var(--ink-3, #9a9a9a);
  --bell-line: var(--line, #34373d); --bell-hover: var(--paper-2, #2a2d33); }
.bell-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--bell-line); font-weight: 700; font-size: .85rem; }
.bell-head span { margin-right: auto; }
.bell-clear { border: 0; background: none; color: var(--bell-muted); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; }
.bell-list { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow: auto; }
.bell-note { padding: 10px; margin: 0; color: var(--bell-muted); font-size: .85rem; }
.bell-item { display: block; padding: 10px; border-radius: 8px; color: var(--bell-fg); font-size: .88rem; line-height: 1.35; text-decoration: none; }
.bell-item:hover { background: var(--bell-hover); text-decoration: none; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(10deg); }
  40% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 70% { transform: rotate(2deg); } 80% { transform: rotate(-1deg); } }
@keyframes bell-badge-pop { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.5); } 50% { transform: scale(.85); } 70% { transform: scale(1.2); } }
.bell-ring svg { animation: bell-ring .8s ease-in-out; transform-origin: top center; }
.bell-ring .bell-badge { animation: bell-badge-pop .5s ease .2s both; }
@media (prefers-reduced-motion: reduce) { .bell-ring svg, .bell-ring .bell-badge, .bell-badge { animation: none; } }
/* On a phone the bell sits left of the avatar, so a 340px menu anchored to its right edge ran off the left of the
   screen (inroads, 2026-10-15). Pin it to the viewport's gutters under the nav instead. */
@media (max-width: 480px) { .bell-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } }