/* A view preenche o host: quem define moldura e fundo e o painel que a recebe. */
.admin-chat-view {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.admin-chat-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-gap-sm);
  flex: 0 0 auto;
  min-width: 0;
  padding: var(--admin-panel-padding) var(--admin-panel-padding) 0;
}

/* Mesmo recuo lateral do separador da toolbar: nunca de ponta a ponta. */
.admin-chat-view-separator {
  flex: 0 0 auto;
  height: 1px;
  min-height: 1px;
  margin: var(--admin-panel-padding);
  background: var(--admin-border);
}

/* Acima do composer o espaco vertical ja vem do proprio composer: so o recuo
   lateral e repetido. */
.admin-chat-view-separator--composer {
  margin-top: 0;
  margin-bottom: 0;
}

/* Identidade em duas linhas: cliente na primeira, contexto opcional na segunda. */
.admin-chat-view-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.admin-chat-view-identity-main {
  display: flex;
  align-items: baseline;
  gap: var(--admin-gap-xs);
  max-width: 100%;
  min-width: 0;
}

.admin-chat-view-identity-context {
  display: flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  color: var(--admin-muted);
  font-size: var(--admin-fs-sm);
  font-weight: var(--admin-fw-medium);
  line-height: var(--admin-lh-tight);
}

.admin-chat-view-identity-context[hidden] {
  display: none;
}

/* Slot da esquerda: acompanha a altura das duas linhas da identidade. */
.admin-chat-view-leading {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.admin-chat-view-leading[hidden] {
  display: none;
}

.admin-chat-view-leading .admin-store-label-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
}

.admin-chat-view-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--admin-text);
  font-size: var(--admin-fs-lg);
  font-weight: var(--admin-fw-semibold);
  line-height: var(--admin-lh-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cliente com pedidos bloqueados: mesma identidade vermelha do admin usada no
   balao de falha de envio. */
.admin-chat-view-title--danger {
  color: #b10f0f;
}

/* Informacao secundaria ao lado do nome: menor e em cinza mais claro. */
.admin-chat-view-subtitle {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(96, 100, 108, 0.75);
  font-size: var(--admin-fs-sm);
  font-weight: var(--admin-fw-medium);
  line-height: var(--admin-lh-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-chat-view-subtitle:empty {
  display: none;
}

/* Copiar nome e telefone é opt-in do consumidor: em repouso os dois continuam
   com a aparência de texto de sempre e só o hover e o foco revelam a interação. */
.admin-chat-view-title--copyable,
.admin-chat-view-subtitle--copyable {
  cursor: pointer;
  text-decoration: none;
}

.admin-chat-view-title--copyable:hover,
.admin-chat-view-title--copyable:focus-visible,
.admin-chat-view-subtitle--copyable:hover,
.admin-chat-view-subtitle--copyable:focus-visible {
  text-decoration: underline;
}

.admin-chat-view-header-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--admin-gap-xs);
}

.admin-chat-view-messages {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--admin-gap-md);
  min-height: 0;
  padding: 0 var(--admin-panel-padding) var(--admin-panel-padding);
  overflow-y: auto;
}

/* Mensagem de texto para no limite de leitura; com midia de largura propria o
   balao encolhe ate a midia e a legenda quebra dentro dela. Os dois limites sao
   globais: a previa do template usa o mesmo balao fora da view. */
:root {
  --admin-chat-view-text-width: 320px;
  --admin-chat-view-media-width: 240px;
}

.admin-chat-view-message {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: min(var(--admin-chat-view-text-width), 100%);
}

/* Com reacao a pill fica quase toda fora do balao: a propria mensagem reserva a
   altura projetada mais uma folga, em vez de abrir espaco na conversa inteira.
   A reserva vale tambem enquanto uma remocao esta em voo. */
.admin-chat-view-message--reacted {
  padding-bottom: 18px;
}

/* Largura da midia mais o padding e a borda do proprio balao. */
.admin-chat-view-message--media {
  max-width: min(calc(var(--admin-chat-view-media-width) + 26px), 100%);
}

.admin-chat-view-message--incoming {
  align-self: flex-start;
  align-items: flex-start;
}

