:root {
  color-scheme: light;

  --fundo: #F6F7F9;
  --superficie: #FFFFFF;
  --superficie-2: #F0F2F5;
  --borda: #E2E5EA;
  --borda-forte: #CBD1DA;

  --tinta: #16191D;
  --tinta-fraca: #5C6470;
  --tinta-tenue: #868D99;

  /* Quem produziu o texto. Ver o comentário no topo do arquivo. */
  --lisa: #3B5BDB;
  --sofia: #0C8A6A;
  --humano: #7A4FBF;
  --cliente: #98A0AC;

  --lisa-veu: #EEF1FD;
  --sofia-veu: #E7F5F0;
  --humano-veu: #F3EEFA;

  --acao: #3B5BDB;
  --acao-forte: #2F49B0;
  --alerta: #C0392B;
  --alerta-veu: #FCEEEC;
  --atencao: #9A6700;
  --atencao-veu: #FDF6E3;
  --sucesso: #0C8A6A;
  --sucesso-veu: #E7F5F0;

  --r-painel: 10px;
  --r-controle: 7px;

  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}


@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700;
  font-display: swap; src: url(/fontes/plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700;
  font-display: swap; src: url(/fontes/plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fontes/plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/fontes/plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(/fontes/plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(/fontes/plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.011em }
h1 { font-size: 22px; line-height: 1.25 }
h2 { font-size: 18px; line-height: 1.3 }
h3 { font-size: 15px; line-height: 1.35 }
p { margin: 0 0 .7rem }
p:last-child { margin-bottom: 0 }

a { color: var(--acao); text-decoration: none }
a:hover { text-decoration: underline }

/* O foco fica visível em tudo: o painel é operado com teclado no meio de um
   atendimento, e um anel invisível já custou uma resposta enviada na conversa
   errada. */
:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Identificadores e medidas — o que se compara dígito a dígito. Nunca rótulo. */
.mono, code { font-family: var(--mono); font-size: .92em; font-variant-ligatures: none }
.num { font-variant-numeric: tabular-nums }
.tenue { color: var(--tinta-tenue) }
.fraca { color: var(--tinta-fraca) }
.pre { white-space: pre-wrap; overflow-wrap: anywhere }


.casca {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.lateral {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
}

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 8px 16px;
}
.marca-selo { width: 26px; height: 26px; flex: none; display: block }
.marca-selo svg { display: block }
.marca-nome { font-size: 15px; font-weight: 600; letter-spacing: -0.01em }
.marca-linha { font-size: 11px; color: var(--tinta-tenue); margin-top: -2px }

.lateral nav { display: flex; flex-direction: column; gap: 2px }
.lateral nav a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-controle);
  color: var(--tinta-fraca);
  font-size: 14px;
  font-weight: 500;
}
.lateral nav a:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none }
.lateral nav a[aria-current='page'] { background: var(--lisa-veu); color: var(--lisa) }

.lateral-pe { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borda) }

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

.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  min-height: 60px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.topo-titulo { font-size: 16px; font-weight: 600; letter-spacing: -0.01em }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 12px }

main { padding: 24px 28px 56px; min-width: 0 }

.cabeca-pagina { margin-bottom: 20px; max-width: 68ch }
.cabeca-pagina p { color: var(--tinta-fraca); font-size: 14px; margin: 5px 0 0 }

@media (max-width: 900px) {
  .casca { grid-template-columns: minmax(0, 1fr) }
  .lateral {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 12px; overflow-x: auto; padding: 10px 14px;
    border-right: 0; border-bottom: 1px solid var(--borda);
  }
  .marca { padding: 0 6px 0 0; flex: none }
  .marca-nome { white-space: nowrap }
  .marca-linha { display: none }
  .lateral nav { flex-direction: row; gap: 2px }
  .lateral nav a { white-space: nowrap }
  .lateral-pe { margin: 0 0 0 auto; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--borda) }
  .topo { padding: 0 16px }
  main { padding: 16px 16px 40px }
}


