/*
 * Teri Orb - canonical shared visual identity (Batch H Section B/C/D).
 * Translucent blue-purple-silver glass sphere with internal refraction,
 * suspended sparkle particles, and a soft halo. No face, eyes, or mouth -
 * every layer here is a gradient, blur, or small circular particle only.
 * Pure CSS/DOM - no canvas/WebGL, no remote assets, no external URLs.
 *
 * State is driven entirely by the [data-teri-state] attribute set by
 * teri-orb.js; this file owns all resulting visual behavior so the state
 * machine itself stays a tiny, framework-agnostic, fully-testable JS object.
 */

.teri-orb-root {
  --teri-size: 64px;
  --teri-intensity: 0.55;
  --teri-halo-scale: 1;
  --teri-pulse-duration: 3.6s;
  --teri-drift-duration: 9s;
  --teri-scale: 1;
  --teri-particle-opacity: 0.55;
  --teri-blue: #3b6dff;
  --teri-purple: #8b5cf6;
  --teri-silver: #dfe6f5;
  --teri-amber: #e3a73b;

  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--teri-size);
  height: var(--teri-size);
  isolation: isolate;
}

.teri-orb-root[data-teri-reduced-motion="true"] {
  --teri-pulse-duration: 0s;
  --teri-drift-duration: 0s;
}

.teri-orb-halo {
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, calc(var(--teri-intensity) * 0.35)) 0%,
    rgba(59, 109, 255, calc(var(--teri-intensity) * 0.18)) 45%,
    rgba(59, 109, 255, 0) 72%
  );
  transform: scale(var(--teri-halo-scale));
  transition:
    transform var(--fm-motion-standard, 220ms) ease,
    opacity var(--fm-motion-standard, 220ms) ease;
  filter: blur(2px);
  pointer-events: none;
}

.teri-orb-sphere {
  position: relative;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  transform: scale(var(--teri-scale));
  transition: transform var(--fm-motion-standard, 220ms) ease;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 62% 68%, var(--teri-purple) 0%, rgba(139, 92, 246, 0) 55%),
    radial-gradient(circle at 38% 70%, var(--teri-blue) 0%, rgba(59, 109, 255, 0) 60%),
    radial-gradient(circle at 50% 50%, var(--teri-silver) 0%, rgba(223, 230, 245, 0.08) 70%);
  box-shadow:
    inset 0 0 calc(10px + 10px * var(--teri-intensity)) rgba(255, 255, 255, 0.35),
    inset 0 0 22px rgba(59, 109, 255, 0.25),
    0 0 calc(6px + 14px * var(--teri-intensity)) rgba(139, 92, 246, 0.45);
  overflow: hidden;
}

.teri-orb-refraction {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    rgba(255, 255, 255, 0.28),
    rgba(139, 92, 246, 0.06) 30%,
    rgba(59, 109, 255, 0.14) 55%,
    rgba(255, 255, 255, 0.22) 80%,
    rgba(255, 255, 255, 0.28)
  );
  mix-blend-mode: overlay;
  opacity: calc(0.35 + var(--teri-intensity) * 0.4);
  animation: teri-refraction-spin var(--teri-drift-duration) linear infinite;
}

.teri-orb-particles {
  position: absolute;
  inset: -10%;
  pointer-events: none;
}

.teri-orb-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--teri-silver);
  opacity: var(--teri-particle-opacity);
  box-shadow: 0 0 4px 1px rgba(223, 230, 245, 0.8);
  animation: teri-particle-drift var(--teri-drift-duration) ease-in-out infinite;
}

.teri-orb-particle:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.teri-orb-particle:nth-child(2) { top: 65%; left: 10%; animation-delay: -1.2s; }
.teri-orb-particle:nth-child(3) { top: 25%; left: 78%; animation-delay: -2.4s; }
.teri-orb-particle:nth-child(4) { top: 80%; left: 70%; animation-delay: -3.6s; }
.teri-orb-particle:nth-child(5) { top: 50%; left: 50%; animation-delay: -4.8s; }
.teri-orb-particle:nth-child(6) { top: 40%; left: 88%; animation-delay: -6s; }

