/* Atendimento oficial — painel do canal oficial (Cloud API).
   Diferente da Central (verde, ferramenta interna de prospecção): aqui é o painel que acompanha
   um entregável vendido ao cliente, então tem casca escura, tipografia própria e cara de produto.
   O petróleo/teal é o que separa visualmente os dois sistemas num relance. */

:root {
  --ground: #F1F4F6;
  --shell: #10212A;          /* rail e topo: a "casca" escura do app */
  --shell-2: #17303B;
  --shell-texto: #C7D8DF;
  --superficie: #FFFFFF;
  --superficie-2: #EBF0F3;
  --linha: #DCE4E8;
  --linha-forte: #C6D2D8;
  --texto: #12212A;
  --texto-suave: #4C5F6B;
  --texto-fraco: #7A8B97;
  --acento: #0E7285;
  --acento-forte: #0A5A6A;
  --acento-claro: #DDEFF2;
  --bolha-minha: #D8EEF2;
  --ouro: #8F6410;
  --ouro-claro: #F6EEDA;
  --barro: #9C382A;
  --barro-claro: #F6E1DC;
  --sombra-cartao: 0 1px 2px rgba(18, 33, 42, .06), 0 8px 24px -18px rgba(18, 33, 42, .40);
  --sombra-bolha: 0 1px 1px rgba(18, 33, 42, .08);
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ui: "Manrope", "Segoe UI", system-ui, sans-serif;
  --raio: 12px;
  --raio-p: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0B1216;
    --shell: #081117;
    --shell-2: #122730;
    --shell-texto: #9FB6C0;
    --superficie: #121D24;
    --superficie-2: #1A2830;
    --linha: #24343D;
    --linha-forte: #31454F;
    --texto: #E3EBEF;
    --texto-suave: #9DAFBA;
    --texto-fraco: #748793;
    --acento: #5CC3D6;
    --acento-forte: #85D6E5;
    --acento-claro: #10303A;
    --bolha-minha: #13323D;
    --ouro: #D5AC5C;
    --ouro-claro: #2C2413;
    --barro: #DD8873;
    --barro-claro: #331B16;
    --sombra-cartao: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -20px rgba(0, 0, 0, .9);
    --sombra-bolha: 0 1px 1px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 14.5px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.rotulo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* grid-template-rows explícito: sem ele a linha implícita é `auto` e cresce com o conteúdo,
   estourando o 100vh e jogando rodapé do rail e compositor para fora da tela. */
.app { display: grid; grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100vh; }

/* ---------------- rail ---------------- */

.rail {
  background: var(--shell);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 10px;
}

.rail-marca {
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--acento), var(--acento-forte));
  color: #fff;
  display: grid;
  place-items: center;
}
.rail-marca svg { width: 21px; height: 21px; }

.rail-btn {
  position: relative;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--shell-texto);
  opacity: .72;
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.rail-btn:hover { background: var(--shell-2); opacity: 1; }
.rail-btn.ativa { background: var(--shell-2); opacity: 1; color: #fff; }
.rail-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.rail-badge {
  position: absolute;
  top: 6px;
  right: 14px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--acento);
  color: #04212A;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  display: grid;
  place-items: center;
}
.rail-badge.ouro { background: #D9AE55; color: #2B1F06; }

.rail-rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--shell-texto);
  opacity: .7;
  text-align: center;
}

.ponto { width: 8px; height: 8px; border-radius: 100px; background: var(--texto-fraco); }
.ponto.ok { background: #4BC08A; box-shadow: 0 0 0 3px rgba(75, 192, 138, .18); }
.ponto.atencao { background: #D9AE55; box-shadow: 0 0 0 3px rgba(217, 174, 85, .18); }
.ponto.ruim { background: #DE7361; box-shadow: 0 0 0 3px rgba(222, 115, 97, .18); }

/* ---------------- corpo e topo ---------------- */

.corpo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topo {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  flex-wrap: wrap;
}

.cliente-bloco { display: flex; flex-direction: column; gap: 5px; }
.cliente-linha { display: flex; align-items: center; gap: 10px; }

select {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  background: transparent;
  color: var(--texto);
  border: none;
  border-radius: var(--raio-p);
  padding: 2px 4px;
  cursor: pointer;
  max-width: 320px;
}
select:hover { background: var(--superficie-2); }
select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.selo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--superficie-2);
  color: var(--texto-suave);
  white-space: nowrap;
}
.selo.ok { background: var(--acento-claro); color: var(--acento); }
.selo.atencao { background: var(--ouro-claro); color: var(--ouro); }
.selo.ruim { background: var(--barro-claro); color: var(--barro); }

/* indicadores do topo */

.indicadores { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }

.indicador {
  background: var(--superficie-2);
  border-radius: var(--raio-p);
  padding: 8px 14px 9px;
  min-width: 86px;
}
.indicador b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.indicador span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-top: 3px;
}
.indicador.destaque { background: var(--acento-claro); }
.indicador.destaque b { color: var(--acento); }
.indicador.ouro { background: var(--ouro-claro); }
.indicador.ouro b { color: var(--ouro); }

