/* tela/estilo.css -- conteudo CLARO com a trilha ESCURA, no padrao do portal
   ERP da EM Vidros (decisao do Junior em 27/08, vendo a tela no ar pela 1a
   vez: "ficou muito escuro" + "o padrao de cores do nosso portal ERP poderia
   servir de exemplo"). O ERP e claro no conteudo, com a trilha da esquerda em
   azul-marinho e o item ativo em ciano da marca -- a MESMA estrutura que esta
   tela ja tinha. A D10 continua valendo: muda a paleta, nao o layout, e as
   bolhas seguem o WhatsApp CLARO (#D9FDD3 saida, branca entrada), porque e o
   que faz a mesa parecer conversa e nao planilha.

   🔑 POR QUE EXISTEM VARIANTES "-txt" DOS ACENTOS. Medido em 27/08, formula
   WCAG: --marca (#00A884) da 2,70:1 sobre --topo e --check (#53BDEB) da
   1,90:1 -- os dois REPROVAM como texto sobre fundo claro, embora passassem
   no tema escuro. Cor de PREENCHIMENTO nao vira cor de LETRA so por clarear a
   tela. Por isso --marca-txt (#017561) e --check-txt (#0F6C9E) existem, e as
   originais ficam so onde sao grafico (barra, tick, badge, fundo de botao),
   onde o minimo e 3:1 e nao 4,5:1.

   🔑 O secundario NAO e o #667781 do proprio WhatsApp claro: medido, ele da
   3,88:1 sobre --chat e 4,14:1 sobre --topo, e reprova AA nos dois. --txt2 e
   #54656F, que mede 5,06:1 no pior fundo da tela.

   A matriz inteira (todo texto x todo fundo em que ele pode sentar) e
   verificada em testes/teste_tela.py -- por propriedade, nao por hex fixo.
*/
:root{
  /* --- trilha escura, padrao ERP/marca EM Vidros --- */
  --rail:#F0F2F5; --rail-hover:#E9EDEF; --rail-sel:#D9FDD3;
  --rail-txt:#54656F; --rail-ativo:#017561; --rail-linha:#D8DEE3;

  /* --- conteudo claro --- */
  --bg:#F0F2F5; --lista:#FFFFFF; --chat:#EFEAE2; --topo:#F0F2F5;
  --entrada:#F0F2F5; --hover:#F5F6F6; --sel:#F0F2F5;
  --linha:#E9EDEF; --borda:#6E7F88;
  --txt:#111B21; --txt2:#54656F; --txt3:#667781;

  /* --- bolhas, padrao WhatsApp claro --- */
  --bolha-in:#FFFFFF; --bolha-out:#D9FDD3; --bolha-nota:#FFF3C4; --nota-txt:#5C4813;

  /* --- acentos: preenchimento x texto (ver nota acima) --- */
  --marca:#00A884; --marca-txt:#017561;
  --check:#1D7FB8; --check-txt:#0F6C9E;
  --badge:#017561; --badge-txt:#FFFFFF; --alerta:#C62828;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:Inter,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:14.5px;-webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
button,input,select,a{touch-action:manipulation}
:focus-visible{outline:2px solid var(--marca-txt);outline-offset:1px}

/* 🔴 O hidden tem de VALER. `hidden` so vale display:none pela folha do
   NAVEGADOR, e qualquer regra da folha do autor ganha dela -- inclusive um
   seletor de classe. Como #telaLogin tem .login{display:grid} e #app tem
   a grade do app e o chat, o hidden virava enfeite nos dois: em 27/08 o Junior
   autenticou tres vezes, com 200 no servidor, e a tela de login nunca saiu
   da frente. Sem erro e sem log -- ele so continuava vendo o formulario.
   O !important e obrigatorio aqui: a regra precisa vencer as de classe e de
   id que ja existem, nao apenas empatar com elas. */
[hidden]{display:none !important}

/* Movimento -- regra da casa: nunca so tirar a transicao, o JS tambem tem
   que parar de mexer (ver app.js, textoReconectando). Aqui e o interruptor
   geral: zera qualquer transicao/animacao para quem pediu menos movimento,
   sem precisar reescrever cada regra uma a uma. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------------- moldura ---------------- */
/* 🔴 grid-template-rows:minmax(0,1fr) NAO e enfeite. Sem ela, a linha da grade
   e dimensionada pelo CONTEUDO: com conversa longa, o chat cresce (medido:
   2572px numa janela de 900px) e a caixa de resposta vai parar 1600px abaixo
   da borda de baixo -- montada, funcionando e invisivel. `min-height:0` nos
   dois itens completa a corrente: item de grade tem `min-height:auto` por
   padrao e se recusa a encolher abaixo do proprio conteudo, e ai o
   `overflow-y:auto` de dentro nunca chega a valer. */
.app{display:grid;grid-template-columns:64px 480px 1fr;grid-template-rows:minmax(0,1fr);height:100%}
@media (max-width:880px){
  .app{grid-template-columns:52px 1fr}
  .chat{display:none}
  .app.aberto{grid-template-columns:52px 1fr}
  .app.aberto .lista{display:none}
  .app.aberto .chat{display:flex}
}
.voltar{display:none}
@media (max-width:880px){
  .voltar{display:inline-grid}
}

/* ---------------- trilha ---------------- */
.trilha{
  background:var(--rail);border-right:1px solid var(--rail-linha);
  display:flex;flex-direction:column;align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom));
  padding-left:env(safe-area-inset-left);
  gap:4px;
}
.tb{
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  color:var(--rail-txt);position:relative;transition:background .12s;
}
.tb:hover{background:var(--rail-hover)}
.tb.on{background:var(--rail-sel);color:var(--rail-ativo)}
.tb.futuro{opacity:.42}
.tb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb .bd{
  position:absolute;top:5px;right:5px;background:var(--badge);color:var(--badge-txt);
  font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;
  display:grid;place-items:center;padding:0 4px;
}
.tb .soon{
  position:absolute;bottom:3px;right:3px;width:7px;height:7px;border-radius:50%;
  background:var(--rail-txt);border:1.5px solid var(--rail);
}
.trilha .sep{flex:1}
.dica{
  position:fixed;left:64px;background:var(--topo);color:var(--txt);font-size:12px;
  padding:6px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s;z-index:50;box-shadow:0 4px 14px rgba(11,27,42,.18);
  max-width:min(60vw,320px);white-space:normal;
}
.dica.v{opacity:1}
.dica i{display:block;font-style:normal;color:var(--txt2);font-size:11px;margin-top:2px}

