/* PushWave Frontend Styles */

/* ── PWA Install Banner ──────────────────────────────────────────────────── */
#pw-install-banner {
    position: fixed;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999998;
    width: min(480px, 96vw);
    transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#pw-install-banner.pw-ib-visible { bottom: 90px; }

.pw-ib-inner {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid #0ea5e9;
}
.pw-ib-icon { font-size: 1.9rem; flex-shrink: 0; }
.pw-ib-text { flex: 1; min-width: 0; }
.pw-ib-text strong { display: block; font-size: 0.9rem; font-weight: 700; color: #111827; }
.pw-ib-text p { margin: 3px 0 0; font-size: 0.78rem; color: #6b7280; }
.pw-ib-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.pw-ib-actions button {
    border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.82rem;
}
#pw-ib-install { color: #fff; padding: 8px 16px; }
#pw-ib-dismiss { background: transparent; color: #9ca3af; padding: 8px; font-size: 1rem; }

/* ── Push Subscription Prompt ────────────────────────────────────────────── */
#pw-push-prompt {
    position: fixed;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    width: min(480px, 96vw);
    transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#pw-push-prompt.pw-pp-visible { bottom: 24px; }

.pw-pp-inner {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid #2563eb;
}
.pw-pp-bell {
    font-size: 1.9rem;
    flex-shrink: 0;
    animation: pw-bell-ring 1s ease 0.8s 2;
}
@keyframes pw-bell-ring {
    0%,100% { transform: rotate(0); }
    20%      { transform: rotate(-15deg); }
    40%      { transform: rotate(15deg); }
    60%      { transform: rotate(-10deg); }
    80%      { transform: rotate(10deg); }
}
.pw-pp-text { flex: 1; min-width: 0; }
.pw-pp-text strong { display: block; font-size: 0.9rem; font-weight: 700; color: #111827; }
.pw-pp-text p { margin: 3px 0 0; font-size: 0.78rem; color: #6b7280; }
.pw-pp-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.pw-pp-actions button {
    border: none; border-radius: 8px; padding: 7px 14px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#pw-pp-allow { background: #2563eb; color: #fff; }
#pw-pp-deny  { background: #f3f4f6; color: #374151; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .pw-pp-inner, .pw-ib-inner {
        background: #1f2937;
        box-shadow: 0 12px 48px rgba(0,0,0,0.5);
    }
    .pw-pp-text strong, .pw-ib-text strong { color: #f9fafb; }
    .pw-pp-text p, .pw-ib-text p { color: #9ca3af; }
    #pw-pp-deny  { background: #374151; color: #e5e7eb; }
    #pw-ib-dismiss { color: #6b7280; }
}

/* Mobile */
@media (max-width: 520px) {
    .pw-pp-inner { flex-wrap: wrap; }
    .pw-pp-actions { flex-direction: row; width: 100%; }
    .pw-pp-actions button { flex: 1; }
    .pw-ib-inner { flex-wrap: wrap; }
    .pw-ib-actions { width: 100%; }
    #pw-ib-install { flex: 1; }
}