/* =================================================================
   Ori, o assistente animado da VTO
   Uma esfera de energia que respira, pisca, segue o mouse, caminha
   pelo site acompanhando as seções e abre um chat no estilo Material 3.
   ================================================================= */
:root {
  --orb-a: #F6E2FF;
  --orb-b: #A64DFF;
  --orb-c: #6A00C4;
  --orb-d: #24004D;
  --orb-glow: 166, 77, 255;
  --orb-size: 76px;
}
.theme-jasiri {
  --orb-a: #FFF1D2;
  --orb-b: #E2B867;
  --orb-c: #9A6A1E;
  --orb-d: #2E241D;
  --orb-glow: 226, 184, 103;
}

/* ---------- O personagem ---------- */
.ori {
  position: fixed;
  z-index: 56;
  top: 0;
  left: 0;
  width: var(--orb-size);
  height: var(--orb-size);
  opacity: 0;
  pointer-events: none;
  transition: transform 1.3s cubic-bezier(.34, 1.36, .64, 1), opacity .5s ease;
  will-change: transform;
}
.ori.is-visible { opacity: 1; pointer-events: auto; }
.ori.is-hidden { opacity: 0; pointer-events: none; }
.ori.is-instant { transition: opacity .5s ease; }

.ori-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ori-body:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 8px; }

.ori-shadow {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -16px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(25, 0, 50, .32), transparent);
  animation: ori-shadow 3.4s ease-in-out infinite;
}
.ori-float { position: absolute; inset: 0; animation: ori-bob 3.4s ease-in-out infinite; }
.ori-glow {
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--orb-glow), .6), rgba(var(--orb-glow), .2) 42%, transparent 70%);
  animation: ori-breathe 4.2s ease-in-out infinite;
  pointer-events: none;
}
.ori-ring {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  color: var(--orb-b);
  filter: drop-shadow(0 0 5px rgba(var(--orb-glow), .9));
  animation: ori-spin 16s linear infinite;
}
.ori-ring circle { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 46 9 30 9 52 9 22 9 38 9; opacity: .9; }
.ori-sphere {
  position: absolute;
  inset: 8%;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0 4%, var(--orb-a) 11%, var(--orb-b) 36%, var(--orb-c) 64%, var(--orb-d) 100%);
  box-shadow: inset -7px -9px 18px rgba(0, 0, 0, .38), inset 4px 6px 12px rgba(255, 255, 255, .28), 0 10px 26px -8px rgba(var(--orb-glow), .8);
  animation: ori-pulse 4.2s ease-in-out infinite;
}
.ori-sphere::before {
  content: '';
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 255, 255, .45) 26%, transparent 36% 58%, rgba(var(--orb-glow), .65) 68%, transparent 80%);
  mix-blend-mode: soft-light;
  animation: ori-spin 7s linear infinite reverse;
}
.ori-shine { position: absolute; left: 18%; top: 12%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(3px); transform: rotate(-24deg); }
.ori-face {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  width: 44%;
  height: 25%;
  transform: translate(calc(-50% + var(--ex, 0px)), calc(-38% + var(--ey, 0px)));
  transition: transform .28s cubic-bezier(.2, 0, 0, 1);
}
.ori-eye {
  width: 27%;
  height: 100%;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 14px rgba(var(--orb-glow), 1);
  animation: ori-blink 5.6s infinite;
  transition: height .25s ease, border-radius .25s ease;
}
.ori-eye:nth-child(2) { animation-delay: .04s; }

/* Estados */
.ori.is-happy .ori-eye { height: 52%; border-radius: 999px 999px 4px 4px; animation: none; }
.ori.is-walking .ori-float { animation: ori-walk .42s ease-in-out infinite; }
.ori.is-walking .ori-ring { animation-duration: 2.2s; }
.ori.is-walking .ori-shadow { animation: ori-walk-shadow .42s ease-in-out infinite; }
.ori.is-landing .ori-float { animation: ori-land .7s cubic-bezier(.3, 1.5, .5, 1); }
.ori.is-entering .ori-float { animation: ori-enter 1.1s cubic-bezier(.2, 1.4, .4, 1); }
@media (hover: hover) {
  .ori-body:hover .ori-sphere { transform: scale(1.08); animation-play-state: paused; }
  .ori-body:hover .ori-ring { animation-duration: 4s; }
}

