/* ==========================================================================
   ZemZix-IA — sistema de design "Funil"
   Um relatório que o corretor abre para ver quanto a atendente rendeu.
   Verde é conversão. A situação da visita é um vocabulário separado.
   ========================================================================== */

:root {
    /* acentos */
    --verde:        oklch(0.62 0.14 158);
    --verde-escuro: oklch(0.48 0.12 158);
    --verde-medio:  oklch(0.68 0.12 158);
    --verde-fundo:  oklch(0.955 0.012 158);
    --verde-tinta:  oklch(0.35 0.09 158);
    --azul:         oklch(0.62 0.14 232);
    --azul-fundo:   oklch(0.955 0.015 232);
    --azul-tinta:   oklch(0.42 0.10 232);
    --ambar:        oklch(0.70 0.13 75);
    --ambar-fundo:  oklch(0.96 0.02 75);
    --ambar-tinta:  oklch(0.48 0.08 75);
    --vermelho:     oklch(0.55 0.14 25);
    --vermelho-fundo: oklch(0.96 0.02 25);
    --vermelho-tinta: oklch(0.50 0.12 25);
    --roxo:         oklch(0.55 0.14 300);
    --roxo-fundo:   oklch(0.96 0.02 300);
    --roxo-tinta:   oklch(0.45 0.11 300);

    /* neutros, puxados para o verde */
    --papel:        oklch(0.975 0.004 150);
    --superficie:   oklch(1 0 0);
    --tinta:        oklch(0.24 0.025 165);
    --tinta-2:      oklch(0.45 0.02 165);
    --apagado:      oklch(0.60 0.015 165);
    --borda:        oklch(0.90 0.008 165);
    --borda-sutil:  oklch(0.94 0.006 165);
    --borda-forte:  oklch(0.86 0.01 165);

    --raio:         5px;
    --raio-cartao:  6px;
    --rail:         226px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.serif {
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}

a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-escuro); }

:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------- estrutura */

.app { display: flex; min-height: 100vh; }

.rail {
    width: var(--rail);
    flex: none;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    padding: 28px 15px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.marca { display: flex; align-items: baseline; gap: 3px; padding: 0 9px; }
.marca-nome { font-size: 25px; }
.marca-ia { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--verde); }

.rail-menu { display: flex; flex-direction: column; gap: 1px; }

.rail-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--raio);
    font-size: 13.5px;
    color: var(--tinta-2);
}
.rail-item:hover { background: var(--papel); color: var(--tinta); }
.rail-item.ativo {
    background: var(--verde-fundo);
    color: var(--verde-tinta);
    font-weight: 600;
}
.rail-item svg { flex: none; }

.rail-fim { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.rail-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
}
.rail-status-nome { font-size: 12.5px; font-weight: 600; }
.rail-status-sub { font-size: 11px; color: var(--apagado); }

.ponto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ponto-verde { background: var(--verde); }
.ponto-ambar { background: var(--ambar); }
.ponto-azul { background: var(--azul); }
.ponto-cinza { background: var(--apagado); }

.conteudo {
    flex-grow: 1;
    min-width: 0;
    padding: 30px 36px 44px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* -------------------------------------------------------------- cabeçalhos */

.cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cabecalho-texto { display: flex; flex-direction: column; gap: 6px; }

.sobrelinha {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--apagado);
}
.sobrelinha-verde { color: var(--verde); }

.titulo { font-size: 42px; line-height: 1; margin: 0; }
.titulo-hero { font-size: 62px; line-height: 1.02; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.titulo-secao { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.apoio { font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); max-width: 66ch; }

/* ----------------------------------------------------------------- cartões */

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
    padding: 22px;
}
.cartao-escuro {
    background: var(--tinta);
    color: oklch(0.96 0.006 160);
    border: none;
    border-radius: var(--raio-cartao);
    padding: 22px;
}
.cartao-escuro .apoio { color: oklch(0.80 0.012 160); }

