/* Marca da ELIA: cores e animação (tirado do elia.css do Elegancia-CRM).
   A cor de IA (violeta/magenta) aparece só no movimento: anéis e pontinhos de "pensando". */
:root {
  --elia-ia: #7C6CFF; --elia-ia-2: #D06BFF;
  --elia-noir: #0D0D0F; --elia-noir-2: #1C1A16; --elia-ivory: #EDEAE3;
  --elia-gold: #D1AD54; --elia-gold-hi: #F0D88F;
}

.elia-mark { display: block; width: 100%; height: auto; overflow: visible; }
.elia-mark .all { transform-box: view-box; transform-origin: 50% 55%; }
.elia-mark .sheen { visibility: hidden; }
.elia-mark.live .sheen { visibility: visible; }
.elia-mark.live .all { animation: elia-breathe var(--breathe, 4.6s) ease-in-out infinite; }
@keyframes elia-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.6%) scale(1.035); } }
.elia-mark .sheen-band { transform-box: view-box; transform: translateX(-140px); }
.elia-mark.live .sheen-band { animation: elia-sweep var(--sweep, 6.5s) cubic-bezier(.45, .05, .25, 1) infinite; }
@keyframes elia-sweep { 0% { transform: translateX(-140px); } 38%, 100% { transform: translateX(520px); } }
.elia-mark .node { opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px #F0D88F); }
.elia-mark.live .node { animation: elia-node var(--node, 3.6s) ease-in-out infinite; animation-delay: calc(var(--i) * var(--node-step, .55s)); }
@keyframes elia-node { 0%, 100% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1.15); } 42% { opacity: 0; transform: scale(.8); } }
.elia-mark .wingL, .elia-mark .wingR { transform-box: view-box; }
.elia-mark.live .wingL { animation: elia-flapL var(--flap, 3.4s) ease-in-out infinite; }
.elia-mark.live .wingR { animation: elia-flapR var(--flap, 3.4s) ease-in-out infinite; }
@keyframes elia-flapL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes elia-flapR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
.elia-mark.thinking { --breathe: 1.6s; --sweep: 2.2s; --node: 1.1s; --node-step: .18s; --flap: 1.15s; }

/* Bolinha da ELIA (avatar/botão), com os anéis violeta. */
.elia-bola {
  position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(209, 173, 84, .45); background: radial-gradient(circle at 35% 30%, #1E1C18, var(--elia-noir) 70%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.elia-bola .elia-mark { width: 68%; }
.elia-bola::before, .elia-bola::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--elia-ia); opacity: 0; pointer-events: none;
  animation: elia-ring 2.6s ease-out infinite;
}
.elia-bola::after { border-color: var(--elia-ia-2); animation-delay: 1.3s; }
.elia-bola.thinking { border-color: rgba(124, 108, 255, .7); box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 18px rgba(124, 108, 255, .45); }
.elia-bola.thinking::before, .elia-bola.thinking::after { animation-duration: 1.2s; }
.elia-bola.thinking::after { animation-delay: .6s; }
@keyframes elia-ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.65); opacity: 0; } }

/* Pontinhos de "pensando". */
.elia-dots { display: inline-flex; gap: 4px; }
.elia-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--elia-ia); animation: elia-blink 1.2s infinite both; }
.elia-dots i:nth-child(2) { background: color-mix(in srgb, var(--elia-ia), var(--elia-ia-2)); animation-delay: .2s; }
.elia-dots i:nth-child(3) { background: var(--elia-ia-2); animation-delay: .4s; }
@keyframes elia-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }