/* ═══════════════════════════════════════════════════════════════════════════
   A CONVERSA, ESTILO WHATSAPP — hora no canto da bolha, ✓ de quem escreveu e o
   separador de dia (18/09/2026).

   *"vamos adicionar checks de entregue, lido e afins assim como horários das
   mensagens, estilo whatsapp"* (Marcos).

   ⚠️⚠️ UM DESENHO SÓ, NAS DUAS CAMADAS. O widget de Suporte e a página do chamado
   (app) e o console de atendimento (hub) desenham a MESMA bolha — e o hub não
   carrega o `app.css`. Por isso a folha é própria e linkada nos dois layouts
   (`base.html` e `hub/_layout.html`), e os ✓ são desenhados AQUI, em SVG
   embutido: o JS (`conversa.js`) e o macro (`partials/_conversa.html`) só
   escrevem `data-estado`. Um SVG no JS e outro no Jinja seriam o gêmeo que
   diverge no dia em que alguém redesenhar o check.

   O markup (os dois lados escrevem igual):
     <span class="conv-meta" data-estado="lida">
       <time title="18/09/2026 14:32">14:32</time>
       <i class="conv-check" role="img" aria-label="Lida" title="Lida"></i>
     </span>

   ⚠️ O `.conv-meta` é o ÚLTIMO filho do último bloco da bolha e FLUTUA à direita:
   cabe na última linha do texto quando sobra espaço, e desce pra linha de baixo
   quando não sobra — o jeito do WhatsApp, sem largura mágica. Quem contém o
   float é a própria bolha (item de flex = contexto de formatação próprio).
   ⚠️ Sem espaço nem quebra de linha entre o texto e o `.conv-meta`: o corpo da
   bolha é `white-space: pre-line`, e um "\n" ali empurra a hora pra baixo.

   ⚠️ As cores foram MEDIDAS (contraste ≥ 3:1 sobre a bolha tingida, que é o
   mínimo pra ícone): o azul do WhatsApp (#53bdeb) dá 1,9:1 aqui e some.
   ═══════════════════════════════════════════════════════════════════════════ */

.conv-meta {
    float: right;
    position: relative;
    top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 -3px 0 10px;
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 500;
    color: #667781;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.conv-meta time { font: inherit; color: inherit; }

/* Anexos moram num contêiner flex, onde float não vale: a hora vai pro fim da
   última fileira. */
.conv-anexos > .conv-meta { float: none; top: 0; margin-left: auto; align-self: flex-end; }

.conv-check {
    display: inline-block;
    flex: 0 0 auto;
    width: 17px;
    height: 11px;
    background: no-repeat center / contain;
}
/* ✓ gravada no banco da sede */
.conv-meta[data-estado="enviada"] .conv-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%237a8a94' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l3.2 3.1 6.4-7.2'/%3E%3C/svg%3E");
}
/* ✓✓ cinza: o app do outro lado recebeu o aviso */
.conv-meta[data-estado="entregue"] .conv-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%237a8a94' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.5l3.2 3.1 6.4-7.2M6.7 7.95l1.7 1.65 6.4-7.2'/%3E%3C/svg%3E");
}
/* ✓✓ azul: alguém abriu a conversa depois dela */
.conv-meta[data-estado="lida"] .conv-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%231a8fd6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.5l3.2 3.1 6.4-7.2M6.7 7.95l1.7 1.65 6.4-7.2'/%3E%3C/svg%3E");
}
/* 🕓 ainda indo (só no navegador: a mensagem não está no banco) */
.conv-meta[data-estado="enviando"] .conv-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%237a8a94' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='6' r='4.6'/%3E%3Cpath d='M9 3.4V6l1.9 1.2'/%3E%3C/svg%3E");
}
/* ❗ não foi: toque na bolha pra tentar de novo */
.conv-meta[data-estado="falhou"] { color: #d93a3f; }
.conv-meta[data-estado="falhou"] .conv-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Ccircle cx='9' cy='6' r='5.4' fill='%23d93a3f'/%3E%3Cpath d='M9 3.3v3.4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='8.6' r='.85' fill='%23fff'/%3E%3C/svg%3E");
}

/* O separador de dia: Hoje · Ontem · Terça-feira · 12/09/2026 */
.conv-dia {
    align-self: center;
    margin: 4px 0 0;
    padding: 4px 11px;
    border-radius: 8px;
    background: #e9eef3;
    color: #54656f;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .06);
}

/* A bolha que não foi: a pessoa precisa saber que PODE tocar nela. */
.conv-falhou { cursor: pointer; }
.conv-falhou-aviso {
    display: block;
    clear: both;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #d93a3f;
    text-align: right;
}

/* ── As carinhas da avaliação (macro `carinhas` de `partials/_conversa.html`) ──
   O usuário avaliando o atendimento (página do chamado) e quem valida avaliando a
   proposta da Via (console do hub): as mesmas cinco, o mesmo desenho. */
.conv-caras { display: flex; gap: 4px; flex-wrap: nowrap; }
.conv-cara {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px 5px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.conv-cara:hover { transform: translateY(-2px) scale(1.05); background: rgba(17, 173, 180, .07); }
.conv-cara input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.conv-cara:has(input:focus-visible) { outline: 2px solid #11adb4; outline-offset: 1px; }
.conv-cara-rosto {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1;
}
/* Com o rosto da Via: a altura manda e a largura sai da PROPORÇÃO da arte (o
   `.vface` dá `width:100%`, e esticada a cabeça fica fora do lugar das feições). */
.conv-cara-rosto.com-via { font-size: 0; width: auto; height: 34px; }
.conv-cara-rosto.com-via > * { width: 100%; height: 100%; }
.conv-cara-rot {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
}
.conv-caras:has(input:checked) .conv-cara { opacity: .45; }
.conv-caras:has(input:checked) .conv-cara:has(input:checked) {
    opacity: 1;
    background: #fff;
    border-color: rgba(17, 173, 180, .45);
    transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
    .conv-cara, .conv-cara:hover { transition: none; transform: none; }
}