.admin-chat-view-message--outgoing {
  align-self: flex-end;
  align-items: flex-end;
}

.admin-chat-view-bubble {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-bg);
  color: var(--admin-text);
  font-size: var(--admin-fs-md);
  line-height: var(--admin-lh-normal);
  overflow-wrap: anywhere;
}

/* Canto de baixo do lado de quem falou fica quase reto: e o unico desenho que
   sugere o balao, sem seta nem triangulo. */
.admin-chat-view-message--incoming .admin-chat-view-bubble {
  border-bottom-left-radius: 4px;
}

.admin-chat-view-message--outgoing .admin-chat-view-bubble {
  border-bottom-right-radius: 4px;
}

.admin-chat-view-text {
  white-space: pre-wrap;
}

/* Formatação do WhatsApp: citação, listas e código dentro do próprio balão. */
.admin-chat-view-blockquote {
  margin: 0;
  padding: 2px 0 2px 8px;
  border-left: 3px solid var(--admin-border);
  color: var(--admin-muted);
}

.admin-chat-view-list {
  margin: 0;
  padding-left: 18px;
}

.admin-chat-view-code {
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(55, 53, 47, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--admin-fs-sm);
}

.admin-chat-view-code-block {
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--admin-radius-sm);
  background: rgba(55, 53, 47, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--admin-fs-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Mensagem citada: bloco recuado e discreto, sempre menor que a mensagem atual. */
.admin-chat-view-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 8px;
  border-left: 3px solid var(--admin-accent-weak-border);
  border-radius: var(--admin-radius-sm);
  background: rgba(55, 53, 47, 0.05);
}

.admin-chat-view-reply-thumb {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #000;
  object-fit: cover;
}

