/* The embedded widget owns its UI; these styles cover the website entry points. */
.support-chat-fallback {
    position: fixed;
    right: 22px;
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 2147482999;
    padding: 14px 18px;
    border: 1px solid rgba(50, 16, 27, .12);
    border-radius: 14px;
    color: #32101b;
    background: #ff83a1;
    box-shadow: 0 5px 22px #0003;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.support-chat-fallback[hidden] { display: none; }
.support-chat-fallback:focus-visible { outline: 3px solid var(--text-primary, #29242a); outline-offset: 4px; }

.support-contact {
    position: relative;
    scroll-margin-top: 100px;
    overflow: hidden;
    padding: clamp(32px, 6vw, 72px);
    border: 1px solid var(--glass-border);
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(255, 97, 136, .1), rgba(48, 176, 199, .08)), var(--card-bg);
}

.support-contact-mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ff6188, #ff9d76);
    color: #32101b;
    box-shadow: 0 12px 30px rgba(255, 97, 136, .2);
}

.support-contact-copy { margin: 0 auto 28px; }
.support-contact-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.support-contact-actions .btn-primary, .support-contact-actions .btn-secondary { width: auto; min-width: 220px; }
.support-contact-note { margin-top: 20px; color: var(--text-secondary); font-size: 13px; }
.support-chat-status { min-height: 24px; margin-top: 12px; font-size: 14px; color: var(--text-primary); }

@media (max-width: 480px) {
    .support-contact { border-radius: 24px; padding: 32px 20px; }
    .support-contact-actions .btn-primary, .support-contact-actions .btn-secondary { width: 100%; }
    .support-chat-fallback { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}