/**
 * Sr. Spent — a pele do editor com IA: rosto, balões, propostas e histórico.
 *
 * Carrega DEPOIS de chat.css. O lado dos balões é o MESMO nas duas telas desde
 * 06/08/2026: bot à esquerda, pessoa à direita, como em qualquer mensageiro.
 * Antes o Conversas invertia — a ideia era marcar que ali o operador assiste a
 * um papo alheio — mas na prática ler o mesmo produto com os lados trocados
 * conforme a aba custava mais do que a distinção valia. Hoje estados.css já
 * nasce nesse lado e as regras daqui só reafirmam o padrão para `.srs-fio__msg`.
 *
 * `.sr-marca` é o rosto desenhado em sr_marca.js, com três tamanhos ópticos:
 * p e m saem em `currentColor` (herdam a tinta de quem hospeda, e por isso
 * funcionam no balão claro e no botão preto); só o g veste amarelo com sombra
 * dura. As animações de pensar/agir movem só a pupila e o corpo — nunca o
 * traço, que a essa escala picotaria.
 *
 * As propostas são cartões neobrutalistas (mesma linguagem dos .ana-tile), com
 * a sombra dura mudando de cor conforme o estado: amarelo pendente, azul
 * resultado, verde aplicada, cinza e opacidade reduzida para negada, expirada
 * ou ajustada. Cada operação é um <label> com interruptor à esquerda e o diff
 * em grade de quatro colunas; operações com aviso ficam desabilitadas.
 *
 * O botão de enviar usa o bisel espelhado que encaixa na caixa de texto de
 * chat.css — os dois clip-path são um par e mudam juntos.
 *
 * Fecha o arquivo o navegador de histórico: cartões por dia que substituem o
 * fio, com o resumo do que aconteceu em cada data. Desde que o Sr. Spent virou
 * tela (sr_tela.js), o histórico é coluna fixa ao lado do chat em vez de vista
 * alternada dentro dele — por isso sumiram daqui o botão `.srs-vista` e o
 * `.chat--historico` que escondia o fio.
 */

.srs-fio__msg { max-width: 82%; }

.srs-fio__msg.fio__msg--bot {
  background: color-mix(in srgb, var(--marca-azul) 12%, var(--sup-elevada));
}

.srs-fio__msg.fio__msg--usuario {
  background: color-mix(in srgb, var(--marca-tinta) 8%, var(--sup-elevada));
  color: var(--tinta-1);
}

.srs-quem {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  color: var(--tinta-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.srs-quem__nome { color: var(--marca-tinta); }

.srs-quem__quando { margin-left: auto; color: var(--tinta-3); font-weight: var(--peso-medio); text-transform: none; letter-spacing: 0; }

.srs-acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 12px;
  border-left: 3px solid var(--marca-azul);
  color: var(--tinta-3);
  font-size: var(--t-meta);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--marca-azul) 6%, transparent), transparent 40%);
}

