/* LiveLoop's split live preview (owner, 2026-10-19): a saved state beside the
 * live stage, cameras linked. The live viewport keeps the left half; the pane
 * takes the right and follows the chat dock exactly as the viewport does.
 * :root:root:root:root because the themes paint these surfaces with forced id
 * rules (see portal.css). */
:root:root:root:root body.liveloop-compare #liveloop-viewport { right: 50% !important; }
:root:root:root:root #liveloop-compare-pane {
  position: absolute; top: 0; bottom: 0; left: 50%; right: 0; z-index: 2;
  min-width: 0; border-left: 1px solid rgba(255, 255, 255, .14); background: transparent;
}
:root:root:root:root body.liveloop-docked #liveloop-compare-pane { bottom: var(--live-chat-dock-h, 300px); }
/* The bar floats over the page rather than above it, so the saved view is the
   same size as the live one (owner, 2026-10-19: "can we get the view size to
   be the same, the one on the right is different due to the tool bar"). */
:root:root:root:root #liveloop-compare-pane .liveloop-compare-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px 4px 12px;
  background: rgba(10, 12, 20, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #eef2fb; font: 700 12px/1.3 Inter, system-ui, sans-serif;
  opacity: .9; transition: opacity .2s ease;
}
:root:root:root:root #liveloop-compare-pane:hover .liveloop-compare-head { opacity: 1; }
:root:root:root:root #liveloop-compare-pane .liveloop-compare-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:root:root:root #liveloop-compare-pane .liveloop-compare-link { flex: 0 0 auto; color: #9fe8c4; font-weight: 600; white-space: nowrap; }
:root:root:root:root #liveloop-compare-pane .liveloop-compare-head button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px; background: rgba(255, 255, 255, .06); color: #eef2fb; font: 700 12px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
:root:root:root:root #liveloop-compare-pane .liveloop-compare-head button:hover { background: rgba(255, 255, 255, .14); }
/* Painted like the live frame: white here, transparent or solid under the backdrops (portal-backdrops.css). */
#liveloop-compare-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; display: block; color-scheme: dark; }
html.light-mode #liveloop-compare-pane .liveloop-compare-head { background: rgba(238, 238, 242, .9); color: #16161c; border-bottom-color: rgba(0, 0, 0, .12); }
html.light-mode #liveloop-compare-pane .liveloop-compare-head button { color: #16161c; border-color: rgba(0, 0, 0, .14); background: rgba(0, 0, 0, .05); }

/* The menu, in the Versions menu's style. */
#liveloop-compare-menu { position: absolute; right: 14px; top: 58px; z-index: 60; display: flex; flex-direction: column; gap: 2px; min-width: 280px; max-width: min(440px, calc(100vw - 28px)); max-height: min(60vh, 520px); overflow: auto; padding: 6px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: #11111a; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
#liveloop-compare-menu.hidden { display: none; }
#liveloop-compare-menu p { margin: 6px 8px; color: #9a9aa8; font: 600 12px/1.4 Inter, system-ui, sans-serif; }
#liveloop-compare-menu button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #dcdce6; font: 700 12px/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
#liveloop-compare-menu button:hover, #liveloop-compare-menu button[aria-current="true"] { background: rgba(255, 255, 255, .08); color: #fff; }
#liveloop-compare-menu button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#liveloop-compare-menu button small { flex: 0 0 auto; color: #7d7d8f; font-size: 11px; }
#liveloop-compare-menu button.liveloop-compare-stop { color: #ffb4b4; border-bottom: 1px solid rgba(255, 255, 255, .1); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
#liveloop-compare-btn[aria-expanded="true"], body.liveloop-compare #liveloop-compare-btn { background: #6d28d9; color: #fff; }