/**
 * ChatFloat WP — Estilos do widget frontend
 * Versão: 3.0.0  (Etapa 3 — Frontend Animado)
 *
 * Sistema de animações:
 *  - Entrada do painel com spring physics
 *  - Entrada escalonada dos itens (stagger)
 *  - Ripple no botão principal
 *  - Hover com lift + sombra colorida
 *  - Indicador online pulsante
 *  - Modo escuro automático (prefers-color-scheme)
 *  - Respeito total a prefers-reduced-motion
 */

/* ═══════════════════════════════════════════════════════════
   1. Tokens e Reset
   ═══════════════════════════════════════════════════════════ */

#chatfloat-widget {
    /* ── Cores (injetadas via PHP, fallbacks seguros) */
    --cf-cor-primaria:  #25D366;
    --cf-cor-texto:     #ffffff;
    --cf-tamanho:       60px;

    /* ── Layout */
    --cf-raio:          50%;
    --cf-painel-w:      320px;
    --cf-offset:        24px;
    --cf-painel-raio:   18px;

    /* ── Superfícies (tema claro) */
    --cf-painel-bg:     #ffffff;
    --cf-item-hover:    #f5f5f5;
    --cf-texto-nome:    #111111;
    --cf-texto-cargo:   #888888;
    --cf-borda:         rgba(0,0,0,.06);
    --cf-header-texto:  rgba(255,255,255,.95);

    /* ── Sombras */
    --cf-sombra-botao:   0 4px 20px rgba(0,0,0,.25);
    --cf-sombra-painel:  0 12px 48px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);

    /* ── Timing das animações */
    --cf-ease-spring:   cubic-bezier(.34, 1.56, .64, 1);  /* spring suave */
    --cf-ease-out:      cubic-bezier(.4, 0, .2, 1);
    --cf-dur:           280ms;
    --cf-dur-fast:      160ms;
    --cf-dur-slow:      400ms;

    /* ── Misc */
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Tema escuro automático */
@media (prefers-color-scheme: dark) {
    #chatfloat-widget {
        --cf-painel-bg:   #1e1e1e;
        --cf-item-hover:  #2a2a2a;
        --cf-texto-nome:  #f0f0f0;
        --cf-texto-cargo: #999999;
        --cf-borda:       rgba(255,255,255,.07);
        --cf-sombra-painel: 0 12px 48px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
    }
}

#chatfloat-widget *,
#chatfloat-widget *::before,
#chatfloat-widget *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   2. Posicionamento fixo
   ═══════════════════════════════════════════════════════════ */

.chatfloat-widget {
    position: fixed;
    z-index: 999999;
    display: flex;
    align-items: flex-end;
}

.chatfloat-pos-bottom-right {
    bottom: var(--cf-offset); right: var(--cf-offset);
    flex-direction: column; align-items: flex-end;
}
.chatfloat-pos-bottom-left {
    bottom: var(--cf-offset); left: var(--cf-offset);
    flex-direction: column; align-items: flex-start;
}
.chatfloat-pos-top-right {
    top: var(--cf-offset); right: var(--cf-offset);
    flex-direction: column-reverse; align-items: flex-end;
}
.chatfloat-pos-top-left {
    top: var(--cf-offset); left: var(--cf-offset);
    flex-direction: column-reverse; align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════
   3. Botão principal — com entrada animada e ripple
   ═══════════════════════════════════════════════════════════ */

.chatfloat-botao-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Entrada do widget na página */
    animation: cf-widget-entrada var(--cf-dur-slow) var(--cf-ease-spring) both;
}

.chatfloat-pos-bottom-left .chatfloat-botao-wrap,
.chatfloat-pos-top-left    .chatfloat-botao-wrap {
    flex-direction: row-reverse;
}

