/* ============================================================================
   v5-21st.css - v133 (18/09/2026)

   Os 4 componentes trazidos do 21st.dev, REESCRITOS em CSS puro.
   O LUCREI nao e React/Tailwind/TypeScript: nada de npm, nada de
   framer-motion, nada de /components/ui. Aqui e HTML+CSS+JS na paleta
   Atlantico + Menta do manual da marca.

     1. chat-bubble          -> balao com avatar, 3 pontinhos, acoes
     2. border-beam          -> a luz correndo na borda da caixa de escrita
     3. dialog (Origin UI)   -> o X do popup e o ritmo de cabecalho/rodape
     4. animated-state-icons -> enviar, copiar, ok e sino

   ESTA FOLHA ENTRA POR ULTIMO no escritorio.html - depois de
   v5-atendimento-popup.css e v5-escritorio-topo.css - porque ela AJUSTA o que
   aquelas ja pintaram. Tirar o <link> devolve o escritorio da v132 inteiro.

   Tudo aqui respeita prefers-reduced-motion: quem pediu menos movimento ve o
   mesmo desenho parado.
   ========================================================================== */

/* -- 1. BORDER BEAM --------------------------------------------------------
   O 21st entrega isso como pacote npm React. Aqui e um ::after com um
   conic-gradient girando, recortado so na espessura da borda por uma mascara
   (a area de dentro e "furada" com mask-composite). Zero dependencia.

   O angulo gira porque e uma propriedade registrada (@property) - sem ela o
   navegador nao sabe interpolar um <angle> e a borda fica parada, colorida,
   que e um fallback honesto.                                                */
@property --feixe-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.ds-feixe { position: relative; }
.ds-feixe::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;                      /* a espessura do feixe */
  background: conic-gradient(from var(--feixe-ang),
      transparent 0deg, transparent 262deg,
      rgba(var(--ds-menta-3-rgb), .35) 288deg,
      var(--ds-menta) 322deg,
      #7CC8FF 344deg,
      rgba(var(--ds-menta-3-rgb), .35) 356deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .5;
  transition: opacity .25s ease;
  animation: ds-feixe-gira 5s linear infinite;
}
/* escrevendo, o feixe acende: e o unico momento em que ele pede atencao */
.ds-feixe:focus-within::after { opacity: 1; animation-duration: 3s; }

@keyframes ds-feixe-gira { to { --feixe-ang: 360deg; } }

/* -- 2. CHAT BUBBLE --------------------------------------------------------
   A bolha em si ja existia (v5.css/.chat-message). O que o 21st traz e o
   AVATAR ao lado e as acoes por baixo. Por isso cada mensagem passou a vir
   embrulhada num .chat-linha - o alinhamento mudou de lugar: era do balao
   (align-self), agora e da linha.                                          */
body.v5-escritorio .chat-linha{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  animation: ds-bolha-entra .26s cubic-bezier(.2,.8,.3,1) both;
}
body.v5-escritorio .chat-linha.eu { flex-direction: row-reverse; }

/* o balao dentro da linha nao se alinha mais sozinho */
body.v5-escritorio .chat-linha > .chat-message{
  align-self: auto;
  max-width: calc(100% - 42px);
  margin: 0;
}

