/* WhatsApp's familiar chat palette, with readable white-on-green controls. */
#whatsapp-widget {
    --wa-edge: 1.5rem;
    --wa-green: #087f46;
    --wa-dark: #075e54;
    --wa-launcher-green: #1a9c4d;
    position: fixed;
    display: flex;
    justify-content: flex-end;
    width: min(21rem, calc(100% - 2 * var(--wa-edge) - env(safe-area-inset-right) - env(safe-area-inset-left)));
    pointer-events: none;
    right: max(var(--wa-edge), env(safe-area-inset-right));
    bottom: calc(var(--wa-edge) + env(safe-area-inset-bottom));
    z-index: 45;
    font-family: Roboto, Arial, sans-serif;
}
#whatsapp-widget > * { pointer-events: auto; }
#whatsapp-widget [hidden] { display: none !important; }
#whatsapp-widget :is(button, a, summary) { touch-action: manipulation; }
#whatsapp-widget :is(button, a, summary):focus-visible {
    outline: 2px solid #171717;
    outline-offset: 3px;
}
.wa-launcher {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background: var(--wa-launcher-green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16), 0 0 0 2px #fff;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease;
}
.wa-launcher:hover { transform: translateY(-2px); background: var(--wa-dark); }
.wa-launcher:active { transform: translateY(0); }
.wa-launcher-chat, .wa-launcher-close {
    position: absolute;
    transition: opacity 160ms ease, transform 160ms ease;
}
.wa-launcher-close { opacity: 0; transform: rotate(-45deg) scale(.8); }
.wa-launcher[aria-expanded="true"] .wa-launcher-chat { opacity: 0; transform: scale(.8); }
.wa-launcher[aria-expanded="true"] .wa-launcher-close { opacity: 1; transform: rotate(0) scale(1); }
.wa-launcher[aria-expanded="true"] { background: var(--wa-dark); }
.wa-launcher-hint {
    position: absolute;
    right: calc(100% + .75rem);
    padding: .625rem .875rem;
    border: 1px solid #e5e5e5;
    border-radius: .5rem;
    background: #fff;
    color: #171717;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    white-space: nowrap;
    font-size: .8125rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease;
}
.wa-launcher[aria-expanded="false"]:focus-visible .wa-launcher-hint { opacity: 1; visibility: visible; }
@media (hover: hover) {
    .wa-launcher[aria-expanded="false"]:hover .wa-launcher-hint { opacity: 1; visibility: visible; }
}
#wa-popup {
    position: absolute;
    right: 0;
    bottom: calc(100% + .75rem);
    width: 100%;
    max-height: calc(100dvh - 6.5rem - 2 * var(--wa-edge) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #e5e5e5;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    animation: wa-reveal 180ms ease-out;
}
.wa-header { background: var(--wa-dark); color: #fff; }
#wa-title { color: inherit; font-size: 1.125rem; line-height: 1.3; }
.wa-header-subtitle { color: #e1f3ed; }
.wa-avatar { background: #fff; color: var(--wa-dark); }
.wa-close {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
}
.wa-close:hover { background: var(--wa-green); }
#whatsapp-widget .wa-close:focus-visible { outline-color: #fff; outline-offset: -3px; }
.wa-conversation {
    background-color: #efeae2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='112' viewBox='0 0 120 112'%3E%3Cg fill='none' stroke='%237a8c80' stroke-opacity='.14' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14h16a4 4 0 0 1 4 4v9a4 4 0 0 1-4 4h-7l-6 5v-5h-3a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4zM78 17l6-6 6 6-6 6zM68 65h20l2 20H66zM73 65v-3a5 5 0 0 1 10 0v3M17 79c7-12 17-5 9 3l-9 8-9-8c-8-8 2-15 9-3zM106 39v6m-3-3h6M43 58v6m-3-3h6M105 100h6'/%3C/g%3E%3C/svg%3E");
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.wa-bubble {
    position: relative;
    border-radius: 0 .5rem .5rem;
    background: #fff;
    color: #111b21;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    width: fit-content;
    max-width: 95%;
    animation: wa-message-reveal 220ms ease-out both;
}
.wa-sender { color: var(--wa-dark); }
.wa-bubble-question { border-top-left-radius: .5rem; animation-delay: 70ms; }
.wa-bubble-greeting::before {
    content: '';
    position: absolute;
    top: 0;
    left: -.5rem;
    border-top: .5rem solid #fff;
    border-left: .5rem solid transparent;
}
.wa-action {
    min-height: 3rem;
    border-radius: 999px;
    background: var(--wa-green);
    color: #fff;
    transition: background-color 140ms ease;
}
.wa-action:hover { background: var(--wa-dark); color: #fff; }
.wa-action-arrow { margin-left: auto; transition: transform 160ms ease; }
.wa-action > svg:first-child { margin-right: auto; }
.wa-action:hover .wa-action-arrow { transform: translateX(2px); }
.wa-hours summary { min-height: 2.75rem; cursor: pointer; list-style: none; }
.wa-hours summary::-webkit-details-marker { display: none; }
.wa-hours[open] .wa-hours-chevron { transform: rotate(180deg); }
.wa-status-dot { width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 50%; background: #737373; }
.wa-status-dot.is-open { background: var(--wa-green); }
@keyframes wa-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wa-message-reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 639px) {
    #whatsapp-widget { --wa-edge: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    #wa-popup, .wa-bubble { animation: none; }
    #whatsapp-widget * { transition: none; }
    .wa-launcher:hover { transform: none; }
    .wa-action:hover .wa-action-arrow { transform: none; }
}
@media print { #whatsapp-widget { display: none; } }