/* Vision compact skin for the Neko client. Enabled only when
 * vision-compact.js sees ?compact=1. Keep Neko's functional video overlays
 * (fullscreen, mobile keyboard, clipboard, control acquisition), remove the
 * fixed branding/header/footer rows, and retain one floating tools button that
 * opens the stock Files/Settings side panel. */
html.vision-compact,
html.vision-compact body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden !important;
  background: #000;
}

html.vision-compact body > p,
html.vision-compact img[src*="logo"] {
  display: none !important;
}

html.vision-compact #neko,
html.vision-compact #neko .neko-main {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: hidden;
}

html.vision-compact #neko .neko-main .room-container {
  display: none !important;
}

html.vision-compact #neko .neko-main .video-container {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Remove the top row from layout but preserve its hamburger as a floating
 * tools button. It toggles Neko's native side panel where Files/Settings live. */
html.vision-compact #neko .neko-main .header-container {
  position: fixed;
  z-index: 1000;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: block;
  background: transparent;
  pointer-events: none;
}

html.vision-compact .header-container .header {
  display: block;
}

html.vision-compact .header-container .header .neko,
html.vision-compact .header-container .header .menu li:not(:last-child) {
  display: none !important;
}

html.vision-compact .header-container .header .menu {
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

html.vision-compact .header-container .header .menu li:last-child {
  margin: 0;
}

html.vision-compact .header-container .header .menu li:last-child .toggle {
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(18, 18, 22, 0.78);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
}

/* Login/about/unsupported branding containers otherwise reserve dead space
 * after their logo image is hidden. */
html.vision-compact .connect .logo,
html.vision-compact .about .logo,
html.vision-compact .unsupported .logo {
  display: none !important;
}

@media only screen and (max-width: 1024px) {
  html.vision-compact #neko,
  html.vision-compact #neko .neko-main {
    position: fixed;
    height: 100%;
  }

  html.vision-compact #neko.expanded .neko-main {
    height: 40vh;
  }
}