/* The phone's notification centre (static/js/mobile-notify.js): the desktop
 * bell's panel (notify.css) as a full-screen sheet at 390px. Pure white /
 * black by theme, no grey fills; on an app with a page colour
 * (mobile-page-colors.js: html[data-page-color] and --pc-*) it takes the
 * page's own colours.
 *
 * Every colour carries the #pn-center id and !important: the phone's theme
 * sweeps ([data-theme] * * *, [class*="bytes"] ...) repaint leaf text and
 * icons black otherwise. */

#pn-center {
  --pn-bg: #ffffff; --pn-ink: #0a0a0a; --pn-dim: #5f5f66; --pn-faint: #9a9aa1;
  --pn-line: #ececef; --pn-edge: #d9d9de; --pn-on-ink: #ffffff; --pn-red: #e5484d;
}
html[data-theme="dark"] #pn-center {
  --pn-bg: #000000; --pn-ink: #f5f5f6; --pn-dim: #a3a3ab; --pn-faint: #6e6e76;
  --pn-line: #1f1f23; --pn-edge: #2e2e34; --pn-on-ink: #000000;
}
html[data-page-color] #pn-center:not(#pc) {
  --pn-bg: var(--pc-page); --pn-ink: var(--pc-ink); --pn-dim: var(--pc-dim); --pn-faint: var(--pc-faint);
  --pn-line: var(--pc-line); --pn-edge: var(--pc-edge); --pn-on-ink: var(--pc-page);
}

/* ------------------------------------------------------------ the bell */
html body #mobile-app-header [data-pn-bell] { position: relative; }
html body #mobile-app-header [data-pn-bell] .pn-badge {
  position: absolute;
  top: 1px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e5484d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font: 700 10px/17px "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0 !important;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}
html body #mobile-app-header [data-pn-bell] .pn-badge[hidden] { display: none !important; }
/* The old static dot says nothing now; the count does. */
html body #mobile-app-header [data-pn-bell] .mobile-app-header__status-dot { display: none !important; }

/* ----------------------------------------------------------- the sheet */
html body #pn-center {
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  display: flex;
  flex-direction: column;
  background: var(--pn-bg) !important;
  color: var(--pn-ink) !important;
  font-family: "Archivo", "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
}
html body #pn-center[hidden] { display: none !important; }
html body #pn-center :where(*) {
  box-sizing: border-box;
  font-family: inherit;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}
html.pn-open body #bottom-nav,
html body:has(#pn-center:not([hidden])) #bottom-nav { display: none !important; }
html.pn-open, html.pn-open body { overflow: hidden !important; }

html body #pn-center .pn-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px 6px;
  background: transparent !important;
  border: 0 !important;
}
html body #pn-center .pn-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--pn-ink) !important;
  -webkit-text-fill-color: var(--pn-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body #pn-center .pn-tools { display: flex; align-items: center; gap: 4px; flex: none; }
html body #pn-center .pn-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: var(--pn-ink) !important;
  -webkit-text-fill-color: var(--pn-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
}
html body #pn-center .pn-icon svg { width: 22px; height: 22px; color: var(--pn-ink) !important; }
html body #pn-center .pn-gear svg { width: 20px; height: 20px; }
html body #pn-center .pn-gear.is-on { box-shadow: inset 0 0 0 1.5px var(--pn-ink) !important; }
html body #pn-center .pn-icon[hidden], html body #pn-center .pn-link[hidden] { display: none !important; }
html body #pn-center .pn-link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  cursor: pointer;
}

html body #pn-center .pn-chips {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--pn-line) !important;
}
html body #pn-center .pn-chips::-webkit-scrollbar { display: none; }
html body #pn-center .pn-chips[hidden] { display: none !important; }
html body #pn-center .pn-chip {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--pn-edge) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pn-ink) !important;
  -webkit-text-fill-color: var(--pn-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 30px;
  cursor: pointer;
}
html body #pn-center .pn-chip.is-on {
  background: var(--pn-ink) !important;
  border-color: var(--pn-ink) !important;
  color: var(--pn-on-ink) !important;
  -webkit-text-fill-color: var(--pn-on-ink) !important;
}
html body #pn-center .pn-chip:disabled { opacity: 0.4; }

