/* ============================================================
   Video Popup Chat — Frontend Widget
   Reel-style layout: video fills panel, choices float on top
   ============================================================ */

:root {
  --vac-purple:      #6C3CFF;
  --vac-panel-w:     320px;
  --vac-panel-h:     560px;
  --vac-radius:      20px;
  --vac-z:           999999;
  --vac-anim:        0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brand color is scoped to #vac-root so it doesn't leak */
#vac-root { --vac-purple: #6C3CFF; /* overridden by inline style tag from JS */ }

/* ── Root container ─────────────────────────────────────── */

#vac-root {
  position: fixed;
  z-index: var(--vac-z);
  bottom: 20px;
  right:  20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  pointer-events: none;
}

#vac-root.vac-pos-bottom-left {
  right: auto;
  left:  24px;
  align-items: flex-start;
}

/* ── Bubble wrap (circle + optional label) ──────────────── */

.vac-bubble-wrap {
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-top: 10px;
}

.vac-bubble {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: var(--vac-purple);
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.9),
    0 0 0 5px var(--vac-purple),
    0 6px 24px rgba(0,0,0,0.35);
  transition: transform var(--vac-anim), box-shadow var(--vac-anim);
}

.vac-bubble:hover { transform: scale(1.08); }

.vac-bubble img,
.vac-bubble video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vac-bubble-default-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: #fff;
  user-select: none;
}

/* Pulse ring */
.vac-bubble::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--vac-purple);
  opacity: 0;
  animation: vac-pulse 2.4s ease-out infinite;
}

@keyframes vac-pulse {
  0%  { transform: scale(0.88); opacity: 0.7; }
  70% { transform: scale(1.3);  opacity: 0;   }
  100%{ opacity: 0; }
}

.vac-bubble-label {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* ── Panel (fixed size; video fills it entirely) ────────── */

.vac-panel {
  pointer-events: all;
  position: relative;           /* children position absolute inside this */
  width:  var(--vac-panel-w);
  height: var(--vac-panel-h);
  max-height: calc(100dvh - 130px);
  border-radius: var(--vac-radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.3);
  transform-origin: bottom right;
  animation: vac-panel-in var(--vac-anim) both;
  margin-bottom: 12px;
}

#vac-root.vac-pos-bottom-left .vac-panel {
  transform-origin: bottom left;
}

@keyframes vac-panel-in {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.vac-panel.vac-panel-out {
  animation: vac-panel-out var(--vac-anim) both;
}

@keyframes vac-panel-out {
  from { opacity: 1; transform: scale(1)    translateY(0);    }
  to   { opacity: 0; transform: scale(0.85) translateY(20px); }
}

/* ── Video layer — absolute, fills entire panel ─────────── */

.vac-video-wrap {
  position: absolute;
  inset: 0;
  background: #111;
  overflow: hidden;
}

/* Loading spinner */
.vac-video-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  z-index: 2;
  transition: opacity 0.3s;
}

.vac-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--vac-purple);
  border-radius: 50%;
  animation: vac-spin 0.8s linear infinite;
}

@keyframes vac-spin { to { transform: rotate(360deg); } }

/* Player elements */
.vac-player-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vac-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* default — fills frame */
  display: block;
  background: #000;
}

.vac-iframe-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Contain mode (letterbox for horizontal videos) ─────── */

.vac-fit-contain .vac-video-el {
  object-fit: contain;
}

/* 16:9 wrapper for iframes in contain mode — centers them */
.vac-iframe-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;  /* 16:9 */
  flex-shrink: 0;
}

.vac-iframe-ratio .vac-iframe-el {
  position: absolute;
  inset: 0;
}

/* ── Panel header — floats at top ───────────────────────── */

.vac-panel-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
}

.vac-panel-header-spacer { flex: 1; }

.vac-back-btn,
.vac-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: background var(--vac-anim);
}

.vac-back-btn:hover,
.vac-close-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* ── Choices overlay — floats at bottom over the video ──── */

.vac-choices-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  /* Gradient fades from dark-at-bottom to transparent-at-top */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.30) 50%,
    transparent      100%
  );
  padding: 28px 14px 0;
}

/* Individual choice buttons */
.vac-choices {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}

.vac-choice-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  line-height: 1.3;
  transition: background var(--vac-anim), border-color var(--vac-anim), transform 0.15s;
}

.vac-choice-btn:hover {
  background: rgba(108, 60, 255, 0.25);
  border-color: rgba(108, 60, 255, 0.50);
  transform: translateY(-1px);
}

.vac-choice-btn:active { transform: translateY(0); }

.vac-choice-letter {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vac-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── Branding ────────────────────────────────────────────── */

.vac-branding {
  padding: 6px 0 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}

/* ── Node transition ─────────────────────────────────────── */

.vac-node-enter {
  animation: vac-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes vac-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ── Responsive — full-screen on mobile ─────────────────── */

@media (max-width: 480px) {
  #vac-root {
    bottom: 0;
    right:  0;
    left:   0;
    align-items: stretch;
  }

  .vac-bubble-wrap {
    position: fixed;
    bottom: 18px;
    right:  14px;
    pointer-events: all;
    z-index: var(--vac-z);
    align-items: center;
  }

  #vac-root.vac-pos-bottom-left .vac-bubble-wrap {
    right: auto;
    left:  14px;
  }

  .vac-panel {
    position: fixed;
    bottom: 0;
    left:   0;
    right:  0;
    width:  100%;
    height: 88dvh;
    max-height: 88dvh;
    border-radius: var(--vac-radius) var(--vac-radius) 0 0;
    transform-origin: bottom center;
    margin-bottom: 0;
  }
}