/* Partículas da caminhada */
.ori-trail { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: rgba(var(--orb-glow), .8); box-shadow: 0 0 10px rgba(var(--orb-glow), 1); opacity: 0; pointer-events: none; }
.ori.is-walking .ori-trail { animation: ori-trail .9s ease-out infinite; }
.ori.is-walking .ori-trail:nth-of-type(2) { animation-delay: .3s; }
.ori.is-walking .ori-trail:nth-of-type(3) { animation-delay: .6s; }

@keyframes ori-bob { 50% { transform: translateY(-7px); } }
@keyframes ori-shadow { 50% { transform: scale(.74); opacity: .5; } }
@keyframes ori-breathe { 0%, 100% { transform: scale(.82); opacity: .5; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes ori-pulse { 50% { transform: scale(1.045); filter: saturate(1.25) brightness(1.08); } }
@keyframes ori-spin { to { transform: rotate(360deg); } }
@keyframes ori-blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes ori-walk { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-9px) rotate(9deg); } }
@keyframes ori-walk-shadow { 50% { transform: scale(.7); opacity: .45; } }
@keyframes ori-land { 0% { transform: scale(1.16, .82); } 45% { transform: scale(.93, 1.09); } 100% { transform: none; } }
@keyframes ori-enter { 0% { transform: scale(0) rotate(-200deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes ori-trail { 0% { opacity: .9; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--tx, 30px), 14px) scale(.2); } }

/* ---------- Balão de fala ---------- */
.ori-bubble {
  position: absolute;
  top: 50%;
  right: calc(100% + 18px);
  width: max-content;
  max-width: min(290px, calc(100vw - 140px));
  padding: 13px 38px 13px 16px;
  border-radius: 18px 18px 4px 18px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  box-shadow: var(--elev-3), 0 0 0 1px var(--outline-variant);
  font-family: var(--font);
  font-size: .92rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transform: translateY(-50%);
  transform-origin: right center;
  animation: ori-bubble-in .5s cubic-bezier(.05, .7, .1, 1);
}
.ori-bubble[hidden] { display: none; }
.ori.is-left .ori-bubble { right: auto; left: calc(100% + 18px); border-radius: 18px 18px 18px 4px; transform-origin: left center; }
.ori-bubble strong { color: var(--primary); }
.ori-bubble-close { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--on-surface-variant); cursor: pointer; }
.ori-bubble-close:hover { background: var(--surface-container-high); }
.ori-bubble-close .msr { font-size: 18px; }
.ori-bubble-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 600; color: var(--primary); }
.ori-bubble-cta .msr { font-size: 18px; }
@keyframes ori-bubble-in { from { opacity: 0; transform: translateY(-50%) scale(.6); } }

/* ---------- Janela de conversa ---------- */
.ori-chat {
  position: fixed;
  z-index: 85;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 110px));
  overflow: hidden;
  border-radius: 28px;
  background: var(--surface-container-low);
  color: var(--on-surface);
  font-family: var(--font);
  box-shadow: var(--elev-5), 0 30px 80px -24px rgba(20, 0, 50, .5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.55) translateY(40px);
  transform-origin: bottom right;
  transition: transform .4s cubic-bezier(.3, 0, .8, .15), opacity .2s linear, visibility 0s linear .4s;
}
.ori-chat.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: transform .55s cubic-bezier(.05, .7, .1, 1), opacity .25s linear, visibility 0s; }