/* ---------------- lista ---------------- */
.lista{background:var(--lista);border-right:1px solid var(--linha);display:flex;flex-direction:column;min-width:0;min-height:0}
.lista .hd{
  padding:calc(14px + env(safe-area-inset-top)) 16px 8px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.lista .hd h1{font-size:19px;font-weight:600;margin:0;flex:1}
.eu{
  display:flex;align-items:center;gap:7px;background:var(--topo);border-radius:100px;
  padding:3px 4px 3px 10px;font-size:12px;color:var(--txt2);max-width:100%;
}
.eu .nome{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eu .sair{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--txt2);
}
.eu .sair:hover{background:rgba(11,27,42,.06);color:var(--txt)}
.eu .sair svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.conexao{font-size:11px;color:var(--txt2);white-space:nowrap;flex:none}
.conexao.ruim{color:var(--alerta)}
.conexao.boa{color:var(--marca-txt)}
.busca{padding:0 12px 8px}
.busca .cx{
  background:var(--topo);border-radius:8px;display:flex;align-items:center;gap:9px;
  padding:8px 12px;color:var(--txt3);
}
.busca svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.busca input{
  background:none;border:none;color:var(--txt);font-family:inherit;font-size:13.5px;
  width:100%;padding:0;
}
.busca input::placeholder{color:var(--txt2)}
/* UMA linha so (pedido dele em 27/08). nowrap + overflow-x garante isso sem
   apostar na largura: se um dia entrar um filtro a mais, eles rolam na
   horizontal em vez de quebrar linha e empurrar a lista para baixo. */
.filtros{display:flex;gap:7px;padding:0 12px 10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.fc{
  font-size:12.5px;padding:4px 12px;border-radius:100px;background:var(--topo);
  color:var(--txt2);white-space:nowrap;
}
.fc[aria-pressed="true"]{background:rgba(1,117,97,.12);color:var(--marca-txt);font-weight:500}
.rolar{flex:1;overflow-y:auto;overflow-x:hidden}
.rolar::-webkit-scrollbar{width:6px}
.rolar::-webkit-scrollbar-thumb{background:#C4CCD1;border-radius:3px}

.cv{
  display:grid;grid-template-columns:49px 1fr;gap:13px;padding:10px 16px 10px 13px;
  cursor:pointer;position:relative;width:100%;text-align:left;
}
.cv:hover{background:var(--hover)}
.cv.on{background:var(--sel)}
.cv::after{content:"";position:absolute;left:75px;right:0;bottom:0;height:1px;background:var(--linha)}
.cv:last-child::after{display:none}
.av{
  width:49px;height:49px;border-radius:50%;display:grid;place-items:center;
  background:#D8E0E5;color:#41525D;font-weight:600;font-size:15px;flex:none;
}
.cv .cl{min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.cv .l1{display:flex;align-items:baseline;gap:8px}
.cv .nm{font-size:15.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv .hr{font-size:11.5px;color:var(--txt2);flex:none}
.cv.temnovo .hr{color:var(--marca-txt)}
.cv .l2{display:flex;align-items:center;gap:7px}
.cv .pv{
  font-size:13.5px;color:var(--txt2);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px;
}
.cv .bd{background:var(--badge);color:var(--badge-txt);font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px;flex:none}
.fl{
  font-size:10.5px;padding:1px 7px;border-radius:3px;background:#E7EDF0;color:#41525D;
  white-space:nowrap;flex:none;letter-spacing:.02em;
}
.fl.sd{background:rgba(198,40,40,.10);color:var(--alerta)}
.tick{flex:none;width:15px;height:15px;stroke:var(--check);fill:none;stroke-width:2}
.tick.pendente{stroke:var(--txt2)}

/* ---------------- chat ---------------- */
.chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--chat);position:relative}
.chat .tp{
  background:var(--topo);padding:9px 16px;display:flex;align-items:center;gap:13px;
  border-bottom:1px solid var(--linha);z-index:2;
}
.chat .tp .av{width:40px;height:40px;font-size:13.5px}
.chat .tp .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chat .tp .who b{font-size:15.5px;font-weight:500}
.chat .tp .who span{font-size:12.5px;color:var(--txt2);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--txt2)}
.ic:hover{background:rgba(11,27,42,.06)}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.corpo{
  flex:1;overflow-y:auto;padding:18px 6% 12px;display:flex;flex-direction:column;gap:3px;
  background-image:radial-gradient(rgba(11,27,42,.035) 1px,transparent 1px);
  background-size:22px 22px;
}
.corpo::-webkit-scrollbar{width:7px}
.corpo::-webkit-scrollbar-thumb{background:#C4CCD1;border-radius:4px}
.dia{align-self:center;background:var(--topo);color:var(--txt2);font-size:11.5px;padding:5px 12px;border-radius:7px;margin:10px 0 6px}
.bl{
  max-width:min(66%,560px);padding:6px 9px 7px;border-radius:8px;font-size:14.2px;
  line-height:1.42;position:relative;overflow-wrap:anywhere;word-break:break-word;
}
.bl .mt{float:right;margin:6px 0 -4px 10px;font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:3px;white-space:nowrap}
.bl.in{align-self:flex-start;background:var(--bolha-in);border-top-left-radius:2px}
.bl.out{align-self:flex-end;background:var(--bolha-out);border-top-right-radius:2px}
.bl.nota{
  align-self:center;max-width:min(78%,620px);background:var(--bolha-nota);
  color:var(--nota-txt);font-size:13px;border-radius:7px;border-left:3px solid #B7791F;
}
.bl.nota .qq{font-size:11px;opacity:.72;display:block;margin-bottom:2px;letter-spacing:.03em}
.bl.sis{align-self:center;background:rgba(11,27,42,.06);color:var(--txt2);font-size:12.5px;border-radius:7px;max-width:80%;text-align:center}
.bl .aut{font-size:12.5px;color:var(--check-txt);font-weight:500;display:block;margin-bottom:1px}
.bl .anx{
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.22);
  padding:8px 10px;border-radius:6px;margin-bottom:5px;font-size:12.5px;
}
.bl .anx svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none;opacity:.8}
.tmpl{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.62;display:block;margin-bottom:3px}

.entrada{
  background:var(--entrada);padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;
}
.entrada .trava{
  font-size:11.5px;color:var(--txt2);border:1px dashed var(--borda);padding:9px 13px;border-radius:9px;flex:1;
}
.entrada .trava b{color:var(--txt)}

.nada{flex:1;display:grid;place-items:center;color:var(--txt2);text-align:center;padding:40px}
.nada div{max-width:340px;display:flex;flex-direction:column;gap:9px}
.nada b{color:var(--txt);font-size:16px;font-weight:500}
.nada p{margin:0;font-size:13.5px;line-height:1.55;color:var(--txt2)}
.vazio{padding:34px 20px;color:var(--txt2);font-size:13.5px;text-align:center;line-height:1.6}
.vazio span{font-size:12.5px;display:block;margin-top:4px}

/* ---------------- painel lateral (relatorios / aderencia) ---------------- */
.pn{position:absolute;inset:0;background:var(--chat);z-index:5;display:none;flex-direction:column}
.pn.v{display:flex}
.pn .tp{background:var(--topo);padding:14px 20px;font-size:16px;font-weight:500;border-bottom:1px solid var(--linha);display:flex;align-items:center;gap:12px}
.pn .ct{flex:1;overflow-y:auto;padding:18px 20px 40px;display:flex;flex-direction:column;gap:22px;max-width:760px}
.pn h3{margin:0 0 10px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt2);font-weight:600}
.kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px}
.kp > div{background:var(--topo);border-radius:9px;padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.kp .v{font-size:23px;font-weight:600;line-height:1}
.kp .k{font-size:11.5px;color:var(--txt2);line-height:1.35}
.fr{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--topo);border-radius:9px;margin-bottom:7px}
.fr .bar{width:3px;align-self:stretch;border-radius:2px;background:var(--marca);flex:none}
.fr.mudo .bar{background:var(--alerta)}
.fr .n{flex:1;display:flex;flex-direction:column;gap:1px}
.fr .n b{font-size:14px;font-weight:500}
.fr .n span{font-size:11.5px;color:var(--txt2)}
.fr .q{font-size:15px;font-weight:600;flex:none}
.fr.mudo .q{color:var(--alerta);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.pn p.ex{margin:0;font-size:13px;color:var(--txt2);line-height:1.6;max-width:62ch}

/* ---------------- login ---------------- */
.login{
  min-height:100%;display:grid;place-items:center;background:var(--bg);
  padding:calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
          calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.login-card{
  width:100%;max-width:340px;background:var(--lista);border:1px solid var(--linha);
  box-shadow:0 2px 12px rgba(11,27,42,.08);
  border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;gap:16px;
}
.login-card h1{margin:0;font-size:19px;font-weight:600;color:var(--txt)}
.login-sub{margin:0;font-size:12.5px;color:var(--txt2);line-height:1.5}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:12.5px;color:var(--txt2)}
.campo input{
  background:var(--lista);border:1px solid var(--borda);border-radius:8px;
  padding:10px 12px;color:var(--txt);font-family:inherit;font-size:14px;
}
.campo input::placeholder{color:var(--txt2)}
.campo input:focus-visible{outline:2px solid var(--marca-txt);outline-offset:1px;border-color:var(--marca-txt)}
.erro{
  margin:0;font-size:12.5px;color:var(--alerta);background:rgba(198,40,40,.08);
  border-left:3px solid var(--alerta);padding:8px 10px;border-radius:6px;line-height:1.5;
}
.btn-entrar{
  background:var(--marca);color:var(--badge-txt);font-weight:600;font-size:14.5px;
  padding:11px 14px;border-radius:9px;text-align:center;
}
.btn-entrar:hover{background:#02c294}
.btn-entrar:disabled{opacity:.65;cursor:default}

@media (max-width:400px){
  .login-card{padding:22px 18px}
}

/* ---------------- administracao ---------------- */
/* Reaproveita .fr (linha de filial) do painel de Relatorios de proposito: e a
   mesma leitura -- um nome, um estado, um numero. Componente novo aqui seria
   poluicao, que foi exatamente o que ele pediu para evitar. */
.pb{
  border-left:3px solid var(--borda);background:rgba(11,27,42,.04);
  border-radius:0 8px 8px 0;padding:10px 12px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:3px;
}
.pb.alto{border-left-color:var(--alerta);background:rgba(198,40,40,.06)}
.pb.medio{border-left-color:#B7791F;background:rgba(183,121,31,.06)}
.pb b{font-size:13.5px;color:var(--txt)}
.pb span{font-size:12.5px;color:var(--txt2);line-height:1.5}
.pb .fz{font-size:12px;color:var(--txt2);font-style:italic}
.ag{
  display:inline-block;font-size:11.5px;background:#E7EDF0;color:#41525D;
  padding:1px 7px;border-radius:3px;margin:2px 4px 0 0;
}
.ag.trava{background:rgba(198,40,40,.10);color:var(--alerta)}

/* ---------------- caixa de resposta ---------------- */
/* A trava da fase 1 saiu daqui. O que impede mandar para a filial errada NAO
   e esta caixa -- e a rota, que resolve a conversa no servidor. */
.resp{display:flex;align-items:flex-end;gap:8px;width:100%}
.resp textarea{
  flex:1;resize:none;border:1px solid var(--linha);border-radius:9px;
  background:var(--lista);color:var(--txt);font-family:inherit;font-size:14.5px;
  padding:10px 12px;line-height:1.45;max-height:140px;overflow-y:auto;
}
.resp textarea::placeholder{color:var(--txt2)}
.resp textarea:focus-visible{outline:2px solid var(--marca-txt);outline-offset:1px;border-color:var(--marca-txt)}
.env{
  flex:none;width:42px;height:42px;border-radius:50%;background:var(--marca);
  color:var(--badge-txt);display:grid;place-items:center;
}
.env svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.env:disabled{opacity:.55;cursor:default}
.respErro{
  margin:6px 0 0;font-size:12.5px;color:var(--alerta);
  background:rgba(198,40,40,.08);border-left:3px solid var(--alerta);
  padding:7px 10px;border-radius:6px;line-height:1.45;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------- opcoes do WhatsApp (input_select) ---------------- */
/* O que o cliente VIU. Ate 3 itens a Meta mostra botao; de 4 em diante, lista. */
.ops{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(11,27,42,.10)}
.ops i{
  display:block;font-style:normal;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--txt2);margin-bottom:4px;
}
.ops b{
  display:inline-block;font-size:12px;font-weight:500;background:rgba(11,27,42,.05);
  border:1px solid rgba(11,27,42,.12);color:var(--txt2);
  padding:2px 9px;border-radius:100px;margin:0 4px 4px 0;
}
.esc{
  display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--marca-txt);margin-top:3px;
}

/* ---------------- anexos ---------------- */
.anx{display:block;margin:4px 0 2px}
.au{display:block;width:min(260px,100%);height:38px;margin:2px 0}
.im{display:inline-block;line-height:0;border-radius:8px;overflow:hidden;max-width:240px}
.im img{display:block;width:100%;height:auto;max-height:240px;object-fit:cover}
.ax{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--marca-txt);background:rgba(1,117,97,.08);
  border:1px solid rgba(1,117,97,.18);padding:5px 10px;border-radius:8px;
  text-decoration:none;margin:2px 4px 2px 0;
}
.ax:hover{background:rgba(1,117,97,.14)}
.ax svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------------- barra da caixa: nota e respostas rapidas ---------------- */
.entrada{flex-direction:column;align-items:stretch;gap:6px}
.barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tg{
  font-size:12px;padding:4px 10px;border-radius:100px;background:var(--lista);
  border:1px solid var(--linha);color:var(--txt2);
}
.tg:hover{border-color:var(--borda)}
.tg.on{background:rgba(183,121,31,.14);border-color:#B7791F;color:#8D6708;font-weight:500}
.avisoNota{font-size:11.5px;color:#8D6708;font-weight:500}
/* A caixa MUDA DE COR quando e nota. Sem sinal forte a pessoa digita achando
   que fala com o cliente -- ou acha que anotou e mandou pro cliente. */
.resp textarea.nota{background:var(--bolha-nota);border-color:#B7791F}
.rapidas{
  max-height:210px;overflow-y:auto;background:var(--lista);border:1px solid var(--linha);
  border-radius:9px;padding:5px;display:flex;flex-direction:column;gap:2px;
}
.rp{
  text-align:left;padding:7px 9px;border-radius:7px;display:flex;flex-direction:column;gap:2px;
}
.rp:hover{background:var(--hover)}
.rp b{font-size:12.5px;color:var(--marca-txt)}
.rp span{font-size:12px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- anexo e gravacao ---------------- */
.tg.indisp{opacity:.5;cursor:not-allowed}
.tg.gravando{background:rgba(198,40,40,.14);border-color:var(--alerta);color:var(--alerta);font-weight:500}
.statusEnvio{font-size:11.5px;color:var(--marca-txt);font-weight:500}

/* ---------------- menu de etiquetas ---------------- */
.fc.et{border:1px dashed var(--borda);background:transparent}
.fc.et.on{background:rgba(1,117,97,.12);color:var(--marca-txt);border-style:solid;font-weight:500}
.etp{
  margin:0 12px 8px;max-height:270px;overflow-y:auto;background:var(--lista);
  border:1px solid var(--linha);border-radius:9px;padding:6px;
}
.etg{
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt2);
  font-weight:600;padding:7px 8px 3px;
}
.etl{
  width:100%;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;
  font-size:12.5px;color:var(--txt);text-align:left;
}
.etl:hover{background:var(--hover)}
.etl.on{background:rgba(1,117,97,.12);font-weight:500}
/* Cadastrada e nunca usada aparece esmaecida em vez de sumir: saber que
   existe e ninguem usa e informacao. */
.etl.zero{opacity:.5}
.etl.limpar{color:var(--alerta);font-size:12px}
.etl .pt{width:9px;height:9px;border-radius:50%;flex:none}
.etl b{font-weight:400;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etl .qt{font-size:11.5px;color:var(--txt2);flex:none}

/* ---------------- ficha do contato ---------------- */
/* A ficha fica AO LADO da conversa. `min-height:0`/`min-width:0` na linha e na
   coluna da conversa NAO sao enfeite -- e a mesma corrente que, quebrada, ja
   jogou a caixa de resposta 1600px para fora da tela em 27/08. Aninhar mais um
   nivel e exatamente onde aquele defeito volta. */
.linha{display:flex;flex:1;min-height:0;min-width:0}
.conv{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.ficha{
  width:320px;flex:none;background:var(--topo);border-left:1px solid var(--linha);
  padding:12px 16px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;
}
@media (max-width:1100px){
  /* Em tela estreita a ficha vira sobreposicao: 320px fixos comeriam a
     conversa inteira e a pessoa perderia de vista o que esta respondendo. */
  .ficha{position:absolute;right:0;top:0;bottom:0;z-index:6;box-shadow:-6px 0 18px rgba(11,27,42,.12)}
}
.fic-l{display:flex;flex-direction:column;gap:3px}
.fic-l label,.fic-t{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt2);font-weight:600}
.fic-l input,.fic-l textarea{
  background:var(--lista);border:1px solid var(--borda);border-radius:7px;padding:7px 9px;
  color:var(--txt);font-family:inherit;font-size:13.5px;resize:vertical;
}
.fic-l input:focus-visible,.fic-l textarea:focus-visible{outline:2px solid var(--marca-txt);outline-offset:1px}
.fic-v{font-size:13px;color:var(--txt2)}
.fic-et{display:flex;flex-wrap:wrap;gap:5px}
.etq{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 9px;
  border-radius:100px;border:1px solid var(--linha);background:var(--lista);color:var(--txt2);
}
.etq .pt{width:8px;height:8px;border-radius:50%;flex:none}
.etq.on{background:rgba(1,117,97,.12);border-color:var(--marca-txt);color:var(--marca-txt);font-weight:500}
.etq.trava{opacity:.75;cursor:not-allowed;border-style:dashed}
.fic-b{display:flex;align-items:center;gap:10px}
.btn-ok{background:var(--marca);color:var(--badge-txt);font-weight:600;font-size:13px;padding:7px 16px;border-radius:8px}
.fic-s{font-size:12px;color:var(--txt2)}

/* --- etiquetas da ficha: so as da conversa, mais um "+" que abre a busca --- */
.etq .x{
  margin-left:2px;font-size:14px;line-height:1;color:inherit;opacity:.65;
  padding:0 2px;border-radius:3px;
}
.etq .x:hover{opacity:1;background:rgba(198,40,40,.15);color:var(--alerta)}
.etq.mais{border-style:dashed;color:var(--marca-txt);border-color:var(--marca-txt)}
.fic-add{position:relative}
.fic-busca{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:8;background:var(--lista);
  border:1px solid var(--linha);border-radius:9px;padding:6px;
  box-shadow:0 6px 18px rgba(11,27,42,.14);
}
.fic-busca input{
  width:100%;background:var(--topo);border:1px solid var(--borda);border-radius:7px;
  padding:6px 9px;font-family:inherit;font-size:13px;color:var(--txt);
}
.fic-busca input:focus-visible{outline:2px solid var(--marca-txt);outline-offset:1px}
.fic-op{max-height:190px;overflow-y:auto;margin-top:5px;display:flex;flex-direction:column;gap:1px}
.fic-o{
  display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:6px;
  font-size:12.5px;color:var(--txt);text-align:left;
}
.fic-o:hover{background:var(--hover)}
.fic-o i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em}
.fic-av{font-size:11px;color:#8D6708;line-height:1.4}

/* ---------------- modelo (template) ---------------- */
.modelo{
  max-height:260px;overflow-y:auto;background:var(--lista);border:1px solid var(--linha);
  border-radius:9px;padding:7px;display:flex;flex-direction:column;gap:4px;
}
.md{text-align:left;padding:8px 9px;border-radius:7px;display:flex;flex-direction:column;gap:2px}
.md:hover{background:var(--hover)}
.md b{font-size:13px;color:var(--marca-txt)}
.md span{font-size:12px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md .md-c{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.md-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 6px}
.md-h b{font-size:13.5px;color:var(--txt)}
.md-v{font-size:12px;color:var(--marca-txt)}
.md-p{display:flex;flex-direction:column;gap:3px;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt2);font-weight:600;padding:0 2px 4px}
.md-p input{
  background:var(--topo);border:1px solid var(--borda);border-radius:7px;padding:7px 9px;
  font-family:inherit;font-size:13.5px;color:var(--txt);text-transform:none;letter-spacing:0;font-weight:400;
}
.md-p input:focus-visible{outline:2px solid var(--marca-txt);outline-offset:1px}
/* A previa e o ponto: a pessoa ve o texto FINAL antes de mandar. Modelo errado
   fora da janela custa dinheiro e chega no cliente. */
.md-prev{
  background:var(--bolha-out);border-radius:8px;padding:9px 11px;font-size:13.5px;
  color:var(--txt);white-space:pre-wrap;line-height:1.45;margin:2px;
}
.md-b{display:flex;align-items:center;gap:10px;padding:4px 2px 2px}

/* ---------------- agenda e times no painel ---------------- */
.ag-b{margin-bottom:10px}
.ag-b input{
  width:100%;background:var(--lista);border:1px solid var(--borda);border-radius:8px;
  padding:8px 11px;font-family:inherit;font-size:13.5px;color:var(--txt);
}
.ag-b input:focus-visible{outline:2px solid var(--marca-txt);outline-offset:1px}
.ag-p{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:12.5px;color:var(--txt2)}
.ag-p button{font-size:12.5px;color:var(--marca-txt);padding:4px 8px;border-radius:6px}
.ag-p button:disabled{opacity:.4;cursor:default;color:var(--txt2)}
.tm{background:var(--topo);border-radius:9px;padding:11px 13px;margin-bottom:9px;
  display:flex;flex-direction:column;gap:8px}
.tm > b{font-size:13.5px;color:var(--txt)}
.tm-a{display:flex;flex-wrap:wrap;gap:5px}
.tm-b{display:flex;align-items:center;gap:10px}

/* ---------------- abas dos relatorios ---------------- */
.rel-t{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.rel-s{cursor:pointer}
/* Secao sem dado fica DISPONIVEL e marcada, nao escondida: quem procura CSAT
   descobre que existe e por que esta vazia, em vez de achar que nao ha. */
.rel-s.futuro{opacity:.55;border:1px dashed var(--borda);background:transparent}

/* ---------------- canal interno da equipe ---------------- */
.mu-n{display:flex;gap:9px;align-items:flex-end;margin-bottom:8px}
.mu-n textarea{
  flex:1;resize:vertical;background:var(--lista);border:1px solid var(--borda);
  border-radius:8px;padding:8px 11px;font-family:inherit;font-size:13.5px;color:var(--txt);
}
.mu-n textarea:focus-visible{outline:2px solid var(--marca-txt);outline-offset:1px}
.mu{
  background:var(--topo);border-radius:9px;padding:9px 12px;margin-bottom:7px;
  display:flex;flex-direction:column;gap:3px;border-left:3px solid var(--linha);
}
/* O proprio recado marcado: mural sem isso vira parede de texto igual. */
.mu.meu{border-left-color:var(--marca-txt);background:rgba(1,117,97,.06)}
.mu-c{display:flex;align-items:baseline;gap:9px}
.mu-c b{font-size:12.5px;color:var(--txt)}
.mu-c span{font-size:11px;color:var(--txt2)}
.mu-t{font-size:13.5px;color:var(--txt);line-height:1.45;white-space:pre-wrap}

/* ---------------- chat interno: lista e conversa ---------------- */
.ic-l{
  width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;
  text-align:left;margin-bottom:2px;
}
.ic-l:hover{background:var(--hover)}
.ic-av{
  width:34px;height:34px;border-radius:50%;background:#D8E0E5;color:#41525D;
  display:grid;place-items:center;font-size:12.5px;font-weight:600;flex:none;
}
.ic-av.gr{background:rgba(1,117,97,.14);color:var(--marca-txt);font-size:16px}
.ic-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ic-n b{font-size:13.5px;color:var(--txt);font-weight:500}
.ic-n span{font-size:11.5px;color:var(--txt2)}
.ic-b{
  background:var(--badge);color:var(--badge-txt);font-size:11px;font-weight:700;
  min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px;flex:none;
}
.ic-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ic-h b{font-size:14.5px;color:var(--txt)}
.ic-m{max-height:46vh;overflow-y:auto;margin-bottom:10px}
.fic-d{display:flex;gap:6px;margin-top:6px}
.ax.lig{font-size:12px;padding:4px 10px}

/* ---------------- barra de acoes da conversa ---------------- */
.acoes{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;position:relative;
  padding:7px 16px;background:var(--topo);border-bottom:1px solid var(--linha);flex:none;
}
.ac{
  font-size:12.5px;padding:5px 11px;border-radius:100px;background:var(--lista);
  border:1px solid var(--linha);color:var(--txt2);
}
.ac:hover{border-color:var(--borda);color:var(--txt)}
.ac.ok{color:var(--marca-txt);border-color:rgba(1,117,97,.35)}
.ac-eu{font-size:12.5px;color:var(--marca-txt);font-weight:500;padding:5px 4px}
.ac-p{
  position:absolute;top:calc(100% + 4px);left:14px;z-index:9;background:var(--lista);
  border:1px solid var(--linha);border-radius:9px;padding:9px;min-width:280px;max-width:420px;
  max-height:320px;overflow-y:auto;box-shadow:0 6px 18px rgba(11,27,42,.14);
}
.ac-g{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.ac-g b{
  width:100%;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--txt2);font-weight:600;margin-bottom:2px;
}