/* ===========================================================================
   Alô! · WhatsApp — folha de estilo
   Todas as cores vivem nas variáveis abaixo. Muda uma aqui, muda o painel todo.

   O tema escuro NÃO é uma inversão automática do claro: cada cor tem um valor
   próprio, escolhido para a superfície escura. É por isso que ele não fica
   aquele preto duro de tela invertida.
   =========================================================================== */

:root {
  color-scheme: light;

  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e9edf2;
  --line:      #e2e6ec;
  --line-soft: #eef1f5;

  --text:      #101418;
  --text-2:    #56606e;
  --text-3:    #8a94a2;

  --marca:     #0f766e;
  --marca-2:   #0d9488;
  --marca-bg:  #e6f5f3;

  /* Paleta de identidade — sete matizes validados para daltonismo e
     contraste, na ordem em que devem ser usados. Nunca embaralhe a ordem:
     ela é o que garante que cores vizinhas sejam distinguíveis. */
  --c1: #2a78d6;  --c1-bg: #e8f1fd;   /* azul     */
  --c2: #eb6834;  --c2-bg: #fdeee7;   /* laranja  */
  --c3: #1baf7a;  --c3-bg: #e6f7f0;   /* verde-água */
  --c4: #eda100;  --c4-bg: #fdf4e0;   /* amarelo  */
  --c5: #e87ba4;  --c5-bg: #fdeef3;   /* magenta  */
  --c6: #008300;  --c6-bg: #e6f3e6;   /* verde    */
  --c7: #4a3aa7;  --c7-bg: #ecebf7;   /* violeta  */

  --ok:   #15803d;  --ok-bg:   #e8f6ed;
  --warn: #a16207;  --warn-bg: #fdf5e3;
  --err:  #b42318;  --err-bg:  #fdeeec;

  --r: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,.07);
  --sidebar: 236px;
}

/* O tema escuro vale quando o sistema está escuro E o usuário não escolheu
   claro; a escolha explícita (data-theme) ganha dos dois lados. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:        #131315;
    --surface:   #1b1c1f;
    --surface-2: #232529;
    --surface-3: #2b2e33;
    --line:      #2e3136;
    --line-soft: #26282c;

    --text:      #eceef2;
    --text-2:    #a3abb7;
    --text-3:    #737c89;

    --marca:     #2dd4bf;
    --marca-2:   #14b8a6;
    --marca-bg:  #0f302c;

    --c1: #3987e5;  --c1-bg: #13253c;
    --c2: #d95926;  --c2-bg: #33201a;
    --c3: #199e70;  --c3-bg: #102c25;
    --c4: #c98500;  --c4-bg: #2f2612;
    --c5: #d55181;  --c5-bg: #331b25;
    --c6: #008300;  --c6-bg: #12281a;
    --c7: #9085e9;  --c7-bg: #23213c;

    --ok:   #4ade80;  --ok-bg:   #13301f;
    --warn: #fbbf24;  --warn-bg: #2f2713;
    --err:  #fca5a5;  --err-bg:  #33201e;

    --shadow: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #131315;
  --surface:   #1b1c1f;
  --surface-2: #232529;
  --surface-3: #2b2e33;
  --line:      #2e3136;
  --line-soft: #26282c;

  --text:      #eceef2;
  --text-2:    #a3abb7;
  --text-3:    #737c89;

  --marca:     #2dd4bf;
  --marca-2:   #14b8a6;
  --marca-bg:  #0f302c;

  --c1: #3987e5;  --c1-bg: #13253c;
  --c2: #d95926;  --c2-bg: #33201a;
  --c3: #199e70;  --c3-bg: #102c25;
  --c4: #c98500;  --c4-bg: #2f2612;
  --c5: #d55181;  --c5-bg: #331b25;
  --c6: #008300;  --c6-bg: #12281a;
  --c7: #9085e9;  --c7-bg: #23213c;

  --ok:   #4ade80;  --ok-bg:   #13301f;
  --warn: #fbbf24;  --warn-bg: #2f2713;
  --err:  #fca5a5;  --err-bg:  #33201e;

  --shadow: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14.5px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

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

aside {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.marca .ponto {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, #34d399, var(--marca-2) 45%, #0e7490);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 2px 8px rgba(13,148,136,.35);
}
.marca b { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; display: block; }
.marca small { color: var(--text-3); font-size: 11.5px; display: block; margin-top: -1px; }

nav { padding: 4px 10px; flex: 1; overflow-y: auto; }
nav button {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  background: none; border: none; cursor: pointer;
  padding: 9px 11px; margin-bottom: 1px;
  border-radius: 9px;
  font: inherit; font-size: 14px;
  color: var(--text-2); text-align: left;
  transition: background .12s, color .12s;
}
nav button:hover { background: var(--surface-2); color: var(--text); }
nav button.on {
  background: var(--marca-bg); color: var(--marca); font-weight: 600;
}
nav button svg { width: 17px; height: 17px; flex-shrink: 0; }
nav .grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); padding: 16px 12px 6px; font-weight: 650;
}

.rodape-lateral {
  padding: 12px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-3);
}
.rodape-lateral .linha { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.bolinha { width: 7px; height: 7px; border-radius: 99px; background: var(--text-3); flex-shrink: 0; }
.bolinha.ok { background: var(--c6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c6) 18%, transparent); }
.bolinha.erro { background: var(--err); }
.bolinha.carregando { background: var(--c4); animation: pulsa 1.4s infinite; }
@keyframes pulsa { 50% { opacity: .25; } }

/* seletor de tema */
.temas { display: flex; gap: 3px; margin-top: 10px; background: var(--surface-2);
         padding: 3px; border-radius: 8px; }
.temas button {
  flex: 1; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-2);
  padding: 5px 4px; border-radius: 6px;
}
.temas button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }

main { flex: 1; min-width: 0; padding: 26px 30px 60px; }
.limite { max-width: 1680px; margin: 0 auto; }

/* Telas de "caixa de entrada" (Conversas e Histórico) são áreas de trabalho:
   elas ganham com largura. Nas telas largas o limite de 1680px deixava uma
   faixa vazia dos dois lados; aqui soltamos o limite SÓ quando uma dessas
   telas está ativa, então o restante (painéis, formulários) continua centrado
   e com largura confortável de leitura. */
.limite:has(> #conversas.on),
.limite:has(> #historicoOpa.on) { max-width: none; }

.topo { margin-bottom: 22px; }
.topo h1 { font-size: 21px; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.topo p { color: var(--text-2); margin: 5px 0 0; font-size: 13.5px; }

section { display: none; }
section.on { display: block; animation: entra .18s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(3px); } }

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

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card > h2 {
  font-size: 14.5px; font-weight: 650; margin: 0 0 3px;
  display: flex; align-items: center; gap: 8px;
}
.card > p.sub { color: var(--text-2); font-size: 13px; margin: 0 0 18px; }

/* ---------- métricas ----------------------------------------------------- */

/* 132px é o mínimo que ainda cabe as sete métricas numa linha só na largura
   do painel — abaixo disso a última cai sozinha numa segunda linha, que fica
   feio; acima, o navegador quebra a grade. */
.metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.metrica {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}
.metrica:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* a faixa colorida é o identificador do cartão; o número fica em tinta
   normal, que é o que mantém a leitura confortável nos dois temas */
.metrica::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cor, var(--marca));
}
.metrica .topo-m { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.metrica .chip {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--cor-bg, var(--marca-bg));
  display: grid; place-items: center; flex-shrink: 0;
}
.metrica .chip svg { width: 13px; height: 13px; color: var(--cor, var(--marca)); }
.metrica .r { font-size: 12px; color: var(--text-2); line-height: 1.25; }
.metrica .n { font-size: 25px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; }

/* ---------- formulários -------------------------------------------------- */

label { display: block; font-size: 12.5px; font-weight: 550; margin: 14px 0 5px; color: var(--text); }
label:first-child { margin-top: 0; }
label small { font-weight: 400; color: var(--text-3); margin-left: 4px; }

input[type=text], input[type=email], input[type=url], input[type=number],
input[type=password], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px;
  font: inherit; font-size: 13.5px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent);
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
textarea.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
input::placeholder, textarea::placeholder { color: var(--text-3); }

