/* Atlas bubble v3 (2026-10-01): crystal-clear glass, sharp rim light, saturated glow.
   Page backgrounds stay off this file. Sizes inside the bubble use container units (cqw), so every
   highlight, rim and glow scales with the bubble, whatever size the page gives it.
   Themes: [data-glow="blue"] (default) and [data-glow="amber"]. Custom: set --ab3-g, --ab3-g-hi, --ab3-g-deep. */

.abub3 {
  --ab-size: 180px;
  --ab-amp: 0;
  --ab3-g: #2F8CFF;        /* core glow */
  --ab3-g-hi: #A8D8FF;     /* rim and hot highlight */
  --ab3-g-deep: #0A4FE0;   /* glass edge tint */
  position: relative;
  display: block;          /* any tag can mount it; an inline box cannot be a size container */
  width: var(--ab-size);
  height: var(--ab-size);
  flex: none;
  container-type: size;
  color: #f4f7fb;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.abub3[data-glow="amber"] {
  --ab3-g: #FF9A1F;
  --ab3-g-hi: #FFE39A;
  --ab3-g-deep: #F26300;
}

.abub3.is-fixed {
  position: fixed;
  z-index: 12000;
  right: 16px;
  bottom: 16px;
  cursor: grab;
}

.abub3.is-fixed.is-drag { cursor: grabbing; transition: none; }
.abub3.is-fixed.is-snap { transition: left 220ms ease, top 220ms ease; }

.ab3-bob,
.ab3-sphere,
.ab3-float {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- sphere + outer glow */
.ab3-sphere {
  position: relative;
  border-radius: 50%;
  transform: scale(calc(1 + (0.035 * var(--ab-amp))));
  transform-origin: 50% 54%;
  box-shadow:
    0 0 0 max(1px, 0.45cqw) color-mix(in srgb, var(--ab3-g) 70%, transparent),
    0 0 max(6px, 3.5cqw) max(1px, 0.8cqw) color-mix(in srgb, var(--ab3-g) 82%, transparent),
    0 0 max(14px, 11cqw) max(2px, 2.5cqw) color-mix(in srgb, var(--ab3-g) 48%, transparent),
    0 0 max(28px, 26cqw) max(4px, 5cqw) color-mix(in srgb, var(--ab3-g) 20%, transparent);
}

.ab3-aura {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  pointer-events: none;
  opacity: calc(0.82 + (0.18 * var(--ab-amp)));
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--ab3-g) 0%, transparent) 72%,
    color-mix(in srgb, var(--ab3-g) 42%, transparent) 80%,
    color-mix(in srgb, var(--ab3-g) 14%, transparent) 90%,
    transparent 100%);
}

/* ---------------------------------------------------------------- the glass body: clear, never milky */
.ab3-clip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  /* thin tinted edge only; the centre stays perfectly clear */
  background: radial-gradient(circle closest-side,
    transparent 0 62%,
    color-mix(in srgb, var(--ab3-g-deep) 12%, transparent) 80%,
    color-mix(in srgb, var(--ab3-g-deep) 34%, transparent) 93%,
    color-mix(in srgb, var(--ab3-g) 55%, transparent) 100%);
}

.ab3-well {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: none;
}

