/* Simple Web Push: prompt card and bell. Theme-agnostic; override the custom properties from your theme if wanted. */
.swp-prompt {
  --swp-bg: var(--surface, #1b2544);
  --swp-fg: var(--text, #e9edf7);
  --swp-muted: var(--muted, #9aa6c4);
  --swp-line: var(--line, #273356);
  --swp-accent: var(--accent, #f2c76b);
  position: fixed; right: 16px; bottom: 16px; z-index: 9000; width: min(360px, calc(100vw - 32px));
  background: var(--swp-bg); color: var(--swp-fg); border: 1px solid var(--swp-line); border-radius: 14px;
  padding: 18px 18px 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); font: 15px/1.5 system-ui, sans-serif;
}
.swp-prompt[hidden] { display: none; }
.swp-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--swp-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.swp-title { margin: 0 0 4px; font-weight: 700; font-size: 1.05rem; }
.swp-text { margin: 0 0 10px; color: var(--swp-muted); font-size: 0.93rem; }
.swp-topics { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 0.92rem; }
.swp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.swp-btn { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--swp-accent); background: var(--swp-accent); color: #17130a; font: inherit; font-weight: 600; cursor: pointer; }
.swp-btn-ghost { background: transparent; border-color: var(--swp-line); color: var(--swp-fg); font-weight: 500; }
.swp-btn:disabled { opacity: 0.6; cursor: wait; }
.swp-status { margin: 8px 0 0; font-size: 0.85rem; color: var(--swp-muted); min-height: 1.2em; }
.swp-status.is-error { color: #e57373; }
.swp-sticky {
  position: fixed; right: 0; top: 50%; z-index: 8999; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px;
  writing-mode: vertical-rl; /* reads top to bottom, letter tops facing the page edge */
  border: 1px solid var(--line, #273356); border-right: 0; border-radius: 10px 0 0 10px;
  background: var(--accent, #f2c76b); color: #17130a; font: 600 0.9rem/1 system-ui, sans-serif; letter-spacing: 0.01em;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.swp-sticky svg { flex: none; }
.swp-sticky:hover { filter: brightness(1.06); }
.swp-sticky.is-on { background: var(--surface, #1b2544); color: var(--accent, #f2c76b); border-right: 0; }
.swp-sticky[hidden] { display: none; }
.swp-prompt:not([hidden]) ~ .swp-sticky { display: none; }
@media (max-width: 700px) {
  .swp-sticky {
    top: auto; bottom: 16px; right: 12px; transform: none; writing-mode: horizontal-tb;
    border-right: 1px solid var(--line, #273356); border-radius: 999px; padding: 10px 14px;
  }
  .swp-sticky svg { transform: none; }
}