.notification-menu { position: relative; }
.notification-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border: 1px solid var(--pale-sage); border-radius: 50%; background: var(--surface); color: var(--moss); cursor: pointer; }
.notification-button:hover { background: var(--mist); }
.notification-button .verdant-icon { width: 20px; height: 20px; }
.notification-badge { position: absolute; top: -3px; right: -4px; min-width: 20px; height: 20px; padding: 1px 5px; border-radius: 10px; background: var(--rust); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.notification-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 120; width: min(390px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; padding: 16px; border: 1px solid var(--pale-sage); border-radius: 14px; background: var(--surface); box-shadow: 0 14px 36px rgb(27 56 43 / 18%); color: var(--ink); }
.notification-panel > header { position: static; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; border: 0; background: transparent; backdrop-filter: none; }
.notification-panel h2 { font-size: 1.1rem; color: var(--moss); }
.notification-panel header button, .notification-panel > button { min-height: 44px; padding: 8px 10px; border: 0; background: transparent; color: var(--moss); cursor: pointer; font: inherit; font-size: .78rem; }
.notification-panel > p { min-height: 1.3em; margin: 0 0 8px; color: var(--sage); font-size: .8rem; }
.notification-day { margin: 12px 0 5px; color: var(--sage); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.notification-item { display: grid; width: 100%; gap: 2px; padding: 11px 10px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.notification-item:hover, .notification-item:focus-visible { background: var(--mist); }
.notification-item.is-unread { border-left-color: var(--moss); background: color-mix(in srgb, var(--mist) 70%, transparent); }
.notification-item strong { font-size: .86rem; }
.notification-item span, .notification-item small { color: var(--sage); font-size: .75rem; }
.notification-item small { font-weight: 600; }
@media (max-width: 640px) {
  .notification-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    bottom: auto;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 120px);
    box-shadow: 0 14px 36px rgb(27 56 43 / 22%);
  }
}