/* Tokens de design. Um único lugar para cor, espaço e tipografia.

   A paleta vem da identidade do canal, lida do CSS do tema "sardine" em
   investidorsardinha.r7.com: o bordô #8b0202 é a cor dominante, apoiado por
   vermelho vivo, dourado #f5b635 e verde, sobre neutros cinza (#242526,
   #878687, #f4f4f4). O dourado ficou fora dos tokens de propósito: contra
   branco ele rende 1.81:1, então só serviria como preenchimento, nunca como
   texto — e token sem uso é peso morto.

   O tema é claro e fixo. `color-scheme: light` impede que o navegador pinte
   campos, barras de rolagem e menus no escuro quando o sistema está em modo
   noturno, o que deixaria a interface em dois tons. */
:root {
  color-scheme: light;

  --cor-fundo: #f7f7f8;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f0f0f1;
  --cor-borda: #e2e2e4;
  --cor-texto: #242526;
  --cor-texto-suave: #66666a;
  --cor-acento: #8b0202;
  --cor-acento-suave: #fbeceb;
  /* Erro em vermelho mais claro e saturado que o bordô da marca: distingue
     alerta de identidade, já que o acento também é vermelho. */
  --cor-erro: #b3261e;
  /* Verde da marca (#008f4f) escurecido — o original rende 4.17:1 e reprova
     em texto normal. */
  --cor-ok: #00713f;

  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;

  --raio: 0.625rem;
  --raio-g: 1rem;
  --sombra: 0 1px 2px rgba(36, 37, 38, 0.06), 0 8px 24px rgba(36, 37, 38, 0.06);
  --largura-lateral: 17rem;
  --fonte: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fonte-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte-ui);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* [hidden] precisa vencer qualquer regra de autor que defina display.
   Sem !important, um .painel { display: flex } anula o atributo. */
[hidden] { display: none !important; }

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

button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: transparent;
  padding: var(--esp-2) var(--esp-3);
  transition: background-color 120ms ease, border-color 120ms ease;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.botao-primario {
  background: var(--cor-acento);
  color: #fff;
  font-weight: 600;
  padding: var(--esp-3) var(--esp-5);
}
.botao-primario:hover:not(:disabled) { filter: brightness(1.08); }
.botao-primario:disabled { opacity: 0.5; cursor: not-allowed; }

.botao-suave { border-color: var(--cor-borda); background: var(--cor-superficie); }
.botao-suave:hover { background: var(--cor-superficie-2); }

.campo {
  width: 100%;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
}

label { display: block; font-size: 0.85rem; color: var(--cor-texto-suave); margin-bottom: var(--esp-1); }

.aviso { font-size: 0.875rem; margin-top: var(--esp-3); min-height: 1.4em; }
.aviso.erro { color: var(--cor-erro); }
.aviso.ok { color: var(--cor-ok); }

/* ----------------------------------------------------------- login */

.tela-centro {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--esp-4);
}

.cartao {
  width: min(26rem, 100%);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: var(--esp-6);
}

.cartao h1 {
  font-family: var(--fonte);
  font-size: 1.6rem;
  margin: 0 0 var(--esp-2);
  font-weight: 600;
}

.subtitulo { color: var(--cor-texto-suave); margin: 0 0 var(--esp-5); font-size: 0.95rem; }

.pilha > * + * { margin-top: var(--esp-4); }

/* ----------------------------------------------------------- layout do app */

.app { display: grid; grid-template-columns: var(--largura-lateral) 1fr; height: 100vh; }