@keyframes teri-refraction-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes teri-particle-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: var(--teri-particle-opacity); }
  50% { transform: translate(3px, -4px) scale(1.3); opacity: calc(var(--teri-particle-opacity) * 1.4); }
}

@keyframes teri-breathe {
  0%, 100% { transform: scale(var(--teri-scale)); }
  50% { transform: scale(calc(var(--teri-scale) * 1.04)); }
}

@keyframes teri-ring-expand {
  0% { transform: scale(0.2); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.teri-orb-intro-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.5);
  animation: teri-ring-expand 1.4s ease-out infinite;
  pointer-events: none;
}

/* ---- State-driven behavior ---- */

.teri-orb-root[data-teri-state="INTRO"] {
  --teri-scale: 1;
  --teri-intensity: 0.7;
  --teri-halo-scale: 1.1;
}
.teri-orb-root[data-teri-state="INTRO"] .teri-orb-sphere {
  animation: teri-breathe 1.2s ease-in-out infinite;
}

.teri-orb-root[data-teri-state="IDLE"] {
  --teri-intensity: 0.42;
  --teri-halo-scale: 0.9;
  --teri-particle-opacity: 0.3;
  --teri-drift-duration: 11s;
}
.teri-orb-root[data-teri-state="IDLE"] .teri-orb-sphere {
  animation: teri-breathe 4.5s ease-in-out infinite;
}

.teri-orb-root[data-teri-state="LISTENING"] {
  --teri-intensity: 0.72;
  --teri-halo-scale: 0.78;
  --teri-pulse-duration: 1.4s;
}
.teri-orb-root[data-teri-state="LISTENING"] .teri-orb-sphere {
  animation: teri-breathe 1.4s ease-in-out infinite;
}

.teri-orb-root[data-teri-state="THINKING"] {
  --teri-intensity: 0.8;
  --teri-halo-scale: 1;
  --teri-drift-duration: 2.5s;
  --teri-particle-opacity: 0.85;
}

.teri-orb-root[data-teri-state="SPEAKING"] {
  --teri-intensity: 0.85;
  --teri-halo-scale: 1.05;
  --teri-pulse-duration: 0.6s;
}
.teri-orb-root[data-teri-state="SPEAKING"] .teri-orb-sphere {
  animation: teri-breathe var(--teri-pulse-duration) ease-in-out infinite;
}

.teri-orb-root[data-teri-state="WORKING"] {
  --teri-intensity: 0.6;
  --teri-halo-scale: 0.95;
  --teri-drift-duration: 6s;
}

.teri-orb-root[data-teri-state="WAITING_FOR_APPROVAL"] {
  --teri-intensity: 0.5;
  --teri-halo-scale: 0.85;
  --teri-drift-duration: 14s;
  --teri-particle-opacity: 0.25;
}
.teri-orb-root[data-teri-state="WAITING_FOR_APPROVAL"] .teri-orb-sphere {
  animation: teri-breathe 5.5s ease-in-out infinite;
}

.teri-orb-root[data-teri-state="SUCCESS"] {
  --teri-intensity: 0.95;
  --teri-halo-scale: 1.25;
  --teri-particle-opacity: 1;
}

.teri-orb-root[data-teri-state="WARNING"] {
  --teri-intensity: 0.65;
  --teri-halo-scale: 1;
}
.teri-orb-root[data-teri-state="WARNING"] .teri-orb-sphere {
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.3),
    inset 0 0 20px rgba(227, 167, 59, 0.35),
    0 0 16px rgba(227, 167, 59, 0.4);
}