html body #pn-center .pn-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
html body #pn-center .pn-group {
  margin: 0;
  padding: 16px 16px 6px;
  font: 700 11px/1 "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--pn-faint) !important;
  -webkit-text-fill-color: var(--pn-faint) !important;
}
html body #pn-center .pn-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 12px 16px;
  border: 0 !important;
  border-bottom: 1px solid var(--pn-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body #pn-center .pn-row:active { opacity: 0.6; }
html body #pn-center .pn-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--pn-edge) !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
html body #pn-center .pn-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body #pn-center .pn-av svg { width: 18px; height: 18px; color: var(--pn-ink) !important; }
html body #pn-center .pn-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
html body #pn-center .pn-line {
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  overflow-wrap: anywhere;
}
html body #pn-center .pn-line b {
  font-weight: 600 !important;
  color: var(--pn-ink) !important;
  -webkit-text-fill-color: var(--pn-ink) !important;
}
html body #pn-center .pn-row.is-unread .pn-line { color: var(--pn-ink) !important; -webkit-text-fill-color: var(--pn-ink) !important; }
html body #pn-center .pn-row.is-unread .pn-line b { font-weight: 800 !important; }
html body #pn-center .pn-detail {
  font-size: 13px !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
html body #pn-center .pn-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; }
html body #pn-center .pn-time {
  font: 500 11.5px/1 "JetBrains Mono", ui-monospace, monospace !important;
  color: var(--pn-faint) !important;
  -webkit-text-fill-color: var(--pn-faint) !important;
  white-space: nowrap;
}
html body #pn-center .pn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pn-red) !important; }
html body #pn-center .pn-dot[hidden] { display: none !important; }

html body #pn-center .pn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 72px 32px 32px;
  text-align: center;
}
html body #pn-center .pn-empty svg { width: 30px; height: 30px; color: var(--pn-faint) !important; margin-bottom: 4px; }
html body #pn-center .pn-empty b { font-size: 16px !important; font-weight: 700 !important; color: var(--pn-ink) !important; -webkit-text-fill-color: var(--pn-ink) !important; }
html body #pn-center .pn-empty p { margin: 0; max-width: 280px; font-size: 13.5px !important; color: var(--pn-dim) !important; -webkit-text-fill-color: var(--pn-dim) !important; }
html body #pn-center .pn-cta {
  margin-top: 12px;
  height: 44px;
  padding: 0 28px;
  border-radius: 22px;
  border: 0 !important;
  background: var(--pn-ink) !important;
  color: var(--pn-on-ink) !important;
  -webkit-text-fill-color: var(--pn-on-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
html body #pn-center .pn-note {
  margin: 16px;
  font-size: 13px !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
}

/* Members: per-app switches. */
html body #pn-center .pn-set-lead { margin: 12px 16px 4px; font-size: 13px !important; color: var(--pn-dim) !important; -webkit-text-fill-color: var(--pn-dim) !important; }
html body #pn-center .pn-set { padding: 14px 16px; border-bottom: 1px solid var(--pn-line) !important; }
html body #pn-center .pn-set-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body #pn-center .pn-set-name { font-size: 15px !important; font-weight: 700 !important; color: var(--pn-ink) !important; -webkit-text-fill-color: var(--pn-ink) !important; }
html body #pn-center .pn-set-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
html body #pn-center .pn-switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  border-radius: 14px;
  border: 1.5px solid var(--pn-edge) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
html body #pn-center .pn-switch .pn-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--pn-faint) !important;
  transition: transform 0.15s ease;
}
html body #pn-center .pn-switch.is-on { background: var(--pn-ink) !important; border-color: var(--pn-ink) !important; }
html body #pn-center .pn-switch.is-on .pn-knob { transform: translateX(18px); background: var(--pn-on-ink) !important; }

/* A post opened from a notification, lit briefly in its room. */
html body #mobile-community-room .community-room-message.pn-lit { box-shadow: inset 3px 0 0 currentColor; }

html body .pn-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2147483500;
  padding: 10px 16px;
  border-radius: 20px;
  background: #0a0a0a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 13px !important;
}

/* Line glyphs stay lines: the phone's icon sweeps fill every path. */
html body #pn-center svg path { fill: none !important; stroke: currentColor !important; }

/* ------------------------------------------- push row (web-push.js) */
html body #pn-center .wp-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--pn-line) !important;
  background: transparent !important;
}
html body #pn-center .wp-strip[hidden] { display: none !important; }
html body #pn-center .wp-text {
  flex: 1;
  margin: 0;
  font-size: 14px !important;
  line-height: 1.4;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
}
html body #pn-center .wp-btn {
  flex: none;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  border: 0 !important;
  background: var(--pn-ink) !important;
  color: var(--pn-on-ink) !important;
  -webkit-text-fill-color: var(--pn-on-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
html body #pn-center .wp-btn.is-on {
  background: transparent !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  box-shadow: inset 0 0 0 1px var(--pn-edge) !important;
}
html body #pn-center .wp-btn[hidden] { display: none !important; }
html body #pn-center .wp-btn:disabled { opacity: 0.6; }