/* FreshTech bindings for the approved Liquid Glass v1.0 kit.
   Keep the shared kit files byte-identical to .Codex-coord/liquid-glass/. */

/* A user-started welcome stays in view while Alice speaks. The small silent
   teaser remains hero-bound; the fixed state is released after the shrink. */
.hero .alice-video-player.is-engaged {
  position: fixed;
  z-index: 90;
  right: 6%;
  bottom: 34px;
}

/* The existing wrapper owns visibility and motion. Its child owns the glass,
   avoiding a specificity fight with the old white-circle paint in base.css. */
.hero .alice-video-control-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.alice-video-glass {
  width: 100%;
  height: 100%;
  color: var(--white);
  pointer-events: none;
}

/* Copy the light phone glass through every viewport while keeping the photo's
   natural colour. 100% avoids both the kit's orange 175% boost and r40's
   accidental 0% greyscale; the low tint prevents a grey-white veil. */
.alice-video-glass,
.trade-play.lg {
  --lg-tint: .05;
  --lg-saturate: 100%;
}

/* Homepage call demo keeps its approved site colour under the glass rim. */
.call-playback button.lg {
  border: 0;
  background-color: var(--magenta);
  background-image: none;
}

.call-playback button.lg:hover {
  background-color: var(--purple);
  background-image: none;
}

/* Trades creates 18 controls, but trades.js gives these classes only to the
   active card. This restores absolute centring after the generic kit rule. */
.trade-play.lg {
  position: absolute;
  border: 0;
  background-image: none;
}

.trade-play.lg:not(:disabled):hover,
.trade-play.lg.is-playing {
  border: 0;
  background-color: rgba(255, 255, 255, var(--lg-tint));
  background-image: none;
  color: var(--white);
}

@media (max-width: 1100px) {
  .hero .alice-video-player.is-engaged {
    right: 5%;
    bottom: 30px;
  }
}

@media (max-width: 760px) {
  .hero .alice-video-player.is-engaged {
    right: 18px;
    bottom: 22px;
  }
}