.admin-chat-view-reply-body {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  color: var(--admin-muted);
  font-size: var(--admin-fs-sm);
  line-height: var(--admin-lh-normal);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-chat-view-media {
  display: block;
  max-width: 100%;
  min-width: 0;
}

/* Imagem e video no balao sao gatilhos do visualizador global: a miniatura
   continua no balao e o conteudo grande abre no modal do Admin. */
.admin-chat-view-media--image,
.admin-chat-view-media--video {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.admin-chat-view-media--video {
  position: relative;
  display: block;
  width: var(--admin-chat-view-media-width);
  max-width: 100%;
}

/* Midia com largura propria, menor que a bolha de texto, como nos mensageiros. */
.admin-chat-view-media-image,
.admin-chat-view-media-video-preview {
  display: block;
  width: var(--admin-chat-view-media-width);
  max-width: 100%;
  border-radius: var(--admin-radius-sm);
}

.admin-chat-view-media-image {
  max-height: 320px;
  object-fit: cover;
}

/* Altura minima evita a faixa achatada de videos muito panoramicos. */
.admin-chat-view-media-video-preview {
  min-height: 160px;
  max-height: 320px;
  background: #000;
  object-fit: contain;
  pointer-events: none;
}

/* Play central da previa: e ele que anuncia o video sem montar player nenhum. */
.admin-chat-view-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.55);
  color: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Audio no balao: o player global assume a largura da midia. */
/* Audio: o player e o proprio balao. O desenho da bolha continua no balao e o
   player perde a moldura propria, sem componente dentro de componente. O
   seletor inclui o balao para vencer o estilo padrao do player global. */
.admin-chat-view-bubble .admin-chat-view-media--audio {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
}

.admin-chat-view-message--audio .admin-chat-view-bubble {
  display: block;
  width: 100%;
}

/* Transcricao sempre visivel, integrada ao player: sem hover, sem botao, sem
   corte por numero de linhas. */
/* Separador horizontal e folga dos dois lados: os controles e a transcricao
   ficam visualmente separados dentro do mesmo player. */
.admin-chat-view-audio-transcription {
  margin: 4px 0 0;
  padding: 12px 0 4px;
  border-top: 1px solid var(--admin-border);
  color: var(--admin-muted);
  font-size: var(--admin-fs-sm);
  line-height: var(--admin-lh-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Documento: cartao com nome, formato e a acao de abrir em nova aba. */
.admin-chat-view-media--file {
  display: grid;
  gap: 2px;
  width: var(--admin-chat-view-media-width);
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: #fff;
  color: var(--admin-text);
  text-decoration: none;
}

.admin-chat-view-media--file:hover {
  border-color: rgba(55, 53, 47, 0.2);
}

.admin-chat-view-media-name {
  overflow: hidden;
  font-size: var(--admin-fs-sm);
  font-weight: var(--admin-fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-chat-view-media-meta {
  color: var(--admin-muted);
  font-size: var(--admin-fs-xs);
  font-weight: var(--admin-fw-medium);
  line-height: var(--admin-lh-tight);
}

/* Figurinha: o WebP recebido e exibido como veio, com transparencia e animacao
   preservadas. Nada de cartao, moldura ou recorte por cima da imagem. */
.admin-chat-view-media--sticker {
  width: 140px;
  max-width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
}

/* O balao da figurinha some: sobra a propria figurinha, com o horario e o
   status da mensagem no lugar de sempre. */
.admin-chat-view-message--sticker .admin-chat-view-bubble {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-chat-view-media-missing {
  color: var(--admin-muted);
  font-size: var(--admin-fs-sm);
  font-style: italic;
}

.admin-chat-view-media-missing-link {
  color: var(--admin-info);
  font-style: normal;
  font-weight: var(--admin-fw-medium);
}

/* A midia acompanha o lado da mensagem, como o restante da bolha. */
.admin-chat-view-message--outgoing .admin-chat-view-media,
.admin-chat-view-message--outgoing .admin-chat-view-media-missing {
  justify-self: end;
}

/* Botoes do template: registro do que o cliente recebeu, so o de link e ativo.
   Botao curto divide a linha; sem espaco, ele desce inteiro, sem corte. */
.admin-chat-view-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--admin-border);
}

/* Os botoes dividem a largura inteira da linha e nao sao clicaveis no admin. */
.admin-chat-view-button {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: #fff;
  color: var(--admin-muted);
  font-size: var(--admin-fs-sm);
  font-weight: var(--admin-fw-medium);
  line-height: var(--admin-lh-tight);
  text-align: center;
  cursor: not-allowed;
  user-select: none;
}

.admin-chat-view-message--outgoing .admin-chat-view-bubble {
  border-color: var(--admin-accent-weak-border);
  background: var(--admin-accent-weak);
}

/* Falha no envio: o balao inteiro assume a identidade vermelha do admin. */
.admin-chat-view-message--outgoing.admin-chat-view-message--failed .admin-chat-view-bubble {
  border-color: rgba(237, 21, 21, 0.25);
  background: rgba(237, 21, 21, 0.08);
  color: #b10f0f;
}

/* Terceira familia da timeline: container discreto e centralizado, com largura
   do proprio conteudo. Ele nao segue o limite do balao de mensagem, porque a
   identificacao da entidade e as tags precisam caber inteiras; o teto e a
   propria coluna. O desenho simetrico e o texto menor o separam do incoming e
   do outgoing, que tem um canto reto e cor de acento. A altura e a de uma unica
   linha: o contexto secundario vive no hover da acao de informacoes. */
.admin-chat-view-event {
  display: flex;
  align-self: center;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  padding: 3px var(--admin-gap-sm);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg);
  text-align: center;
}

/* A linha do evento e rigida: nunca quebra em uma segunda e nunca rola na
   horizontal. O aperto sai do texto variavel, nunca da entidade, das tags, da
   seta, do estado ou da acao de informacoes. */
.admin-chat-view-event-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  gap: var(--admin-gap-xs);
  color: var(--admin-text);
  font-size: var(--admin-fs-sm);
  line-height: var(--admin-lh-tight);
}

.admin-chat-view-event-headline > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Unico trecho encolhivel: o titulo da automacao. Ele corta com reticencias
   para entidade, numero, tags, seta, estado e acao continuarem inteiros. */
.admin-chat-view-event-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Identificacao da entidade nunca e cortada: ela nao encolhe nem trunca. */
.admin-chat-view-event-entity,
.admin-chat-view-event-title {
  font-weight: var(--admin-fw-medium);
}

/* A seta so orienta a leitura entre as duas tags e o separador so respira entre
   os trechos: nenhum dos dois compete com as tags. */
.admin-chat-view-event-arrow,
.admin-chat-view-event-separator,
.admin-chat-view-event-state {
  color: var(--admin-muted);
}

/* Acao de informacoes: ultimo item da linha, discreta e sem alterar a altura.
   Dentro do balao cinza ela e apenas o icone: nenhuma caixa propria de botao
   compete com o container do evento. A area de alcance continua a do botao. */
.admin-chat-view-event-info.admin-icon-button {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--admin-muted);
}

/* Hover, clique e foco mudam so a cor do icone: nenhum fundo aparece. */
.admin-chat-view-event-info.admin-icon-button:hover,
.admin-chat-view-event-info.admin-icon-button:active,
.admin-chat-view-event-info.admin-icon-button:focus-visible {
  background: transparent;
  box-shadow: none;
  color: var(--admin-text);
}

.admin-chat-view-event-info.admin-icon-button .admin-icon {
  width: 12px;
  height: 12px;
}

/* Alternar eventos e acao secundaria: desligada ela fica apagada, sem sumir. */
.admin-chat-view-events-toggle:not(.is-active) {
  color: var(--admin-muted);
  opacity: 0.6;
}

/* Data e indicador de entrega ficam lado a lado, fora do balao. Os dois usam
   caixa justa para o icone centralizar no mesmo eixo do texto. */
/* Horario e indicador ficam dentro do proprio balao, encostados na regiao
   inferior direita, como nos aplicativos de mensagem. Como sao o ultimo bloco
   do conteudo, nunca sobrepoem texto curto nem cobrem midia. */
.admin-chat-view-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 4px;
  line-height: 1;
}