.abub3[data-well="dark"] .ab3-well {
  display: block;
  background:
    radial-gradient(circle at 50% 46%, #2C3542 0%, #161B22 52%, #07090C 100%);
}

.ab3-float {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.ab3-head {
  width: 80%;
  height: 80%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  /* full contrast and brightness: the head is the subject, the glass never dims it */
  filter:
    brightness(calc(1.14 + (0.16 * var(--ab-amp))))
    contrast(1.16)
    saturate(1.4)
    drop-shadow(0 0 calc(max(2px, 2.2cqw) * (1 + var(--ab-amp))) color-mix(in srgb, var(--ab3-g) 78%, transparent));
}

.abub3.is-broken .ab3-head { opacity: 0; }

/* light gathered by the sphere at the bottom of the glass */
.ab3-caustic {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 54% 20% at 50% 93%, color-mix(in srgb, var(--ab3-g-hi) 70%, transparent), transparent 72%),
    radial-gradient(ellipse 36% 9% at 50% 97%, rgba(255, 255, 255, 0.55), transparent 70%);
}

/* the refraction edge: the backdrop bends and splits a little at the rim */
.ab3-refract {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(max(0.6px, 0.35cqw)) saturate(1.7) brightness(1.18);
  backdrop-filter: blur(max(0.6px, 0.35cqw)) saturate(1.7) brightness(1.18);
  background: radial-gradient(circle closest-side,
    transparent 86.5%,
    rgba(120, 255, 255, 0.22) 90%,
    transparent 92.5%,
    rgba(255, 90, 210, 0.16) 95.5%,
    transparent 98%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 84%, #000 89%, #000 99%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 84%, #000 89%, #000 99%, transparent 100%);
}

/* crisp window highlight, top left: hard top edge, quick fall-off, no haze */
.ab3-spec {
  position: absolute;
  left: 14.5%;
  top: 8.5%;
  width: 33%;
  height: 15.5%;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-31deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.58) 26%, rgba(255, 255, 255, 0.14) 58%, rgba(255, 255, 255, 0) 80%);
}

/* pinpoint highlight, bottom right */
.ab3-spec2 {
  position: absolute;
  left: 68%;
  top: 79%;
  width: 9%;
  height: 4.6%;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-38deg);
  background: radial-gradient(ellipse at 50% 50%, #fff 0 32%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
}

/* glint that crosses the glass now and then */
.ab3-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

/* two crisp crescents on the inner edge: white along the upper left, the glow colour along the lower right */
.ab3-sweep::before,
.ab3-sweep::after {
  content: "";
  position: absolute;
  inset: 2.4%;
  border-radius: 50%;
  pointer-events: none;
}

