/* app/assets/stylesheets/suporte.css
   Tela do atendente para o chat de suporte in-app (design 2026-09-11,
   secao 6). So consome token semantico (--bc-*), mesma regra do resto do
   projeto -- nao inventa cor nova, reusa os mesmos tokens de bolha que
   conversas.css ja usa para a inbox de WhatsApp.

   Layout mais simples que conversas.css de proposito: sem viewport fixa
   nem Turbo Frame de pagina unica nesta primeira versao -- pagina normal,
   que rola com o documento. Pode ganhar o tratamento de conversas.css
   depois, se a diferenca de UX incomodar no uso real. */

/* ACHADO testando com o Gustavo (12/09): elementos aqui dentro que
   alternam via `.hidden` no Stimulus (lixeira/timer da gravacao) tambem
   tem `display: flex` na propria classe -- MESMA especificidade do
   `[hidden] { display: none }` do proprio navegador, e author style
   depois de user-agent style vence. Sem este reset, `hidden = true`
   virava um no-op silencioso e tudo aparecia junto (o "+" e a lixeira, o
   campo e o cronometro, ao mesmo tempo). Escopado a `.suporte` pra nao
   afetar nenhuma outra tela. */
.suporte [hidden] { display: none !important; }

.suporte {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

.suporte__coluna1 {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  padding: 1rem;
}

.suporte__filas {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.suporte__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .65rem;
  border-radius: calc(var(--bc-raio) - 6px);
  color: var(--bc-ink-mut);
  text-decoration: none;
  font-size: .9rem;
}

.suporte__fila:hover { color: var(--bc-ink); background: var(--bc-surface-2); }

.suporte__fila--atual {
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  font-weight: 700;
}

.suporte__fila--atual:hover { color: var(--bc-primary-ink); background: var(--bc-primary); }

/* SEM `opacity` (achado de UI/UX, 10/11/2026): o .8 misturava o numero com o fundo e o derrubava para 3,5:1 na aba atual e 4,2:1 nas outras
   (claro). A hierarquia ja vem do peso da aba atual; o numero fica na cor cheia da aba (>= 4,5:1). */
.suporte__fila-contagem {
  font-variant-numeric: tabular-nums;
}

.suporte__fila-legenda {
  margin: 0 0 .5rem;
  color: var(--bc-ink-mut);
  font-size: .8rem;
}

/* O aviso "Nenhum ticket nesta fila" NAO fica embaixo de um ticket novo (achado de UI/UX, 09/11/2026): o ticket que chega ao vivo entra na
   lista (`prepend`) e a mensagem de lista vazia continuava la, embaixo dele. Basta esconde-la quando ha ticket na lista. */
.suporte__lista:has(.suporte__ticket) .painel__vazio { display: none; }

.suporte__lista {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 65vh;
  overflow-y: auto;
}

.suporte__ticket {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .75rem;
  border: 1px solid var(--bc-line);
  border-radius: calc(var(--bc-raio) - 4px);
  text-decoration: none;
  color: var(--bc-ink);
}

.suporte__ticket:hover { background: var(--bc-surface-2); }

.suporte__ticket--atual {
  border-color: var(--bc-primary);
  background: var(--bc-surface-2);
}

.suporte__ticket-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.suporte__ticket-cliente { font-weight: 700; margin-right: auto; }

/* Hora da ultima atividade, previa da ultima mensagem e selo "Cliente aguardando" (A5, 09/11): o que a equipe precisa
   saber sem abrir o ticket. O selo usa a TINTA do cartao com fundo ambar translucido e a borda lateral do cartao --
   ambar sozinho como cor de texto media pouco no claro. */
.suporte__ticket-hora {
  color: var(--bc-ink-mut);
  font-size: .75rem;
}

.suporte__ticket-previa {
  color: var(--bc-ink-mut);
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suporte__ticket-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.suporte__ticket-aguardando {
  padding: .1rem .5rem;
  color: var(--bc-ink);
  background: color-mix(in srgb, var(--bc-warn) 26%, transparent);
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  white-space: nowrap;
}

.suporte__ticket--aguardando { border-left: 3px solid var(--bc-warn); }

.suporte__ticket-assunto {
  color: var(--bc-ink-soft);
  font-size: .9rem;
}

.suporte__ticket-dono {
  font-size: .78rem;
  color: var(--bc-ink-mut);
}

.suporte__ticket-dono--vazio { color: var(--bc-warn); font-weight: 700; }

.suporte__ticket-estado {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 999px;
}

.suporte__ticket-estado--aberto { color: var(--bc-ok); background: color-mix(in srgb, var(--bc-ok) 18%, transparent); }
.suporte__ticket-estado--fechado { color: var(--bc-ink-mut); background: var(--bc-surface-2); }

/* ── coluna 2: ticket aberto ─────────────────────────────────────────── */

.suporte__vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  border: 1px dashed var(--bc-line);
  border-radius: var(--bc-raio);
  color: var(--bc-ink-mut);
}

.suporte__ticket-aberto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  padding: 1.25rem;
}

