/* StreamVox Push — Public CSS */

/* ── Bell ─────────────────────────────────────────────────────────────────── */
#svp-bell {
    display:         none !important; /* mostrado via JS */
    position:        fixed !important;
    z-index:         999999 !important;
    width:           48px !important;
    height:          48px !important;
    border-radius:   50% !important;
    background:      #1a73e8 !important;
    color:           #fff !important;
    font-size:       22px !important;
    align-items:     center !important;
    justify-content: center !important;
    cursor:          pointer !important;
    box-shadow:      0 3px 10px rgba(0,0,0,.3) !important;
    border:          none !important;
    padding:         0 !important;
    margin:          0 !important;
    transition:      transform .15s, background .2s;
    user-select:     none;
    transform:       none !important;
    /* reset de posição — o tema não deve interferir */
    top:    auto !important;
    bottom: auto !important;
    left:   auto !important;
    right:  auto !important;
}
#svp-bell:hover  { transform: scale(1.1) !important; }
#svp-bell:active { transform: scale(.95) !important; }

/* Visível — adicionado via JS após SW activar */
#svp-bell.svp-bell--visible { display: flex !important; }

/* Estado subscrito */
#svp-bell.svp-bell--on { background: #34a853 !important; }

/* Posições — usam !important para sobrepor o tema */
#svp-bell.svp-bell--bottom-right { bottom: 24px !important; right: 24px !important; }
#svp-bell.svp-bell--bottom-left  { bottom: 24px !important; left:  24px !important; }
#svp-bell.svp-bell--top-right    { top:    24px !important; right: 24px !important; }
#svp-bell.svp-bell--top-left     { top:    24px !important; left:  24px !important; }

/* ── Banner de permissão ──────────────────────────────────────────────────── */
#svp-prompt-banner {
    position:      fixed;
    z-index:       999998;
    background:    #fff;
    border:        1px solid #ddd;
    border-radius: 12px;
    box-shadow:    0 4px 24px rgba(0,0,0,.15);
    padding:       14px 18px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:     14px;
    color:         #333;
    max-width:     92vw;
    width:         480px;
    white-space:   nowrap;
    opacity:       0;
    pointer-events: none;
    transition:    opacity .3s ease, transform .3s ease;
}

/* ── Posições ── */
#svp-prompt-banner.svp-banner--bottom-center {
    bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px);
}
#svp-prompt-banner.svp-banner--bottom-left {
    bottom: 24px; left: 24px; transform: translateY(16px);
}
#svp-prompt-banner.svp-banner--bottom-right {
    bottom: 24px; right: 24px; transform: translateY(16px);
}
#svp-prompt-banner.svp-banner--top-center {
    top: 24px; left: 50%; transform: translateX(-50%) translateY(-16px);
}
#svp-prompt-banner.svp-banner--top-left {
    top: 24px; left: 24px; transform: translateY(-16px);
}
#svp-prompt-banner.svp-banner--top-right {
    top: 24px; right: 24px; transform: translateY(-16px);
}

/* ── Visível — animado para a posição final ── */
#svp-prompt-banner.svp-prompt-banner--visible {
    opacity: 1;
    pointer-events: auto;
}
#svp-prompt-banner.svp-banner--bottom-center.svp-prompt-banner--visible { transform: translateX(-50%) translateY(0); }
#svp-prompt-banner.svp-banner--top-center.svp-prompt-banner--visible    { transform: translateX(-50%) translateY(0); }
#svp-prompt-banner.svp-banner--bottom-left.svp-prompt-banner--visible,
#svp-prompt-banner.svp-banner--bottom-right.svp-prompt-banner--visible,
#svp-prompt-banner.svp-banner--top-left.svp-prompt-banner--visible,
#svp-prompt-banner.svp-banner--top-right.svp-prompt-banner--visible     { transform: translateY(0); }

#svp-prompt-banner span {
    flex: 1;
    white-space: normal;
    line-height: 1.4;
}

#svp-prompt-yes,
#svp-prompt-no {
    padding:       8px 16px;
    border:        none;
    border-radius: 6px;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
    white-space:   nowrap;
    transition:    background .15s;
}
#svp-prompt-yes {
    background: #1a73e8;
    color:       #fff;
}
#svp-prompt-yes:hover { background: #1557b0; }
#svp-prompt-no {
    background: #f1f3f4;
    color:       #444;
}
#svp-prompt-no:hover { background: #e2e5e8; }

/* Mobile */
@media (max-width: 500px) {
    #svp-prompt-banner {
        flex-direction: column;
        align-items:    flex-start;
        width:          calc(100vw - 32px);
        white-space:    normal;
    }
    #svp-prompt-banner span { margin-bottom: 4px; }
}