/* Let panel content shrink and scroll inside the available viewport. */
body { height: 100dvh; overflow: hidden; }
.canvas { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.site-header, .intro, .site-footer, .status { flex: none; }
main.page-width { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.intro { padding-block: clamp(1rem, 5dvh, 4.5rem) clamp(1rem, 3dvh, 2.8125rem); }
.workspace { flex: 1; min-height: 0; align-items: stretch; }
.config-panel, .prompt-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.panel-heading { flex: none; }
.config-surface, .prompt-surface { flex: 1; min-height: 0; }
.config-surface, .prompt-document { overflow: auto; scrollbar-gutter: stable; }
.prompt-surface { display: flex; flex-direction: column; }
.output-toolbar, .output-footer { flex: none; }
.output-toolbar { margin-bottom: 1rem; }
.prompt-document { display: block; flex: 1; min-height: 0; padding: 0.25rem 0.5rem 0.25rem 0.25rem; }
.prompt-block + .prompt-block { margin-top: 1.75rem; }
.output-footer { margin-top: 1rem; padding-top: 0.875rem; }
.status { margin-top: 0.5rem; }
.status:empty { display: none; }
.site-footer { margin-top: 1rem; }

/* Match the first reference design while keeping content independently scrollable. */
@media (min-width: 43.8125rem) {
  .intro { padding-block: 4.5rem 2.8125rem; }
  .workspace { gap: 2.25rem; }
  .config-surface, .prompt-surface { border-radius: 1.875rem; }
  .prompt-surface { padding: 1.5625rem 1.625rem 1.4375rem; }
  .prompt-surface { border: 0.0625rem solid var(--line); background: white; box-shadow: 0 0.75rem 2.5rem #1313230a, 0 0.0625rem 0.125rem #13132305; }
  .field-key, .field-value { font-size: 0.59375rem; }
  .prompt-block { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .prompt-block h3 { font-size: 0.59375rem; }
  .prompt-block p { font-size: 0.6875rem; line-height: 1.9; }
  .prompt-document { padding: 0.375rem 0.5rem 1.5rem 0; }
  .output-toolbar { margin-bottom: 1.25rem; }
  .output-footer { margin-top: 0.625rem; padding-top: 1.25rem; }
  .button--primary { font-size: 0.6875rem; }
  .site-footer { margin-top: 2.625rem; }
}

@media (min-width: 100rem) {
  .intro { padding-block: 5.375rem 3.25rem; }
  .workspace { gap: 3rem; }
  .prompt-surface { padding: 1.75rem 2rem; }
}

@media (min-width: 43.8125rem) and (max-width: 65.625rem) {
  .workspace { gap: 1.5rem; }
  .prompt-surface { padding: 1.375rem; }
}

@media (min-width: 43.8125rem) and (max-height: 50rem) {
  .intro { padding-block: clamp(2rem, 5dvh, 4.5rem) clamp(1.5rem, 3.5dvh, 2.8125rem); }
  .site-footer { margin-top: 1.5rem; }
}

@media (max-width: 43.75rem) {
  .canvas { padding-bottom: 0.75rem; }
  .intro { padding-block: 0.875rem; }
  h1 { font-size: clamp(1.375rem, 5vw, 1.875rem); }
  .intro-copy { margin-top: 0.5rem; font-size: 0.75rem; }
  .workspace { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
  .panel-heading { margin-bottom: 0.5rem; }
  .prompt-surface { padding-top: 0.25rem; }
  .output-toolbar { margin-bottom: 0.5rem; }
  .output-footer { margin-top: 0.5rem; padding-top: 0.5rem; gap: 0.5rem; }
  .site-footer { flex-wrap: nowrap; gap: 0.5rem; margin-top: 0.75rem; }
  .version { width: auto; }
}

@media (max-height: 40.625rem) {
  body { padding-block: 0.5rem; }
  .canvas { padding-block: 0.75rem; }
  .intro { padding-block: 0.625rem; }
  h1 { font-size: 1.5rem; }
  .intro-copy { display: none; }
  .site-footer { margin-top: 0.5rem; }
}