:root {
    --wa-right: 24px;
    --wa-bottom: 24px;
    --wa-size: 64px;
    --to-size: 46px;
    --to-gap: 14px;
}

.wa-widget {
    position: fixed;
    z-index: 36;
    right: max(var(--wa-right), env(safe-area-inset-right));
    bottom: calc(var(--wa-bottom) + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 0;
    max-width: calc(100vw - 32px);
    animation: wa-widget-in 520ms var(--ease) both;
}

.wa-widget__bubble {
    position: relative;
    z-index: 1;
    margin-right: -18px;
    max-width: 248px;
    padding: 11px 42px 14px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.14) 100%) padding-box,
        linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(214, 244, 226, 0.72)) border-box;
    box-shadow:
        0 14px 32px rgba(86, 108, 136, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -8px 14px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
    transition: opacity 220ms var(--ease), visibility 220ms var(--ease);
}

.wa-widget__bubble::before,
.wa-widget__bubble::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.wa-widget__bubble::before {
    top: 2px;
    right: 30px;
    left: 16px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

.wa-widget__bubble::after {
    right: 30%;
    bottom: 3px;
    left: 14%;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(37, 211, 102, 0.75), rgba(37, 211, 102, 0) 70%);
}

.wa-widget__bubble a {
    position: relative;
    z-index: 1;
    display: block;
    color: inherit;
    text-decoration: none;
}

.wa-widget__bubble strong,
.wa-widget__bubble span {
    display: block;
}

.wa-widget__bubble strong {
    color: var(--navy);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.wa-widget__bubble span {
    margin-top: 1px;
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
}

.wa-widget__close {
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 24px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(79, 95, 117, 0.42);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.wa-widget__close:hover {
    color: rgba(79, 95, 117, 0.72);
}

.wa-widget__reopen {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: calc(var(--wa-size) + 8px);
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    color: var(--navy);
    box-shadow:
        0 8px 16px rgba(86, 108, 136, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
}

.wa-widget__reopen svg {
    width: 14px;
    height: 14px;
}

.wa-widget.is-footer-collapsed:not(.is-bubble-closed) .wa-widget__reopen {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wa-widget.is-footer-collapsed .wa-widget__bubble {
    position: absolute;
    right: calc(var(--wa-size) - 18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.wa-widget__button {
    position: relative;
    z-index: 2;
    display: grid;
    flex: none;
    width: var(--wa-size);
    height: var(--wa-size);
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background:
        radial-gradient(ellipse 68% 42% at 32% 24%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 58%),
        radial-gradient(circle at 50% 118%, rgba(4, 70, 42, 0.45), rgba(4, 70, 42, 0) 46%),
        radial-gradient(circle at 50% 42%, #5aee86 0%, #25d366 42%, #149455 74%, #0c6e48 100%);
    box-shadow:
        -6px 0 14px rgba(37, 211, 102, 0.12),
        0 12px 24px rgba(18, 140, 94, 0.34),
        0 2px 6px rgba(7, 34, 86, 0.12),
        inset 0 2px 2px rgba(255, 255, 255, 0.7),
        inset 0 -12px 16px rgba(6, 64, 40, 0.32);
}

.wa-widget__button::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 14px;
    width: 24px;
    height: 11px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    transform: rotate(-16deg);
    pointer-events: none;
}

.wa-widget__button svg {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
}

.wa-widget__bubble a:focus-visible,
.wa-widget__button:focus-visible,
.wa-widget__close:focus-visible,
.wa-widget__reopen:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

.wa-widget.is-bubble-closed .wa-widget__bubble,
.wa-widget.is-bubble-closed .wa-widget__reopen {
    display: none;
}

.to-top {
    position: fixed;
    z-index: 36;
    right: calc(max(var(--wa-right), env(safe-area-inset-right)) + (var(--wa-size) - var(--to-size)) / 2);
    bottom: calc(var(--wa-bottom) + env(safe-area-inset-bottom) + var(--wa-size) + var(--to-gap));
    display: grid;
    width: var(--to-size);
    height: var(--to-size);
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 70% 46% at 32% 24%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 58%) padding-box,
        linear-gradient(180deg, rgba(239, 68, 82, 0.58) 0%, rgba(200, 16, 38, 0.36) 100%) padding-box,
        linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 186, 192, 0.5)) border-box;
    color: var(--white);
    box-shadow:
        0 10px 22px rgba(200, 16, 38, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -10px 14px rgba(120, 8, 20, 0.2);
    backdrop-filter: blur(16px) saturate(1.35);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
}

.to-top::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 11px;
    width: 18px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
    transform: rotate(-16deg);
    pointer-events: none;
}

.to-top svg {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.to-top:hover {
    transform: translateY(-2px);
    background:
        radial-gradient(ellipse 70% 46% at 32% 24%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 58%) padding-box,
        linear-gradient(180deg, rgba(239, 68, 82, 0.7) 0%, rgba(200, 16, 38, 0.48) 100%) padding-box,
        linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 186, 192, 0.62)) border-box;
    box-shadow:
        0 14px 26px rgba(200, 16, 38, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -10px 14px rgba(120, 8, 20, 0.22);
}

.to-top:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
}

@keyframes wa-widget-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    :root {
        --wa-right: 12px;
        --wa-bottom: 12px;
        --wa-size: 54px;
        --to-size: 44px;
    }

    .wa-widget {
        max-width: calc(100vw - 16px);
    }

    body.has-service-dock {
        --wa-bottom: 96px;
    }

    .wa-widget__bubble {
        margin-right: -14px;
        max-width: calc(100vw - 78px);
        padding: 9px 36px 11px 14px;
    }

    .wa-widget__bubble::before {
        right: 22px;
        left: 10px;
    }

    .wa-widget__bubble::after {
        right: 26px;
        left: 12px;
    }

    .wa-widget__bubble strong {
        font-size: 0.78rem;
    }

    .wa-widget__bubble span {
        font-size: 0.66rem;
    }

    .wa-widget__close {
        top: 3px;
        right: 18px;
    }

    .wa-widget__button::before {
        top: 6px;
        left: 11px;
        width: 20px;
        height: 9px;
    }

    .wa-widget__button svg {
        width: 27px;
        height: 27px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-widget {
        animation: none;
    }
}