/* =============================================================================
   ESTILO WHATSAPP WEB (24/09/2026)
   -----------------------------------------------------------------------------
   Pedido do dono: lista de conversas, menu de anexo e gravação de áudio "bem parecidos com o
   WhatsApp Web". Os valores vêm do próprio WhatsApp Web (variáveis CSS do sistema de design
   dele, versão 2025): verde #25d366/#1daa61/#21c063, lista com raio 10px e sem risco entre as
   linhas, filtros em pílula, menu flutuante com ícone colorido, parar/pausar gravação #ff3b30.
   Contraste medido (mín. 4,5:1): no claro a hora verde é #1b8755 (4,52) e o número do contador é
   escuro sobre o verde (9,65) — o branco do WhatsApp no #25d366 dá 1,98.

   Carregado depois das folhas do painel e antes só do mobile.css (o celular, que desde 21/10/2026 é o
   WhatsApp para Android e fica por cima dentro do @media dele). Escopado: só mexe em #chat-list, na busca e nos
   filtros da lista, e no compositor (#input-bar). Tokens próprios --wa-* nos dois temas; o
   fundo do painel continua o do tema do painel.
   ========================================================================== */

:root,
:root.dark-theme {
    --wa-texto: #f7f8fa;
    --wa-texto-2: #8d9599;
    --wa-icone: #aebac1;
    --wa-hover: rgba(255, 255, 255, 0.06);
    --wa-selecionado: rgba(255, 255, 255, 0.1);
    --wa-campo: #2a2c2c;
    --wa-compositor: #242626;
    --wa-menu: #242626;
    --wa-chip: transparent;
    --wa-chip-borda: rgba(255, 255, 255, 0.14);
    --wa-chip-ativo: #103529;
    --wa-chip-ativo-texto: #d9fdd3;
    --wa-verde: #21c063;
    --wa-verde-botao: #21c063;
    --wa-verde-botao-icone: #0a1014;
    --wa-badge: #21c063;
    --wa-badge-texto: #0a1014;
    --wa-parar: #ff3b30;
    --wa-anel: var(--bg-sidebar, #1e1e1e);
    --wa-sombra-menu: 0 2px 5px rgba(0, 0, 0, 0.26), 0 8px 24px rgba(0, 0, 0, 0.38);
    --wa-sombra-compositor: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root.light-theme {
    --wa-texto: #0a1014;
    --wa-texto-2: #5b6368;
    --wa-icone: #54656f;
    --wa-hover: rgba(0, 0, 0, 0.05);
    --wa-selecionado: #f0f2f5;
    --wa-campo: #f0f2f5;
    --wa-compositor: #ffffff;
    --wa-menu: #ffffff;
    --wa-chip: #ffffff;
    --wa-chip-borda: rgba(17, 27, 33, 0.15);
    --wa-chip-ativo: #d9fdd3;
    --wa-chip-ativo-texto: #15603e;
    --wa-verde: #187a4c; /* é cor de TEXTO: o #1b8755 dava 4:1 na linha selecionada (#f0f2f5), a da conversa aberta */
    --wa-verde-botao: #25d366;
    --wa-verde-botao-icone: #ffffff;
    --wa-badge: #25d366;
    --wa-badge-texto: #0a1014;
    --wa-anel: #ffffff;
    --wa-sombra-menu: 0 2px 5px rgba(11, 20, 26, 0.26), 0 2px 10px rgba(11, 20, 26, 0.16);
    --wa-sombra-compositor: 0 1px 2px rgba(11, 20, 26, 0.12);
}

/* ── LISTA DE CONVERSAS ─────────────────────────────────────────────────── */

#chat-list .chat-item {
    margin: 0 8px !important;
    padding: 0 12px !important;
    min-height: 72px !important;
    gap: 13px !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 10px !important;
}

#chat-list .chat-item:hover,
:root.light-theme #chat-list .chat-item:hover {
    background: var(--wa-hover) !important;
}

#chat-list .chat-item.active,
:root.light-theme #chat-list .chat-item.active {
    background: var(--wa-selecionado) !important;
    box-shadow: none !important;
}

/* O WhatsApp não tem a barrinha de destaque na conversa aberta. */
#chat-list .chat-item::before {
    display: none !important;
}

#chat-list .chat-item .avatar {
    width: 49px !important;
    height: 49px !important;
    flex: 0 0 49px !important;
}

#chat-list .chat-name,
#chat-list .chat-item:hover .chat-name {
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--wa-texto) !important;
}

#chat-list .chat-title-row {
    margin-bottom: 2px !important;
}

#chat-list .chat-last,
#chat-list .chat-item:hover .chat-last,
:root.light-theme #chat-list .chat-last,
:root.light-theme #chat-list .chat-item:hover .chat-last {
    font-size: 14px !important;
    color: var(--wa-texto-2) !important;
}

/* Busca ligada: a prévia segue sendo a última mensagem e o que casou com o termo vem numa segunda linha, com o termo em destaque. */
#chat-list .chat-last--busca {
    margin-top: 1px;
}