.suporte__ticket-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bc-line-soft);
}

.suporte__ticket-titulo { margin: 0 0 .25rem; }

.suporte__ticket-subtitulo {
  margin: 0;
  color: var(--bc-ink-mut);
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.suporte__fechar {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--bc-line);
  border-radius: calc(var(--bc-raio) - 4px);
  padding: .5rem .9rem;
  color: var(--bc-danger);
  cursor: pointer;
}

/* O aviso de leitura do ticket de OUTRA pessoa (26/10, grupo de plantao), no lugar do
   composer: as classes `.conversa__leitura*` da inbox (conversas.css), a MESMA cara do
   aviso da conversa do colega no WhatsApp. Aqui ele mora DENTRO do cartao do ticket, que ja
   tem borda, fundo e respiro, entao perde a faixa com borda de cima e a margem que a inbox
   usa para se separar do composer -- o cartao ambar e o mesmo. */
.suporte__ticket-aberto .conversa__leitura {
  background: none;
  border-top: 0;
}

.suporte__ticket-aberto .conversa__leitura-corpo { margin: 0; }

.suporte__mensagens {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: .25rem;
}

/* Mesmos tokens de bolha da inbox de WhatsApp (--bc-bolha-*) -- a
   linguagem visual e uma so, mesmo em modelo/tabela diferentes. */
.suporte__bolha {
  max-width: 68%;
  padding: .6rem .8rem;
  border-radius: calc(var(--bc-raio) - 2px);
}

.suporte__bolha--entrada {
  align-self: flex-start;
  background: var(--bc-bolha-eles);
  border: 1px solid var(--bc-line);
}

.suporte__bolha--saida {
  align-self: flex-end;
  background: var(--bc-bolha-nos);
  /* `--bc-ink`, NAO `--bc-primary-ink`: `--bc-bolha-nos` e um tom
     SUAVE em ambos os temas (z_refinamento.css redefine essa variavel
     pra um tingimento leve, derivado da cor da conta -- nao mais o verde
     solido de marca_tokens.css), e `--bc-primary-ink` foi calibrado pro
     OUTRO caso (texto sobre botao solido) -- ficava ilegivel aqui, achado
     testando com o Gustavo (12/09). Mesmo ajuste que
     `.painel .conversa__bolha--saida` (WhatsApp) ja tem em z_refinamento.css. */
  color: var(--bc-ink);
  border: 1px solid color-mix(in srgb, var(--bc-primary) 20%, var(--bc-line));
}

.suporte__bolha--nota {
  align-self: center;
  max-width: 85%;
  color: var(--bc-ink-mut);
  background: var(--bc-bolha-nota);
  border: 1px dashed var(--bc-line);
  font-size: .82rem;
  text-align: center;
}

.suporte__bolha-rotulo {
  margin: 0 0 .25rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  opacity: .8;
}