.chip-modo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 13px; font-weight: 500; color: var(--tinta);
}
.chip-modo:hover { border-color: var(--borda-forte); text-decoration: none }
.chip-modo .ponto { width: 7px; height: 7px; border-radius: 50%; flex: none }
.chip-modo .rotulo-modo { color: var(--tinta-fraca); font-weight: 400 }

.ponto-lisa { background: var(--lisa) }
.ponto-sofia { background: var(--sofia) }
.ponto-humano { background: var(--humano) }

.usuario { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-fraca) }
.usuario form { display: inline }
.usuario button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--tinta-fraca); text-decoration: underline;
}
.usuario button:hover { color: var(--tinta); background: none }


.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-painel);
  min-width: 0;
}
.painel-cabeca {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--borda);
}
.painel-cabeca h2 { font-size: 15px }
.painel-cabeca .direita { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px }
.painel-corpo { padding: 16px }
.painel-corpo > :first-child { margin-top: 0 }

.faixa-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-painel);
  overflow: hidden;
  margin: 0 0 20px;
}
.faixa-numeros > div {
  padding: 14px 16px;
  border-left: 1px solid var(--borda);
  min-width: 0;
}
.faixa-numeros > div:first-child { border-left: 0 }
.faixa-numeros dt {
  font-size: 12.5px; color: var(--tinta-fraca);
  display: flex; align-items: center; gap: 6px;
}
.faixa-numeros dd {
  margin: 3px 0 0;
  font-size: 26px; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.faixa-numeros .rodape { font-size: 12px; color: var(--tinta-tenue); margin-top: 2px }
.faixa-numeros .quieto dd { color: var(--tinta-tenue) }

/* O align-items:start é o que impede um painel curto de esticar até a altura do
   vizinho alto — sem ele, "Quem respondeu hoje" virava um retângulo com uma
   barra em cima e um vão de 300px embaixo. E o mínimo de 420px segura DUAS
   colunas em tela larga: com 340px cabiam três, e três colunas de painel é mais
   parede que informação. */
.grade-2 {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.pilha { display: grid; gap: 16px }


.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch }

table.tabela { border-collapse: collapse; width: 100%; font-size: 14px }
table.tabela th {
  text-align: left; font-weight: 500; font-size: 12.5px; color: var(--tinta-fraca);
  padding: 9px 16px; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
table.tabela td {
  padding: 11px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle;
}
table.tabela tr:last-child td { border-bottom: 0 }
table.tabela tbody tr:hover { background: var(--superficie-2) }
table.tabela .direita { text-align: right; font-variant-numeric: tabular-nums }
table.tabela .encolher { width: 1%; white-space: nowrap }


.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
}
.chip-ativa { background: var(--lisa-veu); color: var(--lisa) }
.chip-humana { background: var(--humano-veu); color: var(--humano) }
.chip-escalada { background: var(--alerta-veu); color: var(--alerta) }
.chip-fechada { background: var(--superficie-2); color: var(--tinta-fraca) }
.chip-boa { background: var(--sucesso-veu); color: var(--sucesso) }
.chip-ruim { background: var(--alerta-veu); color: var(--alerta) }
.chip-atencao { background: var(--atencao-veu); color: var(--atencao) }
.chip-neutro { background: var(--superficie-2); color: var(--tinta-fraca) }
.chip-contagem {
  background: var(--superficie-2); color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 11.5px;
}


.fluxo { display: flex; flex-direction: column; gap: 14px }

.linha {
  border-left: 3px solid var(--cliente);
  padding: 0 0 0 13px;
  max-width: 72ch;
  min-width: 0;
}
.linha-lisa { border-left-color: var(--lisa) }
.linha-sofia { border-left-color: var(--sofia) }
.linha-humano { border-left-color: var(--humano) }

.linha-quem {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 12px; color: var(--tinta-fraca); margin-bottom: 4px;
}
.linha-quem .nome { font-weight: 600; color: var(--tinta) }
.linha-lisa .linha-quem .nome { color: var(--lisa) }
.linha-sofia .linha-quem .nome { color: var(--sofia) }
.linha-humano .linha-quem .nome { color: var(--humano) }
.linha-quem .tecnico { font-family: var(--mono); font-size: 11.5px; color: var(--tinta-tenue) }

.linha-texto {
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-controle);
  padding: 9px 12px;
}
.linha-cliente .linha-texto { background: var(--superficie-2); border-color: transparent }
.linha-lisa .linha-texto { background: var(--lisa-veu); border-color: transparent }
.linha-sofia .linha-texto { background: var(--sofia-veu); border-color: transparent }
.linha-humano .linha-texto { background: var(--humano-veu); border-color: transparent }