#chat-list .chat-last--busca .chat-busca-icone {
    margin-right: 6px;
    font-size: 11px;
    vertical-align: 0;
}

#chat-list .chat-busca-achado {
    background: transparent;
    color: var(--wa-texto);
    font-weight: 600;
}

#chat-list .chat-time {
    font-size: 12px !important;
    color: var(--wa-texto-2) !important;
}

/* "Digitando..." na lista, no verde da hora não lida (o #00a884 que vinha cravado no JS dava 3:1 no branco). */
#chat-list .chat-digitando {
    color: var(--wa-verde) !important;
    font-weight: 700;
}

/* Não lida: hora e contador em verde, como no WhatsApp. */
#chat-list .chat-item:has(.unread-badge) .chat-time {
    color: var(--wa-verde) !important;
    font-weight: 500 !important;
}

#chat-list .unread-badge,
:root.light-theme #chat-list .unread-badge {
    background: var(--wa-badge) !important;
    color: var(--wa-badge-texto) !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Quem atende (IA / pessoa): de triângulo no canto para um selinho na foto. */
#chat-list .chat-item-corner-attendant {
    top: auto !important;
    left: 50px !important;
    bottom: 9px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 2px var(--wa-anel) !important;
    z-index: 6 !important;
}

#chat-list .chat-item-corner-attendant::before {
    clip-path: none !important;
    border-radius: 50% !important;
}

#chat-list .chat-item-corner-attendant i {
    font-size: 9.5px !important;
    text-shadow: none !important;
}

/* Canal: WhatsApp é o padrão e não leva marca; Instagram/Messenger ganham um selinho na foto. */
#chat-list .chat-item-corner-network {
    right: auto !important;
    bottom: auto !important;
    left: 50px !important;
    top: 8px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    clip-path: none !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 2px var(--wa-anel) !important;
}

#chat-list .chat-item-corner-network.is-whatsapp {
    display: none !important;
}

#chat-list .chat-item-corner-network i {
    font-size: 10px !important;
    text-shadow: none !important;
}

/* Seleção em lote: a caixinha empurra a foto, os selinhos saem para não caírem no lugar errado. */
#chat-list .chat-item.is-bulk-mode .chat-item-corner-attendant,
#chat-list .chat-item.is-bulk-mode .chat-item-corner-network {
    display: none !important;
}

/* ── BUSCA E FILTROS ────────────────────────────────────────────────────── */