.srs-acao__pilula {
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.srs-cartao {
  align-self: stretch;
  background: var(--sup-cartao);
  border: 2px solid var(--marca-tinta);
  border-radius: var(--raio-cartao);
  box-shadow: 6px 6px 0 var(--marca-amarelo);
  padding: var(--e4) var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.srs-cartao--resultado { box-shadow: 6px 6px 0 var(--marca-azul); }
.srs-cartao--aplicada  { box-shadow: 6px 6px 0 var(--sem-bom); }
.srs-cartao--negada,
.srs-cartao--expirada,
.srs-cartao--ajustada  { box-shadow: 6px 6px 0 var(--sem-neutro); opacity: .82; }

.srs-cartao__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 17px;
  font-weight: var(--peso-brutal);
  letter-spacing: -.01em;
}

.srs-cartao__titulo .chip { margin-left: auto; }

.srs-cartao__resumo { margin: 0; font-size: var(--t-apoio); color: var(--tinta-2); }

.srs-cartao__acoes {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  border-top: 1px solid var(--separador);
  padding-top: var(--e3);
}

.srs-cartao__selo {
  padding: 6px var(--e3);
  border-radius: var(--raio-pequeno);
  background: var(--sup-afundada);
  color: var(--tinta-3);
  text-align: center;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.srs-cartao__selo--aplicada { background: color-mix(in srgb, var(--sem-bom) 14%, var(--sup-cartao)); color: var(--sem-bom); }
.srs-cartao__selo--negada   { background: color-mix(in srgb, var(--sem-critico) 12%, var(--sup-cartao)); color: var(--sem-critico); }

.srs-contador { margin-right: auto; font-size: var(--t-meta); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.srs-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-height: 340px;
  overflow-y: auto;
  padding: var(--e2) 0;
  border-top: 1px dashed var(--separador);
  border-bottom: 1px dashed var(--separador);
}

.srs-op {
  display: flex;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-pequeno);
  background: var(--sup-elevada);
  cursor: pointer;
  border: 1px solid transparent;
}

.srs-op:hover { border-color: var(--separador); background: color-mix(in srgb, var(--marca-azul) 4%, var(--sup-elevada)); }

.srs-op--fora { opacity: .55; cursor: default; }

.srs-op__toggle { align-self: center; }

.srs-op__corpo { flex: 1; min-width: 0; }

.srs-op__topo {
  display: flex; align-items: center; gap: var(--e2); margin-bottom: 4px;
}

.srs-op__id {
  font-family: var(--fonte-mono, ui-monospace, monospace);
  font-size: var(--t-meta);
  color: var(--tinta-3);
}

.srs-diff {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: var(--e2);
  row-gap: 3px;
  font-size: var(--t-meta);
  align-items: center;
}

.srs-diff__campo {
  font-weight: var(--peso-negro);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--t-etiqueta);
  color: var(--tinta-3);
}

.srs-diff__antes  { color: var(--tinta-3); text-decoration: line-through; }
.srs-diff__seta   { color: var(--tinta-3); }
.srs-diff__depois { font-weight: var(--peso-forte); }

.srs-op__motivo { margin-top: 4px; font-size: var(--t-meta); color: var(--tinta-2); }

.srs-op__aviso {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-meta);
  color: var(--sem-atencao);
}

.srs-res__chips { display: flex; gap: var(--e2); flex-wrap: wrap; }

.srs-res__detalhes {
  margin: 0;
  padding-left: var(--e4);
  font-size: var(--t-meta);
  color: var(--tinta-2);
}

.srs-vazio {
  align-self: center;
  text-align: center;
  padding: var(--e4) var(--e3);
  max-width: 520px;
}

.srs-vazio__marca { margin-bottom: var(--e2); display: flex; justify-content: center; }

/* Estreia da apresentação: rosto, nome, frase e cada atalho sobem em sequência,
   com 60ms entre um e outro. É só na primeira aparição (quem controla é o
   chat.js) — animar a cada ciclo de polling viraria pulsação. Deslocamento
   curto e opacidade, nada de escala: o rosto é a marca, e marca que cresce na
   tela parece propaganda. */
@keyframes srs-surge {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.srs-vazio.chat__entra > *,
.srs-vazio.chat__entra .srs-atalho {
  animation: srs-surge .34s cubic-bezier(.22, .61, .36, 1) both;
}

.srs-vazio.chat__entra > *:nth-child(1) { animation-delay: 0ms; }
.srs-vazio.chat__entra > *:nth-child(2) { animation-delay: 60ms; }
.srs-vazio.chat__entra > *:nth-child(3) { animation-delay: 120ms; }
.srs-vazio.chat__entra > .srs-vazio__atalhos { animation: none; }
.srs-vazio.chat__entra .srs-atalho:nth-child(1) { animation-delay: 180ms; }
.srs-vazio.chat__entra .srs-atalho:nth-child(2) { animation-delay: 240ms; }
.srs-vazio.chat__entra .srs-atalho:nth-child(3) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .srs-vazio.chat__entra > *,
  .srs-vazio.chat__entra .srs-atalho { animation: none; }
}

