.wa-float-wrap{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: var(--font-body);
}

.wa-float-btn{
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pencil-yellow);
    color: var(--ink-900);
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink-900);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float-btn:hover{ transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink-900); }
.wa-float-btn .icon{ flex: none; }

.wa-float-menu{
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--paper-50);
    border-radius: 12px;
    padding: 8px;
    border: 1px solid rgba(22,35,63,.1);
    box-shadow: 0 16px 40px rgba(22,35,63,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.wa-float-menu.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }

.wa-float-option{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    color: var(--ink-900);
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    transition: background .2s ease;
}
.wa-float-option:hover{ background: var(--paper-100); }
.wa-float-option .icon{ color: var(--chalk-green); flex: none; }

@media (max-width: 576px){
    .wa-float-wrap{ right: 14px; bottom: 14px; }
    .wa-float-btn{ padding: 12px 16px; font-size: .8rem; }
}