/* CHATI-AI V6.2 — single-layer backgrounds + seamless crossfade video loops */

.v6-video-avatar-host {
  position: relative;
  overflow: hidden;
}

.v6-video-source-hidden {
  visibility: hidden !important;
}

.v6-avatar-video-proxy,
.v6-avatar-editor-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

.character-card.v6-video-avatar-host > .v6-avatar-video-proxy,
.character-card .v6-avatar-video-proxy {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.background-preview,
.group-background-preview {
  position: relative;
  overflow: hidden;
}

.v6-preview-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  pointer-events: none;
}

.background-preview > span,
.group-background-preview > span {
  position: relative;
  z-index: 1;
}

.background-preview.has-image > span,
.group-background-preview.has-image > span {
  opacity: 0;
}

.chat-background {
  overflow: hidden;
}

/* Video is a real media layer. Static images stay ONLY on .chat-background. */
.v6-chat-background-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.chat-background::before,
.chat-background::after {
  z-index: 1;
}

.chat-background.v6-has-video-background {
  background-image: none !important;
}

video.v6-loop-video {
  animation: none !important;
}

@media (max-width: 760px) {
  /*
   * One source, one layer.
   * Cover fills the phone without adding a duplicate foreground layer.
   */
  .chat-background,
  .chat-background.active {
    transform: none !important;
  }

  .chat-background:not(.v6-has-video-background) {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #09090d !important;
  }

  .v6-chat-background-media {
    object-fit: cover;
    object-position: center center;
    background: #09090d;
  }

  #chatView {
    min-height: 0;
    height: var(--app-height, 100dvh) !important;
    border-radius: 0;
  }
}

@media (max-width: 520px) {
  .chat-background.active {
    opacity: .4;
  }
}


/* Two decoded video layers overlap briefly at the seam. The host keeps its
   own positioning (the chat background is absolute); JS adds relative only
   when the host is static. Opacity transitions are set per fade from JS. */
.v6-smooth-loop-host {
  overflow: hidden;
}

.v6-smooth-loop-host > video.v6-loop-video {
  will-change: opacity;
}

/* The standby copy always sits exactly over the visible one. */
.v6-smooth-loop-host > video.v6-loop-twin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-card .v6-avatar-video-proxy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v6-profile-avatar.v6-smooth-loop-host,
.v6-mini-avatar.v6-smooth-loop-host {
  display: block;
}

.v6-profile-avatar.v6-smooth-loop-host > video.v6-loop-video,
.v6-mini-avatar.v6-smooth-loop-host > video.v6-loop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v6-loop-twin {
  pointer-events: none;
}