.search-container:has(#chat-search),
:root.dark-theme .search-container:has(#chat-search),
html.light-theme .search-container:has(#chat-search) {
    padding: 8px 12px 4px !important;
    border-bottom: none !important;
}

.search-container:has(#chat-search) .search-box,
:root.dark-theme .search-container:has(#chat-search) .search-box,
html.light-theme .search-container:has(#chat-search) .search-box {
    background: var(--wa-campo) !important;
    border: none !important;
    border-radius: 24px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    gap: 12px !important;
}

.search-container:has(#chat-search) .search-box i {
    color: var(--wa-icone) !important;
}

#chat-search {
    font-size: 15px !important;
    padding: 9px 0 !important;
    color: var(--wa-texto) !important;
}

#chat-search::placeholder {
    color: var(--wa-texto-2) !important;
}

.chat-list-toolbar .chat-quick-filters,
:root.dark-theme .chat-list-toolbar .chat-quick-filters,
html.dark-theme .chat-list-toolbar .chat-quick-filters {
    gap: 8px !important;
    border-bottom: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 6px 12px 8px !important;
    scrollbar-width: none !important;
}

/* Uma fileira só, rolando de lado, como no WhatsApp. */
.chat-list-toolbar .chat-quick-filters::-webkit-scrollbar {
    display: none !important;
}

.chat-list-toolbar .chat-quick-filter-btn {
    flex: 0 0 auto !important;
}

.chat-list-toolbar .chat-quick-filter-btn,
:root.dark-theme .chat-list-toolbar .chat-quick-filter-btn,
html.dark-theme .chat-list-toolbar .chat-quick-filter-btn,
html.light-theme .chat-list-toolbar .chat-quick-filter-btn {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 100px !important;
    background: var(--wa-chip) !important;
    border: 1px solid var(--wa-chip-borda) !important;
    color: var(--wa-texto-2) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transform: none !important;
}

.chat-list-toolbar .chat-quick-filter-btn:hover,
:root.dark-theme .chat-list-toolbar .chat-quick-filter-btn:hover,
html.dark-theme .chat-list-toolbar .chat-quick-filter-btn:hover,
html.light-theme .chat-list-toolbar .chat-quick-filter-btn:hover {
    background: var(--wa-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}

.chat-list-toolbar .chat-quick-filter-btn.active,
:root.dark-theme .chat-list-toolbar .chat-quick-filter-btn.active,
html.dark-theme .chat-list-toolbar .chat-quick-filter-btn.active,
html.light-theme .chat-list-toolbar .chat-quick-filter-btn.active {
    background: var(--wa-chip-ativo) !important;
    border-color: transparent !important;
    color: var(--wa-chip-ativo-texto) !important;
    box-shadow: none !important;
}

.chat-list-toolbar .chat-channel-filter-btn {
    width: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
}

/* ── FAIXA DE FILTROS (24/09/2026) ──────────────────────────────────────────
   Rola de lado sem barra, como no WhatsApp Web. Onde há filtro escondido a borda esmaece e
   aparece a seta (faixaDeFiltros.js liga tem-mais-esq / tem-mais-dir). Antes, a 1280 px,
   Messenger, Agendadas e "+" ficavam fora da tela sem sinal nenhum. */
.chat-list-toolbar .faixa-filtros {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.chat-list-toolbar .faixa-filtros > .chat-quick-filters {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.chat-list-toolbar .faixa-filtros.tem-mais-dir > .chat-quick-filters {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
}

.chat-list-toolbar .faixa-filtros.tem-mais-esq > .chat-quick-filters {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent);
}

.chat-list-toolbar .faixa-filtros.tem-mais-esq.tem-mais-dir > .chat-quick-filters {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

.chat-list-toolbar .faixa-seta {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--wa-chip-borda) !important;
    background: var(--wa-menu) !important;
    color: var(--wa-icone) !important;
    box-shadow: var(--wa-sombra-compositor) !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

.chat-list-toolbar .faixa-seta:hover {
    background: var(--wa-selecionado) !important;
    color: var(--wa-texto) !important;
}

.chat-list-toolbar .faixa-seta--esq { left: 6px !important; }
.chat-list-toolbar .faixa-seta--dir { right: 6px !important; }

.chat-list-toolbar .faixa-filtros.tem-mais-esq .faixa-seta--esq,
.chat-list-toolbar .faixa-filtros.tem-mais-dir .faixa-seta--dir {
    display: inline-flex !important;
}

/* No toque a faixa já rola com o dedo; a seta só atrapalharia. (Mesma especificidade da regra
   de cima e depois dela: é assim que vence.) */
@media (pointer: coarse) {
    .chat-list-toolbar .faixa-filtros.tem-mais-esq .faixa-seta--esq,
    .chat-list-toolbar .faixa-filtros.tem-mais-dir .faixa-seta--dir {
        display: none !important;
    }
}

/* Filtro de canal que a conta não usa sai da faixa (faixaDeFiltros.js põe `hidden`). */
.chat-list-toolbar .chat-quick-filter-btn[hidden] {
    display: none !important;
}

/* Não lidas: o número vira selo e some quando é zero. */
.chat-list-toolbar #quick-unread-count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: var(--wa-badge);
    color: var(--wa-badge-texto);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.chat-list-toolbar #quick-unread-count[hidden] {
    display: none !important;
}

/* Computador: Agendadas e "Mais filtros" moram na linha da BUSCA, ao lado do campo (como os
   ícones do topo do WhatsApp Web), e a faixa fica só com filtros. Na 1ª volta eles ficaram na
   faixa e comiam 82 px dela — a seta caía em cima de "Favoritas". No celular seguem como eram. */
.search-container:has(#chat-search) .busca-acoes {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.search-container:has(#chat-search) .busca-acao {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--wa-icone) !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    cursor: pointer;
}

.search-container:has(#chat-search) .busca-acao:hover {
    background: var(--wa-hover) !important;
    color: var(--wa-texto) !important;
}

@media (min-width: 961px) {
    .chat-list-toolbar #quick-filter-scheduled,
    .chat-list-toolbar #quick-filter-more {
        display: none !important;
    }
}

@media (max-width: 960px) {
    .search-container:has(#chat-search) .busca-acoes { display: none !important; }
}

/* CANAIS: um botão só no lugar dos três ícones (que não cabiam), com o canal escolhido no
   próprio ícone, e o menu FORA da área que rola — dentro dela seria cortado. */
.chat-list-toolbar .filtro-canal-botao {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
}

.chat-list-toolbar .filtro-canal-botao .filtro-canal-seta {
    font-size: 10px;
    opacity: 0.8;
}

.chat-list-toolbar .menu-canais {
    position: absolute;
    z-index: 40;
    min-width: 184px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    background: var(--wa-menu);
    border-radius: 12px;
    box-shadow: var(--wa-sombra-menu);
}

.chat-list-toolbar .menu-canais[hidden],
.chat-list-toolbar .menu-canais-item[hidden] {
    display: none !important;
}

.chat-list-toolbar .menu-canais-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 18px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wa-texto) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    text-align: left !important;
    cursor: pointer;
}

.chat-list-toolbar .menu-canais-item:hover {
    background: var(--wa-hover) !important;
}

.chat-list-toolbar .menu-canais-item i {
    width: 18px;
    text-align: center;
    font-size: 17px;
}

.chat-list-toolbar .menu-canais-item.is-whatsapp i { color: #25d366; }
.chat-list-toolbar .menu-canais-item.is-instagram i { color: #e1306c; }
.chat-list-toolbar .menu-canais-item.is-messenger i { color: #0084ff; }

.chat-list-toolbar .menu-canais-item.active {
    color: var(--wa-verde) !important;
    font-weight: 600 !important;
}

/* ── COMPOSITOR (a barra de digitar) ────────────────────────────────────── */

#input-bar.input-area {
    background: transparent !important;
    border-top: none !important;
    padding: 6px 16px 12px !important;
}

#input-bar .input-controls,
:root.light-theme #input-bar .input-controls {
    background: var(--wa-compositor) !important;
    border-radius: 26px !important;
    padding: 5px 6px !important;
    gap: 2px;
    min-height: 52px;
    box-shadow: var(--wa-sombra-compositor) !important;
}

#input-bar .input-box,
:root.light-theme #input-bar .input-box {
    background: transparent !important;
    border: none !important;
    padding: 8px 8px;
    box-shadow: none;
}

#input-bar .input-box:focus-within {
    border-color: transparent;
}

#input-bar .input-box textarea {
    color: var(--wa-texto);
}