@keyframes cf-widget-entrada {
    from { opacity: 0; transform: scale(0) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.chatfloat-botao {
    width:  var(--cf-tamanho);
    height: var(--cf-tamanho);
    min-width:  var(--cf-tamanho);
    min-height: var(--cf-tamanho);
    border-radius: 50%;
    background-color: var(--cf-cor-primaria);
    color: var(--cf-cor-texto);
    border: none;
    cursor: pointer;
    box-shadow: var(--cf-sombra-botao);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    padding: 0;
    transition:
        transform var(--cf-dur) var(--cf-ease-spring),
        box-shadow var(--cf-dur) var(--cf-ease-out);
    -webkit-tap-highlight-color: transparent;
    /* Garante que o botão nunca colapse para zero */
    contain: layout;
}

.chatfloat-botao:hover {
    transform: scale(1.12) translateY(-2px);
    background-color: var(--cf-cor-primaria) !important;
    color: var(--cf-cor-texto) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,.28),
        0 0 0 6px color-mix(in srgb, var(--cf-cor-primaria) 20%, transparent);
}

/* Neutraliza reset.css de temas que alteram background em :focus/:hover de buttons */
.chatfloat-botao:focus,
.chatfloat-botao:focus-visible,
.chatfloat-botao:focus:not(:focus-visible) {
    background-color: var(--cf-cor-primaria) !important;
    color: var(--cf-cor-texto) !important;
    outline: none;
}

.chatfloat-botao:active {
    transform: scale(0.94);
    transition-duration: var(--cf-dur-fast);
}

.chatfloat-botao:focus-visible {
    outline: 3px solid var(--cf-cor-primaria);
    outline-offset: 4px;
    background-color: var(--cf-cor-primaria) !important;
}

/* ── Ripple (efeito de onda ao clicar) ─────────────────────── */
.chatfloat-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transform: scale(0);
    animation: cf-ripple var(--cf-dur-slow) var(--cf-ease-out) forwards;
    pointer-events: none;
}

@keyframes cf-ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ── Ícones do botão (troca animada) ───────────────────────── */
.chatfloat-icone {
    width: calc(var(--cf-tamanho) * .62);
    height: calc(var(--cf-tamanho) * .62);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition:
        opacity var(--cf-dur) var(--cf-ease-out),
        transform var(--cf-dur) var(--cf-ease-spring);
}

/* Ícones com transform próprio precisam manter a centralização */
.chatfloat-icone--chat   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
.chatfloat-icone--fechar { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(.4); }

.chatfloat-widget.is-open .chatfloat-icone--chat   { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(.4); }
.chatfloat-widget.is-open .chatfloat-icone--fechar { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }

.chatfloat-icone svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Garante branco nos SVGs do botão independente do tema */
.chatfloat-botao .chatfloat-icone svg path,
.chatfloat-botao .chatfloat-icone svg circle,
.chatfloat-botao .chatfloat-icone svg rect {
    fill: #ffffff !important;
}

/* ── Pulso de atenção inicial ──────────────────────────────── */
@keyframes cf-pulse {
    0%   { box-shadow: var(--cf-sombra-botao), 0 0 0 0 color-mix(in srgb, var(--cf-cor-primaria) 55%, transparent); }
    65%  { box-shadow: var(--cf-sombra-botao), 0 0 0 16px color-mix(in srgb, var(--cf-cor-primaria) 0%, transparent); }
    100% { box-shadow: var(--cf-sombra-botao), 0 0 0 0 color-mix(in srgb, var(--cf-cor-primaria) 0%, transparent); }
}

/* Pulso dispara após a entrada (delay = dur-entrada + 600ms), 3 vezes */
.chatfloat-botao {
    animation:
        cf-widget-entrada var(--cf-dur-slow) var(--cf-ease-spring) both,
        cf-pulse 2.2s ease-out 1.6s 3;
}

/* Quando aberto, para o pulso */
.chatfloat-widget.is-open .chatfloat-botao {
    animation: none;
}

/* ── Legenda lateral ───────────────────────────────────────── */
.chatfloat-legenda {
    background: var(--cf-cor-primaria);
    color: var(--cf-cor-texto);
    padding: 7px 14px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--cf-sombra-botao);
    pointer-events: none;
    /* Entrada escalonada após botão */
    animation: cf-legenda-entrada var(--cf-dur-slow) var(--cf-ease-spring) 120ms both;
    transition:
        opacity var(--cf-dur) var(--cf-ease-out),
        transform var(--cf-dur) var(--cf-ease-out);
}