@keyframes ds-bolha-entra{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* o avatar: 32px, iniciais quando nao ha foto */
body.v5-escritorio .chat-face{
  flex: 0 0 32px;
  width: 32px; height: 32px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 800 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .3px;
  background: var(--ds-atlantico-3);
  color: var(--ds-menta-3);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  user-select: none;
}
body.v5-escritorio .chat-linha.eu .chat-face{
  background: var(--ds-menta-hover);
  color: var(--ds-branco);
  border-color: rgba(255,255,255,.22);
}
body.v5-escritorio .chat-face img{ width: 100%; height: 100%; object-fit: cover; }

/* no tema claro o avatar do funcionario acompanha a superficie clara */
body.v5-escritorio.tema-claro .chat-face,
body.v5-escritorio[data-tema="claro"] .chat-face{
  background: var(--ds-menta-tenue);
  color: var(--ds-menta-2);
  border-color: var(--ds-linha);
}

/* -- 2b. OS TRES PONTINHOS -------------------------------------------------
   Trocados pelo <MessageLoading> do 21st: em vez de piscar no lugar, as
   bolinhas SOBEM e descem, defasadas 0,1s, ciclo de 0,6s. E a diferenca entre
   "a tela travou" e "ele esta escrevendo".                                 */
body.v5-escritorio .chat-message.typing i{
  animation: ds-pontinho .6s infinite;
}
body.v5-escritorio .chat-message.typing i:nth-child(2){ animation-delay: .1s; }
body.v5-escritorio .chat-message.typing i:nth-child(3){ animation-delay: .2s; }

@keyframes ds-pontinho{
  0%   { transform: translateY(0);     opacity: .3; animation-timing-function: cubic-bezier(.33,.66,.66,1); }
  50%  { transform: translateY(-6px);  opacity:  1; animation-timing-function: cubic-bezier(.33,0,.66,.33); }
  100% { transform: translateY(0);     opacity: .3; }
}

/* -- 2c. AS ACOES DA BOLHA (copiar / tentar de novo) -----------------------
   Botao fantasma de 26px, como o ChatBubbleAction. So aparece de verdade
   quando o mouse passa pela mensagem - em telas de toque fica sempre visivel,
   porque ali nao existe "passar o mouse".                                   */
body.v5-escritorio .chat-acoes{
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; flex-wrap: wrap;
}
body.v5-escritorio .chat-copia{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ds-tinta-4);
  cursor: pointer; opacity: .55;
  transition: opacity .18s ease, background .18s ease, color .18s ease;
}
body.v5-escritorio .chat-message:hover .chat-copia,
body.v5-escritorio .chat-copia:focus-visible{ opacity: 1; }
body.v5-escritorio .chat-copia:hover{
  background: rgba(var(--ds-menta-3-rgb), .14);
  color: var(--ds-menta-3);
}
body.v5-escritorio .chat-copia:focus-visible{
  outline: 2px solid var(--ds-menta-3); outline-offset: 2px;
}
body.v5-escritorio .chat-copia svg{ width: 15px; height: 15px; display: block; }
@media (hover: none){
  body.v5-escritorio .chat-copia{ opacity: .9; }
}

/* -- 3. DIALOG (Origin UI) -------------------------------------------------
   O popup ja era um <dialog> de vidro com entrada em zoom (v5-atendimento-
   popup.css). Do Origin UI vem o X: quadrado de 28px com canto arredondado,
   a 60% de opacidade, inteiro no hover - em vez do "x" solto de texto.     */
