.whatsapp-contact {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 20;
    font-size: 16px;
}

.whatsapp-contact-toggle {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-left: auto;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #128c4a;
    color: #fff;
    cursor: pointer;
    list-style: none;
    box-shadow: 0 4px 18px #123c342b;
}

.whatsapp-contact-toggle::-webkit-details-marker { display: none; }
.whatsapp-contact-toggle:hover, .whatsapp-contact-continue:hover { background: #096d38; }
.whatsapp-contact :focus-visible { outline: 3px solid #244d78; outline-offset: 4px; }

.whatsapp-contact-panel {
    position: absolute;
    right: 0;
    bottom: 68px;
    width: min(340px, calc(100vw - 32px - env(safe-area-inset-right)));
    max-height: calc(100dvh - 116px - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding: 20px;
    border: 1px solid #deebe1;
    border-radius: 20px;
    background: #fffdf8;
    color: #232323;
    box-shadow: 0 12px 36px #123c342b;
}

.whatsapp-contact-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.whatsapp-contact-heading h2 { margin: 0; font-size: 1.1rem; line-height: 1.4; }
.whatsapp-contact-close { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #edf6ef; color: #145c35; font: inherit; font-size: 26px; cursor: pointer; }
.whatsapp-contact-close[hidden] { display: none; }
.whatsapp-contact-greeting { margin: 16px 0; padding: 12px; border-radius: 12px; background: #edf6ef; line-height: 1.5; overflow-wrap: anywhere; }
.whatsapp-contact label { display: block; margin-bottom: 8px; font-weight: 650; }
.whatsapp-contact textarea { display: block; width: 100%; min-height: 88px; padding: 10px; border: 1px solid #bacbbf; border-radius: 10px; background: #fff; color: #232323; font: inherit; line-height: 1.5; resize: vertical; }
.whatsapp-contact form p { margin: 10px 0 16px; color: #555; font-size: .8rem; line-height: 1.5; }
.whatsapp-contact-continue { display: block; width: 100%; min-height: 46px; padding: 12px; border: 0; border-radius: 12px; background: #0b7a3e; color: #fff; font: inherit; font-weight: 650; cursor: pointer; }

body:has(.whatsapp-contact) .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }