/* Chat Interno (Subcorte A/B/C).

   UNICHAT-RESIDUAL-PRODUCT-SURFACE-VISUAL-COMPLETION-01 (RS-21..RS-30) — convergência visual.

   O que a folha dizia de si mesma era o defeito: "reaproveita as classes .kanban-* ja existentes
   para botoes/loading". É a dívida que §23.4 do contrato v2.0 nomeia — `kanban-*` fora do Kanban.
   Apagar aquelas regras regride superfícies aceitas, então a saída é esta: o Chat Interno deixa de
   consumi-las e ganha a própria ficha, em token, sem tocar em `crm-kanban.css`.

   Saíram junto os seis tamanhos de fonte fora da escala do contrato (10.5px, 11px, 12.5px, 13px,
   13.5px e 16px — VL-01) e a sobreposição artesanal do seletor de nova conversa, hoje `UniModal`.

   O composer continua sendo `.crm-composer-*`, que é a peça compartilhada do Atendimento e está
   correta: reuso de primitive não é dívida — dívida é classe emprestada de OUTRA superfície. */

/* Ficha de carregamento própria (RS-23), substituindo `kanban-loading`/`kanban-spinner`. */
.crm-internal-chat-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uni-space-2);
    padding: var(--uni-space-5) var(--uni-space-4);
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-sm);
}

.crm-internal-chat-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid var(--uni-color-border-strong);
    border-top-color: var(--uni-color-primary);
    border-radius: 50%;
    animation: crm-internal-chat-spin 0.7s linear infinite;
}

/* VL-29 — quem pediu menos movimento não recebe giro; o indicador continua visível, parado. */
@media (prefers-reduced-motion: reduce) {
    .crm-internal-chat-spinner { animation: none; }
}

@keyframes crm-internal-chat-spin {
    to { transform: rotate(360deg); }
}

/* Separador de dia na conversa (RS-29). Linha com o rótulo centrado, para a hora da bolha ter
   âncora numa conversa que atravessa dias. */
.crm-internal-chat-day {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    margin: var(--uni-space-2) 0;
    color: var(--uni-color-text-muted);
    font-size: var(--uni-font-size-2xs);
}

.crm-internal-chat-day::before,
.crm-internal-chat-day::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--uni-color-border);
}

.crm-internal-chat-day > span {
    flex: 0 0 auto;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* Revisão do proprietário (homologação, 2026-09-10): "faltam espaçamentos entre os elementos,
   vertical e horizontal". A composição era UM cartão com uma divisória interna e padding de
   12px por toda parte — abaixo do degrau que o resto do produto usa. Passa a ser DOIS cartões
   com respiro entre eles, e todo espaçamento sai da escala (VL-05): 16px dentro, 24px na área
   de mensagens, 16px entre os painéis. Nenhum valor solto. */
/* Rodada 2 do proprietário: "a parte do chat propriamente dito não deve ter altura infinita;
   deve ter altura limitada pelo vh". O contêiner de página rola (`overflow-y: auto`) e o fio
   crescia com ele — a cada mensagem a página inteira ficava mais alta e o composer descia junto.
   Esta página vira coluna flex sem rolagem própria; o layout ocupa o que sobra do viewport e
   quem rola é a área de mensagens, dentro do cartão. É a mesma régua que o Atendimento usa. */
.crm-internal-chat-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-internal-chat-layout {
    display: grid;
    grid-template-columns: var(--crm-ticket-list-width) minmax(0, 1fr);
    gap: var(--uni-space-4);
    flex: 1 1 auto;
    min-height: 0;
    margin-top: var(--uni-space-4);
}

.crm-internal-chat-list,
.crm-internal-chat-thread {
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-surface);
    overflow: hidden;
}

.crm-internal-chat-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.crm-internal-chat-list-header {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4) var(--uni-space-4) var(--uni-space-3);
}

.crm-internal-chat-list-header .uni-search {
    flex: 1 1 auto;
}

/* A faixa de escopo é `UniTabs` (VL-16): a anatomia da aba vem da primitive, e aqui fica só o
   lugar dela dentro da coluna da lista — o espaçamento vem de UMA camada. */
