/**
 * Unified Layout CSS
 * Single container for both split mode and PiP mode
 * Layout switching controlled via CSS class toggling (.mode-split / .mode-pip)
 */

/* ==========================================
   VIDEO CONTAINER - Unified
   ========================================== */
.video-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Base video element styles */
.video-element {
  position: relative;
  background-color: #1a1a1a;
  border-radius: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.video-element video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Distinct background colors for video elements (for visual identification during dev) */
.video-element.self-webcam { background-color: #2a3a4a; }
.video-element.self-desktop { background-color: #3a2a4a; }
.video-element.remote-self { background-color: #2a4a3a; }
.video-element.remote-desktop { background-color: #4a2a3a; }

/* Video label styling (used in PiP stack) */
.video-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  z-index: 10;
  pointer-events: none;
  color: #fff;
  font-weight: 500;
}

/* Swap button in PiP stack */
.swap-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  transition: transform 0.2s, background-color 0.2s;
}

.swap-btn:hover {
  background-color: #6d4aff;
  color: white;
  transform: scale(1.1);
}

/* ==========================================
   SPLIT MODE STRUCTURE
   ========================================== */
.split-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
}

/* Each side of split */
.split-side {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: width 0.3s ease;
}

.split-side.self-side {
  width: var(--split-left-width, 50%);
  padding: 0;
}

.split-side.remote-side {
  width: var(--split-right-width, 50%);
  padding: 0;
}

/* Videos column within each side */
.videos-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

/* Video elements in split mode - flex items sharing space equally */
.split-side .video-element {
  flex: 1 1 50%;
  min-height: 0;
}

/* When only one video is visible in a column, it takes full space */
.videos-column:has(> .video-element:not(.hidden)):only-child {
  /* This handles edge cases where only one element is visible */
}

/* Resize bar between split sides */
.resize-bar {
  position: absolute;
  left: var(--split-left-width, 50%);
  top: 0;
  width: 8px;
  height: 100%;
  background: rgba(91, 192, 190, 0.15);
  cursor: ew-resize;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.resize-bar:hover,
.resize-bar.active {
  background: rgba(91, 192, 190, 0.35);
}

.resize-bar::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 40px;
  background: rgba(91, 192, 190, 0.3);
  border-radius: 1px;
}

/* ==========================================
   PiP STACK - Preserved existing design
   ========================================== */
.pip-stack {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 320px;
  height: auto;
  z-index: 100;
  display: none;
  flex-direction: column;
  background: transparent;
  cursor: move;
}

.pip-stack.dragging {
  opacity: 0.85;
}

.pip-stack .video-element {
  height: 100px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  background: #000;
}

.pip-stack .video-label {
  bottom: 5px;
  left: 5px;
  font-size: 11px;
}

.pip-stack .swap-btn {
  display: flex;
}

/* PiP resizer handle */
.pip-resizer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  cursor: nwse-resize;
  z-index: 101;
}

.pip-resizer::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 16px 16px;
  border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;
}

/* ==========================================
   MODE SWITCHING - CSS Class Controlled
   ========================================== */
/* By default, container shows split mode */
.video-container.mode-split .split-wrapper {
  display: flex;
}

.video-container.mode-split .pip-stack {
  display: none;
}

/* PiP mode - still keeps split structure but transforms it */
.video-container.mode-pip .split-wrapper {
  display: flex;
}

.video-container.mode-pip .pip-stack {
  display: flex;
}

/* ==========================================
   PiP MODE - Transform split structure
   ========================================== */
/* Self-side becomes full viewport width in PiP mode */
.video-container.mode-pip .split-side.self-side {
  width: 100% !important;
  padding: 0;
}

/* Main video element fills full viewport in PiP mode */
.video-container.mode-pip .video-element.main-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  flex: none;
}

/* Ensure self-side is positioning context for main video */
.video-container.mode-pip .split-side.self-side {
  position: relative;
}

/* Hide remote-side in PiP mode */
.video-container.mode-pip .split-side.remote-side {
  display: none;
}

/* Hide resize bar in PiP mode */
.video-container.mode-pip .resize-bar {
  display: none;
}

/* ==========================================
   HIDDEN CLASS
   ========================================== */
.hidden {
  display: none !important;
}

/* ==========================================
   VIDEO LOADING OVERLAY
   ========================================== */
.video-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  z-index: 2;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-loading-overlay.hidden {
  display: none;
}

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

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

/* ==========================================
   PiP VIDEO SLOT (in stack)
   ========================================== */
.pip-video-slot {
  position: relative;
  background: #000;
  overflow: hidden;
}

.pip-video-slot video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================
   FIT MODE
   ========================================== */
.video-container.fit-mode .split-side .video-element video {
  object-fit: contain;
}

.video-container.fit-mode .split-side .video-element {
  background-color: #000;
}

/* The video area fills the remaining call page height below the titlebar. */
#unified-video-container {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}

#unified-video-container .split-side { min-width: 0; min-height: 0; }
#unified-video-container .videos-column { width: 100%; min-height: 0; }
#unified-video-container .video-element { transition: none; }
#unified-video-container .resize-bar { left: var(--divider-position, 50%); touch-action: none; }
.call-page.ui-hidden #unified-video-container .resize-bar { opacity: 0; pointer-events: none; }

/* Source headers and mute overlays travel with the original video wrapper. */
#unified-video-container .video-element > .video-panel-header { z-index: 30; }
#unified-video-container .video-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#unified-video-container .video-title-content .status-dot { flex-shrink: 0; }
#unified-video-container .pip-swap-btn {
  display: none;
  position: static;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
  pointer-events: auto;
}
#unified-video-container.mode-pip #pip-stack-container .pip-swap-btn { display: block; }
.call-page.ui-hidden #unified-video-container .pip-swap-btn { visibility: hidden; pointer-events: none; }
#unified-video-container .self-webcam > video { transform: scaleX(-1); }

/* PiP size follows its visible video edges at every resize. */
#unified-video-container .pip-overlay {
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 0;
  touch-action: none;
}
#unified-video-container .pip-stack-container { gap: 0; }
#unified-video-container .pip-stack-container > .video-element {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: var(--video-aspect, 1.777777778);
}
#unified-video-container .pip-stack-container > .video-element > video {
  position: absolute;
  inset: 0;
  object-fit: contain;
}
#unified-video-container .pip-overlay-handle[data-handle] { z-index: 20; }
#unified-video-container .pip-overlay .handle-center { pointer-events: none; }
#unified-video-container .video-element > .empty-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
}

@media (max-width: 768px) {
  #unified-video-container.mode-split .split-wrapper { flex-direction: column; }
  #unified-video-container.mode-split .split-side.self-side {
    width: 100%; height: var(--split-left-width, 50%);
  }
  #unified-video-container.mode-split .split-side.remote-side {
    width: 100%; height: var(--split-right-width, 50%);
  }
  #unified-video-container.mode-split .resize-bar {
    left: 0; top: var(--divider-position, 50%); width: 100%; height: 8px; cursor: ns-resize;
  }
}