.studio-shell.jc-studio .creator-navigation > button > span,
.studio-shell.jc-studio .ch-sidebar .ch-nav-button > span,
.studio-shell.jc-studio .jc-writing textarea.jc-prompt::placeholder {
  font-size: 92%;
}

.studio-shell.jc-studio .ch-sidebar .ch-list-heading {
  font-size: calc(var(--wc-input) * .92);
}

.studio-shell.jc-studio .ch-sidebar .ch-more-chats > span {
  line-height: 21px;
}

.jc-overlay-root #jm-model-panel .jc-model-section-label {
  font-size: calc(var(--wc-label) * .92);
  line-height: calc(var(--wc-label) * 1.4);
}

.jc-overlay-root #jm-model-panel .jc-model-family > strong {
  font-size: calc(var(--wc-label) * .92);
}

.jc-overlay-root #jm-model-panel .jc-model-copy > strong {
  font-size: calc(var(--wc-body) * .92);
  line-height: calc(var(--wc-body) * 1.5);
}

.jc-overlay-root #jm-model-panel .jc-model-copy > small {
  font-size: calc(var(--wc-small) * .92);
  line-height: calc(var(--wc-small) * 1.5);
}

.jc-overlay-root #jm-model-panel .jc-clip-duration {
  font-size: calc(var(--wc-small) * .92);
  line-height: calc(var(--wc-small) * 1.6);
}

@media (max-width: 540px) {
  .jc-overlay-root #jm-model-panel .jc-model-family > strong {
    line-height: calc(var(--wc-label) * 1.35);
  }
  .jc-overlay-root #jm-model-panel .jc-model-copy > strong {
    line-height: calc(var(--wc-body) * 1.35);
  }
}

.studio-shell.jm-studio.jc-studio .cg-group > .jc-record-header > p {
  font-size: calc(15.5px * .97);
  letter-spacing: .015em;
}

@media (max-width: 760px) {
  .studio-shell.jm-studio.jc-studio .cg-group > .jc-record-header > p {
    font-size: calc(14.4px * .97);
  }
}

.studio-shell.jc-studio > .creator-nav-shell,
.studio-shell.jc-studio .jc-main > .studio-header,
.studio-shell.jc-studio .jc-main > .ch-return-strip,
.studio-shell.jc-studio .jc-workspace > .jc-flow-width {
  zoom: .99;
}

.studio-shell.jc-studio .jc-workspace > .jc-flow-width {
  width: 99%;
}

.studio-shell.jc-studio .jc-main > .jc-composer-dock {
  --composer-gutter: 64px;
  --composer-writing-extra: 8.34px;
  --composer-inset: max(6px, env(safe-area-inset-left), env(safe-area-inset-right));
  width: min(calc((100% - var(--composer-gutter)) * 1.06), calc(100% - 2 * var(--composer-inset)));
  max-width: calc(980px * 1.06);
}

/* Give the extra height to the editable area. The upload rail keeps its own fixed height. */
.studio-shell.jm-studio.jc-studio .jc-composer .jc-prompt-row {
  height: calc(71px + var(--composer-writing-extra));
  min-height: calc(71px + var(--composer-writing-extra));
}

.studio-shell.jm-studio.jc-studio .jc-writing textarea.jc-prompt {
  --composer-writing-height: 64px;
  height: calc(var(--composer-writing-height) + var(--composer-writing-extra));
  min-height: calc(var(--composer-writing-height) + var(--composer-writing-extra));
  max-height: calc(var(--composer-writing-height) + var(--composer-writing-extra));
}

.studio-shell.jm-studio.jc-studio .jc-writing.jc-with-message textarea.jc-prompt {
  --composer-writing-height: 42px;
}

/* The settings can break across lines when the sidebar or a long model uses more of the row. */
.studio-shell.jm-studio.jc-studio .jc-composer .jc-toolbar > .jc-controls,
.studio-shell.jm-studio.jc-studio .jc-composer .jc-toolbar .jc-model-mode-pair {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
}

@media (max-width: 1100px) {
  .studio-shell.jc-studio .jc-main > .jc-composer-dock { --composer-gutter: 48px; }
}

@media (max-width: 760px) {
  .studio-shell.jc-studio .jc-main > .jc-composer-dock {
    --composer-gutter: 24px;
    --composer-writing-extra: 14px;
  }
}

@media (max-width: 440px) {
  .studio-shell.jc-studio .jc-main > .jc-composer-dock { --composer-gutter: 18px; }
}

@media (max-width: 360px) {
  .studio-shell.jc-studio .jc-main > .jc-composer-dock { --composer-writing-extra: 16.8px; }
}