.srs-vazio__titulo {
  font-size: 17px;
  font-weight: var(--peso-brutal);
  margin: 0 0 6px;
}

.srs-vazio__texto { font-size: var(--t-apoio); color: var(--tinta-3); margin: 0; }

.conv-item { border-bottom: 1px solid var(--separador); }
.conv-item:last-child { border-bottom: 0; }

.conv-item--aberto { background: var(--sup-elevada); }
.conv-item--aberto > .linha { background: transparent; }

.gaveta {
  padding: var(--e3) var(--e5) var(--e4) 68px;
  border-top: 1px dashed var(--separador);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  animation: gaveta-abrir .18s ease-out;
}

@keyframes gaveta-abrir {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.gaveta__barra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}

.gaveta__chips { display: flex; gap: 4px; }

.gaveta__barra .campo { flex: 1 1 220px; }

.gaveta__contador { font-size: var(--t-meta); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.gaveta__fio {
  max-height: 55vh;
  overflow-y: auto;
  padding: var(--e2) var(--e2) var(--e2) 0;
}

.srs-quem .azulejo--p { width: 20px; height: 20px; border-radius: 5px; }
.srs-quem .azulejo__iniciais { font-size: 8px; }
.srs-quem .azulejo svg { width: 12px; height: 12px; }

.srs-fio__msg.fio__msg--usuario .srs-quem { flex-direction: row-reverse; }

.sr-marca { display: block; flex: none; overflow: visible; }

.sr-marca--p { width: 20px; height: 20px; }
.sr-marca--m { width: 30px; height: 30px; }
.sr-marca--g { width: 58px; height: 58px; }

.sr-marca--p .sr-marca__tinta,
.sr-marca--m .sr-marca__tinta { stroke: currentColor; }
.sr-marca--p .sr-marca__pupila,
.sr-marca--m .sr-marca__pupila { fill: currentColor; }

.sr-marca--g .sr-marca__sombra { stroke: var(--marca-tinta); }
.sr-marca--g .sr-marca__tinta { stroke: var(--marca-amarelo); }
.sr-marca--g .sr-marca__pupila { fill: var(--marca-tinta); }
.sr-marca--g .sr-marca__brilho { fill: var(--marca-amarelo); }

.sr-marca__pupila,
.sr-marca__brilho { transition: transform var(--transicao); }

.sr-marca--pensando { animation: sr-respira 2.6s ease-in-out infinite; }
.sr-marca--pensando .sr-marca__pupila { animation: sr-varre 2.6s ease-in-out infinite; }
.sr-marca--pensando .sr-marca__brilho { animation: sr-varre 2.6s ease-in-out infinite; }

.sr-marca--agindo { animation: sr-respira 1.1s ease-in-out infinite; }
.sr-marca--agindo .sr-marca__pupila { animation: sr-varre 1.1s ease-in-out infinite; }
.sr-marca--agindo .sr-marca__brilho { animation: sr-varre 1.1s ease-in-out infinite; }
.sr-marca--agindo .sr-marca__lente--olho { animation: sr-lente 1.1s ease-in-out infinite; }

@keyframes sr-varre {
  0%, 100% { transform: translateX(-1.5px); }
  50%      { transform: translateX(1.5px); }
}

@keyframes sr-respira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

@keyframes sr-lente {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-marca,
  .sr-marca * { animation: none !important; }
}

.srs-enviar {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  flex: none;
  padding: 11px var(--e5) 11px calc(var(--e5) + 18px);
  border: 0;
  background: var(--marca-tinta);
  color: var(--marca-amarelo);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
  font: inherit;
  font-size: var(--t-apoio);
  font-weight: var(--peso-negro);
  cursor: pointer;
  transition: filter var(--transicao);
}

.srs-enviar:hover:not(:disabled) { filter: brightness(1.4); }
.srs-enviar:disabled { opacity: .55; cursor: default; }
.srs-enviar:focus-visible { outline: none; box-shadow: var(--foco); }

.srs-enviar__seta { transition: transform var(--transicao); }
.srs-enviar:hover:not(:disabled) .srs-enviar__seta { transform: translateX(3px); }
.srs-enviar--ocupado .srs-enviar__seta { opacity: .35; }

.srs-enviar .sr-marca__tinta { stroke: var(--marca-amarelo); }
.srs-enviar .sr-marca__sombra { stroke: transparent; }
.srs-enviar .sr-marca__pupila { fill: var(--marca-amarelo); }
.srs-enviar .sr-marca__brilho { fill: var(--marca-tinta); }

.chat__entrada--trocando::placeholder { opacity: 0; }
.chat__entrada::placeholder { transition: opacity .18s ease; }

.srs-vazio__atalhos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: var(--e3);
}

