/* notifications.css — per-user notification tray (bell) in the topbar right.
 *
 * Anchored dropdown, deliberately built to the same recipe as
 * .settings-dropdown in layout.css (relative wrapper, right: 0, top: 100%) so
 * the two menus sit identically under the topbar.
 *
 * The panel is a flex column: fixed head + footer, scrolling list in between.
 * Two independent height caps apply — the list's own max-height, and a cap on
 * the whole panel relative to the viewport so it can never be taller than the
 * browser window.
 */

.mn-notif {
  --mn-notif-amber: #f0a726;
  --mn-notif-red: #d92d20;
  --mn-notif-width: 340px;
  position: relative;
  display: inline-flex;
}
/* Signed-out users get no tray (notifications.js sets [hidden] on the wrapper).
   This rule is what actually hides it: the `display: inline-flex` above is an
   author declaration, so it beats the UA stylesheet's `[hidden] {display:none}`
   and the attribute alone would do nothing. Same trap as the Updates modal. */
.mn-notif[hidden] {
  display: none;
}
body[data-mode="dark"] .mn-notif {
  /* Both lifted so they keep their punch against the dark bar. */
  --mn-notif-amber: #ffb937;
  --mn-notif-red: #ff5a4d;
}

/* ---- Bell + unread count ---- */
.mn-notif-toggle {
  position: relative;
}

/* Red bubble carrying the unread count. min-width + padding keep it a circle
   at one digit and let it grow into a pill at two or more, rather than
   squashing the number. */
.mn-notif-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mn-notif-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Ring in the bar's own background so the bubble reads as separate from the
     bell glyph rather than merging with it. */
  box-shadow: 0 0 0 2px var(--topbar-bg);
  pointer-events: none;
}
/* Needed because of the `display: inline-flex` above — see the note on
   .mn-notif[hidden]. Specificity beats the base rule, so order doesn't matter. */
.mn-notif-badge[hidden] {
  display: none;
}

/* ---- Panel ---- */
.mn-notif-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  width: min(var(--mn-notif-width), calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  /* Never taller than the window: the topbar sits above us, plus a little
     breathing room at the bottom. */
  max-height: calc(100vh - var(--topbar-h) - 1rem);
  margin-top: 0.35rem;
  border-radius: var(--radius-panel);
  border: 1px solid var(--panel-border);
  /* Fully OPAQUE, unlike the settings dropdown. The frosted look relied on
     backdrop-filter, which never actually blurs here: .topbar-stack and
     .topbar both set backdrop-filter, and an element inside one of those is
     its own backdrop root — so the panel's blur has nothing to sample and you
     were left with plain translucency. Fine over the page background, but on
     a phone the panel covers dense text and it became hard to read.
     An opaque base with the translucent topbar tint painted over it keeps the
     colour palettes tinting the panel while letting nothing through. */
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--topbar-bg), var(--topbar-bg));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.mn-notif-panel.hidden {
  display: none !important;
}

.mn-notif-head {
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.75;
}

/* ---- List (the scroller) ---- */
.mn-notif-list {
  flex: 1 1 auto;
  min-height: 0;              /* lets the flex child actually shrink + scroll */
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;  /* don't scroll the page at the ends */
  margin: 0;
  padding: 0;
  list-style: none;
}

.mn-notif-item {
  display: grid;
  /* unread dot | icon | text+time */
  grid-template-columns: 10px 18px 1fr;
  align-items: start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-body);
}
.mn-notif-item + .mn-notif-item {
  border-top: 1px solid var(--divider);
}

/* The dot column is always present so icons and text stay aligned whether or
   not an item is unread. */
.mn-notif-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.32rem;
  border-radius: 50%;
  background: transparent;
}
.mn-notif-item.is-unread .mn-notif-dot {
  background: var(--mn-notif-amber);
}

.mn-notif-icon {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  text-align: center;
  opacity: 0.8;
}

.mn-notif-body {
  min-width: 0;
}
.mn-notif-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mn-notif-time {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

/* Only items carrying an href become interactive (phase 2 wires the action). */
.mn-notif-item.is-clickable {
  cursor: pointer;
}
.mn-notif-item.is-clickable:hover,
.mn-notif-item.is-clickable:focus-visible {
  background: var(--hover-bg);
  outline: none;
}

/* ---- Empty state ---- */
.mn-notif-empty {
  margin: 0;
  padding: 1.4rem 0.75rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.84rem;
  opacity: 0.6;
}
.mn-notif-empty[hidden] {
  display: none;
}

/* ---- Footer: both actions on one row ---- */
.mn-notif-foot {
  flex: 0 0 auto;
  padding: 0.4rem;
  border-top: 1px solid var(--border-color);
}
.mn-notif-foot[hidden] {
  display: none;
}

/* Clear all | Enable push. Both flex so a solo button spans the full width
   when the other is hidden (empty tray, or a device without push). */
.mn-notif-actions {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.mn-notif-clear,
.mn-notif-pushbtn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: transparent;
  color: inherit;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.mn-notif-clear[hidden],
.mn-notif-pushbtn[hidden] {
  display: none;
}
.mn-notif-clear:hover,
.mn-notif-clear:focus-visible,
.mn-notif-pushbtn:hover,
.mn-notif-pushbtn:focus-visible {
  background: var(--hover-bg);
  outline: none;
  box-shadow: 0 0 0 1px var(--border-color);
}
.mn-notif-clear[disabled],
.mn-notif-pushbtn[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* Destructive, so it reads red. Given a fixed share of the row rather than
   just its label width: it is the button people actually use, and at content
   width the longer push label dwarfed it. */
.mn-notif-clear {
  flex: 0 0 40%;
  color: var(--mn-notif-red);
  border-color: color-mix(in srgb, var(--mn-notif-red) 35%, transparent);
}
.mn-notif-clear:hover,
.mn-notif-clear:focus-visible {
  background: color-mix(in srgb, var(--mn-notif-red) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mn-notif-red) 45%, transparent);
}

/* When push isn't available at all, "Clear all" is the only button, so let it
   take the row rather than leaving dead space beside it. [hidden] elements are
   still children, so :only-child won't do — hence :has(), already used
   elsewhere in this codebase. */
.mn-notif-actions:has(.mn-notif-pushbtn[hidden]) .mn-notif-clear {
  flex: 1 1 auto;
}

/* Registered on this device — quietly marked, not shouted about. */
.mn-notif-pushbtn.is-on {
  border-color: color-mix(in srgb, var(--mn-notif-amber) 55%, transparent);
}

/* Explanations for cases the user can't fix from here (iOS not installed,
   permission blocked, push service unavailable). Full width under the row. */
.mn-notif-pushnote {
  margin: 0;
  padding: 0.35rem 0.2rem 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.65;
}
.mn-notif-pushnote[hidden] {
  display: none;
}

/* ---- Narrow screens ---- */
@media (max-width: 640px) {
  .mn-notif {
    --mn-notif-width: 300px;
  }
  .mn-notif-list {
    max-height: min(55vh, 340px);
  }
  /* On a narrow phone the push label is close to the button width. Let it wrap
     onto a second line rather than ellipsis away to "Enable push notificati…";
     the row simply gets a little taller. */
  .mn-notif-pushbtn {
    white-space: normal;
  }
}