html.dev-playground,
html:has(body.dev-playground) {
  height: 100%;
  overflow: hidden;
}

body.dev-playground {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family: system-ui, sans-serif;
  background-color: #514943;
}

/*
 * Match Magento admin + Sidekick reference:
 * - Screenshot fills viewport height, pinned left
 * - Right 15% of image hidden (baked Sidekick) — live panel overlays instead
 * - Viewport clips overflow (no horizontal scroll)
 * - Sidekick: default width/position from sidekick.css, on top of the right edge
 */
.dev-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.dev-bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: auto;
  max-width: none;
  display: block;
  /* Hide baked-in Sidekick column in the PNG; live panel replaces it */
  clip-path: inset(0 15% 0 0);
  user-select: none;
  pointer-events: none;
}

body.dev-playground #magento-ai-sidekick-root {
  z-index: 99999;
}

body.dev-playground #magento-ai-sidekick-root .sk-resize {
  display: none;
}

/* Blend live panel over where the screenshot Sidekick was */
body.dev-playground #magento-ai-sidekick-root .sk-panel {
  border-left: none;
  box-shadow: none;
}

/* Only chat messages scroll */
body.dev-playground .sk-pane > :not(.sk-messages):not(.sk-input-row) {
  overflow: hidden !important;
}

body.dev-playground .sk-timeline,
body.dev-playground .sk-logs,
body.dev-playground .sk-loop-panel,
body.dev-playground .sk-session-list,
body.dev-playground #sk-approval-body {
  overflow: hidden !important;
}

body.dev-playground .sk-messages {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}