/* Player de áudio do chat do site — ver audio_player.js.

   As cores saem de variáveis para o mesmo player servir às duas situações:
   controles azuis na bolha branca do cliente e brancos na bolha azul do
   vendedor. Cada tela define as variáveis no seu container; os valores abaixo
   são o padrão (o do widget do cliente). */
.chatsite-audio {
    --cor: var(--chatsite-audio-cor, #1d4ed8);      /* botões e preenchimento */
    --glifo: var(--chatsite-audio-glifo, #fff);     /* o ▶ dentro do círculo */
    --trilho: var(--chatsite-audio-trilho, rgba(15, 23, 42, 0.18));
    --cor-pop: var(--chatsite-audio-cor-pop, var(--cor));

    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 210px;
    max-width: 100%;
    padding: 4px 2px;
    margin-bottom: 0.35rem;
}

/* O <audio> só toca; quem aparece são os controles acima. display:none tira
   ele do flex — sem isso o elemento entra como item de largura zero e o `gap`
   abre um vão de 8px antes do botão de play. */
.chatsite-audio-el { display: none; }

.chatsite-audio-play,
.chatsite-audio-vol-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    color: var(--cor);
    font-family: inherit;
    transition: background 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.chatsite-audio-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cor);
    color: var(--glifo);
}
.chatsite-audio-play:hover { filter: brightness(1.08); }
.chatsite-audio-play:active { transform: scale(0.94); }
.chatsite-audio-play svg { width: 18px; height: 18px; fill: currentColor; }

.chatsite-audio-vol-btn { width: 26px; height: 26px; border-radius: 6px; }
.chatsite-audio-vol-btn:hover { background: color-mix(in srgb, var(--cor) 18%, transparent); }
.chatsite-audio-vol-btn svg { width: 18px; height: 18px; fill: currentColor; }

.chatsite-audio-centro {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chatsite-audio-tempo {
    font-size: 0.68rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* ── Barras (posição e volume) ──
   Mesmo desenho nas duas: trilho fino, parte já percorrida na cor do player e
   uma bolinha discreta. --preenchido é escrito pelo JS a cada movimento. */
.chatsite-audio input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(
        to right,
        var(--cor) var(--preenchido, 0%),
        var(--trilho) var(--preenchido, 0%)
    );
}
.chatsite-audio input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--cor);
    border: 2px solid var(--glifo);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
}
.chatsite-audio input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: 2px solid var(--glifo);
    border-radius: 50%;
    background: var(--cor);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
}
.chatsite-audio input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

/* ── Volume vertical ──
   O popup tem tamanho fixo e o range é girado dentro dele. Rotação em vez de
   writing-mode/appearance:slider-vertical de propósito: essas dependem do
   navegador, e o widget roda no site de qualquer cliente. */
.chatsite-audio-vol {
    position: relative;
    flex-shrink: 0;
}

.chatsite-audio-vol-pop {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 104px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    z-index: 5;
}
.chatsite-audio-vol-pop[hidden] { display: none; }

/* Áudio no alto da lista: a pílula abre para baixo para não ser cortada pela
   borda da caixa que rola. Quem decide é o JS, que mede o espaço dos dois lados. */
.chatsite-audio-vol-pop--abaixo {
    bottom: auto;
    top: calc(100% + 6px);
}

/* Seletor com a mesma força do genérico acima (classe + elemento + atributo),
   senão o width:100% de lá vence e a barra vira um toco de 32px.
   A pílula é sempre clara, então aqui a cor é a --cor-pop e não a --cor: na
   bolha azul do vendedor os controles são brancos, e branco no branco somem. */
.chatsite-audio .chatsite-audio-vol-pop input[type="range"] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;       /* vira a ALTURA depois da rotação */
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    background: linear-gradient(
        to right,
        var(--cor-pop) var(--preenchido, 0%),
        rgba(15, 23, 42, 0.18) var(--preenchido, 0%)
    );
}
.chatsite-audio .chatsite-audio-vol-pop input[type="range"]::-webkit-slider-thumb {
    background: var(--cor-pop);
    border-color: #fff;
}
.chatsite-audio .chatsite-audio-vol-pop input[type="range"]::-moz-range-thumb {
    background: var(--cor-pop);
    border-color: #fff;
}