.linha-sombra { border-left-style: dashed }

/* O trilho continua dizendo QUEM respondeu, e a caixa fica neutra.
   Usado só na fila de avaliação, onde o trabalho de quem lê é julgar bom/ruim:
   ali um véu verde de autoria (Sofia) atrás de uma nota "ruim" se lê como
   aprovação antes de o olho chegar ao chip vermelho. A regra da cor não muda —
   só sai de baixo do texto, onde ela competia com o veredito. */
.linha-neutra .linha-texto { background: var(--superficie); border-color: var(--borda) }
.aviso-sombra {
  font-size: 11.5px; font-weight: 600; color: var(--atencao);
  margin-bottom: 4px; letter-spacing: .01em;
}

/* O rastro técnico embaixo de cada resposta: verificador e memória consultada. */
.rastro { margin-top: 6px; display: flex; flex-direction: column; gap: 5px }
.rastro-item {
  font-size: 12.5px; color: var(--tinta-fraca);
  padding-left: 10px; border-left: 2px solid var(--borda-forte);
}
.rastro-alerta { border-left-color: var(--alerta); color: var(--alerta) }
.rastro-item ul { margin: 3px 0 0; padding-left: 16px }
.rastro-item li { overflow-wrap: anywhere }
.rastro-item .sumiu { color: var(--tinta-tenue); font-style: italic }

.avaliar { margin-top: 8px; font-size: 13px }
.avaliar summary { cursor: pointer; color: var(--tinta-fraca) }
.avaliar summary:hover { color: var(--tinta) }
.avaliar form { display: grid; gap: 8px; margin-top: 8px; max-width: 46ch }

/* A única animação do painel: a linha que o SSE acabou de trazer pisca no seu
   trilho, uma vez. Tudo mais que se mexesse aqui competiria com o atendimento. */
@keyframes chegou {
  from { background: var(--atencao-veu) }
  to { background: transparent }
}
.linha-nova .linha-texto { animation: chegou 1.4s ease-out }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}


button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-controle);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--tinta);
  font: 500 13.5px/1.3 var(--sans);
  cursor: pointer;
}
button:hover, .botao:hover { background: var(--superficie-2); text-decoration: none }
button:disabled { opacity: .5; cursor: not-allowed }

button.primario, .botao.primario {
  background: var(--acao); border-color: var(--acao); color: #fff;
}
button.primario:hover, .botao.primario:hover { background: var(--acao-forte); border-color: var(--acao-forte) }

button.perigo { color: var(--alerta); border-color: #E7B9B3 }
button.perigo:hover { background: var(--alerta-veu) }

button.sutil { border-color: transparent; background: transparent; color: var(--tinta-fraca) }
button.sutil:hover { background: var(--superficie-2); color: var(--tinta) }

.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }

input[type='text'], input[type='password'], input[type='number'], textarea, select {
  font: 400 14px/1.5 var(--sans);
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-controle);
  padding: 7px 10px;
  width: 100%;
  max-width: 100%;
}
textarea { resize: vertical; min-height: 5rem }
input:focus, textarea:focus, select:focus {
  border-color: var(--acao); outline: none; box-shadow: 0 0 0 3px var(--lisa-veu);
}