.teri-orb-root[data-teri-state="ERROR"] {
  --teri-intensity: 0.55;
  --teri-halo-scale: 0.9;
  --teri-particle-opacity: 0.2;
}
.teri-orb-root[data-teri-state="ERROR"] .teri-orb-sphere {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 62% 68%, #b04ee0 0%, rgba(176, 78, 224, 0) 55%),
    radial-gradient(circle at 38% 70%, #e5484d 0%, rgba(229, 72, 77, 0) 60%),
    radial-gradient(circle at 50% 50%, var(--teri-silver) 0%, rgba(223, 230, 245, 0.06) 70%);
}

.teri-orb-root[data-teri-state="OFFLINE"] {
  --teri-intensity: 0.15;
  --teri-halo-scale: 0.6;
  --teri-particle-opacity: 0.05;
  filter: grayscale(0.6) brightness(0.75);
}
.teri-orb-root[data-teri-state="OFFLINE"] .teri-orb-refraction,
.teri-orb-root[data-teri-state="OFFLINE"] .teri-orb-particle {
  animation-play-state: paused;
}

.teri-orb-root[data-teri-state="MINIMIZED"] {
  --teri-size: 36px;
  --teri-intensity: 0.4;
  --teri-halo-scale: 0.8;
}

.teri-orb-root[data-teri-state="EXPANDED"] {
  --teri-size: 128px;
  --teri-intensity: 0.75;
  --teri-halo-scale: 1.15;
}

/* Intro ring only during INTRO */
.teri-orb-root:not([data-teri-state="INTRO"]) .teri-orb-intro-ring {
  display: none;
}

/* Reduced motion: keep the orb visibly alive (still communicates state via
   intensity/scale/color) but remove continuous looping animation. */
@media (prefers-reduced-motion: reduce) {
  .teri-orb-sphere,
  .teri-orb-refraction,
  .teri-orb-particle,
  .teri-orb-intro-ring {
    animation: none !important;
  }
}

.teri-orb-root[data-teri-reduced-motion="true"] .teri-orb-sphere,
.teri-orb-root[data-teri-reduced-motion="true"] .teri-orb-refraction,
.teri-orb-root[data-teri-reduced-motion="true"] .teri-orb-particle,
.teri-orb-root[data-teri-reduced-motion="true"] .teri-orb-intro-ring {
  animation: none !important;
}

/* Low-performance fallback: a flat, static rendering of the same palette. */
.teri-orb-root[data-teri-performance-mode="low"] .teri-orb-refraction {
  display: none;
}
.teri-orb-root[data-teri-performance-mode="low"] .teri-orb-particles {
  display: none;
}
.teri-orb-root[data-teri-performance-mode="low"] .teri-orb-sphere {
  animation: none;
}

.teri-orb-status-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.teri-orb-root:focus-visible {
  outline: var(--fm-focus-width, 3px) solid var(--teri-silver);
  outline-offset: 4px;
  border-radius: 50%;
}

.teri-orb-button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.teri-orb-button:focus-visible {
  outline: var(--fm-focus-width, 3px) solid var(--teri-silver);
  outline-offset: 4px;
}

/*
 * Docking positions (Section F). Consuming apps apply one of these classes
 * to the same element passed as TeriOrb.create()'s container, matching
 * TeriPresentationPolicy.resolve()'s returned dockPosition. Fixed docking
 * always leaves generous clearance so the orb never overlaps primary
 * buttons, forms, checkout controls, media, captions, or legal text in the
 * layouts it ships on.
 */
.teri-orb-dock--bottom-right {
  position: fixed;
  right: var(--fm-space-4, 16px);
  bottom: var(--fm-space-4, 16px);
  z-index: 40;
}

.teri-orb-dock--bottom-left {
  position: fixed;
  left: var(--fm-space-4, 16px);
  bottom: var(--fm-space-4, 16px);
  z-index: 40;
}

.teri-orb-dock--top-right {
  position: fixed;
  right: var(--fm-space-4, 16px);
  top: var(--fm-space-4, 16px);
  z-index: 40;
}

.teri-orb-dock--inline {
  position: relative;
  display: inline-grid;
}

.teri-orb-dock--center {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 60;
  pointer-events: none;
}
.teri-orb-dock--center .teri-orb-root {
  pointer-events: auto;
}

@media (max-width: 480px) {
  .teri-orb-dock--bottom-right,
  .teri-orb-dock--bottom-left {
    right: var(--fm-space-3, 12px);
    left: auto;
    bottom: calc(var(--fm-space-3, 12px) + env(safe-area-inset-bottom, 0px));
  }
}