.faixa {
  background: var(--ouro-claro);
  color: var(--ouro);
  padding: 11px 24px;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid var(--linha);
}

main { flex: 1; min-height: 0; }
.painel { height: 100%; min-height: 0; }
.rolavel { overflow-y: auto; padding: 22px 24px 40px; }

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

/* Mesma armadilha do .app: sem grid-template-rows a linha é `auto` e cresce até caber a thread
   inteira, então o compositor sai da tela em vez de a lista de mensagens rolar. */
.conversas-layout { display: grid; grid-template-columns: 316px minmax(0, 1fr) 312px; grid-template-rows: minmax(0, 1fr); background: var(--superficie); }
.conversas-layout.sem-ficha { grid-template-columns: 316px minmax(0, 1fr); }

.coluna-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--linha); }

.lista-topo { padding: 14px 14px 12px; border-bottom: 1px solid var(--linha); }

.busca { position: relative; }
.busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-fraco); }
.busca input {
  font: inherit;
  font-size: 13.5px;
  width: 100%;
  padding: 9px 12px 9px 36px;
  border-radius: 100px;
  background: var(--superficie-2);
  border: 1px solid transparent;
  color: var(--texto);
}
.busca input:focus-visible { outline: none; border-color: var(--acento); background: var(--superficie); }

.lista { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 3px; }

.item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--raio-p);
  cursor: pointer;
  transition: background .12s;
}
.item:hover { background: var(--superficie-2); }
.item.ativa { background: var(--acento-claro); }
.item.ativa::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--acento);
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 100px;
  background: linear-gradient(150deg, var(--acento), var(--acento-forte));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.item .linha1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.item .nome { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .quando { font-family: var(--mono); font-size: 10px; color: var(--texto-fraco); white-space: nowrap; }
.item .linha2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 1px; }
.item .previa { color: var(--texto-fraco); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.marca-mini {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  white-space: nowrap;
  background: var(--ouro-claro);
  color: var(--ouro);
}
.marca-mini.aberta { background: var(--acento-claro); color: var(--acento); }

.lista-vazia { padding: 28px 16px; color: var(--texto-fraco); font-size: 13px; text-align: center; line-height: 1.6; }

/* ---------------- thread ---------------- */

.thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ground); }

