/* Keep both contact actions within reach, above mobile navigation and safe areas. */
.social-contact {
    position: fixed;
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + var(--bottom-nav-height, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 910;
    display: grid;
    justify-items: center;
    gap: 12px;
    width: 48px;
    max-width: calc(100% - 48px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    color: var(--color-text-primary);
}

.social-contact-button.btn.btn-outline {
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-md);
    transition: background-color 0.2s, color 0.2s;
}

.social-contact-button.btn.btn-outline:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .social-contact {
        right: calc(12px + env(safe-area-inset-right, 0px));
        bottom: calc(12px + var(--bottom-nav-height, 0px) + env(safe-area-inset-bottom, 0px));
        max-width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    }
}

.social-contact-action { position: relative; }
.social-contact-label {
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    width: max-content; max-width: calc(100vw - 100px); padding: 8px 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg); color: var(--color-text-primary); font-size: .875rem;
    opacity: 0; visibility: hidden; pointer-events: none;
}
.social-contact-action:hover .social-contact-label,
.social-contact-action:focus-visible .social-contact-label { opacity: 1; visibility: visible; }
@media (hover: none), (max-width: 768px) {
    .social-contact-label { display: none; }
}