playground.css

@media (min-width: 1024px) {
  html[data-current-path="/assistant/widget"] #content-area {
    position: relative;
    max-width: 1800px !important;
    margin-inline: auto;
    /* Percentage padding resolves against the parent, so cap it at half of the 1800px max-width */
    padding-right: calc(min(50%, 900px) + 1rem);
  }

  html[data-current-path="/assistant/widget"] #content {
    position: static;
  }

  html[data-current-path="/assistant/widget"] [data-assistant-preview] {
    position: absolute;
    inset: 0 1.5rem 0 auto;
    width: calc(50% - 2.5rem);
  }
}

html[data-current-path="/assistant/widget"]
  div:has(> iframe[title="Live Assistant Widget preview"]) {
  min-height: 0;
  flex: 1 1 0%;
}

html[data-current-path="/assistant/widget"]
  iframe[title="Live Assistant Widget preview"] {
  height: 100%;
}

/* The widget playground embeds /assistant/widget-preview in its preview
   iframe. The suffix match keeps localized paths covered. Hide every piece of
   docs chrome so only the widget renders, and keep the document transparent
   so the playground card provides the visible frame. */
html[data-current-path$="/assistant/widget-preview"] #navbar,
html[data-current-path$="/assistant/widget-preview"] #navbar-transition,
html[data-current-path$="/assistant/widget-preview"] #mobile-nav,
html[data-current-path$="/assistant/widget-preview"] #banner,
html[data-current-path$="/assistant/widget-preview"] #sidebar,
html[data-current-path$="/assistant/widget-preview"] #footer,
html[data-current-path$="/assistant/widget-preview"] #assistant-entry,
html[data-current-path$="/assistant/widget-preview"] #assistant-entry-mobile,
html[data-current-path$="/assistant/widget-preview"] [aria-label="Preview Widget"],
html[data-current-path$="/assistant/widget-preview"] [aria-label="Preview Widget Menu"] {
  display: none !important;
}

html[data-current-path$="/assistant/widget-preview"],
html[data-current-path$="/assistant/widget-preview"] body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden !important;
  background: transparent !important;
}