.thread-topo {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.thread-topo .avatar { width: 40px; height: 40px; font-size: 13px; }
.thread-quem { min-width: 0; }
.thread-quem strong { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-quem span { font-family: var(--mono); font-size: 11px; color: var(--texto-fraco); }

.janela {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
  background: var(--acento-claro);
  color: var(--acento);
}
.janela.fechada { background: var(--barro-claro); color: var(--barro); }

.mensagens { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 8%; display: flex; flex-direction: column; gap: 5px; }

.separador {
  align-self: center;
  background: var(--superficie);
  color: var(--texto-suave);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 100px;
  box-shadow: var(--sombra-bolha);
  margin: 12px 0 8px;
}

.bolha {
  position: relative;
  max-width: min(74%, 600px);
  padding: 9px 13px 7px;
  border-radius: 12px;
  box-shadow: var(--sombra-bolha);
  font-size: 14.2px;
  line-height: 1.48;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bolha.deles { background: var(--superficie); align-self: flex-start; border-top-left-radius: 3px; }
.bolha.minha { background: var(--bolha-minha); align-self: flex-end; border-top-right-radius: 3px; }
.bolha time { display: block; text-align: right; font-family: var(--mono); font-size: 9.5px; color: var(--texto-fraco); margin-top: 3px; }

.compositor {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 14px 20px;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
}
.compositor textarea {
  font: inherit;
  flex: 1;
  resize: none;
  max-height: 150px;
  padding: 11px 16px;
  border-radius: 22px;
  background: var(--superficie-2);
  border: 1px solid transparent;
  color: var(--texto);
  font-size: 14.2px;
  line-height: 1.45;
}
.compositor textarea:focus-visible { outline: none; border-color: var(--acento); background: var(--superficie); }
.compositor textarea:disabled { opacity: .6; cursor: not-allowed; }

.enviar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: none;
  border-radius: 100px;
  background: linear-gradient(150deg, var(--acento), var(--acento-forte));
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: filter .15s;
}
.enviar:hover { filter: brightness(1.1); }
.enviar:disabled { opacity: .45; cursor: not-allowed; }
.enviar:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

.vazio { margin: auto; text-align: center; max-width: 340px; color: var(--texto-fraco); }
.vazio-icone {
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  border-radius: 100px;
  background: var(--superficie);
  display: grid; place-items: center;
  box-shadow: var(--sombra-cartao);
  color: var(--acento);
}
.vazio-icone svg { width: 26px; height: 26px; }
.vazio p { font-size: 15.5px; font-weight: 700; color: var(--texto-suave); margin: 0 0 8px; letter-spacing: -.01em; }
.vazio small { font-size: 12.5px; line-height: 1.65; display: block; }

/* ---------------- ficha ---------------- */

.ficha { border-left: 1px solid var(--linha); background: var(--ground); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.ficha-cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px 18px;
  box-shadow: var(--sombra-cartao);
}
.ficha-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }

/* Progresso das 4 informações que o atendente precisa arrancar da conversa. */
.progresso { display: flex; gap: 5px; margin-bottom: 16px; }
.progresso i {
  flex: 1;
  height: 4px;
  border-radius: 100px;
  background: var(--superficie-2);
}
.progresso i.cheio { background: var(--acento); }

.campo { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.campo:last-child { border-bottom: none; padding-bottom: 0; }
.campo b { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); font-weight: 400; }
.campo span { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.campo span.vazio-campo { color: var(--texto-fraco); font-weight: 400; font-style: italic; }

.ficha-cartao.resumo p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }

/* ---------------- qualificados ---------------- */

.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px 20px 20px;
  box-shadow: var(--sombra-cartao);
  position: relative;
  overflow: hidden;
}
.cartao::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--acento), var(--acento-forte));
}
.cartao.repassado { opacity: .66; }
.cartao.repassado::before { background: var(--linha-forte); }

.cartao-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cartao-topo .avatar { width: 38px; height: 38px; font-size: 12.5px; }
.cartao-topo h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.cartao-topo .telefone { font-family: var(--mono); font-size: 11px; color: var(--texto-fraco); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--superficie-2);
  color: var(--texto-suave);
}
.chip.origem { background: var(--ouro-claro); color: var(--ouro); }

.grade-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* O atendente às vezes escreve um "procedimento" longo (é texto livre vindo da conversa). Sem
   limite, um cartão estica e desalinha a grade inteira. O valor completo fica no title. */
.grade-campos .campo span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grade-campos .campo:nth-last-child(2) { border-bottom: none; }

.cartao .resumo-texto { margin: 14px 0 0; font-size: 12.8px; line-height: 1.6; color: var(--texto-suave); }
.cartao .acoes { margin-top: 16px; display: flex; gap: 8px; align-items: center; }

.btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background .12s;
}
.btn:hover { background: var(--linha); }
.btn.primario { background: var(--acento); color: #fff; }
.btn.primario:hover { filter: brightness(1.08); background: var(--acento); }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------------- aviso ---------------- */

.aviso {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 420px;
  background: var(--shell);
  color: #EAF2F5;
  padding: 13px 18px;
  border-radius: var(--raio-p);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .55);
  z-index: 10;
}
.aviso.ruim { background: var(--barro); color: #fff; }

@media (max-width: 1180px) {
  .conversas-layout, .conversas-layout.sem-ficha { grid-template-columns: 280px minmax(0, 1fr); }
  .ficha { display: none !important; }
}

@media (max-width: 820px) {
  .app { grid-template-columns: 64px minmax(0, 1fr); }
  .rail-btn span { display: none; }
  .indicadores { width: 100%; margin-left: 0; }
}

/* ---------------- configuração de follow-up ---------------- */

.config-bloco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 22px 24px 24px;
  box-shadow: var(--sombra-cartao);
  max-width: 860px;
}

