/* Native keyboard translucency is not web-controllable. Preserve usable space above it. */
#review-workspace.demo-viewport-compact .draft-column,
#review-workspace.demo-viewport-compact .comments-column { position: relative; }
#review-workspace.demo-viewport-compact .demo-draft,
#review-workspace.demo-viewport-compact .demo-comments {
  position: relative;
  transform: translateY(var(--demo-pane-shift, 0px));
  height: var(--demo-pane-height, 260px);
  min-height: 64px;
  scroll-padding-block: 12px;
  -webkit-overflow-scrolling: touch;
}
#review-workspace.demo-viewport-compact textarea {
  max-height: max(64px, min(160px, calc(var(--demo-pane-height, 260px) - 76px)));
  min-height: 56px;
  resize: vertical;
  font-size: 16px;
}
#review-workspace.demo-viewport-compact .reply-form { scroll-margin-block: 12px; }
/* These classes are also usable by the passage-selection composer. */
.demo-selection-menu { position: fixed; z-index: 1000; touch-action: manipulation; }
.demo-selection-menu button { min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  #review-workspace.demo-viewport-compact .demo-draft,
  #review-workspace.demo-viewport-compact .demo-comments { scroll-behavior: auto; }
}

/* A tall embedded iframe cannot infer the phone's landscape orientation in CSS. */
#review-workspace.demo-landscape .review-panes { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
#review-workspace.demo-landscape .review-panes .draft-column,
#review-workspace.demo-landscape .review-panes .comments-column { display: block !important; }
#review-workspace.demo-landscape .mobile-views { display: none; }

/* Original demo heights; the host orientation also covers a tall embedded frame. */
.studio-embed :is(.demo-draft, .demo-comments) { height: 580px; }
@media (max-width: 760px) {
  .studio-embed :is(.demo-draft, .demo-comments) { height: 520px; }
}
@media (max-width: 950px) and (orientation: landscape) {
  .studio-embed :is(.demo-draft, .demo-comments) { height: 390px; }
}
.studio-embed .demo-landscape :is(.demo-draft, .demo-comments) { height: 390px; }
/* Fit the host phone's visible window, including when this is a tall iframe. */
#review-workspace.demo-landscape:not(.demo-viewport-compact):not(.demo-expanded) :is(.demo-draft, .demo-comments) {
  height: var(--demo-landscape-pane-height, 260px);
}
.studio-embed .page-view .demo-draft { height: 636px; }
@media (max-width: 760px) {
  .studio-embed .page-view .demo-draft { height: 576px; }
}