#input-bar .composer-icon-btn,
:root.light-theme #input-bar .composer-icon-btn,
#input-bar .composer-icon-btn.primary {
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: var(--wa-icone) !important;
}

#input-bar .composer-icon-btn:hover,
:root.light-theme #input-bar .composer-icon-btn:hover,
#input-bar .composer-icon-btn.primary:hover {
    background: var(--wa-hover) !important;
    color: var(--wa-texto) !important;
    transform: none;
}

/* Enviar texto: círculo verde, como no WhatsApp. */
#input-bar #btn-send-text,
#input-bar #btn-send-text:hover {
    background: var(--wa-verde-botao) !important;
    color: var(--wa-verde-botao-icone) !important;
    font-size: 17px;
}

/* O "+" gira para "×" com o menu aberto. */
#input-bar #btn-attach i {
    transition: transform 0.2s ease;
}

#composer-attach-menu:not(.composer-hidden) ~ #input-controls #btn-attach {
    background: var(--wa-hover) !important;
}

#composer-attach-menu:not(.composer-hidden) ~ #input-controls #btn-attach i {
    transform: rotate(45deg);
}

/* ── MENU DE ANEXO ──────────────────────────────────────────────────────── */

#input-bar #composer-attach-menu,
:root.light-theme #input-bar #composer-attach-menu {
    left: 16px;
    bottom: calc(100% + 4px);
    width: 248px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 8px;
    background: var(--wa-menu);
    border: none;
    border-radius: 16px;
    box-shadow: var(--wa-sombra-menu);
    transform-origin: bottom left;
    animation: wa-menu-abre 0.16s ease-out;
}

@keyframes wa-menu-abre {
    from { opacity: 0; transform: scale(0.92) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

#input-bar #composer-attach-menu .composer-menu-item,
:root.light-theme #input-bar #composer-attach-menu .composer-menu-item {
    height: 46px;
    padding: 0 12px 0 10px;
    gap: 14px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--wa-texto);
    transition: background-color 0.12s ease;
}

#input-bar #composer-attach-menu .composer-menu-item:hover,
#input-bar #composer-attach-menu .composer-menu-item:focus-visible,
:root.light-theme #input-bar #composer-attach-menu .composer-menu-item:hover,
:root.light-theme #input-bar #composer-attach-menu .composer-menu-item:focus-visible {
    background: var(--wa-hover);
}

#input-bar #composer-attach-menu .composer-menu-item:focus-visible {
    outline: 2px solid var(--wa-verde-botao);
    outline-offset: -2px;
}

#input-bar #composer-attach-menu .composer-menu-item:active {
    background: var(--wa-selecionado);
}

/* O ícone é a cor do item sobre um disco da mesma cor bem clara: lê como botão, sem virar quadrado de cor cheia. */
#input-bar #composer-attach-menu .composer-menu-item i {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cor, var(--wa-icone)) 16%, transparent) !important;
    color: var(--cor, var(--wa-icone));
    font-size: 15px;
}

/* Arquivos de um lado, chamadas e cobrança do outro. */
#input-bar #composer-attach-menu .composer-menu-sep {
    display: block;
    height: 1px;
    margin: 6px 10px;
    background: var(--wa-selecionado);
}

/* ── GRAVAÇÃO DE ÁUDIO ──────────────────────────────────────────────────── */

/* Gravando: o WhatsApp tira o emoji e o anexo; fica só lixeira, tempo, onda, pausa e enviar. */
#input-bar #input-controls.is-gravando > .composer-icon-btn {
    display: none !important;
}

#input-bar #audio-recording-container,
:root.light-theme #input-bar #audio-recording-container {
    background: transparent !important;
    box-shadow: none;
    padding: 0 0 0 2px;
    min-height: 42px;
    gap: 10px;
}

#input-bar .audio-recording-left {
    gap: 0;
}

#input-bar .audio-delete-btn,
:root.light-theme #input-bar .audio-delete-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    box-shadow: none;
    color: var(--wa-icone);
    font-size: 18px;
}

#input-bar .audio-delete-btn:hover {
    background: var(--wa-hover);
    color: var(--wa-parar);
}

#input-bar .audio-recording-status {
    gap: 10px;
}

