/* Date-comparison overlay (compare.js / _compare.html). Pane B mounts into
   #compareContainer, the sibling right after #container. z-index 1001 keeps
   pane B above pane A's comment hotspots (comments.css: 1000) yet below the
   title bar / scene list (1002+), toasts (1100) and the AppMap mini-map
   shell (9990). */

#compareContainer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    z-index: 1001;
}
body.compare-active #compareContainer { display: block; }

/* The point-cloud tray (z-index 1000) would end up unreachable under pane B
   in portrait split - hide it while comparing. */
body.compare-active #pointcloud-tray { display: none; }

/* webxr.js reveals the VR button via inline style.display, so only
   !important wins here; the button comes back untouched on exit. */
body.compare-active #enterVrButton { display: none !important; }

/* The owner watermark (base/logo.html, z-index: 1) sits bottom-right where
   pane B covers it. Lift it just above pane B so branding stays visible; the
   inline z-index needs !important to override. */
body.compare-active #projectLogo { z-index: 1002 !important; }

/* == Split mode - axis follows the viewport ==
   Landscape: A left / B right. Portrait: A top / B bottom. Axis flips fire a
   window resize, which each Marzipano viewer handles itself; manual
   updateSize() is only needed on enter/exit/mode switch (compare.js). */
@media (orientation: landscape) {
    body.compare-split #container        { width: 50%; }
    body.compare-split #compareContainer {
        left: 50%;
        width: 50%;
        border-left: 1px solid rgba(255, 255, 255, 0.55);
    }
}
@media (orientation: portrait) {
    body.compare-split #container        { height: 50%; }
    body.compare-split #compareContainer {
        top: 50%;
        height: 50%;
        border-top: 1px solid rgba(255, 255, 255, 0.55);
    }
}

/* == Curtain mode ==
   Both viewers render full-viewport so pixels align; pane B is clipped away
   left of the divider. clip-path clips hit-testing too, so drags left of the
   divider reach pane A and drags right of it reach pane B. */
body.compare-curtain #compareContainer {
    clip-path: inset(0 0 0 var(--compare-divider, 50%));
}

#compareDivider {
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    left: var(--compare-divider, 50%);
    transform: translateX(-50%);
    width: 24px;
    cursor: ew-resize;
    touch-action: none;
    z-index: 1001;
}
body.compare-curtain #compareDivider { display: block; }
#compareDivider::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.75);
}
.compare-divider-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background-color: rgba(20, 20, 22, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.compare-divider-grip::before,
.compare-divider-grip::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: translateY(-50%);
}
.compare-divider-grip::before { left: 6px;  border-right: 6px solid #fff; }
.compare-divider-grip::after  { right: 6px; border-left: 6px solid #fff; }

/* == Pane labels + toolbar - dark blurred pills (like #sceneTitle select),
   pinned just below the 40px title bar. == */
.compare-pane-label,
#compareBar {
    display: none;
    position: absolute;
    z-index: 1001;
    color: #fff;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(20, 20, 22, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
body.compare-active .compare-pane-label { display: block; }
body.compare-active #compareBar { display: flex; }

#comparePaneA {
    top: 48px;
    left: 8px;
    padding: 5px 10px;
}

/* Pane-A label mirrors pane B: curtain -> top-left (top-centre is the
   toolbar); split -> top-centre of pane A. Landscape pane A spans 0..50% ->
   centre 25%; portrait pane A is full width -> 50%, dropped below the
   top-centre toolbar (top 48px + 36px row) so the two don't overlap. */
@media (orientation: landscape) {
    body.compare-split #comparePaneA { left: 25%; transform: translateX(-50%); }
}
@media (orientation: portrait) {
    body.compare-split #comparePaneA { top: 92px; left: 50%; transform: translateX(-50%); }
}

/* The date select is its own pill - keep the wrapper invisible. */
#comparePaneB {
    border: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#compareDate {
    height: 28px;
    padding: 0 8px;
    color: #fff;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(20, 20, 22, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Pane-B label per mode: curtain -> top-right (top-center is the toolbar);
   split -> top-center of pane B. The wrapper is shrink-to-fit (absolute, no
   width), so translateX(-50%) centres it on the pane's mid-line: landscape
   pane B spans 50%..100% -> centre 75%; portrait pane B is full width -> 50%. */
body.compare-curtain #comparePaneB { top: 48px; right: 8px; }
@media (orientation: landscape) {
    body.compare-split #comparePaneB { top: 48px; left: 75%; transform: translateX(-50%); }
}
@media (orientation: portrait) {
    body.compare-split #comparePaneB { top: calc(50% + 8px); left: 50%; transform: translateX(-50%); }
}

#compareBar {
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}
#compareBar a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
}
#compareBar a:hover { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); }

/* Mode toggle shows the mode it switches TO (play/pause convention). */
#compareModeToggle .icon { display: none; }
body.compare-split   #compareModeToggle .mode-curtain { display: block; }
body.compare-curtain #compareModeToggle .mode-split   { display: block; }

/* Curtain = sync always on; the toggle only exists in split. */
body.compare-curtain #compareSyncToggle { display: none; }
#compareSyncToggle { opacity: 0.45; }
#compareSyncToggle.enabled { opacity: 1; }