/* Super WebPush — opt-in prompt UI. Scoped under #swp-root / .swp-* so it never
   touches the host theme. Dark/light via [data-swp-theme] + system. */

#swp-root { --swp-card:#fff; --swp-fg:#0f172a; --swp-muted:#64748b; --swp-line:#e5e7eb; --swp-accent:#6366f1; --swp-shadow:0 12px 40px rgba(2,6,23,.16); }
#swp-root[data-swp-theme="dark"] { --swp-card:#111827; --swp-fg:#e5e7eb; --swp-muted:#94a3b8; --swp-line:#1f2937; --swp-shadow:0 12px 40px rgba(0,0,0,.5); }

.swp-prompt, .swp-bell { box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; position:fixed; z-index:99993; }
.swp-prompt *, .swp-bell * { box-sizing:border-box; }

/* positions */
.swp-pos--bottom-right { right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
.swp-pos--bottom-left  { left:18px;  bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
.swp-pos--bottom { left:50%; transform:translateX(-50%) translateY(20px); bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
.swp-pos--top    { left:50%; transform:translateX(-50%) translateY(-20px); top:18px; }

/* buttons */
.swp-btn { border:0; border-radius:11px; padding:9px 15px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:filter .15s, color .15s; }
.swp-btn--primary { background:var(--swp-accent); color:#fff; }
.swp-btn--primary:hover { filter:brightness(1.07); }
.swp-btn--ghost { background:transparent; color:var(--swp-muted); }
.swp-btn--ghost:hover { color:var(--swp-fg); }

/* banner / button style: a card */
.swp-prompt { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic tx" "ax ax"; gap:10px 12px; align-items:center; width:min(400px,calc(100vw - 28px)); background:var(--swp-card); color:var(--swp-fg); border:1px solid var(--swp-line); border-radius:18px; box-shadow:var(--swp-shadow); padding:15px; opacity:0; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.swp-prompt.is-in { opacity:1; }
.swp-pos--bottom-right.swp-prompt, .swp-pos--bottom-left.swp-prompt { transform:translateY(16px); }
.swp-pos--bottom-right.swp-prompt.is-in, .swp-pos--bottom-left.swp-prompt.is-in { transform:translateY(0); }
.swp-pos--bottom.swp-prompt.is-in { transform:translateX(-50%) translateY(0); }
.swp-pos--top.swp-prompt.is-in { transform:translateX(-50%) translateY(0); }
.swp-prompt__ic { grid-area:ic; width:46px; height:46px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--swp-accent) 14%,transparent); color:var(--swp-accent); }
.swp-prompt__ic img { width:100%; height:100%; object-fit:cover; }
.swp-prompt__ic svg { width:24px; height:24px; }
.swp-prompt__tx { grid-area:tx; display:flex; flex-direction:column; gap:2px; }
.swp-prompt__t { font-size:14.5px; font-weight:700; }
.swp-prompt__s { font-size:12.5px; color:var(--swp-muted); line-height:1.4; }
.swp-prompt__ax { grid-area:ax; display:flex; gap:8px; justify-content:flex-end; }

/* bar style: full width */
.swp-prompt--bar { left:0 !important; right:0 !important; bottom:0 !important; top:auto; width:100%; transform:translateY(20px); border-radius:0; grid-template-columns:auto 1fr auto; grid-template-areas:"ic tx ax"; }
.swp-prompt--bar.is-in { transform:translateY(0); }

/* button style: compact pill (hide the deny + secondary text) */
.swp-prompt--button { grid-template-columns:auto auto; grid-template-areas:"ic ax"; width:auto; padding:10px 12px 10px 14px; border-radius:999px; }
.swp-prompt--button .swp-prompt__tx { display:none; }
.swp-prompt--button [data-deny] { display:none; }

/* bell FAB */
.swp-bell { width:54px; height:54px; border-radius:50%; border:0; background:var(--swp-accent); color:#fff; box-shadow:var(--swp-shadow); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.3,.4,1); }
.swp-bell.is-in { opacity:1; transform:scale(1); }
/* keep the center positions centered — the bell's own transform would otherwise drop translateX(-50%) */
.swp-bell.swp-pos--bottom, .swp-bell.swp-pos--top { transform:translateX(-50%) scale(.6); }
.swp-bell.swp-pos--bottom.is-in, .swp-bell.swp-pos--top.is-in { transform:translateX(-50%) scale(1); }
.swp-bell svg { width:25px; height:25px; }
.swp-bell:hover { filter:brightness(1.07); }
.swp-bell__dot { position:absolute; top:12px; right:13px; width:9px; height:9px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 2px var(--swp-accent); }
.swp-bell__dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:#ef4444; animation:swp-ping 1.8s ease-out infinite; }
@keyframes swp-ping { 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(2.6); opacity:0 } }

@media (prefers-reduced-motion: reduce) { .swp-prompt, .swp-bell, .swp-bell__dot::after { transition:none !important; animation:none !important; } }