#input-bar .audio-pulsing {
    width: 10px;
    height: 10px;
    background: var(--wa-parar);
    animation: wa-grava-pisca 1.4s ease-in-out infinite;
}

@keyframes wa-grava-pisca {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

#input-bar #input-controls.is-gravacao-pausada .audio-pulsing {
    animation: none;
    opacity: 0.35;
}

#input-bar .audio-timer,
:root.light-theme #input-bar .audio-timer {
    font-family: inherit;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--wa-texto) !important;
    min-width: 36px;
}

#input-bar .audio-waveform {
    justify-content: flex-start;
    gap: 2px;
    height: 26px;
    overflow: hidden;
}

#input-bar .audio-waveform span {
    width: 3px;
    flex: 0 0 3px;
    border-radius: 2px;
    background: var(--wa-texto-2);
    transform: none;
    transition: height 90ms linear, opacity 90ms linear;
}

#input-bar .audio-actions {
    gap: 8px;
}

/* Pausar/continuar: vermelho, contorno redondo (o "parar" do WhatsApp). */
#input-bar .audio-pause-btn,
:root.light-theme #input-bar .audio-pause-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 2px solid var(--wa-parar);
    color: var(--wa-parar);
    font-size: 12px;
}

#input-bar .audio-pause-btn:hover {
    background: rgba(255, 59, 48, 0.1);
}

#input-bar .audio-send-btn,
:root.light-theme #input-bar .audio-send-btn {
    width: 42px;
    height: 42px;
    background: var(--wa-verde-botao);
    color: var(--wa-verde-botao-icone);
    box-shadow: none;
    font-size: 17px;
}

/* ── CELULAR ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    #chat-list .chat-item {
        margin: 0 4px !important;
        padding: 0 10px !important;
    }

    #chat-list .chat-name,
    #chat-list .chat-item:hover .chat-name {
        font-size: 16px !important;
    }

    #chat-list .chat-item-corner-attendant,
    #chat-list .chat-item-corner-network {
        left: 46px !important;
    }

    #input-bar.input-area {
        padding: 6px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    }

    #input-bar .input-controls {
        min-height: 48px;
    }

    #input-bar #composer-attach-menu {
        left: 8px;
    }
}

/* ── LOGO DA BARRA DO TOPO ──────────────────────────────────────────────── */
/* A arte com margem (logo-conneia.png) deixava a letra com ~8px e, no escuro, azul-escuro no preto
   (visto nos prints de 24/09/2026). Aqui vai a versão recortada: escura no claro, clara no escuro. */

.global-top-bar__brand img {
    content: url('/img/conneia-wordmark.png');
    height: 22px !important;
    max-height: 22px !important;
    filter: none !important;
}

:root:not(.light-theme) .global-top-bar__brand img {
    content: url('/img/conneia-wordmark-claro.png');
}

/* ── AJUSTES VISTOS NOS PRINTS DO CELULAR (390px) ───────────────────────── */

/* A caixa de texto de uma linha só mostrava uma barra de rolagem; a rolagem continua, a barra não. */
#input-bar .input-box textarea {
    scrollbar-width: none;
}

#input-bar .input-box textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* A onda encolhe (e esconde as barras mais antigas) em vez de empurrar o "enviar" para fora da tela. */
#input-bar #audio-recording-container,
#input-bar .audio-recording-status {
    min-width: 0 !important;
    overflow: hidden;
}

#input-bar .audio-waveform {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
}

#input-bar .audio-actions,
#input-bar .audio-recording-left {
    flex-shrink: 0 !important;
}

/* =============================================================================
   FONTE DOS CHATS = A DO WHATSAPP WEB (08/10/2026)
   O WhatsApp Web de hoje escreve tudo em Roboto (o sistema de design dele define --body-font-family: Roboto
   e baixa a "Roboto Variable" como webfont; Segoe UI/Helvetica são só reserva). Antes o painel usava a
   Segoe UI do corpo (b1-nucleo-e-chamada.css), que é mais fina e quadrada e no celular/Mac caía em Verdana.
   Roboto vem do Google Fonts (link do index.html), igual em todo aparelho. Vale na lista de conversas, na
   busca/filtros, no cabeçalho, nas mensagens, no compositor e nos visualizadores de mídia; o resto do
   painel não muda. Os "cv02/cv03/cv04/cv11" do body são glifos alternativos da Jakarta/Inter: aqui voltam ao normal.
   ========================================================================== */
:root {
    --fonte-chat: "Roboto", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#chat-list,
.chat-list-toolbar,
.search-container:has(#chat-search),
#c-header,
.main .messages,
#input-bar,
#wa-mv,
.wa-pv {
    font-family: var(--fonte-chat);
    font-feature-settings: normal;
}

/* Campo de busca, botões e o texto digitado herdam a fonte da caixa: o design-system.css já manda
   `button, input, select, textarea { font-family: inherit }`. O compositor tinha a pilha própria "Segoe UI, -apple-system" (b3-audio-e-composicao.css): iguala à do chat. */
#input-bar .input-box textarea {
    font-family: var(--fonte-chat);
}

/* Menus de contexto (conversa e mensagem): o cinza do painel, não o azul-petróleo antigo. */
.chat-context-menu,
#message-context-menu.chat-context-menu {
    background: var(--wa-menu) !important;
    border-color: var(--wa-hover) !important;
    box-shadow: var(--wa-sombra-menu) !important;
    backdrop-filter: none !important;
}