.admin-chat-view-timestamp {
  color: var(--admin-muted);
  font-size: var(--admin-fs-xs);
  line-height: 1;
}

.admin-chat-view-message-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--admin-muted);
  line-height: 1;
}

.admin-chat-view-message-status .admin-icon {
  display: block;
}

/* Reenvio a direita do aviso: o botao acompanha a altura da linha da data. */
.admin-chat-view-message-retry.admin-icon-button {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex: 0 0 18px;
  border-radius: 6px;
}

.admin-chat-view-message-retry.admin-icon-button .admin-icon {
  width: 12px;
  height: 12px;
}

.admin-chat-view-message-status--read {
  color: var(--admin-accent);
}

.admin-chat-view-message-status--failed {
  color: #d1332e;
}

/* Coluna única de ações do balão: Traduzir em cima, Reagir embaixo, ancorada na
   borda real do balão (não na do contêiner da mensagem, que pode ser mais largo
   que o texto). A posição de cada ação vem só das ações que existem: nada é
   reservado para a que faltar. Incoming abre à direita, outgoing à esquerda. */
.admin-chat-view-message-actions {
  position: absolute;
  /* A primeira ação disponível nasce no mesmo eixo do topo do balão. */
  top: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.admin-chat-view-message--incoming .admin-chat-view-message-actions {
  left: 100%;
  margin-left: 6px;
}

/* Outgoing tem o balao a direita: so o lado da coluna muda, a ordem vertical
   continua a mesma, sem nenhum botao posicionado por conta propria. */
.admin-chat-view-message--outgoing .admin-chat-view-message-actions {
  right: 100%;
  margin-right: 6px;
}

/* Tradução: ação pequena fora do balão, só aparece no hover da mensagem em
   telas com mouse. */
.admin-chat-view-message-translate.admin-icon-button {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border-radius: 8px;
  /* Caixa interna de 20px: icone e spinner sobram numeros pares dos dois lados
     e ficam no centro exato, sem meio pixel. */
  display: grid;
  place-items: center;
  line-height: 0;
  opacity: 0;
  transition: opacity 120ms ease;
}

.admin-chat-view-message-translate.admin-icon-button .admin-icon,
.admin-chat-view-message-translate-spinner {
  grid-area: 1 / 1;
}

.admin-chat-view-message-translate.admin-icon-button .admin-icon {
  width: 14px;
  height: 14px;
}

/* Durante a tradução o ícone some e só o spinner ocupa a caixa. */
.admin-chat-view-message-translate-spinner {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(96, 100, 108, 0.25);
  border-top-color: var(--admin-text);
  animation: admin-chat-view-translate-spin 720ms linear infinite;
}

.admin-chat-view-message-translate--busy .admin-icon {
  display: none;
}

.admin-chat-view-message-translate--busy .admin-chat-view-message-translate-spinner {
  display: block;
}

/* Outgoing usa a identidade laranja global do Admin, no ícone e no spinner. As
   duas ações da faixa recebem o mesmo tratamento: nenhuma delas é secundária. */
.admin-chat-view-message--outgoing .admin-chat-view-message-react.admin-icon-button,
.admin-chat-view-message--outgoing .admin-chat-view-message-translate.admin-icon-button {
  border-color: var(--admin-accent-weak-border);
  background: var(--admin-accent-weak);
  color: var(--admin-accent);
}

.admin-chat-view-message--outgoing .admin-chat-view-message-react.admin-icon-button:hover,
.admin-chat-view-message--outgoing .admin-chat-view-message-translate.admin-icon-button:hover {
  background: var(--admin-accent-weak);
  color: var(--admin-accent-hover);
}

.admin-chat-view-message--outgoing .admin-chat-view-message-translate-spinner {
  border-color: var(--admin-accent-weak-border);
  border-top-color: var(--admin-accent);
}

@keyframes admin-chat-view-translate-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-chat-view-message-translate-spinner {
    animation-duration: 2400ms;
  }
}