.suporte__bolha-corpo {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.suporte__bolha-hora {
  display: block;
  margin-top: .25rem;
  font-size: .72rem;
  opacity: .7;
}

/* Na NOTA INTERNA o rotulo e a hora ficam na cor cheia (achado de UI/UX, 10/11/2026): o texto da nota ja e o cinza de apoio sobre o fundo
   ambar, e a opacity (.8 e .7) o levava a 3,8:1 e 3,1:1 no claro. Especificidade (0,2,0): vence as regras de base sem depender da ordem. */
.suporte__bolha--nota :is(.suporte__bolha-rotulo, .suporte__bolha-hora) { opacity: 1; }

.suporte__composer {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}

.suporte__composer textarea {
  flex: 1 1 auto;
  resize: vertical;
  border: 1px solid var(--bc-line);
  border-radius: calc(var(--bc-raio) - 4px);
  padding: .6rem .75rem;
  font-family: inherit;
  background: var(--bc-surface);
  color: var(--bc-ink);
}

/* Caixinha de nota interna -- visual proprio (nunca confundivel com a
   resposta ao cliente): mesmo tom ambar de --bc-bolha-nota/--bc-warn
   que a bolha de nota ja usa, envolvendo campo + botao num cartao so. */
.suporte__composer--nota {
  align-items: center;
  background: color-mix(in srgb, var(--bc-warn) 10%, var(--bc-surface));
  border: 1px solid color-mix(in srgb, var(--bc-warn) 45%, var(--bc-line));
  border-radius: calc(var(--bc-raio) - 4px);
  padding: .4rem .4rem .4rem .75rem;
}

.suporte__composer--nota textarea {
  border: none;
  background: transparent;
  padding: .35rem 0;
  color: var(--bc-ink);
}

.suporte__composer--nota textarea:focus { outline: none; }

.suporte__composer--nota input[type="submit"] {
  flex: 0 0 auto;
  background: var(--bc-warn);
  color: #3A2A08;
  border: none;
  border-radius: calc(var(--bc-raio) - 6px);
  padding: .55rem 1rem;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}

.suporte__composer--nota input[type="submit"]:hover {
  background: color-mix(in srgb, var(--bc-warn) 85%, black);
}

/* ── barra de resposta, estilo WhatsApp (pedido do Gustavo, 12/09) ─────
   "+"(anexo, o icone muda pra indicar o TIPO anexado) | campo | mic/enviar
   (o mesmo botao alterna conforme ha texto/midia ou nao) -- so a barra de
   RESPOSTA (--resposta) ganha esse tratamento; a de nota interna continua
   com o layout simples de sempre, mais abaixo. */
.suporte__composer--resposta {
  align-items: center;
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: 1.4rem;      /* pilula com uma linha; com varias, os cantos nao viram um oval */
  padding: .3rem;
}

.suporte__composer--resposta .suporte__composer-campo {
  flex: 1 1 auto;
  resize: none;
  border: none;
  background: transparent;
  padding: .55rem .25rem;
  font-family: inherit;
  color: var(--bc-ink);
  max-height: 6rem;
  /* Cresce com o texto (Shift+Enter): com a linha fixa o que passava da primeira linha ficava invisivel. O mesmo
     `field-sizing` do campo de resposta do WhatsApp (conversas.css); onde o navegador nao tem, fica uma linha e rola. */
  field-sizing: content;
}

.suporte__composer--resposta .suporte__composer-campo:focus { outline: none; }

/* O aviso quando o microfone falha (suporte_audio_controller.js): texto na tinta, com a borda de perigo -- vermelho puro sobre a
   superficie media pouco. Abaixo da pilula, fora dela. */
.suporte__composer-arquivo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .4rem 0 0;
  padding: .4rem .6rem;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  font-size: .85rem;
  overflow-wrap: anywhere;
}

.suporte__composer-arquivo-remover {
  flex: 0 0 auto;
  padding: .25rem .7rem;
  appearance: none;
  color: var(--bc-ink);
  background: transparent;
  border: 1px solid var(--bc-campo-borda);
  border-radius: 999px;
  font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer;
}

.suporte__composer-aviso {
  margin: .4rem 0 0;
  padding: .4rem .6rem;
  color: var(--bc-ink);
  background: color-mix(in srgb, var(--bc-danger) 10%, transparent);
  border-left: 3px solid var(--bc-danger);
  border-radius: 4px;
  font-size: .82rem;
}

/* Foco VISIVEL no composer (achado de UI/UX, 09/11/2026): o campo tem `outline: none` e a pilula/caixa nao acendia nada, entao quem
   navega por teclado nao via onde estava. O anel vai na PILULA, e so quando o foco esta no CAMPO (`:has(...:focus-visible)`) --
   `:focus-within` acenderia tambem com o foco nos botoes de dentro, que ja tem o proprio anel. */