.crm-internal-chat-filters {
    padding: 0 var(--uni-space-4) var(--uni-space-4);
    border-bottom: 1px solid var(--uni-color-border);
}

/* `.crm-internal-chat-list-empty` foi removida com prova de zero consumidores: os três vazios
   desta superfície (lista, conversa e seletor de pessoas) passaram a ser `CrmEmptyState`, que é a
   variante canônica de D-36 e distingue "não há nada" de "sua busca não achou nada". */

.crm-internal-chat-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.crm-internal-chat-item {
    display: flex;
    align-items: flex-start;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3) var(--uni-space-4);
    border: none;
    border-bottom: 1px solid var(--crm-color-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.crm-internal-chat-item:hover {
    background: var(--crm-color-app-bg);
}

.crm-internal-chat-item.is-active {
    background: var(--crm-color-primary-soft);
}

/* Revisão do proprietário: o avatar "PR" segue o padrão da página de Usuários — o degradê cinza
   frio de `.crm-contacts-avatar` (Contatos, onde a ficha nasceu e foi aceita). A ficha própria,
   um círculo na cor primária, saiu: era a única superfície do produto em que uma pessoa aparecia
   com fundo azul. */

.crm-internal-chat-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-internal-chat-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.crm-internal-chat-item-top strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--crm-color-text);
    font-size: var(--uni-font-size-sm);
}

.crm-internal-chat-item-top time {
    flex: 0 0 auto;
    font-size: var(--uni-font-size-2xs);
    color: var(--crm-color-text-muted);
}

.crm-internal-chat-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.crm-internal-chat-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--crm-color-text-muted);
    font-size: var(--uni-font-size-xs);
}

.crm-internal-chat-inactive-tag {
    font-size: var(--uni-font-size-2xs);
    color: var(--crm-color-text-muted);
    font-style: italic;
}

.crm-internal-chat-thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.crm-internal-chat-thread-header {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-4);
    border-bottom: 1px solid var(--uni-color-border);
}

.crm-internal-chat-thread-header strong {
    display: block;
    color: var(--uni-color-text);
    font-size: var(--uni-font-size-md);
}

.crm-internal-chat-thread-header small {
    display: block;
    margin-top: 2px;
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
}

/* O fio ganha o fundo do app: bolhas brancas e azuis sobre superfície branca não se separavam
   da moldura. Com o cinza do app atrás, as bolhas passam a ser o primeiro plano. */
.crm-internal-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--uni-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-1);
    background: var(--uni-color-app-bg);
}

/* O composer compartilhado com o Atendimento nasce sem respiro lateral aqui, porque lá ele
   encosta na borda do fio. Neste cartão ele precisa da mesma margem que o restante. */
.crm-internal-chat-thread .crm-composer {
    padding: var(--uni-space-3) var(--uni-space-4) var(--uni-space-4);
    border-top: 1px solid var(--uni-color-border);
    background: var(--uni-color-surface);
}

/* Proprietário: "caixa de texto e seu ícone podem estar alinhados verticalmente". No Atendimento
   o shell alinha pela base porque o campo cresce com anexos e áudio; aqui só há texto, e o botão
   centrado na linha do campo lê como uma peça só. */
.crm-internal-chat-thread .crm-composer-shell {
    align-items: center;
    padding: var(--uni-space-1) var(--uni-space-1) var(--uni-space-1) var(--uni-space-4);
    background: var(--uni-color-app-bg);
    border-radius: var(--uni-radius-pill);
}

.crm-internal-chat-thread .crm-composer-textarea {
    font-size: var(--uni-font-size-md);
    min-height: 24px;
    padding: var(--uni-space-2) 0;
}

.crm-internal-chat-thread .crm-composer-send-button {
    width: 36px;
    height: 36px;
}

.crm-internal-chat-thread .crm-composer-send-button svg {
    width: 18px;
    height: 18px;
}

/* Esta regra tem especificidade (0,2,0) e venceria o `padding-bottom` com safe-area que
   `crm-chat.css` declara para o celular (0,1,0). Sem repetir a safe-area aqui, o composer
   voltaria a ficar atrás da barra do iPhone — regressão silenciosa por especificidade. */