/* Só em telas com mouse: sem hover real o botão nem existe. */
@media (hover: hover) {
  .admin-chat-view-message:hover .admin-chat-view-message-translate.admin-icon-button,
  .admin-chat-view-message-translate.admin-icon-button.admin-chat-view-message-translate--busy {
    opacity: 1;
  }
}

@media (hover: none) {
  .admin-chat-view-message-actions {
    display: none;
  }
}

/* Reação: ornamento ancorado ao canto inferior direito do balão, com a maior
   parte projetada para fora dele. Fica fora do fluxo do conteúdo, então não
   reserva altura nem largura e não empurra texto, mídia ou figurinha; o pouco
   que sobra por dentro cai no recuo do balão, nunca sobre o horário ou o
   indicador de entrega. Cliente e loja continuam distinguíveis quando os dois
   reagem. O espaço que a projeção pede vem do modificador da mensagem. */
.admin-chat-view-reactions {
  position: absolute;
  right: 8px;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  transform: translateY(72%);
}

.admin-chat-view-reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  /* A cor vem de quem reagiu, no modificador do lado. */
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--admin-text);
  font-family: inherit;
  font-size: var(--admin-fs-sm);
  line-height: 1;
}

/* A cor da pill é a de quem reagiu, nunca a da direção da mensagem: o cliente
   repete a identidade do balão incoming e a loja a do balão outgoing. */
.admin-chat-view-reaction--customer {
  border-color: var(--admin-border);
  background: var(--admin-bg);
}

/* O laranja do outgoing é translúcido e a pill fica quase toda fora do balão:
   sobre uma base opaca ela mostra exatamente a mesma cor em qualquer fundo, sem
   somar o do balão nem parecer vazada. */
.admin-chat-view-reaction--business {
  border-color: var(--admin-accent-weak-border);
  background-color: #fff;
  background-image: linear-gradient(var(--admin-accent-weak), var(--admin-accent-weak));
}

/* Só a pill da loja é clicável, e apenas quando o contrato permite remover. */
.admin-chat-view-reaction--removable {
  cursor: pointer;
}

.admin-chat-view-reaction--removable:disabled {
  cursor: progress;
}

/* Popover de remoção ancorado na pill: quem o posiciona, mantém na viewport e
   coloca acima dos painéis é o painel global do Admin, porque dentro da lista de
   mensagens qualquer overflow o recortaria. Aqui só o tamanho é ajustado: é um
   menu de uma linha, não uma lista. */
.admin-chat-view-reaction-menu.admin-dropdown-panel {
  --admin-dropdown-min-width: 0;
  --admin-dropdown-padding: 4px;
}

.admin-chat-view-reaction-remove {
  min-height: 28px;
  white-space: nowrap;
}