.config-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 22px; }
.config-topo h2 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.config-ajuda { margin: 0; font-size: 13px; line-height: 1.55; color: var(--texto-suave); max-width: 52ch; }

.interruptor { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.interruptor input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }

.passo {
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--ground);
}

.passo-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.passo-numero {
  width: 24px; height: 24px;
  border-radius: 100px;
  background: var(--acento);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  flex: 0 0 auto;
}
.passo-topo .depois { font-size: 13.5px; font-weight: 600; }
.passo-topo input[type="number"] { width: 68px; }
.passo-topo select { font-size: 13.5px; font-weight: 600; padding: 4px 6px; }
.passo-remover { margin-left: auto; }

.passo input[type="number"], .passo input[type="text"], .passo textarea {
  font: inherit;
  font-size: 13.5px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 7px 10px;
}
.passo textarea { width: 100%; resize: vertical; min-height: 62px; line-height: 1.5; }
.passo input:focus-visible, .passo textarea:focus-visible { outline: none; border-color: var(--acento); }

.passo-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.passo-campo > label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }

.alerta-template {
  display: flex;
  gap: 8px;
  background: var(--ouro-claro);
  color: var(--ouro);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.config-acoes { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

.acoes-ficha { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.acoes-ficha .btn { flex: 1; text-align: center; }

.selo.desqualificado { background: var(--barro-claro); color: var(--barro); }
.marca-mini.desqualificado { background: var(--barro-claro); color: var(--barro); }

/* ---------------- tela de entrada ---------------- */

.pagina-entrada {
  display: grid;
  place-items: center;
  background: var(--shell);
  overflow: auto;
}

.entrada {
  background: var(--superficie);
  border-radius: 16px;
  padding: 38px 36px 32px;
  width: min(380px, calc(100vw - 32px));
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
}

.entrada-marca {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--acento), var(--acento-forte));
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.entrada-marca svg { width: 23px; height: 23px; }

.entrada h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.entrada-ajuda { margin: 0 0 24px; font-size: 13.5px; color: var(--texto-suave); }

#form-entrada { display: flex; flex-direction: column; gap: 14px; }
#form-entrada label { display: flex; flex-direction: column; gap: 6px; }
#form-entrada label span { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-fraco); }

#form-entrada input {
  font: inherit;
  font-size: 15px;
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 11px 13px;
}
#form-entrada input:focus-visible { outline: none; border-color: var(--acento); background: var(--superficie); }

#form-entrada .btn { margin-top: 6px; padding: 12px; font-size: 14px; }

.entrada-erro {
  margin: 0;
  background: var(--barro-claro);
  color: var(--barro);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

/* ---------------- conexão do canal (QR) no painel ---------------- */

.qr-cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 22px 24px 24px;
  box-shadow: var(--sombra-cartao);
  max-width: 460px;
  text-align: center;
}
.qr-cartao h2 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.qr-cartao p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); }
.qr-cartao img { display: block; margin: 0 auto 18px; background: #fff; padding: 12px; border-radius: 10px; max-width: 100%; }

.rodape-usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-left: 16px;
}
.rodape-usuario .btn { padding: 5px 12px; font-size: 12px; }

/* ---------------- administração ---------------- */

.admin-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; align-items: start; }

.admin-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.admin-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--ground);
}
.admin-item .principal { flex: 1; min-width: 0; }
.admin-item strong { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.admin-item .detalhe-linha { font-family: var(--mono); font-size: 10.5px; color: var(--texto-fraco); margin-top: 2px; }
.admin-item .btn { padding: 5px 12px; font-size: 12px; white-space: nowrap; }

.admin-vazio { color: var(--texto-fraco); font-size: 13px; padding: 8px 2px; }

.dobra-admin { border-top: 1px solid var(--linha); padding-top: 14px; }
.dobra-admin summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--acento); }
.dobra-admin summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

