/* Amplify gold traveling ring — overlays GHL chat (page-level; widget is Shadow DOM) */
.as-ghl-gold-ring {
  position: fixed;
  pointer-events: none;
  z-index: 2147483646;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.as-ghl-gold-ring.is-visible {
  opacity: 1;
}

.as-ghl-gold-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--as-ghl-ring-angle, 0deg),
    transparent 0deg,
    rgba(212, 168, 83, 0.12) 50deg,
    rgba(245, 230, 184, 0.92) 85deg,
    rgba(201, 162, 39, 0.88) 115deg,
    rgba(212, 168, 83, 0.35) 145deg,
    transparent 200deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: as-ghl-ring-travel 3.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(212, 168, 83, 0.35))
    drop-shadow(0 0 14px rgba(201, 162, 39, 0.18));
}

.as-ghl-gold-ring--panel::before {
  padding: 2.5px;
  filter: drop-shadow(0 0 8px rgba(212, 168, 83, 0.4))
    drop-shadow(0 0 18px rgba(201, 162, 39, 0.22));
}

.as-ghl-gold-ring--circle::before {
  padding: 2.5px;
}

.as-ghl-gold-ring--circle {
  border-radius: 50% !important;
}

@property --as-ghl-ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes as-ghl-ring-travel {
  to {
    --as-ghl-ring-angle: 360deg;
  }
}

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .as-ghl-gold-ring::before {
    animation: none;
    background: linear-gradient(
      135deg,
      rgba(212, 168, 83, 0.55),
      rgba(245, 230, 184, 0.85),
      rgba(201, 162, 39, 0.55)
    );
  }
}