.suporte__composer--resposta:has(.suporte__composer-campo:focus-visible),
.suporte__composer--nota:has(textarea:focus-visible) {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}

.suporte__composer-anexo {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--bc-ink-mut);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.suporte__composer-anexo:hover { background: var(--bc-surface); color: var(--bc-ink); }

.suporte__composer-cancelar {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
}

.suporte__composer-cancelar:hover { background: color-mix(in srgb, var(--bc-danger) 15%, transparent); }

/* Cronometro de gravacao -- ocupa o mesmo lugar do campo de texto
   enquanto grava (design 2026-09-12, pedido do Gustavo: "mostrar que ta
   gravando, igual o WhatsApp"). */
.suporte__composer-timer {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .25rem;
  font-variant-numeric: tabular-nums;
  color: var(--bc-ink);
}

.suporte__composer-ponto {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--bc-danger);
  animation: suporte-pulsar 1.2s ease-in-out infinite;
}

@keyframes suporte-pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

.suporte__composer-acao {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--bc-surface);
  color: var(--bc-ink);
  font-size: 1.1rem;
  cursor: pointer;
}

.suporte__composer-acao--enviar {
  background: var(--bc-primary);
  color: var(--bc-primary-ink);
}

.suporte__composer-svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Qual icone aparece e decidido AQUI, pela classe --enviar no botao (que e
   HTML e o Stimulus alterna sem problema) -- nao por `hidden` no <svg>, que
   nao e HTMLElement e nao obedece nem a propriedade nem, em todo motor, ao
   atributo. Mesmo esquema de painel__icone--sol/--lua. */
.suporte__composer-svg--enviar { display: none; }
.suporte__composer-acao--enviar .suporte__composer-svg--mic { display: none; }
.suporte__composer-acao--enviar .suporte__composer-svg--enviar { display: block; }

.suporte__composer-acao--gravando {
  background: var(--bc-danger);
  color: #fff;
}

.suporte__digitando {
  margin: -.5rem 0 0;
  font-size: .8rem;
  font-style: italic;
  color: var(--bc-ink-mut);
}

/* ── midia dentro da bolha (design 2026-09-11, secao 4.2) ────────────── */

.suporte__midia-imagem {
  max-width: 100%;
  border-radius: calc(var(--bc-raio) - 6px);
  display: block;
}

/* Foto que abre (22/10): mesmo desenho de `.conversa__midia-link`
   (conversas.css) -- area clicavel do tamanho da foto, lupa no cursor, sem
   mudar a miniatura. */
.suporte__midia-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  border-radius: calc(var(--bc-raio) - 6px);
  cursor: zoom-in;
}

/* Anel de foco a 2px, pelo mesmo motivo (e com o mesmo `.painel` na frente)
   de `.painel .conversa__midia-link:focus-visible` em conversas.css. */
.painel .suporte__midia-link:focus-visible {
  outline-offset: 2px;
}

.suporte__midia-audio, .suporte__midia-video { max-width: 100%; display: block; }

.suporte__midia-documento {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 1100px) {
  /* NA COLUNA UNICA o ticket aberto vem PRIMEIRO (achado de UI/UX, 09/11/2026): a lista (ate 65vh) vinha antes, e abrir um ticket parecia
     nao fazer nada -- o ticket estava la embaixo. A lista continua logo depois, para trocar de ticket. */
  .suporte__ticket-aberto { order: -1; }
  .suporte__coluna1 { order: 0; }
  .suporte__lista { max-height: 45vh; }

  /* 1100 e nao 900 (achado de UI/UX, 09/11/2026): a lateral do painel tem 276 px, entao entre 901 e ~1050 px de janela o ticket
     ficava com 225 a 300 px. 1100 e o mesmo ponto de quebra do caminho, das tabelas e dos graficos (z_vidro.css).
     minmax(0, ...) e nao 1fr: o minimo automatico da coluna (composer com botao nowrap, ~311 px)
     estourava a pagina abaixo de 372 px (achado de 23/10, ja existia) */
  .suporte { grid-template-columns: minmax(0, 1fr); }
}