/* ============================================================
   EVVA — ENOVVA Virtual Assistant
   eva.css — estilos, efeitos e responsividade
   Paleta herdada das variáveis institucionais do portal ENOVVA.
   ============================================================ */

:root{
  --eva-void:      var(--void, #050810);
  --eva-ink:       var(--ink, #0B121F);
  --eva-steel:     var(--steel, #1C2839);
  --eva-silver:    var(--silver, #EDF1F6);
  --eva-slate:     var(--slate, #8996A8);
  --eva-volt:      var(--volt, #2F8FE0);
  --eva-volt-2:    var(--volt-2, #5BB8FF);
  --eva-grafeno:   var(--grafeno, #4FB84A);
  --eva-grafeno-2: var(--grafeno-2, #79D66F);

  --eva-size: 128px;      /* diâmetro do avatar flutuante (desktop)  */
  --eva-size-mobile: 90px; /* ~70% no celular                        */
  --eva-gap: 28px;         /* distância das bordas da tela           */
  --eva-z: 2147483000;     /* fica acima de quase tudo no portal      */
}

/* Respeita "prefers-reduced-motion" globalmente para o widget */
@media (prefers-reduced-motion: reduce){
  #eva-root, #eva-root *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

#eva-root{
  position: fixed;
  right: var(--eva-gap);
  bottom: var(--eva-gap);
  z-index: var(--eva-z);
  font-family: 'Inter', sans-serif;
  color: var(--eva-silver);
  --eva-current-size: var(--eva-size);
  width: var(--eva-current-size);
  height: var(--eva-current-size);
  pointer-events: none; /* filhos reativam pointer-events individualmente */
}

#eva-root *{ box-sizing: border-box; }

@media (max-width: 640px){
  #eva-root{
    right: 14px;
    bottom: 14px;
    --eva-current-size: var(--eva-size-mobile);
  }
}

/* ---------------------------------------------------------------
   Núcleo / avatar flutuante
--------------------------------------------------------------- */
.eva-orb{
  position: relative;
  width: var(--eva-current-size);
  height: var(--eva-current-size);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(140px) scale(.85);
  will-change: transform, opacity;
  outline: none;
}

.eva-orb:focus-visible{
  box-shadow: 0 0 0 3px var(--eva-void), 0 0 0 6px var(--eva-volt-2);
  border-radius: 50%;
}

/* anel holográfico giratório */
.eva-ring{
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg,
    rgba(47,143,224,0)   0deg,
    var(--eva-volt-2)    70deg,
    rgba(79,184,74,.9)   150deg,
    rgba(47,143,224,0)   230deg,
    rgba(47,143,224,0)   360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: eva-spin 7s linear infinite;
  opacity: .85;
}
@keyframes eva-spin{ to{ transform: rotate(360deg); } }

/* halo de luz pulsante (LEDs) */
.eva-glow{
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,184,255,.35) 0%, rgba(91,184,255,0) 70%);
  filter: blur(2px);
  animation: eva-breathe 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes eva-breathe{
  0%, 100%{ opacity:.45; transform:scale(.94); }
  50%{ opacity:.9; transform:scale(1.08); }
}

/* moldura de vidro do avatar */
.eva-frame{
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #101c2e 0%, var(--eva-void) 78%);
  border: 1px solid rgba(91,184,255,.35);
  box-shadow:
    0 8px 30px rgba(3,8,16,.55),
    inset 0 0 22px rgba(47,143,224,.25);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

.eva-orb:hover .eva-frame,
.eva-orb.eva-hover .eva-frame{
  transform: scale(1.03);
  box-shadow:
    0 10px 34px rgba(3,8,16,.6),
    inset 0 0 28px rgba(91,184,255,.4),
    0 0 24px rgba(91,184,255,.35);
}

.eva-frame img{
  position: absolute;
  left: 50%;
  top: 62%;
  width: 168%;
  transform: translate(-50%,-50%);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .5s ease;
}

/* leve "olhar" e inclinação de cabeça acompanhando o cursor,
   controlado via custom properties setadas em JS (--eva-tx/--eva-ty).
   --eva-tilt        = inclinação ao seguir o cursor (proximidade)
   --eva-idle-tilt   = pequena inclinação aleatória "viva" (Sprint 1 —
                       Humanização do Avatar), independente do cursor,
                       somada à anterior para nunca competir com ela. */
.eva-frame img{
  transform: translate(calc(-50% + var(--eva-tx, 0px)), calc(-50% + var(--eva-ty, 0px)))
             rotate(calc(var(--eva-tilt, 0deg) + var(--eva-idle-tilt, 0deg)));
}

/* "piscar" — sobreposição sutil sobre a região dos olhos */
.eva-blink{
  position: absolute;
  left: 30%;
  top: 27%;
  width: 40%;
  height: 10%;
  background: linear-gradient(var(--eva-void), var(--eva-void));
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: multiply;
  transform-origin: center;
  transform: scaleY(0);
  pointer-events: none;
}
.eva-blink.eva-play{
  animation: eva-blink-kf .18s ease-in-out 1;
}
@keyframes eva-blink-kf{
  0%{ opacity:0; transform: scaleY(0); }
  40%{ opacity:.55; transform: scaleY(1); }
  100%{ opacity:0; transform: scaleY(0); }
}

/* partículas azuis flutuando ao redor do orb */
.eva-particle{
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--eva-volt-2);
  box-shadow: 0 0 6px 1px rgba(91,184,255,.9);
  opacity: 0;
  pointer-events: none;
  animation: eva-particle-float 5.5s ease-in-out infinite;
}
.eva-particle:nth-child(1){ left: 4%;  top: 68%; animation-delay: 0s; }
.eva-particle:nth-child(2){ left: 86%; top: 22%; animation-delay: 1.4s; }
.eva-particle:nth-child(3){ left: 78%; top: 80%; animation-delay: 2.7s; }
@keyframes eva-particle-float{
  0%{ opacity:0; transform: translateY(0) scale(.6); }
  15%{ opacity:.9; }
  50%{ transform: translateY(-18px) scale(1); }
  85%{ opacity:.4; }
  100%{ opacity:0; transform: translateY(-30px) scale(.5); }
}

/* respiração/flutuação sutil do corpo inteiro (nunca 100% parada).
   Duração senoidal entre 4–6s definida via JS (--eva-breathe-dur),
   simulando tronco + ombros — o avatar nunca fica totalmente imóvel
   (Sprint 1 — Humanização do Avatar). */
.eva-orb.eva-idle{
  animation: eva-float var(--eva-breathe-dur, 4.6s) ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes eva-float{
  0%, 100%{ transform: translateY(0) scaleY(1) rotate(0deg); }
  50%{ transform: translateY(-6px) scaleY(1.012) rotate(.6deg); }
}

/* pequeno aceno periódico (chamar atenção) */
.eva-orb.eva-wave .eva-frame{
  animation: eva-wave-kf .9s ease-in-out 1;
}
@keyframes eva-wave-kf{
  0%, 100%{ transform: rotate(0deg) scale(1); }
  25%{ transform: rotate(-4deg) scale(1.02); }
  50%{ transform: rotate(3deg) scale(1.04); }
  75%{ transform: rotate(-2deg) scale(1.01); }
}

/* estado "falando" — pulso mais vivo nos LEDs, sincronizado no JS */
.eva-orb.eva-speaking .eva-glow{
  animation: eva-speak-glow .55s ease-in-out infinite;
}
@keyframes eva-speak-glow{
  0%, 100%{ opacity:.55; }
  50%{ opacity:1; }
}

/* sincronização labial simples por intensidade de áudio (Sprint 1,
   item 8 "Boca"): como o avatar é uma foto 2D, simulamos a fala com
   um pulso sutil de escala/brilho na moldura proporcional à amplitude
   atual do áudio (--eva-amp, 0..1, atualizado via requestAnimationFrame
   em eva-assistant.js a partir de EvaSpeech.getAmplitude()). Nunca abre
   /fecha de forma aleatória — segue exatamente o volume da fala. */
.eva-orb.eva-speaking .eva-frame{
  transform: scale(calc(1 + var(--eva-amp, 0) * 0.035));
  filter: brightness(calc(1 + var(--eva-amp, 0) * 0.08));
}

/* ---------------------------------------------------------------
   Estados do avatar (Sprint 1, item 9): cada estado altera
   discretamente o ritmo do anel/halo, reforçando de forma sutil
   "olhos" (glow), "cabeça/atenção" (anel) e expressão (herdada das
   classes eva-face-*). Nunca robótico, sempre transições suaves.
--------------------------------------------------------------- */
.eva-orb.eva-state-listening .eva-glow{
  opacity: .85;
}
.eva-orb.eva-state-thinking .eva-ring{
  animation-duration: 2.6s;
}
.eva-orb.eva-state-thinking .eva-glow{
  animation: eva-speak-glow 1.1s ease-in-out infinite;
}
.eva-orb.eva-state-waiting .eva-ring{
  animation-duration: 10s;
  opacity: .6;
}
.eva-orb.eva-state-speaking .eva-ring{
  animation-duration: 3.2s;
}

/* ---------------------------------------------------------------
   Expressões faciais (briefing "EXPRESSÕES FACIAIS") — como não há
   sprites separados por emoção, simulamos com brilho/escala/filtro
   sutis sobre a mesma foto, trocados suavemente via transition.
   Mesmos nomes de classe usados pelo avatar 3D quando presente.
--------------------------------------------------------------- */
.eva-frame img{
  filter: saturate(1) brightness(1);
  transition: transform .5s ease, filter .6s ease;
}
.eva-face-smile .eva-frame img{
  filter: saturate(1.08) brightness(1.05);
}
.eva-face-friendly .eva-frame img{
  filter: saturate(1.1) brightness(1.06);
  transform-origin: center;
}
.eva-face-curious .eva-frame img{
  filter: saturate(.98) brightness(1.02);
}
.eva-face-neutral .eva-frame img{
  filter: saturate(1) brightness(1);
}
.eva-face-curious .eva-glow,
.eva-face-friendly .eva-glow,
.eva-face-smile .eva-glow{
  animation-duration: 3.2s;
}

/* ---------------------------------------------------------------
   Balão de boas-vindas
--------------------------------------------------------------- */
.eva-bubble{
  position: absolute;
  right: calc(var(--eva-current-size) + 18px);
  bottom: 6px;
  width: min(300px, 78vw);
  background: rgba(11,18,31,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(91,184,255,.28);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 18px 50px rgba(3,8,16,.55);
  opacity: 0;
  transform: translateX(16px) scale(.96);
  pointer-events: auto;
}
.eva-bubble::after{
  content: "";
  position: absolute;
  right: -7px;
  bottom: 26px;
  width: 14px; height: 14px;
  background: inherit;
  border-right: 1px solid rgba(91,184,255,.28);
  border-bottom: 1px solid rgba(91,184,255,.28);
  transform: rotate(-45deg);
  border-radius: 0 0 4px 0;
}
.eva-bubble p{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--eva-silver);
  margin: 0 0 12px;
}
.eva-bubble strong{ color: var(--eva-volt-2); }
.eva-bubble .eva-quick-replies{
  display:flex; flex-wrap:wrap; gap:8px;
}
.eva-chip{
  appearance:none; border:1px solid rgba(91,184,255,.4);
  background: rgba(47,143,224,.12);
  color: var(--eva-silver);
  font: 500 12.5px/1 'Inter', sans-serif;
  padding: 9px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.eva-chip:hover, .eva-chip:focus-visible{
  background: rgba(47,143,224,.28);
  border-color: var(--eva-volt-2);
  transform: translateY(-1px);
}
.eva-bubble-close{
  position:absolute; top:8px; right:10px;
  background:none; border:none; color:var(--eva-slate);
  font-size:16px; line-height:1; cursor:pointer; padding:4px;
}
.eva-bubble-close:hover{ color: var(--eva-silver); }

/* ---------------------------------------------------------------
   Painel de conversa (expandido)
--------------------------------------------------------------- */
.eva-panel{
  position: absolute;
  right: calc(var(--eva-current-size) - 6px);
  bottom: 0;
  width: min(360px, 92vw);
  height: min(520px, 74vh);
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, rgba(11,18,31,.92), rgba(5,8,16,.94));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(91,184,255,.3);
  border-radius: 20px;
  box-shadow: 0 26px 70px rgba(3,8,16,.65), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: scale(.85) translateY(12px);
  pointer-events: none;
  visibility: hidden;
}
.eva-panel.eva-open{ pointer-events:auto; visibility:visible; }

.eva-panel-header{
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(91,184,255,.18);
  background: rgba(47,143,224,.06);
  flex-shrink: 0;
}
.eva-panel-avatar{
  width:38px; height:38px; border-radius:50%; overflow:hidden;
  border:1px solid rgba(91,184,255,.4); flex-shrink:0;
  background: var(--eva-void);
  position: relative;
}
.eva-panel-avatar img{
  position:absolute; left:50%; top:62%; width:168%;
  transform: translate(-50%,-50%);
}
.eva-panel-title{ flex:1; min-width:0; }
.eva-panel-title strong{
  display:block; font-family:'Chakra Petch', sans-serif;
  font-size:14.5px; color:var(--eva-silver); letter-spacing:.01em;
}
.eva-panel-title span{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; color: var(--eva-grafeno-2);
}
.eva-panel-title span::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--eva-grafeno-2);
  box-shadow:0 0 6px var(--eva-grafeno-2);
}
.eva-panel-actions{ display:flex; gap:4px; }
.eva-icon-btn{
  width:32px; height:32px; border-radius:9px; border:none;
  background: transparent; color: var(--eva-slate);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .2s ease, color .2s ease;
}
.eva-icon-btn:hover, .eva-icon-btn:focus-visible{ background: rgba(91,184,255,.15); color: var(--eva-silver); }
.eva-icon-btn[aria-pressed="true"]{ color: var(--eva-volt-2); }

.eva-panel-body{
  flex:1; overflow-y:auto; padding: 16px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width: thin; scrollbar-color: rgba(91,184,255,.4) transparent;
}
.eva-panel-body::-webkit-scrollbar{ width:6px; }
.eva-panel-body::-webkit-scrollbar-thumb{ background: rgba(91,184,255,.35); border-radius:3px; }

.eva-msg{
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: eva-msg-in .28s ease both;
}
@keyframes eva-msg-in{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.eva-msg-eva{
  align-self:flex-start;
  background: rgba(47,143,224,.14);
  border: 1px solid rgba(91,184,255,.25);
  border-bottom-left-radius: 4px;
  color: var(--eva-silver);
}
.eva-msg-user{
  align-self:flex-end;
  background: linear-gradient(135deg, var(--eva-volt), var(--eva-deep, #0A4A85));
  border-bottom-right-radius: 4px;
  color: #F4F9FF;
}
.eva-msg-replies{
  display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:100%;
}

.eva-typing{
  display:flex; gap:4px; align-self:flex-start; padding: 10px 13px;
}
.eva-typing span{
  width:6px; height:6px; border-radius:50%; background: var(--eva-volt-2);
  animation: eva-typing-kf 1s ease-in-out infinite;
}
.eva-typing span:nth-child(2){ animation-delay:.15s; }
.eva-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes eva-typing-kf{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.eva-panel-suggestions{
  display:flex; gap:8px; padding: 0 16px 10px; flex-wrap:wrap; flex-shrink:0;
}

.eva-panel-input{
  display:flex; align-items:center; gap:8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(91,184,255,.18);
  flex-shrink:0;
  background: rgba(5,8,16,.5);
}
.eva-panel-input input{
  flex:1; background: rgba(255,255,255,.04);
  border: 1px solid rgba(91,184,255,.22);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--eva-silver);
  font: 400 13.5px 'Inter', sans-serif;
  outline:none;
}
.eva-panel-input input:focus{ border-color: var(--eva-volt-2); }
.eva-panel-input input::placeholder{ color: var(--eva-slate); }
.eva-send{
  width:38px; height:38px; border-radius:10px; border:none;
  background: linear-gradient(135deg, var(--eva-volt), var(--eva-grafeno));
  color:#04070C; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, filter .2s ease;
}
.eva-send:hover{ transform: translateY(-1px); filter:brightness(1.08); }
.eva-send:active{ transform: translateY(0); }

/* ---- Microfone (comando de voz) — NOVO ---- */
.eva-mic{
  width:38px; height:38px; border-radius:10px;
  border: 1px solid rgba(91,184,255,.22);
  background: rgba(255,255,255,.04);
  color: var(--eva-slate); cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.eva-mic:hover, .eva-mic:focus-visible{
  color: var(--eva-volt-2);
  border-color: var(--eva-volt-2);
  transform: translateY(-1px);
}
/* Estado "ouvindo": verde grafeno + anel pulsante, espelhando a
   identidade da ENOVVA e sinalizando claramente a captura de áudio */
.eva-mic.eva-mic-on{
  color:#04070C;
  background: linear-gradient(135deg, var(--eva-grafeno), var(--eva-grafeno-2));
  border-color: transparent;
  animation: eva-mic-pulse 1.6s ease-out infinite;
}
@keyframes eva-mic-pulse{
  0%  { box-shadow: 0 0 0 0 rgba(79,184,74,.55); }
  70% { box-shadow: 0 0 0 12px rgba(79,184,74,0); }
  100%{ box-shadow: 0 0 0 0 rgba(79,184,74,0); }
}

.eva-footer-note{
  padding: 0 16px 12px;
  font-size: 10.5px;
  color: var(--eva-slate);
  text-align:center;
  flex-shrink:0;
}

/* alto contraste opcional */
@media (prefers-contrast: more){
  .eva-frame{ border-color: var(--eva-silver); }
  .eva-bubble, .eva-panel{ border-color: var(--eva-silver); }
}

/* sr-only utilitário */
.eva-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}