label.campo { display: block; margin-bottom: 14px }
label.campo > span { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px }
label.campo .ajuda { display: block; font-weight: 400; font-size: 12.5px; color: var(--tinta-fraca); margin: 4px 0 0 }

.linha-controles { display: flex; gap: 8px; align-items: flex-start }
.linha-controles input, .linha-controles select { width: auto; flex: 1; min-width: 0 }


.aviso {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tinta-tenue);
  border-radius: var(--r-controle);
  background: var(--superficie);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.aviso strong { display: block; margin-bottom: 3px; font-weight: 600 }
.aviso-atencao { border-left-color: var(--atencao); background: var(--atencao-veu); border-color: #EFE0BC }
.aviso-alerta { border-left-color: var(--alerta); background: var(--alerta-veu); border-color: #EFCFCA }

.vazio {
  text-align: center;
  padding: 40px 20px;
  color: var(--tinta-fraca);
  font-size: 14px;
}
.vazio strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: 4px; font-size: 15px }

/* A barra de orçamento de token por arquivo da base.
   Medido em produção em 07/09/2026: nada estourado, e os DOIS arquivos de prompt
   (01-instrucoes-lisa e 04-catalogo) em 83% do limite do bloco fixo — que é
   somado entre eles, então um cresce e aperta o outro. É por isso que o limiar
   de "apertado" é 85% e não 100%: o aviso útil chega antes do corte, e o corte
   aqui é silencioso (o excedente sai pelo começo, avisando só no log).
   Atenção ao ler esta tela: o limite mostrado é o do bloco fixo do prompt, e
   NÃO o ORCAMENTO_TOKENS_CATALOGO (7.500), que é outro teto e não aparece
   aqui. */
.barra { height: 5px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin-top: 5px }
.barra > span { display: block; height: 100%; background: var(--sucesso); border-radius: 999px }
.barra.apertado > span { background: var(--atencao) }
.barra.estourado > span { background: var(--alerta) }


.tela-conversa {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.tela-aprendizado {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.lista-conversas { display: flex; flex-direction: column; max-height: calc(100vh - 150px); overflow-y: auto }
.lista-conversas a {
  display: block; padding: 11px 14px; border-bottom: 1px solid var(--borda); color: inherit;
}
.lista-conversas a:last-child { border-bottom: 0 }
.lista-conversas a:hover { background: var(--superficie-2); text-decoration: none }
.lista-conversas a[aria-current='true'] { background: var(--lisa-veu) }
.lista-conversas .quem { font-family: var(--mono); font-size: 13px; font-weight: 500 }
.lista-conversas .previa {
  font-size: 12.5px; color: var(--tinta-fraca); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-conversas .rodape { display: flex; align-items: center; gap: 7px; margin-top: 6px }

.contexto { display: grid; gap: 16px; position: sticky; top: 76px }
.contexto dl { margin: 0; display: grid; gap: 10px }
.contexto dt { font-size: 12px; color: var(--tinta-fraca) }
.contexto dd { margin: 2px 0 0; font-size: 13.5px }

@media (max-width: 1200px) {
  .tela-conversa { grid-template-columns: 270px minmax(0, 1fr) }
  .contexto {
    grid-column: 1 / -1; position: static;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
@media (max-width: 900px) {
  .tela-conversa, .tela-aprendizado { grid-template-columns: minmax(0, 1fr) }
  .lista-conversas { max-height: 320px }
  .contexto { grid-column: auto }
  /* Quem abriu uma conversa no celular quer VER a conversa. A lista das outras
     desce para o fim: empilhada no topo, ela empurrava a primeira mensagem para
     fora da tela e cobrava uma rolagem antes da primeira palavra. */
  .coluna-lista { order: 3 }
}

/* O compositor gruda no fim do fluxo: responder é a ação da tela, e caçá-la
   depois de rolar cinquenta mensagens era o atrito que sobrava. */
.compositor {
  position: sticky; bottom: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-painel);
  padding: 12px;
  margin-top: 16px;
  display: grid; gap: 8px;
}
.compositor .acoes { justify-content: flex-end }
.compositor .dica { font-size: 12px; color: var(--tinta-tenue); margin-right: auto }

/* Login: a única tela sem casca. */
.tela-login { display: grid; place-items: center; min-height: 100vh; padding: 20px }
.cartao-login { width: 100%; max-width: 340px }
.cartao-login .marca { justify-content: center; padding: 0 0 20px }


.previa {
  font-size: 12.5px; color: var(--tinta-fraca); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
/* Dentro de um painel de meia largura a prévia precisa ceder antes da coluna
   de data: sem este teto ela empurrava a data para fora da tabela. */
.grade-2 .previa { max-width: 34ch }
.nota-de-rodape { font-size: 12.5px; color: var(--tinta-fraca); margin: 10px 0 0 }

.barra-autoria {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--superficie-2);
}
.barra-autoria .pedaco { display: block; height: 100% }
.pedaco-lisa { background: var(--lisa) }
.pedaco-sofia { background: var(--sofia) }
.pedaco-humano { background: var(--humano) }

.legenda { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px }
.legenda-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-fraca) }
.legenda-item .ponto { width: 8px; height: 8px; border-radius: 50%; flex: none }
.legenda-item b { color: var(--tinta); font-weight: 600 }

ul.lista-simples { list-style: none; margin: 0; padding: 0 }
ul.lista-simples li { padding: 11px 16px; border-bottom: 1px solid var(--borda); font-size: 13.5px }
ul.lista-simples li:last-child { border-bottom: 0 }

/* Dentro de um painel, o aviso não repete a borda que o painel já tem. */
.painel-corpo .aviso:last-child { margin-bottom: 0 }


.abas { display: flex; gap: 2px; flex-wrap: wrap }
.abas a {
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--tinta-fraca);
}
.abas a:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none }
.abas a[aria-current='true'] { background: var(--lisa-veu); color: var(--lisa) }

.rotulo { font-size: 12px; color: var(--tinta-fraca); margin-bottom: 5px }
.citacao { padding-left: 11px; border-left: 2px solid var(--borda-forte) }
.nota { font-size: 13px; color: var(--tinta-fraca); max-width: 70ch }
.nota code, code { background: var(--superficie-2); padding: 1px 5px; border-radius: 4px }

.contexto dl > div + div { padding-top: 10px; border-top: 1px solid var(--borda) }

/* Sem a lista lateral (uma conversa aberta fora da lista, ou um teste de tela),
   as duas colunas que sobram ocupam a largura toda em vez de deixar um vão. */
.tela-conversa.sem-lista { grid-template-columns: minmax(0, 1fr) 300px }
@media (max-width: 1200px) {
  .tela-conversa.sem-lista { grid-template-columns: minmax(0, 1fr) }
}

/* Cada modo é um cartão inteiro clicável: errar o alvo por um pixel não pode
   ser um jeito de trocar quem atende os clientes. */
.modo {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; margin-top: 10px;
  border: 1px solid var(--borda);
  border-radius: var(--r-controle);
  cursor: pointer;
}
label.modo:hover { border-color: var(--borda-forte); background: var(--superficie-2) }
.modo-ativo { border-color: var(--acao); background: var(--lisa-veu) }
.modo input { width: auto; margin: 3px 0 0; flex: none }
.modo-nome { font-family: var(--mono); font-size: 13.5px; font-weight: 500 }
.modo p { margin: 3px 0 0; font-size: 13px; color: var(--tinta-fraca); max-width: 72ch }
.modo.travado { opacity: .6; cursor: default; background: var(--superficie-2) }
.modo .porque { color: var(--atencao) }

.campo input[type='number'] { max-width: 8rem }

.selecionar { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px }
.selecionar input { width: auto; margin: 0 }

/* O editor da base: markdown de verdade, lido em coluna e comparado linha a
   linha, então mono e alto. */
textarea.editor {
  min-height: 26rem;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
}

form.par { margin: 0 }