.ab3-sweep::before {
  box-shadow: inset max(1px, 1.05cqw) max(1px, 1.25cqw) 0 0 rgba(255, 255, 255, 0.8);
  -webkit-mask: linear-gradient(135deg, #000 0%, #000 24%, transparent 46%);
  mask: linear-gradient(135deg, #000 0%, #000 24%, transparent 46%);
}

.ab3-sweep::after {
  box-shadow: inset calc(-1 * max(1px, 0.9cqw)) calc(-1 * max(1px, 1.05cqw)) 0 0 var(--ab3-g-hi);
  -webkit-mask: linear-gradient(315deg, #000 0%, #000 20%, transparent 42%);
  mask: linear-gradient(315deg, #000 0%, #000 20%, transparent 42%);
}

.ab3-sweep i {
  position: absolute;
  left: 0;
  top: -12%;
  width: 16%;
  height: 124%;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 46%, rgba(255, 255, 255, 0.85) 54%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen;
  transform: translateX(-180%) rotate(18deg);
}

.ab3-sweep i.is-on { animation: ab3-sweep 0.9s cubic-bezier(.45, .05, .25, 1) 1; }

/* ---------------------------------------------------------------- sharp bright rim light */
.ab3-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: calc(0.92 + (0.08 * var(--ab-amp)));
  background: conic-gradient(from 215deg,
    #ffffff 0deg,
    var(--ab3-g-hi) 26deg,
    var(--ab3-g) 70deg,
    color-mix(in srgb, var(--ab3-g) 55%, transparent) 120deg,
    var(--ab3-g) 165deg,
    #ffffff 190deg,
    var(--ab3-g-hi) 214deg,
    var(--ab3-g) 262deg,
    color-mix(in srgb, var(--ab3-g) 60%, transparent) 310deg,
    #ffffff 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - max(2.2px, 1.5cqw)), #000 calc(100% - max(1.6px, 1.1cqw)), #000 calc(100% - 0.5px), transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - max(2.2px, 1.5cqw)), #000 calc(100% - max(1.6px, 1.1cqw)), #000 calc(100% - 0.5px), transparent 100%);
}

/* needs-you: a bright ring that pings outward */
.ab3-ring {
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: max(1.5px, 0.9cqw) solid var(--ab3-g-hi);
  box-shadow: 0 0 max(6px, 3cqw) var(--ab3-g), inset 0 0 max(4px, 2cqw) color-mix(in srgb, var(--ab3-g) 70%, transparent);
  transition: opacity 0.3s;
}

.ab3-ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: max(1px, 0.6cqw) solid var(--ab3-g-hi);
  opacity: 0;
}

.abub3[data-state="needs-you"] .ab3-ring { opacity: 1; }

/* ---------------------------------------------------------------- talk card */
.ab3-card {
  position: absolute;
  left: calc(100% + 10px);
  top: 12%;
  width: max-content;
  max-width: min(220px, 34vw);
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(10, 12, 16, 0.94);
  border: 1px solid color-mix(in srgb, var(--ab3-g-hi) 45%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 18px -6px var(--ab3-g);
  color: #f4f7fb;
  font: 500 13px/1.35 "Segoe UI", "Helvetica Neue", sans-serif;
  letter-spacing: 0;
  text-align: left;
  pointer-events: auto;
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
  white-space: normal;
}

.abub3.is-card-left .ab3-card { left: auto; right: calc(100% + 10px); }
.abub3.is-stack .ab3-card { left: 50%; right: auto; top: calc(100% + 8px); transform: translateX(-50%); max-width: min(220px, 70vw); }
.abub3.is-stack.is-card-above .ab3-card { top: auto; bottom: calc(100% + 8px); }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .abub3.is-live .ab3-bob { animation: ab3-bob 2.8s ease-in-out infinite; }
  .abub3.is-live .ab3-float { animation: ab3-drift 5.2s ease-in-out infinite; }
  .abub3.is-live.is-still .ab3-bob,
  .abub3.is-live.is-still .ab3-float { animation: none; }
  .abub3.is-live .ab3-rim { animation: ab3-rim 10s linear infinite; }
  .abub3.is-live .ab3-aura { animation: ab3-breathe 3.6s ease-in-out infinite; }
  .abub3.is-live[data-state="thinking"] .ab3-rim { animation-duration: 3.2s; }
  .abub3.is-live[data-state="thinking"] .ab3-aura { animation-duration: 1.2s; }
  .abub3.is-live[data-state="needs-you"] .ab3-ring::after { animation: ab3-ping 1.8s cubic-bezier(.2, .7, .3, 1) infinite; }
}

@keyframes ab3-bob {
  0%, 100% { transform: translate3d(0, -5px, 0) rotate(-1deg); }
  50% { transform: translate3d(2px, 5px, 0) rotate(1deg); }
}

@keyframes ab3-drift {
  0%, 100% { transform: translate3d(-1.5%, 0.5%, 0); }
  50% { transform: translate3d(1.5%, -1%, 0); }
}

@keyframes ab3-rim { to { transform: rotate(360deg); } }

@keyframes ab3-breathe {
  0%, 100% { opacity: 0.78; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes ab3-sweep {
  0% { opacity: 0; transform: translateX(-180%) rotate(18deg); }
  22% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(640%) rotate(18deg); }
}

@keyframes ab3-ping {
  0% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .abub3,
  .abub3 * {
    animation: none !important;
    transition: none !important;
  }
  .ab3-sweep i { opacity: 0 !important; }
}

/* ---------------------------------------------------------------- the floating one on phones, minimised */
@media (max-width: 720px) {
  .abub3.is-fixed { --ab-size: 120px; }
}

.abub3.is-min { --ab-size: 56px; --ab-amp: 0; }
.abub3.is-min .ab3-card { display: none; }