/* Intenção da loja ainda não confirmada pelo backend: borda tracejada e um
   apagado mínimo, sem spinner, sem texto técnico e sem linha nova na conversa. A
   cor sólida do lado que reagiu continua inteira, e a reação do cliente, ao
   lado, fica intacta. */
.admin-chat-view-reaction--pending {
  border-style: dashed;
  opacity: 0.9;
}

/* Ação de reagir: mesma caixa da tradução, ao lado dela na faixa de ações. */
.admin-chat-view-message-react.admin-icon-button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border-radius: 8px;
  line-height: 0;
  opacity: 0;
  transition: opacity 120ms ease;
}

.admin-chat-view-message-react.admin-icon-button .admin-icon {
  width: 14px;
  height: 14px;
}

.admin-chat-view-message-react--busy {
  opacity: 1;
  cursor: progress;
}

/* Popover compacto: só os emojis liberados pelo backend, nunca um seletor completo. */
.admin-chat-view-reaction-picker {
  position: absolute;
  /* Ao lado da coluna de ações, alinhado ao topo dela: o popover nunca escorrega
     para fora da lista nem muda de lugar conforme as ações presentes. */
  top: 0;
  z-index: var(--admin-z-page-popover);
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  padding: 4px 6px;
  border: 1px solid var(--admin-border-soft);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--admin-shadow);
}

.admin-chat-view-message--incoming .admin-chat-view-reaction-picker {
  left: 100%;
  margin-left: 34px;
}

.admin-chat-view-message--outgoing .admin-chat-view-reaction-picker {
  right: 100%;
  margin-right: 34px;
}

.admin-chat-view-reaction-picker[hidden] {
  display: none !important;
}

.admin-chat-view-reaction-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: var(--admin-fs-md);
  line-height: 1;
  cursor: pointer;
}

.admin-chat-view-reaction-option:hover {
  background: rgba(55, 53, 47, 0.06);
}

.admin-chat-view-reaction-option--current {
  background: var(--admin-accent-weak);
}

.admin-chat-view-reaction-option:disabled {
  cursor: default;
  opacity: 0.5;
}

/* Popover aberto, foco do teclado e envio em curso mantêm a ação visível. */
.admin-chat-view-message--picking .admin-chat-view-message-react.admin-icon-button,
.admin-chat-view-message-react.admin-icon-button:focus-visible,
.admin-chat-view-message-react.admin-icon-button.admin-chat-view-message-react--busy {
  opacity: 1;
}

@media (hover: hover) {
  .admin-chat-view-message:hover .admin-chat-view-message-react.admin-icon-button {
    opacity: 1;
  }
}

.admin-chat-view-composer {
  flex: 0 0 auto;
  padding: var(--admin-panel-padding);
}

/* Moldura unica do campo com dois blocos empilhados: texto e linha de acoes. */
.admin-chat-view-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--admin-border-soft);
  border-radius: var(--admin-radius-sm);
  background: #fff;
  transition:
    background 140ms ease,
    border-color 140ms ease;
}

.admin-chat-view-field:hover {
  border-color: rgba(55, 53, 47, 0.14);
}

.admin-chat-view-field:focus-within {
  border-color: rgba(55, 53, 47, 0.2);
}

/* A rolagem pertence so a area de texto: ela termina antes dos controles. */
.admin-chat-view-input-area {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Geracao da IA: o proprio texto pulsa em um laranja suave, sem faixa, sem
   camada espelhada e sem mexer em posicao, largura ou metricas das letras. */
.admin-chat-view-field--generating .admin-chat-view-input {
  cursor: progress;
  animation: admin-chat-view-ai-pulse 1600ms ease-in-out infinite;
}

@keyframes admin-chat-view-ai-pulse {
  0%,
  100% {
    color: var(--admin-text);
    opacity: 1;
  }

  50% {
    color: var(--admin-ai-ink);
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-chat-view-field--generating .admin-chat-view-input {
    animation: none;
    color: var(--admin-ai-ink);
  }
}

.admin-chat-view-input {
  display: block;
  width: 100%;
  min-width: 0;
  /* Tres linhas uteis no inicio; passado o teto o proprio campo rola. */
  min-height: 78px;
  max-height: 200px;
  padding: 8px 10px;
  overflow-y: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--admin-text);
  font-family: inherit;
  font-size: var(--admin-fs-md);
  line-height: var(--admin-lh-normal);
  resize: none;
}

.admin-chat-view-input:focus {
  outline: none;
}

.admin-chat-view-input::placeholder {
  color: rgba(96, 100, 108, 0.9);
}

/* Campo bloqueado pela janela de 24 horas: mesmo cursor dos botões desabilitados. */
.admin-chat-view-input:disabled {
  cursor: not-allowed;
}

/* Ferramentas à esquerda; ação de IA e envio sempre juntos à direita. */
.admin-chat-view-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 8px 8px;
}