.chat-context-menu .menu-divider {
    background: var(--wa-chip-borda) !important;
}

/* =============================================================================
   CONVERSA IGUAL À DO WHATSAPP WEB (15/10/2026)
   Papel de parede, margens da lista de mensagens, separador de data e cabeçalho com as medidas e
   cores do WhatsApp Web (lidas do CSS e do JS dele): fundo #161717 / #F5F1EB, balão recebido #242626
   e enviado #144D37 (tokens em design-system.css), lista com 5% de folga de cada lado e balão de
   no máximo 65% do que sobra.
   ========================================================================== */

:root,
:root.dark-theme {
    /* O doodle do WhatsApp Web (par "Business"), igual ao dele: traço branco a 6% no escuro. */
    --wa-papel: url('/img/chat-bg-dark.webp');
    --wa-papel-opacidade: 0.06;
}

:root.light-theme {
    /* No claro o traço é preto a 10%. */
    --wa-papel: url('/img/chat-bg-light.webp');
    --wa-papel-opacidade: 0.1;
}

/* O papel de parede é uma camada atrás do conteúdo (a opacidade do WhatsApp vale só para o desenho,
   não para as bolhas): `isolation` cria o contexto de empilhamento e o z-index negativo põe a camada
   entre o fundo do `.main` e o que está dentro dele. 412,5 x 733,33 é o ladrilho de 540 x 960 na
   escala em que o WhatsApp Web o desenha. */
.main {
    isolation: isolate;
}

.main::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--wa-papel);
    background-repeat: repeat;
    background-size: 412.5px 733.33px;
    opacity: var(--wa-papel-opacidade);
}

/* Lista de mensagens: 5% de folga de cada lado (no WhatsApp Web a 1278 px dá 64 px). No celular
   continua a folga fixa de 24 px do design-system.css. */
@media (min-width: 769px) {
    .messages,
    .messages-container,
    #msg-area,
    #chat-messages {
        padding: 12px 5% 8px !important;
    }
}

/* Quem fala muda: 12 px entre os blocos (dentro do bloco continuam os 2 px). */
.message-bubble-shell + .message-bubble-shell.inicio-de-sequencia {
    margin-top: 12px;
}

/* Separador de data: pílula de 12,5 px sem caixa alta, 12 px de espaço em cima e embaixo. */
#msg-area .chat-date-divider {
    margin: 12px 0;
}

#msg-area .chat-date-divider span,
:root.dark-theme #msg-area .chat-date-divider span {
    padding: 5px 12px 6px;
    border: none;
    border-radius: 7.5px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 20px;
    text-transform: none;
    background: var(--wa-compositor) !important;
    color: var(--wa-texto-2) !important;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

:root.light-theme #msg-area .chat-date-divider span {
    background: var(--wa-compositor) !important;
    color: var(--wa-icone) !important;
}

/* Cabeçalho da conversa: foto de 40 px, 16 px de folga nas laterais e o nome em 16 px normal
   (o `font-size`/`font-weight` do nome vêm inline do index.html, por isso o !important). */
#c-header.chat-header {
    padding: 0 16px !important;
}

#c-header #c-avatar {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
}

#c-header #c-name {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--wa-texto);
}

#c-header #c-status {
    font-size: 13px !important;
}

/* =============================================================================
   CARREGANDO, COMO NO WHATSAPP WEB (25/10/2026)
   -----------------------------------------------------------------------------
   Pedido do dono: "essa parada do esqueleto de ficar carregando a conversa tá estranha". O WhatsApp Web não tem
   esqueleto: a conversa que abre sem nada na memória mostra o fundo e, só se demorar, o anel verde no meio (o
   WAWebSpinner: raio 20, traço 6, ponta redonda, girando e "respirando" o traço); subindo para as mensagens
   antigas, o mesmo anel num círculo no topo. O anel da conversa só aparece depois de 400 ms — o banco costuma
   responder antes, e aí nada pisca.
   ========================================================================== */
#msg-area .wa-carregando {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 0;
    color: var(--wa-verde-botao);
}

#msg-area .wa-carregando svg {
    display: block;
    width: 100%;
    height: 100%;
    animation: wa-carregando-gira 2s linear infinite;
}

#msg-area .wa-carregando circle {
    stroke: currentColor;
    stroke-dasharray: 1 200;
    stroke-dashoffset: 0;
    animation: wa-carregando-traco 1.5s ease-in-out infinite;
}

@keyframes wa-carregando-gira {
    to { transform: rotate(360deg); }
}

@keyframes wa-carregando-traco {
    0% { stroke-dasharray: 1 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 89 200; stroke-dashoffset: -35px; }
    100% { stroke-dasharray: 89 200; stroke-dashoffset: -124px; }
}

