/* Purple film avatar. Idle, thinking, and typing are separate clips cross-faded in one circle. */
.bia-film {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  background: #d8d4ce;
  flex: 0 0 auto;
}

.bia-film--dock {
  width: 56px;
  height: 56px;
}

.bia-film--stage {
  width: 240px;
  height: 240px;
}

.bia-film-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
}

.bia-film-clip.is-on {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .bia-film-clip {
    transition: opacity 0.25s ease;
  }
}

/* Nav, phone bar, and the ask-bia button use the same idle clip. */
video.bia-mark {
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #d8d4ce;
}

/* Sidebar and phone bar: the face is the icon, large enough to read on ink. */
video.bia-mark.bia-mark--nav,
video.bia-mark.bia-mark--mobile {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  min-width: 32px;
  flex: 0 0 auto;
}

.insights-avatar {
  border-radius: 50%;
  overflow: hidden;
  background: #d8d4ce;
}

.insights-avatar video {
  width: 38px;
  height: 38px;
  object-fit: cover;
  display: block;
}

/* Hue shifts of the filmed purple. Purple is the clip itself. */
html[data-bia-tint="coral"] .bia-film,
html[data-bia-tint="coral"] video.bia-mark {
  filter: hue-rotate(120deg) saturate(1.2);
}

html[data-bia-tint="emerald"] .bia-film,
html[data-bia-tint="emerald"] video.bia-mark {
  filter: hue-rotate(240deg) saturate(1.1);
}

html[data-bia-tint="golden"] .bia-film,
html[data-bia-tint="golden"] video.bia-mark {
  filter: hue-rotate(75deg) brightness(1.1);
}

html[data-bia-tint="mono"] .bia-film,
html[data-bia-tint="mono"] video.bia-mark {
  filter: grayscale(1) contrast(1.1);
}

/* Floater: drag uses left/top. A double-click tucks it to a small face. */
.assistant-dock-launch {
  touch-action: none;
  user-select: none;
}

.assistant-dock-launch.is-placed {
  top: auto;
  right: auto;
  bottom: auto;
}

.assistant-dock-launch.is-dragging {
  cursor: grabbing;
}

.assistant-dock-launch.is-tucked,
.assistant-dock-launch.is-tucked video.bia-mark {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  min-width: 40px;
}