.pilha { display: flex; flex-direction: column; gap: 16px; }
.pilha-curta { display: flex; flex-direction: column; gap: 10px; }
.linha { display: flex; align-items: center; gap: 12px; }
.crescer { flex-grow: 1; }
.separador { height: 1px; background: var(--borda-sutil); }

/* Grades declaradas por classe, nunca por style="grid-template-columns: …"
   inline: um valor inline não pode ser desfeito pela media query de celular,
   e uma coluna de largura fixa vira rolagem horizontal na tela pequena. */
.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-principal-lateral { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.grade-lateral-larga { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.grade-folgada { gap: 56px; }

/* ---------------------------------------------------------------- números  */

.numero { font-size: 38px; line-height: 1; }
.numero-grande { font-size: 62px; line-height: 0.95; }
.numero-medio { font-size: 27px; line-height: 1; }
.numero-legenda { font-size: 12px; color: var(--apagado); }

/* ---------------------------------------------------------------- botões   */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--raio);
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    text-align: center;
}
.btn-principal { background: var(--verde); color: oklch(1 0 0); }
.btn-principal:hover { background: var(--verde-escuro); color: oklch(1 0 0); }
.btn-secundario { background: var(--superficie); border-color: var(--borda-forte); color: var(--tinta); }
.btn-secundario:hover { border-color: var(--apagado); color: var(--tinta); }
.btn-perigo { color: var(--vermelho); }
.btn-perigo:hover { background: var(--vermelho-fundo); color: var(--vermelho); }
.btn-largo { width: 100%; }
.btn-mini { padding: 7px 14px; font-size: 12.5px; }
.btn-grande { padding: 14px 26px; font-size: 15px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------- campos   */

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-rotulo { font-size: 12.5px; font-weight: 600; }
.campo-dica { font-size: 12px; color: var(--apagado); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="tel"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="file"],
.campo select,
.campo textarea {
    width: 100%;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    padding: 11px 13px;
    font-size: 13.5px;
    color: var(--tinta);
}
.campo textarea { resize: vertical; line-height: 1.6; min-height: 92px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px oklch(0.62 0.14 158 / 0.13);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--apagado); }

.escolha { display: flex; gap: 6px; }
.escolha-opcao {
    flex-grow: 1;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    padding: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--tinta-2);
    cursor: pointer;
}
.escolha-opcao.ativa {
    border-color: var(--verde);
    background: var(--verde-fundo);
    color: var(--verde-tinta);
    font-weight: 600;
}

.interruptor {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--papel);
    border-radius: var(--raio);
    padding: 11px 14px;
    cursor: pointer;
}
.interruptor.ligado { background: var(--verde-fundo); }
.interruptor-trilho {
    width: 34px; height: 19px; border-radius: 100px;
    background: var(--borda-forte);
    display: flex; align-items: center; padding: 2px;
    flex: none;
}
.interruptor.ligado .interruptor-trilho { background: var(--verde); justify-content: flex-end; }
.interruptor-bolinha { width: 15px; height: 15px; border-radius: 50%; background: var(--superficie); }

/* ------------------------------------------------------------- situações   */

.pilula {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 5px 10px;
    white-space: nowrap;
}
.pilula-pendente   { color: var(--ambar-tinta);    background: var(--ambar-fundo); }
.pilula-confirmado { color: var(--verde-tinta);    background: var(--verde-fundo); }
.pilula-realizado  { color: var(--azul-tinta);     background: var(--azul-fundo); }
.pilula-cancelado  { color: var(--vermelho-tinta); background: var(--vermelho-fundo); }
.pilula-reagendado { color: var(--roxo-tinta);     background: var(--roxo-fundo); }

/* ---------------------------------------------------------------- funil    */

