/* ── WA Float Button — Public styles ─────────────────────────── */
:root {
    --wafb-color:    #25D366;
    --wafb-shadow:   0 4px 20px rgba(0,0,0,.22);
    --wafb-radius:   16px;
    --wafb-z:        99999;
    --wafb-speed:    .22s;
}

/* ── Root wrapper (positioning) ─── */
.wafb {
    position: fixed;
    z-index:  var(--wafb-z);
    display:  flex;
    flex-direction: column;
    gap: 12px;
}

.wafb--bottom-right  { bottom: 24px; right:  24px; align-items: flex-end; }
.wafb--bottom-left   { bottom: 24px; left:   24px; align-items: flex-start; }
.wafb--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); align-items: center; }
.wafb--top-right     { top:    24px; right:  24px; align-items: flex-end;   flex-direction: column-reverse; }
.wafb--top-left      { top:    24px; left:   24px; align-items: flex-start; flex-direction: column-reverse; }
.wafb--top-center    { top:    24px; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }

/* ── Floating button ─── */
.wafb__btn {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         0 20px 0 6px;
    height:          54px;
    border:          none;
    border-radius:   27px;
    background:      var(--wafb-color);
    color:           #fff;
    cursor:          pointer;
    box-shadow:      var(--wafb-shadow);
    transition:      transform var(--wafb-speed), box-shadow var(--wafb-speed);
    font-family:     inherit;
    font-size:       14px;
    font-weight:     600;
    white-space:     nowrap;
    position:        relative;
}
.wafb__btn:hover { transform: scale(1.06); box-shadow: 0 6px 28px rgba(0,0,0,.28); }
.wafb__btn:active { transform: scale(.97); }

.wafb__icon {
    width:           46px;
    height:          46px;
    border-radius:   50%;
    background:      rgba(255,255,255,.18);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

/* Pulse ring */
.wafb--pulse .wafb__btn::before {
    content:         '';
    position:        absolute;
    inset:           -5px;
    border-radius:   32px;
    border:          3px solid var(--wafb-color);
    animation:       wafb-pulse 2.2s ease-out infinite;
    pointer-events:  none;
}
@keyframes wafb-pulse {
    0%   { opacity:.7; transform: scale(1); }
    70%  { opacity:0;  transform: scale(1.25); }
    100% { opacity:0;  transform: scale(1.25); }
}

/* ── Bubble ─── */
.wafb__bubble {
    background:    #fff;
    border-radius: var(--wafb-radius);
    box-shadow:    var(--wafb-shadow);
    width:         min(300px, 90vw);
    overflow:      hidden;
    transform-origin: bottom right;

    /* Hidden state */
    opacity:         0;
    transform:       scale(.92) translateY(8px);
    transition:      opacity var(--wafb-speed), transform var(--wafb-speed);
    pointer-events:  none;
}
.wafb__bubble:not([hidden]) {
    opacity:        1;
    transform:      scale(1) translateY(0);
    pointer-events: auto;
}

/* position-specific bubble origin */
.wafb--bottom-left  .wafb__bubble { transform-origin: bottom left; }
.wafb--bottom-center .wafb__bubble { transform-origin: bottom center; }
.wafb--top-right    .wafb__bubble { transform-origin: top right; }
.wafb--top-left     .wafb__bubble { transform-origin: top left; }
.wafb--top-center   .wafb__bubble { transform-origin: top center; }

/* Bubble header */
.wafb__bubble-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     14px 16px;
    background:  var(--wafb-color);
    color:       #fff;
}
.wafb__bubble-icon {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      rgba(255,255,255,.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.wafb__bubble-title {
    flex:        1;
    font-size:   14px;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         6px;
}
.wafb__online-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #b5f2c0;
    display:       inline-block;
}
.wafb__close {
    background:  none;
    border:      none;
    color:       rgba(255,255,255,.8);
    cursor:      pointer;
    padding:     4px;
    line-height: 0;
    transition:  color var(--wafb-speed);
}
.wafb__close:hover { color: #fff; }

/* Welcome message */
.wafb__welcome {
    padding:     12px 16px 8px;
    font-size:   13px;
    color:       #555;
    line-height: 1.5;
    border-bottom: 1px solid #f0f0f0;
}

/* Agent list */
.wafb__agents { padding: 8px; }
.wafb__agent {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 8px;
    border-radius:   10px;
    cursor:          pointer;
    text-decoration: none;
    color:           #222;
    transition:      background var(--wafb-speed);
}
.wafb__agent:hover { background: #f5f5f5; }
.wafb__agent--unavailable { opacity: .5; pointer-events: none; }

.wafb__agent-avatar {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    font-weight:     700;
    color:           #fff;
    flex-shrink:     0;
    overflow:        hidden;
}
.wafb__agent-avatar img { width: 100%; height: 100%; object-fit: cover; }

.wafb__agent-info { flex: 1; min-width: 0; }
.wafb__agent-name { font-size: 13px; font-weight: 600; }
.wafb__agent-dept { font-size: 11px; color: #888; }
.wafb__agent-status {
    font-size:     10px;
    padding:       2px 7px;
    border-radius: 20px;
    font-weight:   600;
    flex-shrink:   0;
}
.wafb__agent-status--on  { background: #E8F5E9; color: #2E7D32; }
.wafb__agent-status--off { background: #f5f5f5; color: #999; }

/* Out-of-hours notice */
.wafb__oot {
    padding:     14px 16px;
    font-size:   13px;
    color:       #666;
    text-align:  center;
    line-height: 1.5;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .wafb--pulse .wafb__btn::before { animation: none; }
    .wafb__bubble { transition: none; }
}

@media (max-width: 480px) {
    .wafb--bottom-right  { bottom: 16px; right: 16px; }
    .wafb--bottom-left   { bottom: 16px; left:  16px; }
    .wafb__btn { height: 48px; font-size: 13px; }
}