@keyframes cf-legenda-entrada {
    from { opacity: 0; transform: translateX(12px) scale(.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.chatfloat-pos-bottom-left .chatfloat-legenda,
.chatfloat-pos-top-left    .chatfloat-legenda {
    animation-name: cf-legenda-entrada-esquerda;
}

@keyframes cf-legenda-entrada-esquerda {
    from { opacity: 0; transform: translateX(-12px) scale(.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Legenda some quando painel abre */
.chatfloat-widget.is-open .chatfloat-legenda {
    opacity: 0;
    transform: translateX(10px) scale(.9);
    pointer-events: none;
}

.chatfloat-pos-bottom-left.is-open .chatfloat-legenda,
.chatfloat-pos-top-left.is-open    .chatfloat-legenda {
    transform: translateX(-10px) scale(.9);
}

/* ═══════════════════════════════════════════════════════════
   4. Painel — abertura com spring
   ═══════════════════════════════════════════════════════════ */

.chatfloat-painel {
    width: var(--cf-painel-w);
    background: var(--cf-painel-bg);
    border-radius: var(--cf-painel-raio);
    box-shadow: var(--cf-sombra-painel);
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--cf-borda);

    /* Estado fechado */
    opacity: 0;
    transform: translateY(18px) scale(.94);
    transform-origin: bottom right;
    pointer-events: none;
    transition:
        opacity var(--cf-dur) var(--cf-ease-out),
        transform var(--cf-dur) var(--cf-ease-spring);
    /* Garante que overflow:hidden não corte o spring */
    will-change: transform, opacity;
}

/* Origens por posição */
.chatfloat-pos-bottom-left .chatfloat-painel {
    transform-origin: bottom left;
}
.chatfloat-pos-top-right .chatfloat-painel {
    transform-origin: top right;
    margin-bottom: 0;
    margin-top: 12px;
    transform: translateY(-18px) scale(.94);
}
.chatfloat-pos-top-left .chatfloat-painel {
    transform-origin: top left;
    margin-bottom: 0;
    margin-top: 12px;
    transform: translateY(-18px) scale(.94);
}

/* Estado aberto */
.chatfloat-widget.is-open .chatfloat-painel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Cabeçalho do painel ───────────────────────────────────── */
.chatfloat-painel-header {
    padding: 18px 20px 15px;
    background: linear-gradient(
        135deg,
        var(--cf-cor-primaria),
        color-mix(in srgb, var(--cf-cor-primaria) 68%, #000)
    );
    position: relative;
    overflow: hidden;
}

/* Detalhe decorativo no header */
.chatfloat-painel-header::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}

.chatfloat-saudacao {
    color: var(--cf-header-texto);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* ── Rodapé discreto ───────────────────────────────────────── */
.chatfloat-painel-footer {
    padding: 8px 16px;
    text-align: center;
    border-top: 1px solid var(--cf-borda);
}

.chatfloat-painel-footer a {
    font-size: 10px;
    color: var(--cf-texto-cargo);
    text-decoration: none;
    opacity: .6;
    transition: opacity var(--cf-dur-fast);
}

.chatfloat-painel-footer a:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   5. Lista de atendentes — entrada escalonada (stagger)
   ═══════════════════════════════════════════════════════════ */

.chatfloat-lista-atendentes {
    list-style: none;
    padding: 6px 0;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar customizada */
.chatfloat-lista-atendentes::-webkit-scrollbar       { width: 3px; }
.chatfloat-lista-atendentes::-webkit-scrollbar-track { background: transparent; }
.chatfloat-lista-atendentes::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cf-cor-primaria) 30%, transparent);
    border-radius: 4px;
}

/* ── Item da lista ─────────────────────────────────────────── */
.chatfloat-atendente {
    /* Estado inicial para o stagger de entrada */
    opacity: 0;
    transform: translateX(20px);
}

/* Quando o painel abre, JS adiciona .cf-animar ao wrapper,
   e cada li recebe animação com delay escalonado via nth-child */
.chatfloat-lista-atendentes.cf-animar .chatfloat-atendente {
    animation: cf-item-entrada var(--cf-dur) var(--cf-ease-spring) both;
}

.chatfloat-lista-atendentes.cf-animar .chatfloat-atendente:nth-child(1) { animation-delay:  60ms; }
.chatfloat-lista-atendentes.cf-animar .chatfloat-atendente:nth-child(2) { animation-delay: 110ms; }
.chatfloat-lista-atendentes.cf-animar .chatfloat-atendente:nth-child(3) { animation-delay: 160ms; }
.chatfloat-lista-atendentes.cf-animar .chatfloat-atendente:nth-child(4) { animation-delay: 210ms; }
.chatfloat-lista-atendentes.cf-animar .chatfloat-atendente:nth-child(5) { animation-delay: 260ms; }
.chatfloat-lista-atendentes.cf-animar .chatfloat-atendente:nth-child(n+6) { animation-delay: 300ms; }

@keyframes cf-item-entrada {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Para posições left, entrada vem da esquerda */
.chatfloat-pos-bottom-left .chatfloat-lista-atendentes.cf-animar .chatfloat-atendente,
.chatfloat-pos-top-left    .chatfloat-lista-atendentes.cf-animar .chatfloat-atendente {
    animation-name: cf-item-entrada-esquerda;
}

@keyframes cf-item-entrada-esquerda {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Quando já animou, mantém o estado final */
.chatfloat-lista-atendentes.cf-animado .chatfloat-atendente {
    opacity: 1;
    transform: translateX(0);
}

/* ── Link do atendente — hover lift ───────────────────────── */
.chatfloat-atendente-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 18px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition:
        background var(--cf-dur-fast) var(--cf-ease-out),
        transform var(--cf-dur) var(--cf-ease-spring);
    -webkit-tap-highlight-color: transparent;
}

/* Fundo do hover (pseudo-element para não afetar o conteúdo) */
.chatfloat-atendente-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cf-item-hover);
    opacity: 0;
    transition: opacity var(--cf-dur-fast) var(--cf-ease-out);
}

.chatfloat-atendente-link:hover::before { opacity: 1; }

/* Barra de cor do canal à esquerda (aparece no hover) */
.chatfloat-atendente-link::after {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--cf-cor-primaria);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--cf-dur) var(--cf-ease-spring);
}

.chatfloat-atendente-link:hover::after { transform: scaleY(1); }

/* Cores da barra por canal */
.chatfloat-canal-whatsapp  .chatfloat-atendente-link::after { background: #25D366; }
.chatfloat-canal-telegram  .chatfloat-atendente-link::after { background: #0088cc; }
.chatfloat-canal-instagram .chatfloat-atendente-link::after { background: #e1306c; }
.chatfloat-canal-messenger .chatfloat-atendente-link::after { background: #0084ff; }

/* Elevação sutil do conteúdo no hover */
.chatfloat-atendente-link:hover .chatfloat-atendente-foto {
    transform: scale(1.05);
}

.chatfloat-atendente-link:active { transform: scale(.98); }
.chatfloat-atendente-link:focus-visible {
    outline: 2px solid var(--cf-cor-primaria);
    outline-offset: -2px;
}

/* ── Separador entre items ─────────────────────────────────── */
.chatfloat-atendente + .chatfloat-atendente .chatfloat-atendente-link::before {
    top: 0;
    border-top: 1px solid var(--cf-borda);
}

/* ═══════════════════════════════════════════════════════════
   6. Avatar, foto e indicador online
   ═══════════════════════════════════════════════════════════ */

.chatfloat-atendente-foto {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
    transition: transform var(--cf-dur) var(--cf-ease-spring);
    z-index: 1;
}

.chatfloat-atendente-foto img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--cf-borda);
}

/* Avatar com inicial do nome */
.chatfloat-avatar-inicial {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--cf-cor-primaria),
        color-mix(in srgb, var(--cf-cor-primaria) 70%, #000)
    );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.5px;
}

/* ── Indicador online pulsante ─────────────────────────────── */
.chatfloat-status-online {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background: #44d764;
    border: 2.5px solid var(--cf-painel-bg);
    border-radius: 50%;
}

/* Anel pulsante (pseudo-element) */
.chatfloat-status-online::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(68, 215, 100, .4);
    animation: cf-online-pulse 2s ease-in-out infinite;
}

@keyframes cf-online-pulse {
    0%, 100% { transform: scale(1);   opacity: .8; }
    50%       { transform: scale(1.7); opacity: 0;  }
}

/* ═══════════════════════════════════════════════════════════
   7. Informações do atendente e ícone de canal
   ═══════════════════════════════════════════════════════════ */

.chatfloat-atendente-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1;
}