.grade { display: grid; gap: 14px; }
.grade.c2 { grid-template-columns: 1fr 1fr; }
.grade.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .grade.c2, .grade.c3 { grid-template-columns: 1fr; } }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px;
  font: inherit; font-size: 13.5px; font-weight: 550;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  cursor: pointer; transition: .12s;
}
.btn:hover { background: var(--surface-2); }
.btn.primario {
  background: linear-gradient(135deg, var(--marca-2), var(--marca));
  border-color: transparent; color: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--marca) 35%, transparent);
}
:root[data-theme="dark"] .btn.primario,
:root:not([data-theme="light"]) .btn.primario { color: #08201d; }
.btn.primario:hover { filter: brightness(1.06); }
.btn.perigo { color: var(--err); }
.btn.perigo:hover { background: var(--err-bg); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn.pequeno { padding: 5px 10px; font-size: 12.5px; }
.acoes { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; align-items: center; }

/* ---------- pílulas e etiquetas ------------------------------------------ */

.pilulas { display: flex; gap: 7px; flex-wrap: wrap; }
.pilula {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
  transition: .12s; user-select: none;
}
.pilula:hover { border-color: var(--text-3); }
.pilula.on {
  background: var(--marca-bg); border-color: var(--marca);
  color: var(--marca); font-weight: 600;
}
.pilula .cor { width: 8px; height: 8px; border-radius: 99px; }

.etq {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 550;
  background: var(--surface-2); color: var(--text-2);
}
.etq .cor { width: 7px; height: 7px; border-radius: 99px; }

.tag { font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 6px; letter-spacing: .01em; }
.t-ok     { background: var(--ok-bg);   color: var(--ok); }
.t-warn   { background: var(--warn-bg); color: var(--warn); }
.t-err    { background: var(--err-bg);  color: var(--err); }
.t-neutro { background: var(--surface-2); color: var(--text-2); }
/* "fora do horário": roxo, para destacar das cores de estado normais */
.t-fora   { background: #efe6fb; color: #6b2fb3; }
:root[data-theme="dark"] .t-fora { background: #35264d; color: #d6bcff; }
/* horário de atendimento: linhas de dias */
.exp-dias { display: flex; flex-direction: column; gap: 6px; }
.exp-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exp-linha .exp-dia { display: flex; align-items: center; gap: 7px; min-width: 130px; }
.exp-linha .exp-dia input { width: auto; }
.exp-linha input[type="time"] { width: 110px; }
.exp-linha .exp-as { color: var(--text-2); }

/* ---------- tabelas ------------------------------------------------------ */

.tabela-envolve { overflow-x: auto; margin: 0 -20px -20px; padding: 0 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 9px 12px;
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.fim, th.fim { text-align: right; white-space: nowrap; }
td.fim .btn { margin-left: 5px; }
.num {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}

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

.aviso {
  border-radius: var(--r); padding: 11px 14px; font-size: 13px;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
  margin-top: 14px;
}
.aviso.erro { background: var(--err-bg); color: var(--err); border-color: color-mix(in srgb, var(--err) 25%, transparent); }
.aviso.ok   { background: var(--ok-bg);  color: var(--ok);  border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.aviso.info { background: var(--c1-bg);  color: var(--c1);  border-color: color-mix(in srgb, var(--c1) 25%, transparent); }
.aviso b { font-weight: 650; }

.vazio { text-align: center; padding: 34px 20px; color: var(--text-3); font-size: 13.5px; }

/* ---------- prévia de mensagem ------------------------------------------- */

.previa-fundo {
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--c3) 9%, transparent), transparent 55%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--c1) 9%, transparent), transparent 55%),
    var(--surface-2);
  border-radius: var(--r); padding: 20px;
  display: flex; justify-content: flex-end;
}
.balao {
  background: #d9fdd3; color: #111b21;
  border-radius: 9px 2px 9px 9px;
  padding: 8px 11px 6px; max-width: 330px;
  font-size: 13.5px; white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .balao { background: #075e54; color: #e9edef; }
  :root:not([data-theme="light"]) .t-fora { background: #35264d; color: #d6bcff; }
}
:root[data-theme="dark"] .balao { background: #075e54; color: #e9edef; }
.balao .cab { font-weight: 650; margin-bottom: 4px; }
.balao .rod { font-size: 11.5px; opacity: .65; margin-top: 5px; }
.balao .bt {
  margin: 7px -11px -6px; padding: 8px;
  border-top: 1px solid rgba(0,0,0,.12); text-align: center;
  color: #0a7cff; font-size: 13px; font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .balao .bt { color: #53bdeb; border-color: rgba(255,255,255,.16); }
}
:root[data-theme="dark"] .balao .bt { color: #53bdeb; border-color: rgba(255,255,255,.16); }

/* ---------- conversas ---------------------------------------------------- */

.conversa { display: grid; grid-template-columns: 280px 1fr; min-height: 560px; }

/* ---------- cabeçalho da conversa (identidade em cima, ações embaixo) ----- */
/* Antes identidade e botões ficavam nas pontas opostas de um cabeçalho bem
   largo (space-between), e sobrava um vão enorme no meio. Agora: linha 1 =
   quem é o cliente (+ status e Cadastrar à direita); linha 2 = uma barra de
   ações com todos os botões juntos, à esquerda, sempre perto um do outro. */
#cabecalhoConversa { display: flex; flex-direction: column; gap: 10px; }
.cab-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cab-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cab-tags { margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cab-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cab-acoes {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.cab-acoes:empty { display: none; }   /* sem botões, sem barra nem linha */
/* transferir + adicionar empilhados (um em cima do outro) */
.pilha-acoes { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; }
.pilha-acoes .linha-acao { display: flex; align-items: center; gap: 7px; }
.lista-conversas {
  border-right: 1px solid var(--line); overflow-y: auto;
  max-height: calc(100vh - 250px); min-height: 420px; margin: -20px 0 -20px -20px;
}
.item-conversa { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.item-conversa:hover { background: var(--surface-2); }
.item-conversa.on {
  background: var(--marca-bg);
  box-shadow: inset 3px 0 0 var(--marca);
}
.item-conversa .n { font-weight: 550; font-size: 13.5px; }
.item-conversa .p { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mensagens { padding: 4px 0 0 20px; max-height: calc(100vh - 250px); min-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.msg { position: relative; max-width: 76%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; white-space: pre-wrap; }
.msg.entrada { background: var(--surface-2); align-self: flex-start; border-bottom-left-radius: 3px; }
.msg.saida  { background: var(--marca-bg); color: var(--text); align-self: flex-end; border-bottom-right-radius: 3px; }
.msg .meta { font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
/* Cabeçalho "Nome · Setor" em cima de cada mensagem */
.msg .msg-autor { font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 3px; line-height: 1.2; }
.msg .msg-autor .setor { font-weight: 600; color: var(--marca); }
.chat-msg .autor .setor { font-weight: 600; color: var(--marca); }

/* Botão "responder" (↩): aparece ao passar o mouse no balão. Fica do lado de
   fora da bolha — na direita das recebidas, na esquerda das enviadas. */
.msg-responder {
  position: absolute; top: 4px; border: none; background: var(--surface);
  color: var(--text-2); width: 24px; height: 24px; border-radius: 50%;
  font-size: 13px; cursor: pointer; box-shadow: var(--shadow); line-height: 1;
  opacity: 0; transition: opacity .12s; padding: 0;
}
.msg:hover .msg-responder { opacity: 1; }
.msg-responder:hover { color: var(--marca); }
.msg.entrada .msg-responder { right: -30px; }
.msg.saida   .msg-responder { left: -30px; }

/* Trecho citado dentro de um balão (resposta grudada na mensagem original) */
.msg-citacao {
  border-left: 3px solid var(--marca); background: rgba(127,127,127,.10);
  border-radius: 6px; padding: 4px 8px; margin-bottom: 5px;
  font-size: 12px; color: var(--text-2); white-space: normal;
  max-height: 44px; overflow: hidden;
}
.msg-citacao .quem { display: block; font-weight: 650; color: var(--marca); font-size: 11px; }

/* Faixa "Respondendo a…" acima do campo de resposta */
.reply-preview {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  padding: 7px 10px; border-left: 3px solid var(--marca);
  background: var(--surface-2); border-radius: 8px;
}
.reply-preview .rp-texto { min-width: 0; flex: 1; }
.reply-preview .rp-quem { display: block; font-weight: 650; font-size: 11.5px; color: var(--marca); }
.reply-preview .rp-trecho { display: block; font-size: 12.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-preview .rp-x {
  border: none; background: none; color: var(--text-3); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
.reply-preview .rp-x:hover { background: var(--surface-3); color: var(--text); }
/* nome do template: contexto para quem atende, sem roubar o lugar do texto */
.msg .selo-template {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px; white-space: normal;
}

/* Gravando áudio: o botão fica vermelho e pulsa, e a bolinha ao lado do
   cronômetro deixa claro que o microfone está aberto AGORA. */
#btnGravar.gravando { background: var(--err); color: #fff; border-color: var(--err); }
.ponto-gravando {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--err); margin-right: 6px; animation: pulsa 1s ease-in-out infinite;
}
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ponto-gravando { animation: none; } }

/* Mídia dentro do balão.
   O balão aperta o padding quando tem mídia: foto com moldura grossa
   em volta parece erro de layout. */
.msg.com-midia { padding: 5px 5px 6px; max-width: 62%; }
.msg.com-midia .legenda { padding: 5px 7px 0; white-space: pre-wrap; }
.msg.com-midia .meta { padding: 0 7px; }
.midia-foto, .midia-video { display: block; width: 100%; max-height: 320px; border-radius: 9px; object-fit: cover; background: var(--surface-2); }
.midia-figurinha { display: block; width: 130px; height: auto; }
.midia-audio { display: block; width: 260px; max-width: 100%; margin: 2px 0; }
.midia-doc {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border-radius: 9px; background: var(--surface-2); text-decoration: none; color: var(--text);
}
.midia-doc .icone { font-size: 20px; }
.midia-doc small { display: block; font-size: 10.5px; color: var(--text-3); }

/* Nota do sistema dentro da conversa ("veio do Google").
   Centralizada e sem balão de propósito: balão é de gente, e ninguém
   pode achar que isso foi uma mensagem enviada ao cliente. */
.nota-sistema {
  align-self: center; max-width: 86%; text-align: center;
  font-size: 11.5px; color: var(--text-3);
  padding: 4px 12px; border-radius: 999px; background: var(--surface-2);
}
.nota-sistema .quando { opacity: .7; }

/* O protocolo é para ser copiado e colado num e-mail ou num pedido, então
   se comporta como um botão discreto em vez de texto solto. */
.protocolo {
  margin-left: 8px; cursor: pointer;
  background: var(--surface-2); padding: 2px 7px; border-radius: 5px;
}
.protocolo:hover { background: var(--marca-bg); color: var(--marca); }

/* ---------- respostas rápidas (seletor do "/") --------------------------- */

/* Sobe a partir do campo de resposta, como um autocomplete. Fica ancorado
   no #responderBox, que por isso precisa de position: relative. */
.seletor-respostas {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 20px; right: 0;
  max-height: 240px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  z-index: 30;
}
.seletor-respostas .opcao { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.seletor-respostas .opcao:last-child { border-bottom: 0; }
.seletor-respostas .opcao:hover,
.seletor-respostas .opcao.on { background: var(--marca-bg); }
.seletor-respostas .linha1 { font-size: 13px; }
.seletor-respostas .linha2 {
  font-size: 12px; color: var(--text-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- relatórios --------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow);
}
.tile .rot { font-size: 11.5px; color: var(--text-3); margin-bottom: 5px; }
.tile .val {
  font-size: 23px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tile .det { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }

/* O SVG tem largura fixa no viewBox; em tela estreita ele rola no próprio
   contêiner em vez de empurrar a página inteira para o lado. */
.grafico-envolve { overflow-x: auto; margin-top: 12px; }
.grafico-envolve svg { width: 100%; min-width: 420px; height: auto; display: block; }

.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.legenda .leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.legenda .leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.barra-linha {
  display: inline-block; vertical-align: middle; width: 90px; height: 7px;
  background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-right: 8px;
}
.barra-linha span { display: block; height: 100%; border-radius: 4px; }

/* ---------- utilidades --------------------------------------------------- */

.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filtros input[type=text] { max-width: 260px; }
.oculto { display: none !important; }
code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  background: var(--surface-2); padding: 1.5px 6px; border-radius: 5px;
}
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--marca); cursor: pointer; }
.linha-check { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13.5px; }
.linha-check label { margin: 0; font-weight: 400; }

@media (max-width: 860px) {
  aside { position: fixed; z-index: 20; transform: translateX(-100%); transition: .2s; }
  aside.aberta { transform: none; }
  main { padding: 20px 16px 50px; }
  .conversa { grid-template-columns: 1fr; }
  .lista-conversas { max-height: 200px; margin: -20px -20px 16px; border-right: none; border-bottom: 1px solid var(--line); }
  .mensagens { padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   Pop-up (Nova conversa)

   position: fixed cobrindo a tela inteira, com o fundo escurecido. A caixa
   tem altura máxima e o CORPO é que rola — assim o botão Enviar nunca sai
   de vista, nem num template com seis variáveis.
--------------------------------------------------------------------------- */
.pop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(15, 18, 23, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pop.oculto { display: none; }

.pop-caixa {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  width: 100%; max-width: 560px; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.pop-topo, .pop-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
}
.pop-topo { border-bottom: 1px solid var(--line); }
.pop-rodape { border-top: 1px solid var(--line); }
.pop-corpo { padding: 16px 18px; overflow-y: auto; }
.nc-secao + .nc-secao { margin-top: 18px; }

.nc-lista { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.nc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; cursor: pointer; font-size: 13.5px;
}
.nc-item + .nc-item { border-top: 1px solid var(--line); }
.nc-item:hover { background: var(--surface-2); }
.nc-novo { color: var(--marca); }

.nc-escolhido {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
}

/* a prévia imita o balão do WhatsApp: é o que evita mandar template com
   variável vazia sem perceber */
.nc-previa {
  white-space: pre-wrap; font-size: 13.5px; line-height: 1.45;
  padding: 10px 13px; border-radius: 12px; border-bottom-right-radius: 3px;
  background: var(--marca-bg); margin-top: 6px;
}

/* "Ver o que veio antes": o histórico dos atendimentos anteriores, que fica
   fora do fio por padrão. Quando carregado, vem esmaecido — é passado, não
   se confunde com a conversa de agora. */
.ver-anteriores { align-self: center; margin: 4px 0 10px; text-align: center; }
.msg.antiga { opacity: .62; }

/* Lista de links da Meta: nome clicável em cima, para que serve embaixo.
   Sem a explicação, é um monte de link igual e ninguém lembra qual é qual. */
.link-meta { padding: 7px 0; border-bottom: 1px solid var(--line); }
.link-meta:last-child { border-bottom: 0; }
.link-meta a { color: var(--marca); text-decoration: none; font-size: 13.5px; }
.link-meta a:hover { text-decoration: underline; }
.link-meta .sub { display: block; margin-top: 2px; }
.link-meta i { opacity: .8; }

/* ===========================================================================
   PRESENÇA + AVISOS (online/ausente, toasts de mensagem, pop-up da fila)
   =========================================================================== */

/* Botão Online/Ausente na lateral. Verde quando disponível, âmbar quando
   ausente — a mesma linguagem de cor do resto do painel. */
.btn-presenca {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-presenca:hover { background: var(--surface-2); }
.btn-presenca .bolinha { width: 9px; height: 9px; }
.btn-presenca.online  { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.btn-presenca.online  .bolinha { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.btn-presenca.ausente { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.btn-presenca.ausente .bolinha { background: var(--warn); box-shadow: none; }
.btn-presenca.almoco  { border-color: color-mix(in srgb, var(--c4, #c77) 55%, var(--line)); }
.btn-presenca.almoco  .bolinha { background: var(--c4, #c77); box-shadow: none; }
.bolinha.pausa { background: var(--c4, #c77); }

/* Menu de status (Online / Ausente / Almoço) */
.menu-presenca {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.menu-presenca.oculto { display: none; }
.menu-presenca button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
}
.menu-presenca button:hover { background: var(--surface-2); }

/* Painel "Equipe agora": uma linha por pessoa, com a bolinha do estado. */
.equipe-grade { display: flex; flex-direction: column; gap: 2px; }
.equipe-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--line-soft);
}
.equipe-item:last-child { border-bottom: 0; }
.equipe-item .bolinha { width: 9px; height: 9px; }
.equipe-item.st-online  .bolinha { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.equipe-item.st-ausente .bolinha { background: var(--warn); }
.equipe-item.st-offline .bolinha { background: var(--text-3); }
.equipe-item.st-offline { opacity: .6; }
.equipe-item.st-almoco  .bolinha { background: var(--c4, #c77); }
.equipe-item .nome { font-weight: 600; }
.equipe-item .quem  { display: flex; flex-direction: column; min-width: 0; }
.equipe-item .setores { color: var(--text-3); font-size: 11.5px; }
.equipe-item .estado-rot { margin-left: auto; font-size: 11.5px; color: var(--text-2); white-space: nowrap; }

/* Toasts de mensagem nova: cartões empilhados no canto inferior direito. */
.toasts {
  position: fixed; z-index: 60; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(340px, calc(100vw - 36px));
}
.toast {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--marca);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-md);
  cursor: pointer; animation: toast-entra .22s ease-out;
}
.toast:hover { background: var(--surface-2); }
.toast .t-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.toast .t-topo .bolinha { width: 8px; height: 8px; background: var(--marca); }
.toast .t-nome { font-weight: 700; font-size: 13.5px; }
.toast .t-fechar {
  margin-left: auto; border: 0; background: none; color: var(--text-3);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.toast .t-texto { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
@keyframes toast-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pop-up da fila (ao ficar online): sobreposição escura + cartão central. */
.popup-fila {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(16,24,40,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.popup-fila .pf-cartao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column;
}
.popup-fila .pf-topo { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.popup-fila .pf-topo h2 { margin: 0; font-size: 17px; }
.popup-fila .pf-topo .sub { margin: 4px 0 0; }
.popup-fila .pf-lista { overflow-y: auto; padding: 8px 12px; }
.popup-fila .pf-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-bottom: 1px solid var(--line-soft);
}
.popup-fila .pf-item:last-child { border-bottom: 0; }
.popup-fila .pf-item .quem { min-width: 0; flex: 1; }
.popup-fila .pf-item .n { font-weight: 600; }
.popup-fila .pf-item .p { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup-fila .pf-rodape { padding: 12px 20px 18px; display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 640px) {
  .toasts { right: 10px; left: 10px; bottom: 10px; max-width: none; }
}

/* ===========================================================================
   EDITOR VISUAL DE FLUXO (arrastar cartões + conectar com setas)
   =========================================================================== */

.fv-barra { display:flex; align-items:center; gap:10px; margin:6px 0 10px; flex-wrap:wrap; }
.fv-barra .sub { margin:0; }

/* Palco: a área grande onde os cartões vivem. overflow escondido; o "mundo"
   por dentro é que se move (pan). */
.fv-palco {
  position: relative; width: 100%; height: 560px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--text-3) 22%, transparent) 1px, transparent 1px)
    0 0 / 22px 22px,
    var(--bg);
  overflow: hidden; touch-action: none; user-select: none;
}
.fv-mundo { position: absolute; inset: 0; transform-origin: 0 0; }
.fv-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Cartão de etapa */
.fv-node {
  position: absolute; width: 230px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); cursor: grab;
}
.fv-node.arrastando { cursor: grabbing; box-shadow: var(--shadow-md); z-index: 5; }
.fv-node.sel { border-color: var(--marca); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 35%, transparent); }
.fv-node .fv-cab {
  display:flex; align-items:center; gap:8px;
  padding: 9px 11px; border-bottom: 1px solid var(--line-soft);
  border-radius: 12px 12px 0 0; font-weight: 700; font-size: 12.5px;
}
.fv-node .fv-cab .ico { width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;flex:none;font-size:12px; }
.fv-node .fv-cab .x { margin-left:auto; border:0; background:none; color:var(--text-3); cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }
.fv-node .fv-corpo { padding: 9px 11px; font-size: 12px; color: var(--text-2); min-height: 18px; white-space: pre-wrap; word-break: break-word; }
.fv-node .fv-inicio { display:inline-block; margin:0 11px 9px; font-size:10.5px; color:var(--ok); font-weight:700; }

/* Saídas (portas) do cartão */
.fv-saidas { padding: 2px 11px 10px; display:flex; flex-direction:column; gap:5px; }
.fv-saida { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-2); position:relative; }
.fv-saida .rot { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fv-porta {
  width: 13px; height: 13px; border-radius: 99px; flex:none;
  background: var(--surface); border: 2px solid var(--marca); cursor: crosshair;
  margin-left:auto;
}
.fv-porta:hover { background: var(--marca); }
.fv-porta.ligada { background: var(--marca); }
.fv-node.alvo { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 40%, transparent); }

/* entrada (ponto onde as setas chegam) */
.fv-entrada { position:absolute; left:-7px; top:16px; width:12px; height:12px; border-radius:99px; background:var(--surface); border:2px solid var(--text-3); }

/* Paleta de blocos (canto do palco) */
.fv-paleta {
  position:absolute; left:12px; top:12px; z-index:6;
  background: var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow: var(--shadow); padding:8px; display:flex; flex-direction:column; gap:5px;
  max-height: calc(100% - 24px); overflow:auto;
}
.fv-paleta .tit { font-size:10.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; margin:2px 2px 4px; }
.fv-paleta button {
  display:flex; align-items:center; gap:8px; text-align:left;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  border-radius:8px; padding:6px 9px; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap;
}
.fv-paleta button:hover { background: var(--surface-2); }
.fv-paleta button .ico { width:18px;height:18px;border-radius:5px;display:grid;place-items:center;color:#fff;flex:none;font-size:11px; }

/* Painel de edição do cartão selecionado (lado direito do palco) */
.fv-editor {
  position:absolute; right:12px; top:12px; bottom:12px; width:300px; z-index:7;
  background: var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow: var(--shadow-md); padding:14px; overflow:auto;
}
.fv-editor h3 { margin:0 0 4px; font-size:14px; }
.fv-editor .fv-fechar { position:absolute; right:10px; top:10px; border:0;background:none;color:var(--text-3);cursor:pointer;font-size:17px;line-height:1; }
.fv-editor label { margin-top:12px; }
.fv-editor .op-linha { display:flex; gap:6px; margin-bottom:6px; align-items:center; }
.fv-editor .op-linha input { flex:1; }

@media (max-width: 760px) {
  .fv-palco { height: 460px; }
  .fv-editor { width: auto; left:12px; }
  .fv-paleta { flex-direction:row; flex-wrap:wrap; max-width: calc(100% - 24px); }
  .fv-paleta .tit { width:100%; }
}

/* ===========================================================================
   BLOCO DE AUDITORIA (dentro dos Relatórios, mas visualmente destacado)
   =========================================================================== */
.separador-secao { display:flex; align-items:center; gap:12px; margin: 24px 0 12px; }
.separador-secao .linha-sep { flex:1; height:1px; background: var(--line); }
.selo-auditoria {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--warn); background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  padding: 4px 12px; border-radius: 99px;
}
.card-auditoria {
  border-left: 3px solid var(--warn);
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--warn) 4%, transparent), color-mix(in srgb, var(--warn) 4%, transparent)),
    var(--surface);
}
.card-auditoria > h2, .card-auditoria .entre h2 { display:flex; align-items:center; gap:8px; }

/* Avatar de iniciais (o WhatsApp oficial não fornece a foto do cliente) */
.avatar-ini {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.item-conversa .avatar-ini { width: 34px; height: 34px; font-size: 13px; }

/* ===========================================================================
   CHAT DA EQUIPE (sala geral + conversas privadas)
   =========================================================================== */
.chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; }
.chat-canais {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 8px; max-height: 68vh; overflow-y: auto; box-shadow: var(--shadow);
}
.canal-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: 9px; cursor: pointer; border: 1px solid transparent;
}
.canal-item:hover { background: var(--surface-2); }
.canal-item.on { background: var(--marca-bg); border-color: color-mix(in srgb, var(--marca) 30%, transparent); }
.canal-item .quem { min-width: 0; flex: 1; }
.canal-item .nome { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.canal-item .previa { color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canal-item .pnt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-3); }
.canal-item .pnt.online { background: var(--ok); }
.canal-item .pnt.ausente { background: var(--warn); }
.selo-chat {
  background: var(--err); color: #fff; font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 99px; padding: 0 5px;
  display: inline-grid; place-items: center; margin-left: auto;
}
/* selo no menu lateral */
#selosChat:not(:empty) {
  background: var(--err); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 99px; padding: 1px 6px; margin-left: 4px;
}

.chat-thread { display: flex; flex-direction: column; height: 68vh; padding: 0; overflow: hidden; }
.chat-cab { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; }
.chat-cab .sub { font-weight: 400; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 76%; align-self: flex-start; background: var(--surface-2); border-radius: 12px; padding: 8px 12px; }
.chat-msg.minha { align-self: flex-end; background: var(--marca-bg); }
.chat-msg .autor { font-size: 11px; font-weight: 700; color: var(--marca); margin-bottom: 2px; }
.chat-msg .txt { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.chat-msg .hora { font-size: 10.5px; color: var(--text-3); margin-top: 3px; text-align: right; }
.chat-barra { display: flex; gap: 9px; padding: 12px 16px; border-top: 1px solid var(--line); }
.chat-barra input { flex: 1; }

@media (max-width: 760px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-canais { max-height: 200px; flex-direction: row; flex-wrap: wrap; }
  .chat-thread { height: 60vh; }
}

/* Títulos de seção na lista de canais do chat (Grupos / Pessoas) */
.chat-sec {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); margin: 10px 4px 4px; font-weight: 700;
}
.chat-sec .btn.pequeno { padding: 2px 8px; font-size: 11px; text-transform: none; letter-spacing: 0; }