#msg-area .wa-conversa-carregando {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    opacity: 0;
    animation: wa-carregando-aparece 0.2s ease 0.4s forwards;
}

#msg-area .wa-conversa-carregando .wa-carregando,
#msg-area .chat-history-status.is-so-anel .wa-carregando {
    box-sizing: content-box;
    padding: 8px;
    border-radius: 50%;
    background: var(--wa-menu);
    box-shadow: var(--wa-sombra-menu);
}

@keyframes wa-carregando-aparece {
    to { opacity: 1; }
}

/* O anel das antigas é o círculo inteiro: sem a pílula escura do aviso de histórico (nos dois temas). */
#msg-area .chat-history-status.is-so-anel {
    padding: 0;
    margin: 10px auto 12px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    #msg-area .wa-carregando svg { animation-duration: 4s; }
    #msg-area .wa-carregando circle { animation: none; stroke-dasharray: 60 200; }
    #msg-area .wa-conversa-carregando { animation-duration: 0s; }
}

/* =============================================================================
   EFEITOS DO WHATSAPP WEB NA CONVERSA (25/10/2026)
   Curvas e tempos lidos do módulo de transições do próprio WhatsApp Web (as curvas são os tokens --wa-curva* do
   painel-extra.css, que também leva o que vale para o painel inteiro: janela, aviso e painel lateral). Aqui: o
   menu cresce do canto de onde saiu em 300 ms e os itens descem 15 px um depois do outro (25 ms); o botão de
   descer cresce do zero; a barra da resposta abre empurrando o campo e sai descendo; os tiques são os desenhos
   do WhatsApp. No celular (mobile.css, o WhatsApp para Android) os menus seguem os do Android.
   ========================================================================== */

:root,
:root.dark-theme,
:root.light-theme {
    --wa-tique-lido: #53bdeb;
}

/* ── CONFIRMAÇÃO DE ENTREGA: relógio, tique, dois tiques e erro ────────────────────────────────────── */

#msg-area .wa-ack,
#chat-list .wa-ack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 15px;
    color: inherit;
    vertical-align: top;
}

#msg-area .wa-ack svg,
#chat-list .wa-ack svg {
    display: block;
    flex: none;
}

#msg-area .wa-ack.is-lida,
#chat-list .wa-ack.is-lida {
    color: var(--wa-tique-lido);
}

#msg-area .wa-ack.is-falhou,
#chat-list .wa-ack.is-falhou {
    color: var(--wa-erro);
}

/* Sobre a foto a hora é branca: o tique cinza acompanha; o azul e o vermelho ficam. */
#msg-area .msg-meta-sobre-midia .wa-ack:not(.is-lida):not(.is-falhou) {
    color: rgba(255, 255, 255, 0.94);
}

/* Na lista, antes do texto, com a altura da própria linha: mais alto que ela, o tique aumentava a linha e a conversa
   com tique subia 2 px em relação às outras (medido no ensaio). */
#chat-list .chat-last .wa-ack {
    height: 16px;
    height: 1lh;
    margin-right: 2px;
}

/* ── BOTÃO DE DESCER: o círculo do WhatsApp, que cresce do zero ─────────────────────────────────── */

#msg-area ~ .scroll-to-bottom-btn {
    width: 42px;
    height: 42px;
    background: var(--wa-menu);
    color: var(--wa-icone);
    box-shadow: var(--wa-sombra-menu);
    opacity: 0;
    transform: scale(0);
    /* translate: no celular ele sobe acima do aviso de versão nova (mobile.css, body.aviso-versao-aberto) */
    transition: transform 0.3s var(--wa-curva), opacity 0.3s var(--wa-curva), translate 0.3s var(--wa-curva);
}

#msg-area ~ .scroll-to-bottom-btn.visible,
#msg-area ~ .scroll-to-bottom-btn.visible:hover,
#msg-area ~ .scroll-to-bottom-btn.visible:active {
    opacity: 1;
    transform: scale(1);
    box-shadow: var(--wa-sombra-menu);
}

#msg-area ~ .scroll-to-bottom-btn.visible:hover {
    background-image: linear-gradient(var(--wa-hover), var(--wa-hover));
}

#msg-area ~ .scroll-to-bottom-btn svg {
    display: block;
}

/* ── BARRA DA RESPOSTA: abre empurrando o campo para cima e sai descendo (o compose-panel do WhatsApp) ─ */

#input-bar #composer-reply-preview {
    animation: wa-barra-de-resposta-abre 0.3s var(--wa-curva-barra);
}

#input-bar #composer-reply-preview.is-saindo {
    animation: wa-barra-de-resposta-fecha 0.3s var(--wa-curva-barra) forwards;
    pointer-events: none;
}

@keyframes wa-barra-de-resposta-abre {
    from { max-height: 0; overflow: hidden; transform: translateY(24px); }
    to { max-height: 200px; overflow: hidden; transform: translateY(0); }
}

@keyframes wa-barra-de-resposta-fecha {
    from { max-height: 200px; overflow: hidden; transform: translateY(0); }
    to { max-height: 0; overflow: hidden; transform: translateY(24px); }
}