.form-admin { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.form-admin label { display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }
.form-admin input, .form-admin select {
  font: inherit;
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 7px;
  padding: 8px 11px;
  max-width: none;
}
.form-admin input:focus-visible, .form-admin select:focus-visible { outline: none; border-color: var(--acento); }
.form-admin .btn { margin-top: 4px; align-self: flex-start; }

/* ---------------- com a IA / com a equipe (cabeçalho da conversa) ---------------- */

.dono {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--acento-claro);
  color: var(--acento);
  white-space: nowrap;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dono.equipe { background: var(--ouro-claro); color: var(--ouro); }
#btn-dono { padding: 5px 12px; font-size: 12px; white-space: nowrap; }
.thread-topo .janela[hidden] { display: none; }

.bolha time .autor { font-family: var(--ui); font-weight: 600; }
.bolha.automatica { opacity: .7; font-style: italic; }

/* ---------------- régua das etapas ---------------- */

.etapas { display: flex; gap: 4px; margin-bottom: 14px; }
.etapas span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 2px;
  border-radius: 6px;
  background: var(--superficie-2);
  color: var(--texto-fraco);
  white-space: nowrap;
}
.etapas span.feita { background: var(--acento-claro); color: var(--acento); }
.etapas span.atual { background: var(--acento); color: #fff; }

/* ---------------- base da clínica ---------------- */

.clinica-topo { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; max-width: 860px; margin-bottom: 18px; }
.clinica-topo h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.clinica-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 280px; text-align: right; }
.clinica-status small { font-size: 12px; line-height: 1.5; color: var(--texto-suave); }

.clinica-form { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }

.cf-secao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px 22px 22px;
  box-shadow: var(--sombra-cartao);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cf-secao header h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.cf-secao header p { margin: 0; font-size: 12.8px; line-height: 1.55; color: var(--texto-suave); }

.cf-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

.cf-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cf-campo > span:first-child { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }
.cf-campo > span:first-child i { font-style: normal; color: var(--ouro); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.cf-campo small, .cf-opcao small { font-size: 11.5px; line-height: 1.45; color: var(--texto-fraco); }

.cf-campo input, .cf-campo textarea, .cf-dia input[type="time"] {
  font: inherit;
  font-size: 13.5px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 7px;
  padding: 8px 11px;
  width: 100%;
  min-width: 0;
}
.cf-campo textarea { resize: vertical; line-height: 1.5; }
.cf-campo input:focus-visible, .cf-campo textarea:focus-visible, .cf-dia input:focus-visible { outline: none; border-color: var(--acento); }
.cf-inline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.cf-inline input { width: 80px; }

.cf-dias { display: flex; flex-direction: column; gap: 6px; }
.cf-dia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-dia .interruptor { width: 110px; }
.cf-dia input[type="time"] { width: auto; padding: 6px 8px; }
.cf-dia input:disabled { opacity: .4; }
.cf-dia .depois { font-size: 13px; color: var(--texto-suave); }

.cf-item { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 14px 16px; margin-bottom: 10px; background: var(--ground); display: flex; flex-direction: column; gap: 10px; }
.cf-item.compacto { flex-direction: row; align-items: flex-end; gap: 10px; }
.cf-item.compacto .cf-grade { flex: 1; }
.cf-item-topo { display: flex; justify-content: space-between; align-items: center; }
.cf-item .btn { padding: 5px 12px; font-size: 12px; align-self: flex-start; }
.cf-item.compacto .btn { align-self: flex-end; margin-bottom: 2px; }
.cf-vazio { margin: 0 0 10px; font-size: 13px; color: var(--texto-fraco); }
.cf-secao > .btn { align-self: flex-start; }

.cf-opcoes { display: flex; flex-direction: column; gap: 8px; }
.cf-opcoes.linha { flex-direction: row; flex-wrap: wrap; }
.cf-opcao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 11px 14px;
  cursor: pointer;
  background: var(--superficie);
}
.cf-opcao.marcada { border-color: var(--acento); background: var(--acento-claro); }
.cf-opcao input { accent-color: var(--acento); margin-top: 3px; }
.cf-opcao span { display: flex; flex-direction: column; gap: 3px; }
.cf-opcao b { font-size: 13.5px; }

.cf-explica { background: var(--ouro-claro); border-radius: var(--raio-p); padding: 14px 16px; font-size: 13px; line-height: 1.55; color: #5E4310; }
.cf-explica b { display: block; margin-bottom: 6px; font-size: 13.5px; }
.cf-explica ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

.cf-aviso { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ouro); background: var(--ouro-claro); border-radius: 6px; padding: 9px 12px; }

.clinica-barra {
  position: sticky;
  bottom: -40px;
  margin: 16px 0 -40px;
  padding: 12px 0 40px;
  max-width: 860px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, transparent, var(--ground) 30%);
}
.clinica-barra span { margin-right: auto; font-size: 12.5px; color: var(--texto-fraco); }

/* ---------------- testar ---------------- */