/* Atalho do envio: indicacao discreta ao lado do rotulo. */
.admin-chat-view-send-shortcut {
  opacity: 0.75;
}

.admin-chat-view-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}

.admin-chat-view-file-input {
  display: none;
}

/* Janela de atendimento encerrada: o próprio campo vira vermelho, com o aviso
   no lugar do texto e o atalho de continuar no lugar do envio. */
.admin-chat-view-field--closed {
  border-color: rgba(209, 51, 46, 0.35);
  background: rgba(209, 51, 46, 0.08);
}

.admin-chat-view-notice-text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Mesma altura minima do textarea: trocar de campo para aviso nao encolhe o
     composer, e o texto comeca no topo como no textarea. */
  min-height: 78px;
  margin: 0;
  padding: 8px 10px;
  /* Mesma tipografia do textarea: trocar de campo para aviso nao muda a escala. */
  font-size: var(--admin-fs-md);
  line-height: var(--admin-lh-normal);
  color: #a3241f;
}

.admin-chat-view-notice-action {
  flex: 0 0 auto;
}

/* Rascunho da IA: fica acima do campo até ser enviado ou descartado, com a
   identidade suave de IA e sem nada além da resposta. */
/* Resposta da IA acima do campo: so o texto e o X de descartar. O envio e o
   refinamento passaram a viver no proprio botao do composer. */
.admin-chat-view-ai-panel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.admin-chat-view-ai-panel[hidden] {
  display: none !important;
}

.admin-chat-view-ai-panel-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--admin-fs-sm);
  line-height: var(--admin-lh-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* X compacto no canto superior direito do painel. */
.admin-chat-view-ai-discard.admin-popup-x {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-color: var(--admin-ai-surface-border, rgba(180, 83, 10, 0.25));
  background: transparent;
  color: var(--admin-ai-ink);
  font-size: var(--admin-fs-lg);
}

/* Arquivos escolhidos ficam visíveis antes do envio. */
.admin-chat-view-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.admin-chat-view-attachments[hidden] {
  display: none !important;
}

.admin-chat-view-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: #fff;
  font-size: var(--admin-fs-xs);
}

/* Imagem se apresenta pela miniatura: o nome do arquivo sai da frente. */
.admin-chat-view-attachment--image {
  padding: 4px;
  border-radius: var(--admin-radius-sm);
}

.admin-chat-view-attachment-thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: calc(var(--admin-radius-sm) - 2px);
  object-fit: cover;
}

.admin-chat-view-attachment-name {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--admin-fw-medium);
}

.admin-chat-view-attachment-meta {
  color: var(--admin-muted);
  white-space: nowrap;
}

.admin-chat-view-attachment-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--admin-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.admin-chat-view-attachment-remove:hover:not(:disabled) {
  background: var(--admin-accent-weak);
  color: var(--admin-text);
}

/* Arrastar arquivos sobre a conversa mostra a área de soltura. */
.admin-chat-view {
  position: relative;
}

.admin-chat-view-drop-hint {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 2px dashed var(--admin-accent-weak-border);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-accent-weak);
  color: var(--admin-text);
  font-size: var(--admin-fs-md);
  font-weight: var(--admin-fw-semibold);
  pointer-events: none;
}

.admin-chat-view.is-dragging .admin-chat-view-drop-hint {
  display: flex;
}

/* Prévia do template: o mesmo balão do histórico, reutilizado na área Templates. */
.admin-chat-view-template-preview {
  align-self: flex-start;
  align-items: stretch;
  max-width: 420px;
  width: 100%;
}