/* No PC a citação é a parte de cima da pílula, como o painel do compositor do WhatsApp Web: sem vão, com o
   fundo e a sombra da pílula, e o canto de cima volta a arredondar junto com a saída. O clip-path corta a
   sombra da emenda (a de baixo da citação e a de cima da pílula); os menus do compositor são irmãos da
   pílula, então nada que abre por cima dela é cortado. O celular faz o mesmo no mobile.css. */
@media (min-width: 961px) {
    #input-bar.input-area:has(> #composer-reply-preview[style*="flex"]) {
        row-gap: 0;
    }

    #input-bar #composer-reply-preview {
        box-sizing: border-box;
        padding: 6px 6px 0;
        border-radius: 26px 26px 0 0;
        background: var(--wa-compositor);
        box-shadow: var(--wa-sombra-compositor);
        clip-path: inset(-4px -4px 0 -4px);
    }

    #input-bar .input-controls {
        transition: border-radius 0.3s var(--wa-curva-barra);
    }

    #input-bar:has(> #composer-reply-preview[style*="flex"]:not(.is-saindo)) .input-controls {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        clip-path: inset(0 -4px -4px -4px);
    }
}

/* ── MENUS DO COMPUTADOR: crescem de onde saíram e os itens descem um depois do outro ─────────────── */

@keyframes wa-item-do-menu {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 961px) {
    /* O ⋮ da conversa cresce do canto de cima à direita; ao fechar, encolhe de volta (o display segura até o fim). */
    #c-header #chat-dropdown.dropdown-content {
        display: none;
        opacity: 0;
        transform: scale(0);
        transform-origin: top right;
        pointer-events: none;
        transition: transform 0.3s var(--wa-curva), opacity 0.3s var(--wa-curva), display 0.3s allow-discrete;
    }

    #c-header #chat-dropdown.dropdown-content.show {
        display: block;
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        transition: transform 0.3s var(--wa-curva), opacity 0.1s var(--wa-curva), display 0.3s allow-discrete;
    }

    @starting-style {
        #c-header #chat-dropdown.dropdown-content.show {
            opacity: 0;
            transform: scale(0);
        }
    }

    /* Botão direito na conversa e o menu da mensagem: crescem do ponto do clique (a origem vem do JS). */
    .chat-context-menu,
    #message-context-menu.chat-context-menu {
        opacity: 0;
        transform: scale(0);
        transition: transform 0.3s var(--wa-curva), opacity 0.3s var(--wa-curva);
    }

    .chat-context-menu.show,
    #message-context-menu.chat-context-menu.show {
        opacity: 1;
        transform: scale(1);
        transition: transform 0.3s var(--wa-curva), opacity 0.1s var(--wa-curva);
    }

    /* O "+" do campo: o menu de anexo cresce do canto de baixo à esquerda e encolhe ao fechar. */
    #input-bar #composer-attach-menu,
    :root.light-theme #input-bar #composer-attach-menu {
        transform-origin: bottom left;
        animation: none;
        transition: transform 0.3s var(--wa-curva), opacity 0.1s var(--wa-curva), display 0.3s allow-discrete;
    }

    /* As duas formas (com e sem o tema claro) em cada regra: a do tema claro pesa mais e engoliria a outra. */
    #input-bar #composer-attach-menu.composer-hidden,
    :root.light-theme #input-bar #composer-attach-menu.composer-hidden {
        opacity: 0;
        transform: scale(0);
        pointer-events: none;
        transition: transform 0.3s var(--wa-curva), opacity 0.3s var(--wa-curva), display 0.3s allow-discrete;
    }

    @starting-style {
        #input-bar #composer-attach-menu:not(.composer-hidden),
        :root.light-theme #input-bar #composer-attach-menu:not(.composer-hidden) {
            opacity: 0;
            transform: scale(0);
        }
    }

    /* Os itens descem 15 px, um depois do outro. A ordem (--wa-i) é a dos itens visíveis, posta pelo JS. */
    #c-header #chat-dropdown.show > *,
    .chat-context-menu.show > :not(.msg-context-menu-list),
    #message-context-menu.show .msg-context-menu-list > *,
    #input-bar #composer-attach-menu:not(.composer-hidden) > .composer-menu-item {
        animation: wa-item-do-menu 0.375s var(--wa-curva) both;
        animation-delay: calc(50ms + var(--wa-i, 0) * 25ms);
    }
}

@media (prefers-reduced-motion: reduce) {
    #msg-area ~ .scroll-to-bottom-btn,
    #c-header #chat-dropdown.dropdown-content,
    .chat-context-menu,
    #input-bar #composer-attach-menu,
    #input-bar .input-controls {
        transition-duration: 0s !important;
    }

    #input-bar #composer-reply-preview,
    #c-header #chat-dropdown.show > *,
    .chat-context-menu.show > *,
    #message-context-menu.show .msg-context-menu-list > *,
    #input-bar #composer-attach-menu > .composer-menu-item {
        animation: none !important;
    }
}