.testar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 312px; grid-template-rows: minmax(0, 1fr); background: var(--superficie); }
.testar-layout .thread-topo .btn { padding: 5px 12px; font-size: 12px; white-space: nowrap; }
.testar-layout #btn-sumir { margin-left: auto; }
.testar-layout #btn-sumir[hidden] + #btn-recomecar { margin-left: auto; }

.digitando { display: flex; gap: 4px; padding: 12px 14px; }
.digitando i { width: 6px; height: 6px; border-radius: 100px; background: var(--acento); opacity: .35; animation: pulsar 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulsar { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .digitando i { animation: none; opacity: .7; } }

@media (max-width: 1180px) {
  .testar-layout { grid-template-columns: minmax(0, 1fr); }
  .testar-layout .ficha { display: none !important; }
}

@media (max-width: 820px) {
  .clinica-topo { flex-direction: column; gap: 10px; }
  .clinica-status { align-items: flex-start; text-align: left; max-width: none; }
  .cf-secao { padding: 16px; }
  .cf-item.compacto { flex-direction: column; align-items: stretch; }
  .dono { max-width: 150px; }
  .thread-topo { flex-wrap: wrap; }
}

/* ---------------- primeiro acesso, termo e bloqueio ---------------- */

.faixa-boas-vindas {
  max-width: 860px;
  background: var(--acento-claro);
  color: var(--acento-forte);
  border-radius: var(--raio-p);
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.sobreposicao {
  position: fixed;
  inset: 0;
  background: rgba(16, 33, 42, .72);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 20;
}
.termo-caixa {
  background: var(--superficie);
  border-radius: 14px;
  width: min(720px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
}
.termo-texto { overflow-y: auto; padding: 26px 30px 10px; font-size: 13.8px; line-height: 1.6; color: var(--texto); }
.termo-texto h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.termo-texto h3 { margin: 20px 0 6px; font-size: 14.5px; font-weight: 700; }
.termo-texto p { margin: 0 0 10px; color: var(--texto-suave); }
.termo-texto ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--texto-suave); }
.termo-acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 30px 22px; border-top: 1px solid var(--linha); }
.termo-acoes[hidden] { display: none; }

/* ---------------- boas-vindas e assinaturas ---------------- */

.boas-vindas { margin-top: 16px; border-top: 1px solid var(--linha); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.boas-vindas[hidden] { display: none; }
.boas-vindas pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.55;
  background: var(--ground);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 12px 14px;
}
.boas-vindas .config-acoes { margin-top: 0; }

.indicadores-linha { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.assinatura .grade-campos .campo:nth-last-child(2) { border-bottom: 1px solid var(--linha); }
.acoes-quebra { flex-wrap: wrap; }
.assinatura .acoes .btn { padding: 6px 12px; font-size: 12px; }
.assinatura .dobra-admin { margin-top: 14px; }

.pagar-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding: 12px; background: var(--ground); border-radius: var(--raio-p); }
.pagar-form[hidden] { display: none; }
.pagar-form input, .pagar-form select {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--linha);
  border-radius: 7px;
  padding: 6px 9px;
  background: var(--superficie);
  color: var(--texto);
}
.pagar-form input[data-campo="valor"] { width: 100px; }
.assinatura .form-admin[hidden] { display: none; }
.assinatura .form-admin { margin-top: 14px; }

.pagamentos { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pagamento-linha { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: center; font-size: 12.8px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.pagamento-linha .btn { padding: 3px 10px; font-size: 11.5px; }

.dobra-preferencias { margin-top: 18px; }
.dobra-preferencias summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.dobra-preferencias .btn { margin-top: 12px; }

@media (max-width: 820px) {
  .termo-texto { padding: 20px 18px 8px; }
  .termo-acoes { padding: 14px 18px 18px; }
  .pagamento-linha { grid-template-columns: 80px 1fr auto; }
  .pagamento-linha .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---------------- avisos de cobrança ---------------- */

.avisos-cobranca { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; max-width: 860px; }
.avisos-cobranca:empty { display: none; }
.avisos-cobranca h3 { margin: 0; font-size: 15px; font-weight: 700; }
.aviso-cobranca {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 3px solid #D9AE55;
  border-radius: var(--raio-p);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aviso-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.aviso-cobranca pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--ui);
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--texto-suave);
}
.aviso-cobranca .acoes { margin-top: 0; display: flex; gap: 8px; align-items: center; }
.aviso-cobranca a.btn { text-decoration: none; display: inline-block; }