@media (max-width: 767px) {
    .crm-internal-chat-thread .crm-composer {
        padding-bottom: calc(var(--uni-space-4) + env(safe-area-inset-bottom, 0px));
    }
}

.crm-internal-chat-load-more {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.crm-internal-chat-bubble-row {
    display: flex;
    justify-content: flex-start;
}

.crm-internal-chat-bubble-row.is-mine {
    justify-content: flex-end;
}

/* Bolha: a do outro é superfície branca com borda; a minha é primária. Os cantos assimétricos
   (o de baixo, do lado de quem falou, mais fechado) dão direção sem cauda desenhada. Sequência de
   bolhas do mesmo lado fica mais junta que a troca de lado — é o ritmo que faz uma conversa ler
   como conversa, não como lista. */
.crm-internal-chat-bubble {
    max-width: min(70%, 560px);
    background: var(--uni-color-surface);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    border-bottom-left-radius: var(--uni-radius-sm);
    padding: var(--uni-space-2) var(--uni-space-3);
    box-shadow: var(--uni-shadow-sm);
}

.crm-internal-chat-bubble-row + .crm-internal-chat-bubble-row { margin-top: var(--uni-space-1); }
.crm-internal-chat-bubble-row:not(.is-mine) + .crm-internal-chat-bubble-row.is-mine,
.crm-internal-chat-bubble-row.is-mine + .crm-internal-chat-bubble-row:not(.is-mine) { margin-top: var(--uni-space-3); }

.crm-internal-chat-bubble-row.is-mine .crm-internal-chat-bubble {
    background: var(--uni-color-primary);
    color: var(--uni-color-on-primary);
    border-color: var(--uni-color-primary);
    border-bottom-left-radius: var(--uni-radius-lg);
    border-bottom-right-radius: var(--uni-radius-sm);
}

.crm-internal-chat-bubble p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--uni-font-size-md);
    line-height: 1.45;
}

/* A hora alinha à direita, colada ao texto — em vez de uma linha própria que dobrava a altura de
   cada bolha curta. */
.crm-internal-chat-bubble time {
    display: block;
    text-align: right;
    margin-top: 2px;
    font-size: var(--uni-font-size-2xs);
    opacity: 0.7;
}

/* RS-21 — `.crm-internal-chat-overlay` e `.crm-internal-chat-picker` eram uma sobreposição montada
   à mão, inclusive com um `z-index: 60` solto (o degrau do toast, acima do modal — VL-09).
   Substituídas por `UniModal`, que já traz Escape, foco inicial, aprisionamento e retorno de foco.
   Resta apenas o teto de altura da lista de pessoas dentro do corpo do modal. */
.crm-internal-chat-picker-items {
    max-height: 50vh;
}

/* UNICHAT-MOBILE-UX-CONFORMANCE-01 (Phase B) — drill-down (contrato W): no mobile, lista OU
   conversa, nunca as duas empilhadas (o antigo "lista 40vh sobre a conversa" saiu).

   RS-30 — a ficha de `.crm-internal-chat-back` saiu junto com o botão. Ela nascia `none`, virava
   `inline-flex` abaixo de 768px e era escondida de novo por `.has-thread` — condição que estava
   SEMPRE presente quando o botão existia, porque ele só renderizava com conversa aberta. Regra
   morta sustentando marcação morta desde que a app bar da conversa assumiu o voltar. */

@media (max-width: 767px) {
    .crm-internal-chat-layout {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: var(--uni-space-3);
    }

    .crm-internal-chat-layout.has-thread .crm-internal-chat-list { display: none; }
    .crm-internal-chat-layout.no-thread .crm-internal-chat-thread { display: none; }

}

/* UNICHAT-MOBILE-UX-ARCHITECTURE-01 (B6) — chat interno como CHAT: app bar da lista / da conversa. */
@media (min-width: 768px) { .crm-ichat-appbar-conv { display: none !important; } }
@media (max-width: 767px) {
    .crm-internal-chat-page.has-thread .crm-ichat-appbar-list { display: none; }

    .crm-internal-chat-page.has-thread .crm-internal-chat-thread-header { display: none; }
    .crm-internal-chat-list-header { gap: 8px; }
}