.ori-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 12px 16px 18px;
  color: #FFFFFF;
  background: radial-gradient(80% 140% at 0% 0%, rgba(214, 140, 255, .55), transparent 60%), linear-gradient(135deg, var(--hero-1), var(--hero-2) 55%, var(--hero-3));
}
.ori-head .ori-mini { position: relative; flex: none; width: 46px; height: 46px; }
.ori-mini .ori-glow { inset: -30%; }
.ori-mini .ori-ring { color: rgba(255, 255, 255, .85); }
.ori-head-text { flex: 1; min-width: 0; }
.ori-head-text strong { display: block; font-size: 1.02rem; line-height: 1.2; }
.ori-head-text small { display: flex; align-items: center; gap: 6px; font-size: .78rem; opacity: .85; }
.ori-head-text small i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .25); }
.ori-head .icon-btn { width: 40px; height: 40px; color: #FFFFFF; }
.ori-head .icon-btn .msr { font-size: 22px; }
.ori-chat.is-thinking .ori-mini .ori-ring { animation-duration: 1.2s; }
.ori-chat.is-thinking .ori-mini .ori-face { --ex: 3px; --ey: -2px; }

.ori-msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 10px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.ori-msg { max-width: 88%; padding: 11px 14px; border-radius: 18px; font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere; animation: ori-msg-in .45s cubic-bezier(.05, .7, .1, 1) both; }
.ori-msg--bot { align-self: flex-start; background: var(--surface-container-lowest); border-bottom-left-radius: 6px; box-shadow: var(--elev-1); }
.ori-msg--user { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 6px; }
.ori-msg--bot strong { color: var(--primary); }
.ori-msg a:not(.ori-cta) { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ori-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 16px; border-radius: 999px; background: var(--whats); color: #FFFFFF; font-weight: 600; text-decoration: none; }
.ori-cta .msr { font-size: 20px; }
.ori-cta--alt { background: var(--primary); }
.ori-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; animation: ori-msg-in .45s cubic-bezier(.05, .7, .1, 1) .15s both; }
.ori-chip { position: relative; overflow: hidden; isolation: isolate; padding: 7px 13px; border: 1px solid var(--outline-variant); border-radius: 8px; background: var(--surface-container-lowest); color: var(--primary); font: 600 .84rem/1.3 var(--font); text-align: left; cursor: pointer; transition: background-color .15s linear, border-color .15s linear; }
.ori-chip:hover { background: var(--secondary-container); border-color: transparent; }
.ori-typing { display: inline-flex; gap: 5px; align-self: flex-start; padding: 14px 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--surface-container-lowest); box-shadow: var(--elev-1); }
.ori-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); opacity: .45; animation: typing 1s infinite; }
.ori-typing i:nth-child(2) { animation-delay: .15s; }
.ori-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ori-msg-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }

.ori-form { display: flex; gap: 8px; padding: 10px 12px 8px; border-top: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.ori-input { flex: 1; min-width: 0; padding: 12px 16px; border: 0; border-radius: 999px; outline: 0; background: var(--surface-container-highest); color: var(--on-surface); font: 400 .95rem/1.3 var(--font); }
.ori-input:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.ori-send { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); cursor: pointer; transition: transform .2s cubic-bezier(.2, 0, 0, 1); }
.ori-send:hover { transform: scale(1.06); }
.ori-send .msr { font-size: 22px; }
.ori-note { padding: 0 14px 12px; background: var(--surface-container-low); font-size: .72rem; line-height: 1.35; text-align: center; color: var(--on-surface-variant); }

/* ---------- Celular ---------- */
@media (max-width: 899px) {
  :root { --orb-size: 62px; }
  .ori-bubble { top: auto; right: 0; bottom: calc(100% + 16px); max-width: min(270px, calc(100vw - 32px)); border-radius: 18px 18px 4px 18px; transform: none; transform-origin: bottom right; animation-name: ori-bubble-up; }
  .ori-chat { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; transform-origin: bottom right; }
  .ori-head { padding-top: max(16px, env(safe-area-inset-top)); }
  .ori-form { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
@keyframes ori-bubble-up { from { opacity: 0; transform: translateY(12px) scale(.7); } }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ori { transition: opacity .2s linear; }
  .ori-float, .ori-shadow, .ori-glow, .ori-ring, .ori-sphere, .ori-sphere::before, .ori-eye { animation: none !important; }
}