body.v5-escritorio dialog.atd-painel .atd-fechar{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  padding: 0; line-height: 1;
  border: 0; border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: var(--ds-neutro-1);
  font-size: 17px;
  opacity: .6; cursor: pointer;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
body.v5-escritorio dialog.atd-painel .atd-fechar:hover{
  opacity: 1; background: rgba(255,255,255,.12);
}
body.v5-escritorio dialog.atd-painel .atd-fechar:active{ transform: scale(.94); }
body.v5-escritorio dialog.atd-painel .atd-fechar:focus-visible{
  opacity: 1; outline: 2px solid var(--ds-menta-3); outline-offset: 2px;
}

/* -- 4. ANIMATED STATE ICONS ----------------------------------------------
   Os 12 icones do 21st usam framer-motion. Dos 12, quatro tem onde encaixar
   aqui; os outros (coracao, volume, play/pause...) nao existem neste painel e
   ficaram de fora de proposito. Estes quatro sao keyframes CSS sobre SVG.   */

/* 4a. SEND - o aviaozinho voa ao clicar e volta do comeco */
.ds-ico-send{ overflow: visible; }
.ds-ico-send g,
.ds-ico-send path{ transition: none; }
.ds-voa .ds-ico-send > g,
.ds-voa.ds-ico-send > g{ animation: ds-voa .55s cubic-bezier(.32,.72,0,1) both; }
@keyframes ds-voa{
  0%   { transform: none;                                  opacity: 1; }
  55%  { transform: translate(14px,-14px) scale(.6);       opacity: 0; }
  56%  { transform: translate(-10px,10px) scale(.6);       opacity: 0; }
  100% { transform: none;                                  opacity: 1; }
}

/* 4b. COPIED - a prancheta vira check por 1,4 s e volta */
.ds-ico-copia .ds-linhas,
.ds-ico-copia .ds-check{ transition: opacity .18s ease; }
.ds-ico-copia .ds-check{ opacity: 0; }
.ds-copiado .ds-ico-copia .ds-linhas{ opacity: 0; }
.ds-copiado .ds-ico-copia .ds-check{
  opacity: 1;
  stroke-dasharray: 16; stroke-dashoffset: 16;
  animation: ds-risca .3s ease forwards;
}
@keyframes ds-risca{ to { stroke-dashoffset: 0; } }

/* 4c. SUCCESS - o circulo girando que vira check quando o envio conclui */
.ds-ico-ok .ds-giro{
  transform-origin: 20px 20px;
  animation: ds-gira 1s linear infinite;
}
.ds-ico-ok .ds-check{ opacity: 0; stroke-dasharray: 22; stroke-dashoffset: 22; }
.ds-pronto .ds-ico-ok .ds-giro{ animation: none; opacity: 0; }
.ds-pronto .ds-ico-ok .ds-check{
  opacity: 1; animation: ds-risca .4s .12s ease forwards;
}
@keyframes ds-gira{ to { transform: rotate(360deg); } }

/* 4d. NOTIFICATION - o sino balanca quando chega coisa nova na Central */
.esc-notif.ds-tocou svg{ animation: ds-sino .6s ease; transform-origin: 50% 15%; }
@keyframes ds-sino{
  0%{transform:rotate(0)} 15%{transform:rotate(8deg)} 30%{transform:rotate(-8deg)}
  45%{transform:rotate(6deg)} 60%{transform:rotate(-6deg)}
  80%{transform:rotate(3deg)} 100%{transform:rotate(0)}
}
/* a bolinha do contador entra crescendo, como o dot vermelho do 21st */
.esc-notif .esc-notif-n:not(.zero){ animation: ds-bolinha .4s cubic-bezier(.32,.72,0,1) both; }
@keyframes ds-bolinha{
  0%{transform:scale(0)} 60%{transform:scale(1.3)} 100%{transform:scale(1)}
}

/* -- 5. QUEM PEDIU MENOS MOVIMENTO ----------------------------------------
   Mesmo desenho, sem nada girando, voando ou balancando.                    */
@media (prefers-reduced-motion: reduce){
  .ds-feixe::after{ animation: none; opacity: .65; }
  body.v5-escritorio .chat-linha{ animation: none; }
  body.v5-escritorio .chat-message.typing i{ animation: ds-pisca-quieto 1.4s infinite; }
  @keyframes ds-pisca-quieto{ 0%,100%{opacity:.3} 50%{opacity:1} }
  .ds-voa .ds-ico-send > g,
  .ds-ico-ok .ds-giro,
  .esc-notif.ds-tocou svg,
  .esc-notif .esc-notif-n:not(.zero){ animation: none; }
  .ds-copiado .ds-ico-copia .ds-check{ animation: none; stroke-dashoffset: 0; }
  .ds-pronto .ds-ico-ok .ds-check{ animation: none; stroke-dashoffset: 0; }
}

/* -- 6. AJUSTES DE ENCAIXE -------------------------------------------------
   O icone do botao de enviar do popup era um <svg class="atd-enviar-ico">; o
   v5-21st.js troca por um <span> da mesma classe com o aviaozinho dentro,
   para poder trocar o desenho (aviao -> circulo -> check) sem perder a
   moldura de 38px que o v5-atendimento-popup.css ja desenha.                */
body.v5-escritorio .atd-enviar span.atd-enviar-ico{
  display: inline-grid; place-items: center;
  box-sizing: border-box; flex: 0 0 38px;
}
body.v5-escritorio .atd-enviar span.atd-enviar-ico svg{
  width: 20px; height: 20px; display: block;
}
/* a caixa de resposta do popup ganha a luz na borda como a do chat */
body.v5-escritorio dialog.atd-painel .atd-escrita.ds-feixe{ border-radius: 14px; }
body.v5-escritorio dialog.atd-painel .atd-escrita.ds-feixe::after{ padding: 1.5px; }

/* MEDIDO NA PROVA (18/09/2026, Chromium 390 e 900px):
   . o icone de copiar desenhava so no meio do quadro de 40 e saia minusculo
     dentro do botao de 26 - o viewBox foi apertado no v5-21st.js e o svg
     subiu de 15 para 17px;
   . o balao de "esta digitando" herdava width:55px do v5.css, largura pensada
     para tres pontinhos PARADOS. Com eles subindo, o terceiro encostava na
     borda. Dentro da .chat-linha a largura passa a ser a do conteudo.       */
body.v5-escritorio .chat-copia svg{ width: 17px; height: 17px; }
body.v5-escritorio .chat-linha > .chat-message.typing{
  width: auto; min-width: 0; padding: 13px 15px;
}