:root {
  --lesh-iphone-pro-max-ratio: 440 / 956;
}

/* Content Studio: give the preview enough room and use recognizable device proportions. */
body[data-suite="portal"] .cc-studio-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
}

body[data-suite="portal"] .cc-studio-preview {
  width: 100%;
}

body[data-suite="portal"] .cc-studio-preview .cc-preview {
  min-height: 0;
  margin-inline: auto;
  background-size: cover;
}

body[data-suite="portal"] .cc-preview-desktop {
  width: min(100%, 680px);
  aspect-ratio: 16 / 9;
}

body[data-suite="portal"] .cc-preview-tablet {
  width: min(100%, 420px);
  min-height: 0;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
}

body[data-suite="portal"] .cc-preview-phone {
  width: min(100%, 260px);
  min-height: 0;
  aspect-ratio: var(--lesh-iphone-pro-max-ratio);
  border-radius: 36px;
}

/* The create/save action belongs to the end of the form, not to the viewport. */
body[data-suite="portal"] .cc-studio-layout + .cc-sticky-actions {
  position: static;
  bottom: auto;
  margin-top: 2px;
  padding: 15px 0 0;
  color: #151719;
  background: transparent;
  border-top: 1px solid #dedfdc;
  border-radius: 0;
  box-shadow: none;
}

body[data-suite="portal"] .cc-studio-layout + .cc-sticky-actions span {
  color: #777c80;
  font-size: 11px;
}

/* Other embedded Portal phone mockups use the same current Pro Max proportion. */
body[data-suite="portal"] .tp-phone {
  min-height: 0;
  aspect-ratio: var(--lesh-iphone-pro-max-ratio);
}

/* The React sales-assistant device frame was already close; align it exactly. */
body[data-suite="assistant"] .phone-frame {
  width: min(440px, 46.025dvh - 22.092px);
  height: min(956px, 100dvh - 48px);
  aspect-ratio: var(--lesh-iphone-pro-max-ratio);
}

@media (max-width: 980px) {
  body[data-suite="portal"] .cc-studio-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 950px) {
  body[data-suite="assistant"] .phone-frame {
    width: 100%;
    height: 100dvh;
    aspect-ratio: auto;
  }
}

@media (max-height: 650px) and (min-width: 951px) {
  body[data-suite="assistant"] .phone-frame {
    width: calc(46.025dvh - 7.364px);
    height: calc(100dvh - 16px);
  }
}

@media (max-width: 620px) {
  body[data-suite="portal"] .cc-preview-phone {
    width: min(100%, 240px);
  }
}