/* =========================
   MOBILE (DEFAULT)
========================= */
@media (max-width: 767px) {

    /* chat começa escondido */
    #chatArea {
        transform: translateX(100%);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        background: #f9fafb;
        transition: transform 0.3s ease;
    }

    /* quando abre */
    body.chat-open #chatArea {
        transform: translateX(0);
    }

    /* esconde sidebar ao abrir chat */
    body.chat-open #sidebar {
        display: none;
    }
}

/* =========================
   DESKTOP
========================= */
@media (min-width: 768px) {

    #chatArea {
        transform: none;
        position: relative;
        width: 70%;
        height: 100%;
    }

    #sidebar {
        display: flex;
        width: 30%;
    }
}

/***barra audio***/

@media (max-width: 767px) {

    .barra-audio-conteudo {
        min-height: 100px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 8px;

        padding: 10px 8px;
    }

    .barra-audio-player {
        width: 100%;
    }

    .barra-audio-player audio {
        width: 100%;
        height: 42px;
    }

    .barra-audio-velocidades {
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;

        gap: 8px;
    }

    /* Botão de velocidade */
    .velocidade-audio {
        min-width: 55px;
        min-height: 36px;

        padding: 7px 12px;

        font-size: 13px;
    }

    /* Botão de fechar (X) — tratado separadamente */
    .fechar-barra-audio {
        width: 42px;
        height: 36px;
        min-width: 42px;
        min-height: 36px;

        padding: 0;
    }

    .fechar-barra-audio svg {
        width: 13px;
        height: 13px;
    }
}