.chatfloat-atendente-nome {
    font-size: 14px;
    font-weight: 600;
    color: var(--cf-texto-nome);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.chatfloat-atendente-cargo {
    font-size: 11.5px;
    color: var(--cf-texto-cargo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Ícone do canal com micro-animação ─────────────────────── */
.chatfloat-canal-icone {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    z-index: 1;
    transition: transform var(--cf-dur) var(--cf-ease-spring);
    position: relative;
}

.chatfloat-canal-icone svg { width: 17px; height: 17px; }

.chatfloat-atendente-link:hover .chatfloat-canal-icone {
    transform: scale(1.15) rotate(8deg);
}

/* Cores por canal */
.chatfloat-canal-whatsapp  .chatfloat-canal-icone { background: #25D366; }
.chatfloat-canal-telegram  .chatfloat-canal-icone { background: #0088cc; }
.chatfloat-canal-instagram .chatfloat-canal-icone {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.chatfloat-canal-messenger .chatfloat-canal-icone {
    background: linear-gradient(135deg, #0084ff, #a033ff);
}

/* Seta discreta no ícone de canal (aparece no hover) */
.chatfloat-canal-icone::after {
    content: '↗';
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: 900;
    color: var(--cf-texto-nome);
    background: var(--cf-painel-bg);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    opacity: 0;
    transform: scale(.5);
    transition:
        opacity var(--cf-dur-fast) var(--cf-ease-out),
        transform var(--cf-dur) var(--cf-ease-spring);
    line-height: 14px;
}

.chatfloat-atendente-link:hover .chatfloat-canal-icone::after {
    opacity: 1;
    transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════
   8. Estado vazio (placeholder)
   ═══════════════════════════════════════════════════════════ */

.chatfloat-atendente--placeholder .chatfloat-atendente-foto--placeholder {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cf-cor-primaria) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--cf-cor-primaria) 50%, transparent);
}

.chatfloat-atendente--placeholder .chatfloat-atendente-foto--placeholder svg {
    width: 26px; height: 26px;
}

.chatfloat-atendente--placeholder .chatfloat-atendente-link {
    cursor: default;
    pointer-events: none;
    opacity: .7;
}

.chatfloat-atendente--placeholder .chatfloat-atendente-nome {
    color: var(--cf-texto-cargo);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   9. Responsividade
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    #chatfloat-widget {
        --cf-painel-w:  calc(100vw - 32px);
        --cf-offset:    16px;
        --cf-painel-raio: 14px;
    }
}

.chatfloat-widget--oculto-mobile { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   10. Acessibilidade — sem movimento
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    #chatfloat-widget {
        --cf-dur:      0ms;
        --cf-dur-fast: 0ms;
        --cf-dur-slow: 0ms;
    }

    .chatfloat-botao,
    .chatfloat-botao-wrap,
    .chatfloat-legenda,
    .chatfloat-status-online::before,
    .chatfloat-ripple {
        animation: none !important;
        transition: none !important;
    }

    /* Garante que o painel ainda abre/fecha (só remove a animação) */
    .chatfloat-painel {
        transition: opacity 100ms linear !important;
    }

    .chatfloat-lista-atendentes.cf-animar .chatfloat-atendente {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   Modo Rodízio — estilos específicos do botão único
   ═══════════════════════════════════════════════════════════ */

/* Botão no modo rodízio usa a cor do canal atual */
.chatfloat-modo-rodizio .chatfloat-botao {
    background-color: var( --cf-cor-ativa, var(--cf-cor-primaria) );
}

/* Spinner de carregamento */
.chatfloat-icone--spinner {
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.4) rotate(0deg);
    transition:
        opacity var(--cf-dur) var(--cf-ease-out),
        transform var(--cf-dur) var(--cf-ease-spring);
}

.chatfloat-botao--rodizio .chatfloat-icone--canal {
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    transition:
        opacity var(--cf-dur) var(--cf-ease-out),
        transform var(--cf-dur) var(--cf-ease-spring);
}

/* Estado carregando: troca ícone por spinner */
.chatfloat-botao--rodizio.cf-carregando .chatfloat-icone--canal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.3) rotate(90deg);
}

.chatfloat-botao--rodizio.cf-carregando .chatfloat-icone--spinner {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    animation: cf-spin .8s linear infinite;
}

@keyframes cf-spin { to { transform: scale(1) rotate(360deg); } }

/* Estado confirmado: pulso de sucesso */
@keyframes cf-confirmado {
    0%   { box-shadow: var(--cf-sombra-botao), 0 0 0 0  rgba(255,255,255,.6); }
    60%  { box-shadow: var(--cf-sombra-botao), 0 0 0 18px rgba(255,255,255,0); }
    100% { box-shadow: var(--cf-sombra-botao), 0 0 0 0  rgba(255,255,255,0); }
}

.chatfloat-botao--rodizio.cf-confirmado {
    animation: cf-confirmado .8s ease-out forwards !important;
}

/* Estado erro: tremida — mantém fundo verde, apenas sacode */
@keyframes cf-erro {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-5px); }
    40%,80% { transform: translateX(5px); }
}

.chatfloat-botao--rodizio.cf-erro {
    animation: cf-erro .5s ease-out forwards !important;
}

/* Transição suave ao mudar cor do canal */
.chatfloat-botao--rodizio {
    transition:
        background-color .4s var(--cf-ease-out),
        transform var(--cf-dur) var(--cf-ease-spring),
        box-shadow var(--cf-dur) var(--cf-ease-out);
}