.lateral {
  background: var(--cor-superficie-2);
  border-right: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lateral-topo { padding: var(--esp-4); border-bottom: 1px solid var(--cor-borda); }

.marca {
  font-family: var(--fonte);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 var(--esp-3);
}
.marca span { display: block; font-family: var(--fonte-ui); font-size: 0.75rem; color: var(--cor-texto-suave); font-weight: 400; }

.lista-conversas { flex: 1; overflow-y: auto; padding: var(--esp-2); list-style: none; margin: 0; }

.item-conversa { display: flex; align-items: center; gap: var(--esp-1); }

.item-conversa > button.titulo {
  flex: 1;
  text-align: left;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio);
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-conversa > button.titulo:hover { background: var(--cor-superficie); color: var(--cor-texto); }
.item-conversa.ativa > button.titulo { background: var(--cor-acento-suave); color: var(--cor-texto); font-weight: 600; }

.item-conversa > button.excluir { opacity: 0; color: var(--cor-texto-suave); padding: var(--esp-1) var(--esp-2); }
.item-conversa:hover > button.excluir, .item-conversa > button.excluir:focus-visible { opacity: 1; }
.item-conversa > button.excluir:hover { color: var(--cor-erro); }

.lateral-rodape { border-top: 1px solid var(--cor-borda); padding: var(--esp-3); font-size: 0.85rem; }
.lateral-rodape .email { color: var(--cor-texto-suave); padding: 0 var(--esp-2) var(--esp-2); word-break: break-all; }
.lateral-rodape button, .lateral-rodape a {
  display: block; width: 100%; text-align: left; padding: var(--esp-2);
  border-radius: var(--raio); color: var(--cor-texto-suave); text-decoration: none;
}
.lateral-rodape button:hover, .lateral-rodape a:hover { background: var(--cor-superficie); color: var(--cor-texto); }

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

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

.historico { flex: 1; overflow-y: auto; padding: var(--esp-6) var(--esp-4); }

.faixa { max-width: 46rem; margin: 0 auto; }

.mensagem { display: flex; gap: var(--esp-4); padding: var(--esp-4) 0; }
.mensagem + .mensagem { border-top: 1px solid var(--cor-borda); }

.avatar {
  flex: 0 0 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700;
  background: var(--cor-superficie-2); color: var(--cor-texto-suave);
}
.mensagem.assistant .avatar { background: var(--cor-acento); color: #fff; }

.corpo { min-width: 0; flex: 1; }
.corpo p { margin: 0 0 var(--esp-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.corpo p:last-child { margin-bottom: 0; }
.mensagem.assistant .corpo { font-family: var(--fonte); font-size: 1.05rem; }

.vazio { text-align: center; color: var(--cor-texto-suave); padding: var(--esp-6) var(--esp-4); }
.vazio h2 { font-family: var(--fonte); color: var(--cor-texto); font-weight: 600; }

.pensando::after {
  content: "▋";
  animation: piscar 1s steps(2, start) infinite;
  color: var(--cor-acento);
}
@keyframes piscar { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .pensando::after { animation: none; }
  button { transition: none; }
}

/* ----------------------------------------------------------- composer */

.composer { border-top: 1px solid var(--cor-borda); background: var(--cor-superficie); padding: var(--esp-4); }
.composer form { max-width: 46rem; margin: 0 auto; display: flex; gap: var(--esp-3); align-items: flex-end; }

.composer textarea {
  flex: 1; resize: none; max-height: 12rem; min-height: 3rem;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  background: var(--cor-fundo);
}

.rodape-nota { max-width: 46rem; margin: var(--esp-2) auto 0; font-size: 0.75rem; color: var(--cor-texto-suave); text-align: center; }

/* ----------------------------------------------------------- modal */

.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: grid; place-items: center; padding: var(--esp-4); z-index: 10;
}
.modal .cartao { max-height: 90vh; overflow-y: auto; }
.modal-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-4); }

/* ----------------------------------------------------------- admin */

.pagina-admin { max-width: 60rem; margin: 0 auto; padding: var(--esp-6) var(--esp-4); }
.pagina-admin h1 { font-family: var(--fonte); font-weight: 600; }

.secao {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g); padding: var(--esp-5); margin-bottom: var(--esp-5);
}
.secao h2 { font-family: var(--fonte); font-size: 1.15rem; margin: 0 0 var(--esp-2); font-weight: 600; }
.secao .nota { color: var(--cor-texto-suave); font-size: 0.875rem; margin: 0 0 var(--esp-4); }

.linha { display: flex; gap: var(--esp-3); flex-wrap: wrap; align-items: flex-end; }
.linha > * { flex: 1 1 12rem; }
.linha > button { flex: 0 0 auto; }

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--cor-borda); }
th { color: var(--cor-texto-suave); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Leitor de conversa do painel de administração. */
#leitor-conversa { margin-top: var(--esp-5); border-top: 1px solid var(--cor-borda); padding-top: var(--esp-4); }
.transcricao {
  display: flex; flex-direction: column; gap: var(--esp-4);
  max-height: 28rem; overflow-y: auto;
  margin: var(--esp-4) 0; padding: var(--esp-4);
  background: var(--cor-fundo); border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.turno { display: flex; flex-direction: column; gap: var(--esp-1); }
.turno p { margin: 0; white-space: pre-wrap; }
.turno-quem {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--cor-texto-suave);
}
.turno.persona .turno-quem { color: var(--cor-acento); }

.etiqueta {
  display: inline-block; padding: 0.1rem var(--esp-2); border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; background: var(--cor-superficie-2); color: var(--cor-texto-suave);
}
.etiqueta.ativo { background: var(--cor-acento-suave); color: var(--cor-ok); }
.etiqueta.inativo { color: var(--cor-erro); }

.fichas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
/* Respiro entre o formulário e as fichas, só quando existe alguma — um
   contêiner vazio não deve empurrar o aviso que vem abaixo.
   O valor precisa ser MAIOR que o margin-bottom do formulário: margens
   verticais adjacentes colapsam para a maior das duas, então um valor menor
   ou igual simplesmente não teria efeito visível. */
.fichas:not(:empty) { margin-top: var(--esp-5); }
.ficha {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  background: var(--cor-superficie-2); border: 1px solid var(--cor-borda);
  border-radius: 999px; padding: var(--esp-1) var(--esp-3); font-size: 0.875rem;
}
.ficha button { padding: 0 var(--esp-1); color: var(--cor-texto-suave); }
.ficha button:hover { color: var(--cor-erro); }

.link-voltar { color: var(--cor-acento); text-decoration: none; font-size: 0.9rem; }

/* ----------------------------------------------------------- responsivo */

@media (max-width: 48rem) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lateral { flex-direction: row; align-items: center; gap: var(--esp-2); overflow-x: auto; border-right: none; border-bottom: 1px solid var(--cor-borda); }
  .lateral-topo, .lateral-rodape { border: none; padding: var(--esp-2); flex: 0 0 auto; }
  .lista-conversas { display: flex; gap: var(--esp-2); }
  .item-conversa > button.titulo { max-width: 10rem; }
  .historico { padding: var(--esp-4) var(--esp-3); }
}