/* ===== Givy — Admin & Store Assistant (No audio/camera) =====
   Palette: dark + gold + violet (Gifts 3D)
   This stylesheet handles the floating assistant container, gestures,
   anchor-highlights, subtle 3D/glass effects, and small toasts.
   -------------------------------------------------------------- */

:root{
  --givy-bg: rgba(18,18,26,.55);
  --givy-brd: rgba(255,255,255,.10);
  --givy-text: #e9e9f2;
  --givy-muted: #a3a3b2;
  --givy-gold: #f2c87b;
  --givy-violet: #a88bff;
  --givy-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --givy-highlight: 0 0 0 2px rgba(168,139,255,.35), 0 0 25px rgba(168,139,255,.45);
}

/* Root container (fixed, no pointer-locking, no camera/mic) */
.givy-root {
  position: fixed;
  z-index: 2147483000; /* above everything */
  inset-inline-end: 18px; /* right in RTL */
  inset-block-end: 18px;  /* bottom */
  width: 260px;
  pointer-events: none; /* JS enables on interactive children only */
}

/* Card (glass + 3D) */
.givy-card {
  pointer-events: auto;
  background: var(--givy-bg);
  border: 1px solid var(--givy-brd);
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--givy-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
}

/* Stage where Lottie/Canvas renders */
.givy-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* square */
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
}

/* Idle floating effect */
.givy-float {
  animation: givyFloat 4.5s ease-in-out infinite;
}
@keyframes givyFloat {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-6px) }
}

/* Title/bubble (optional captions) */
.givy-bubble {
  margin-top: 8px;
  font-size: 13px;
  color: var(--givy-muted);
  text-align: center;
}

/* Subtle “halo” behind assistant */
.givy-halo {
  position: absolute;
  inset: -20%;
  filter: blur(50px);
  background:
    radial-gradient(circle at 25% 30%, rgba(168,139,255,.28), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(242,200,123,.22), transparent 60%);
  z-index: 0;
}

/* Mini toast (success/error/info) */
.givy-toast {
  position: fixed;
  inset-inline-end: 18px;
  inset-block-end: 300px; /* above card */
  max-width: 320px;
  background: var(--givy-bg);
  color: var(--givy-text);
  border: 1px solid var(--givy-brd);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--givy-shadow);
  font-size: 13px;
  line-height: 1.4;
  display: none;
  z-index: 2147483001;
}
.givy-toast.show { display: block; animation: givyToastIn .18s ease }
@keyframes givyToastIn {
  from { transform: translateY(6px); opacity: 0 }
  to   { transform: translateY(0);   opacity: 1 }
}
.givy-toast.success { border-color: rgba(34,197,94,.35) }
.givy-toast.error   { border-color: rgba(239,68,68,.45) }

/* Anchor highlight (when pointing to an element) */
.givy-highlight {
  position: absolute;
  pointer-events: none;
  border-radius: 12px;
  outline: 2px solid transparent;
  box-shadow: var(--givy-highlight);
  transition: all .12s ease;
  z-index: 2147483002;
}

/* Nudge pulse for CTA */
.givy-pulse {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  width: 16px; height: 16px;
  box-shadow: 0 0 0 0 rgba(168,139,255,.40);
  animation: givyPulse 1.8s infinite;
}
@keyframes givyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(168,139,255,.40) }
  70%  { box-shadow: 0 0 0 14px rgba(168,139,255,0) }
  100% { box-shadow: 0 0 0 0 rgba(168,139,255,0) }
}

/* Privacy/Object modes */
.givy-privacy .givy-stage { filter: saturate(.8) brightness(.95) }
.givy-object .givy-stage  { filter: contrast(.95) }

/* Compact mode (small screens) */
@media (max-width: 520px) {
  .givy-root { width: 200px; inset-inline-end: 12px; inset-block-end: 12px }
  .givy-toast { inset-block-end: 240px }
}

/* Utility (hidden) */
.givy-hidden { display: none !important; }