.etapa {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr) 104px;
    gap: 16px;
    align-items: center;
}
.etapa-nome { font-size: 13.5px; font-weight: 600; }
.etapa-sub { font-size: 11.5px; color: var(--apagado); }
.etapa-trilho { display: flex; }
.etapa-barra {
    height: 42px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding-left: 14px;
    min-width: 34px;
    color: oklch(1 0 0);
    font-size: 17px;
    font-weight: 700;
}
.etapa-taxa { font-size: 12px; color: var(--apagado); text-align: right; }

.medidor { height: 5px; background: var(--borda-sutil); border-radius: 3px; overflow: hidden; }
.medidor-preenchido { height: 5px; border-radius: 3px; background: var(--verde); }

/* -------------------------------------------------------------- listas     */

.data-bloco { display: flex; flex-direction: column; align-items: center; width: 62px; flex: none; }
.data-dia-semana { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; color: var(--apagado); }
.data-numero { font-size: 40px; line-height: 0.95; }
.data-hora { font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-top: 3px; }

.resumo-ia {
    background: var(--papel);
    border-radius: var(--raio);
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.resumo-ia-rotulo {
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--apagado);
}
.resumo-ia-texto { font-size: 13px; line-height: 1.55; color: oklch(0.35 0.02 165); }

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
    text-align: left;
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--apagado);
    background: var(--papel);
    padding: 13px 16px;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
.tabela td { padding: 18px 16px; border-bottom: 1px solid var(--borda-sutil); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }

.vazio {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 56px 24px; text-align: center;
}
.vazio-titulo { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.vazio-texto { font-size: 13.5px; color: var(--apagado); max-width: 46ch; line-height: 1.6; }

/* --------------------------------------------------------------- avisos    */

.aviso {
    display: flex; align-items: flex-start; gap: 11px;
    border: 1px solid var(--borda);
    background: var(--superficie);
    border-radius: var(--raio-cartao);
    padding: 15px 20px;
    font-size: 13px;
    line-height: 1.55;
}
.aviso svg { flex: none; margin-top: 1px; }
.aviso-ambar    { border-color: oklch(0.88 0.02 75); background: oklch(0.97 0.015 75); }
.aviso-verde    { border-color: oklch(0.88 0.03 158); background: var(--verde-fundo); }
.aviso-vermelho { border-color: oklch(0.88 0.03 25); background: var(--vermelho-fundo); }

/* --------------------------------------------------------------- conversa  */

.balao-cliente {
    align-self: flex-start; max-width: 66%;
    background: var(--papel); border: 1px solid var(--borda-sutil);
    border-radius: 12px 3px 12px 12px;
    padding: 11px 15px; font-size: 13.5px; line-height: 1.55;
}
.balao-ia {
    align-self: flex-end; max-width: 66%;
    background: var(--verde-fundo); border: 1px solid oklch(0.90 0.02 158);
    border-radius: 3px 12px 12px 12px;
    padding: 11px 15px; font-size: 13.5px; line-height: 1.55;
    color: oklch(0.27 0.03 158);
}
.balao-nota { font-size: 11px; color: var(--apagado); }

/* --------------------------------------------------------------- menu móvel */

.abrir-menu {
    display: none;
    align-items: center; gap: 9px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 9px 14px;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
}
.rail-fechar { display: none; }

@media (max-width: 980px) {
    .grade-principal-lateral, .grade-lateral-larga { grid-template-columns: minmax(0, 1fr); }
    .grade-folgada { gap: 28px; }
}

@media (max-width: 900px) {
    .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    body { font-size: 14.5px; }
    .conteudo { padding: 18px 18px 36px; gap: 18px; }
    .titulo { font-size: 32px; }
    .titulo-hero { font-size: 38px; }
    .numero-grande { font-size: 44px; }
    .grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); }
    .etapa { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .etapa-taxa { text-align: left; }

    .abrir-menu { display: inline-flex; }
    .rail-fechar { display: inline-flex; }
    .rail {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 0 0 40px oklch(0.24 0.025 165 / 0.18);
    }
    .rail.aberto { transform: translateX(0); }
    .veu {
        position: fixed; inset: 0; z-index: 55;
        background: oklch(0.24 0.025 165 / 0.4);
        display: none;
    }
    .veu.aberto { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- kanban   */

.quadro {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(268px, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: start;
}

.coluna {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.coluna-topo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--borda-sutil);
}
.coluna-faixa { width: 3px; height: 26px; border-radius: 2px; flex: none; }
.coluna-nome { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.coluna-desc { font-size: 11px; color: var(--apagado); line-height: 1.3; }
.coluna-total {
    margin-left: auto;
    font-size: 12px; font-weight: 700;
    background: var(--papel); border-radius: 100px;
    padding: 2px 9px; color: var(--tinta-2);
    font-variant-numeric: tabular-nums;
}

.coluna-corpo {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    min-height: 90px;
}
.coluna.recebendo { border-color: var(--verde); }
.coluna.recebendo .coluna-corpo { background: var(--verde-fundo); border-radius: 0 0 var(--raio-cartao) var(--raio-cartao); }

.cartao-lead {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    cursor: grab;
}
.cartao-lead:active { cursor: grabbing; }
.cartao-lead.arrastando { opacity: 0.45; }
.cartao-lead-nome { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.cartao-lead-num { font-size: 11.5px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.cartao-lead-fala {
    font-size: 12px; line-height: 1.45; color: var(--tinta-2);
    background: var(--papel); border-radius: 4px; padding: 7px 9px;
}
/* O corte fica num filho SEM padding de propósito: com padding no mesmo
   elemento, o -webkit-line-clamp deixa passar meia linha a mais. */
.cartao-lead-fala span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cartao-lead-rodape {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--apagado);
}
.cartao-lead-visita {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--azul-tinta);
    background: var(--azul-fundo); border-radius: 4px; padding: 5px 8px;
}
.cartao-lead-acoes { display: flex; gap: 6px; margin-left: auto; }
.cartao-lead-acoes a { display: flex; color: var(--apagado); }
.cartao-lead-acoes a:hover { color: var(--verde); }

.coluna-vazia {
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    padding: 18px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--apagado);
    line-height: 1.5;
}

.etapa-novo    { background: oklch(0.72 0.02 165); }
.etapa-conversando    { background: var(--verde-medio); }
.etapa-visita_marcada { background: var(--azul); }
.etapa-visitou { background: var(--verde); }
.etapa-fechado { background: var(--tinta); }
.etapa-perdido { background: var(--vermelho); }

@media (max-width: 760px) {
    .quadro { grid-auto-columns: minmax(240px, 82vw); }
}

/* --------------------------------------------------- caixa de conversas    */

/* Duas colunas com altura própria: a lista rola de um lado e o fio da conversa
   do outro. Deixando a página inteira rolar, o campo de busca subia junto e
   sumia da tela justo em quem tem muita conversa. */
.caixa {
    display: grid;
    grid-template-columns: minmax(0, 336px) minmax(0, 1fr);
    gap: 16px;
    height: calc(100vh - 232px);
    min-height: 440px;
}

.caixa-lista, .caixa-painel {
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
    overflow: hidden;
}

.caixa-busca { padding: 11px 12px; border-bottom: 1px solid var(--borda-sutil); }
.caixa-busca input {
    width: 100%;
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 9px 12px;
    font-family: inherit; font-size: 13px; color: var(--tinta);
}
.caixa-busca input:focus { outline: none; border-color: var(--verde); background: var(--superficie); }
.caixa-busca input::placeholder { color: var(--apagado); }

.caixa-rolagem { flex: 1; overflow-y: auto; }

.conversa-item {
    display: flex; flex-direction: column; gap: 4px;
    width: 100%; text-align: left;
    padding: 12px 14px;
    background: transparent; cursor: pointer;
    border: none; border-bottom: 1px solid var(--borda-sutil);
    font: inherit; color: inherit;
}
.conversa-item:hover { background: var(--papel); }
.conversa-item.ativa { background: var(--verde-fundo); box-shadow: inset 3px 0 0 var(--verde); }
.conversa-item-topo { display: flex; align-items: baseline; gap: 8px; }
.conversa-item-nome {
    flex: 1; min-width: 0;
    font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conversa-item-hora { flex: none; font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.conversa-item-previa {
    font-size: 12px; line-height: 1.4; color: var(--tinta-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.conversa-item-rodape {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 600; color: var(--apagado);
}

.caixa-painel-topo {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid var(--borda-sutil);
}
/* Uma linha só, com reticências. O subtítulo junta número, etapa, contagem e
   visita marcada: deixando quebrar, ele empurrava o cabeçalho até comer meia
   tela de conversa no celular. */
.caixa-contato { flex: 1; min-width: 0; }
.caixa-contato-nome, .caixa-contato-sub {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.caixa-contato-nome { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.caixa-contato-sub { font-size: 11.5px; color: var(--apagado); }
.caixa-fio {
    flex: 1; overflow-y: auto;
    padding: 20px 22px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--papel);
}
.caixa-dia {
    align-self: center; margin: 8px 0;
    padding: 3px 12px; border-radius: 20px;
    background: var(--superficie); border: 1px solid var(--borda-sutil);
    font-size: 11px; font-weight: 600; color: var(--apagado);
}
.balao-hora { display: block; margin-top: 5px; font-size: 10.5px; opacity: 0.7; }
.caixa-voltar { display: none; }

/* No celular não cabem as duas colunas: a lista vira a tela inteira e a
   conversa toma o lugar dela quando o corretor toca num contato. */
@media (max-width: 900px) {
    .caixa { grid-template-columns: minmax(0, 1fr); height: auto; }
    .caixa-lista { min-height: 62vh; }
    .caixa-painel { display: none; min-height: 62vh; }
    .caixa.lendo .caixa-lista { display: none; }
    .caixa.lendo .caixa-painel { display: flex; }
    .caixa-voltar { display: inline-flex; }
    .balao-cliente, .balao-ia { max-width: 86%; }

    /* Botões em cima, quem é o contato embaixo: espremido entre os dois, o
       nome saía uma palavra por linha. */
    .caixa-painel-topo { flex-wrap: wrap; gap: 8px 12px; }
    .caixa-contato { order: 3; flex: 1 0 100%; }
}

/* --------------------------------- conversas: fotos e atendimento humano   */

/* A mensagem que o corretor digitou no WhatsApp dele.
   Fica do mesmo lado da atendente (as duas são saída), em outra cor: numa
   conversa que ele assumiu, precisa dar para ver de relance quem falou o quê. */
.balao-corretor {
    align-self: flex-end; max-width: 66%;
    background: var(--azul-fundo); border: 1px solid oklch(0.90 0.03 232);
    border-radius: 3px 12px 12px 12px;
    padding: 11px 15px; font-size: 13.5px; line-height: 1.55;
    color: var(--azul-tinta);
}
.balao-autor {
    display: block; margin-bottom: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    opacity: 0.7;
}

/* Balão de foto: a imagem é o conteúdo, o texto vira legenda embaixo. */
.balao-foto { padding: 4px; }
.balao-foto img {
    display: block; width: 100%; max-width: 250px;
    border-radius: 9px; cursor: zoom-in;
}
.balao-foto .legenda { padding: 7px 11px 1px; }
.balao-foto .balao-hora { padding: 0 11px 5px; }

/* Foto ampliada. */
.lupa {
    position: fixed; inset: 0; z-index: 90;
    background: oklch(0.18 0.02 165 / 0.88);
    display: none; align-items: center; justify-content: center;
    padding: 34px; cursor: zoom-out;
}
.lupa.aberta { display: flex; }
.lupa img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* Faixa de "você assumiu esta conversa". */
.caixa-assumido {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 18px;
    background: var(--ambar-fundo);
    border-bottom: 1px solid oklch(0.88 0.02 75);
    font-size: 12.5px; line-height: 1.45; color: var(--ambar-tinta);
}
.caixa-assumido svg { flex: none; }

.conversa-item-assumido {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 6px; border-radius: 3px;
    background: var(--ambar-fundo); color: var(--ambar-tinta);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}


/* ------------------------------------ conversas: ficha do lead e resposta   */

/* A ficha que a IA escreve a partir da conversa, para o corretor ler antes de
   ligar. Fica entre o cabeçalho e o fio, e o corretor pode esconder. */
.ficha {
    padding: 12px 18px 14px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda-sutil);
}
.ficha-topo {
    display: flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--apagado);
}
.ficha-acoes { margin-left: auto; display: flex; gap: 10px; }
.ficha-acao {
    border: none; background: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 10.5px; color: var(--verde);
    text-transform: lowercase; letter-spacing: 0;
}
.ficha-acao:hover { text-decoration: underline; }

.ficha-grade {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 24px; margin-top: 10px;
}
.ficha-campo-rotulo {
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--apagado);
}
.ficha-campo-valor { font-size: 12.5px; line-height: 1.45; color: var(--tinta); }

/* "não falou" também é informação — diz o que perguntar na ligação — mas não
   pode competir de igual para igual com o que o cliente realmente disse.

   O nome longo é de propósito: chamar de `.vazio` colidia com o componente de
   estado vazio do sistema (`.vazio`, com padding e texto centralizado), e o
   "não falou" aparecia solto no meio do cartão, longe do seu rótulo. */
.ficha-campo-valor.ficha-campo-vazio { color: var(--apagado); font-style: italic; }

/* Campo de resposta, colado no pé da conversa. */
.caixa-escrever {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 12px 16px;
    background: var(--superficie);
    border-top: 1px solid var(--borda-sutil);
}
.caixa-escrever textarea {
    flex: 1; min-width: 0; max-height: 150px; resize: none;
    padding: 10px 12px;
    background: var(--papel);
    border: 1px solid var(--borda); border-radius: var(--raio);
    font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--tinta);
}
.caixa-escrever textarea:focus {
    outline: none; border-color: var(--verde); background: var(--superficie);
}
.caixa-escrever textarea::placeholder { color: var(--apagado); }
.caixa-escrever textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.caixa-escrever .btn { flex: none; }

/* Os dois destinos de uma conversa, no cartão do Kanban: ler e responder aqui,
   ou abrir no WhatsApp. Empilhados porque, lado a lado na largura de uma coluna,
   o rótulo teria que ser cortado — e botão com nome cortado é tão obscuro
   quanto o ícone de 15px que eles substituíram. */
.cartao-lead-botoes { display: flex; flex-direction: column; gap: 6px; }

.cartao-lead-abrir {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 7px 10px;
    background: var(--verde-fundo);
    border: 1px solid oklch(0.90 0.03 158); border-radius: var(--raio);
    font-size: 12px; font-weight: 600; color: var(--verde-tinta);
}
.cartao-lead-abrir:hover { background: oklch(0.93 0.03 158); color: var(--verde-tinta); }

/* O segundo leva para fora do painel: fica em tom neutro para a leitura
   começar pelo primeiro. */
.cartao-lead-whats {
    background: var(--superficie);
    border-color: var(--borda-forte);
    color: var(--tinta-2);
}
.cartao-lead-whats:hover {
    background: var(--papel); border-color: var(--apagado); color: var(--tinta);
}

@media (max-width: 900px) {
    .ficha-grade { grid-template-columns: minmax(0, 1fr); }
}