/* The notifications bell and its panel (static/js/notify.js), on every desktop
 * page. Pure white / black by theme; on an app with a page colour
 * (page-colors.css: html[data-page-color] and the --pc-* palette) the panel
 * takes the page's own colours. The bell itself inherits its bar's colour. */

:root {
  --nt-bg: #ffffff; --nt-ink: #0e0e0e; --nt-dim: #6b6b70; --nt-faint: #a1a1a6;
  --nt-line: #ececee; --nt-edge: #dcdce0; --nt-hover: #f5f5f6; --nt-unread: #fafafa;
  --nt-on-ink: #ffffff; --nt-shadow: 0 18px 48px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
}
:root[data-theme="dark"] {
  --nt-bg: #111113; --nt-ink: #f4f4f5; --nt-dim: #a1a1aa; --nt-faint: #71717a;
  --nt-line: #232327; --nt-edge: #2e2e33; --nt-hover: #1b1b1f; --nt-unread: #17171a;
  --nt-on-ink: #0e0e0e; --nt-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px #2e2e33;
}
:root[data-page-color]:not(#pc) {
  --nt-bg: var(--pc-card); --nt-ink: var(--pc-ink); --nt-dim: var(--pc-dim); --nt-faint: var(--pc-faint);
  --nt-line: var(--pc-line); --nt-edge: var(--pc-edge); --nt-hover: var(--pc-hover); --nt-unread: var(--pc-soft);
  --nt-on-ink: var(--pc-card);
}

/* ----------------------------------------------------------------- bell */
.nt-bell {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, currentColor 22%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.nt-bell:hover, .nt-bell.is-open { background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.nt-bell:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nt-bell svg { display: block; width: 18px; height: 18px; }
.nt-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  /* Red on any bar, light or dark or page-coloured: the one signal colour. */
  background: #e5484d;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font: 700 10.5px/18px "JetBrains Mono", ui-monospace, monospace;
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
}
.nt-badge[hidden] { display: none; }

/* ---------------------------------------------------------------- panel */
.nt-panel {
  position: fixed;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nt-bg);
  color: var(--nt-ink);
  border: 1px solid var(--nt-edge);
  border-radius: 14px;
  box-shadow: var(--nt-shadow);
  font-family: "Archivo", "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}
.nt-panel[hidden] { display: none; }
.nt-panel * { box-sizing: border-box; }
.nt-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}
.nt-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--nt-ink); }
.nt-link {
  border: 0;
  background: none;
  padding: 4px 0;
  color: var(--nt-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.nt-link:hover { color: var(--nt-ink); text-decoration: underline; text-underline-offset: 3px; }
.nt-link[hidden] { display: none; }
.nt-tools { display: flex; align-items: center; gap: 10px; }
.nt-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--nt-dim); cursor: pointer;
}
.nt-gear svg { width: 16px; height: 16px; display: block; }
.nt-gear:hover, .nt-gear.is-on { color: var(--nt-ink); background: var(--nt-hover); }
.nt-gear:focus-visible { outline: 2px solid var(--nt-ink); outline-offset: 1px; }
.nt-gear[hidden] { display: none; }

.nt-chips {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--nt-line);
}
.nt-chips::-webkit-scrollbar { display: none; }
.nt-chips[hidden] { display: none; }
.nt-chip {
  flex: none;
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  border: 1px solid var(--nt-edge);
  background: transparent;
  color: var(--nt-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.nt-chip:hover { background: var(--nt-hover); }
.nt-chip.is-on { background: var(--nt-ink); border-color: var(--nt-ink); color: var(--nt-on-ink); }

.nt-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 8px; }
.nt-group {
  margin: 0;
  padding: 10px 16px 4px;
  color: var(--nt-faint);
  font: 700 10.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nt-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 9px 16px;
  color: var(--nt-ink);
  text-decoration: none;
  cursor: pointer;
}
.nt-row:hover { background: var(--nt-hover); }
.nt-row:focus-visible { outline: 2px solid var(--nt-ink); outline-offset: -2px; }
.nt-row.is-unread { background: var(--nt-unread); }
.nt-row.is-unread:hover { background: var(--nt-hover); }
.nt-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nt-hover);
  border: 1px solid var(--nt-line);
  color: var(--nt-dim);
  font-size: 11px;
  font-weight: 800;
}
.nt-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-av svg { width: 16px; height: 16px; }
.nt-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.nt-line { color: var(--nt-ink); overflow-wrap: anywhere; }
.nt-line b { font-weight: 700; }
.nt-row:not(.is-unread) .nt-line { color: var(--nt-dim); }
.nt-row:not(.is-unread) .nt-line b { color: var(--nt-ink); font-weight: 600; }
.nt-detail {
  color: var(--nt-dim);
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.nt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 2px; }
.nt-time { color: var(--nt-faint); font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nt-ink); }
.nt-dot[hidden] { display: none; }

.nt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 24px 32px;
  text-align: center;
  color: var(--nt-dim);
}
.nt-empty svg { width: 26px; height: 26px; color: var(--nt-faint); margin-bottom: 4px; }
.nt-empty b { color: var(--nt-ink); font-size: 14px; }
.nt-empty p { margin: 0; max-width: 260px; font-size: 12.5px; }
.nt-cta {
  margin-top: 10px;
  height: 34px;
  padding: 0 16px;
  border-radius: 17px;
  border: 0;
  background: var(--nt-ink);
  color: var(--nt-on-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.nt-note { margin: 8px 16px; color: var(--nt-dim); font-size: 12px; }
.nt-skel {
  height: 44px;
  margin: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--nt-hover), var(--nt-line), var(--nt-hover));
  background-size: 200% 100%;
  animation: nt-shine 1.2s linear infinite;
}
@keyframes nt-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .nt-skel { animation: none; } }

/* ------------------------------------------- per-app switches (the gear) */
.nt-set-lead { margin: 6px 16px 4px; color: var(--nt-dim); font-size: 12px; }
.nt-set { padding: 12px 16px 14px; }
.nt-set + .nt-set { border-top: 1px solid var(--nt-line); }
.nt-set-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.nt-set-name { font-weight: 700; color: var(--nt-ink); overflow-wrap: anywhere; }
.nt-set-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-set-kinds .nt-chip:disabled { opacity: 0.4; cursor: default; }
.nt-switch {
  position: relative; flex: none; width: 36px; height: 20px; padding: 0;
  border-radius: 10px; border: 1px solid var(--nt-edge); background: var(--nt-hover); cursor: pointer;
  transition: background-color 0.15s ease;
}
.nt-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--nt-dim); transition: transform 0.15s ease;
}
.nt-switch.is-on { background: var(--nt-ink); border-color: var(--nt-ink); }
.nt-switch.is-on::after { transform: translateX(16px); background: var(--nt-on-ink); }
.nt-switch:focus-visible { outline: 2px solid var(--nt-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nt-switch, .nt-switch::after { transition: none; } }

/* ------------------------------------------- push row (web-push.js) */
.nt-panel .wp-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--nt-line);
}
.nt-panel .wp-strip[hidden] { display: none; }
.nt-panel .wp-text { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--nt-dim); }
.nt-panel .wp-btn {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  border: 0;
  background: var(--nt-ink);
  color: var(--nt-on-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.nt-panel .wp-btn.is-on { background: transparent; color: var(--nt-dim); box-shadow: inset 0 0 0 1px var(--nt-edge); }
.nt-panel .wp-btn[hidden] { display: none; }
.nt-panel .wp-btn:disabled { opacity: 0.6; cursor: default; }