.srs-atalho {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-pilula);
  background: var(--sup-cartao);
  color: var(--tinta-2);
  font: inherit;
  font-size: var(--t-meta);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao),
              transform var(--transicao);
}

.srs-atalho:hover {
  border-color: var(--marca-tinta);
  color: var(--tinta-1);
  transform: translateX(2px);
}

.srs-atalho svg { flex: none; color: var(--tinta-3); order: 2; }
.srs-atalho:hover svg { color: var(--marca-azul); }

.chat:has(.srs-vazio:not([hidden])) .chat__fio { min-height: 0; }

.srs-fio__msg.fio__msg--usuario {
  align-self: flex-end;
  border-bottom-left-radius: var(--raio-medio);
  border-bottom-right-radius: 4px;
}

.srs-fio__msg.fio__msg--bot {
  align-self: flex-start;
  border-bottom-right-radius: var(--raio-medio);
  border-bottom-left-radius: 4px;
}

.srs-fio__msg.fio__msg--usuario .fio__quando { text-align: right; }
.srs-fio__msg.fio__msg--bot .fio__quando { text-align: left; }

.fio__texto strong { font-weight: var(--peso-negro); }

.fio__texto code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--sup-afundada);
  font-family: var(--fonte-mono, ui-monospace, monospace);
  font-size: .92em;
}

.srs-hist {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-height: min(58vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--e2);
}

.srs-hist__topo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.srs-hist__lista { display: flex; flex-direction: column; gap: var(--e2); }

.srs-hist__vazio { font-size: var(--t-meta); color: var(--tinta-3); margin: 0; }

.srs-hist__dia {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: var(--e3) var(--e4);
  border: 2px solid var(--marca-tinta);
  border-radius: var(--raio-medio);
  background: var(--sup-cartao);
  box-shadow: 4px 4px 0 var(--sup-afundada);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.srs-hist__dia:hover {
  box-shadow: 4px 4px 0 var(--marca-amarelo);
  transform: translate(-1px, -1px);
}

.srs-hist__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }

.srs-hist__data {
  font-size: var(--t-apoio);
  font-weight: var(--peso-brutal);
  color: var(--tinta-1);
}

.srs-hist__seta { color: var(--tinta-3); flex: none; }
.srs-hist__dia:hover .srs-hist__seta { color: var(--marca-azul); }

.srs-hist__titulo {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.srs-hist__selos { display: flex; flex-wrap: wrap; gap: 4px; }

.srs-hist__selo {
  padding: 2px 7px;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
  font-size: var(--t-etiqueta);
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.srs-hist__selo--feito {
  background: color-mix(in srgb, var(--sem-bom) 18%, transparent);
  color: var(--sem-bom);
  font-weight: var(--peso-forte);
}

.chat__alvo {
  animation: chat-realce 1.6s ease-out;
  border-radius: var(--raio-medio);
}

@keyframes chat-realce {
  0%, 40% { box-shadow: 0 0 0 3px var(--marca-amarelo); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}