/* Narrow screens keep the same tools, with room to read, scroll and close panels. */
@media (max-width: 760px) {
  body[data-space] .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  body[data-space] .sidebar-toggle.icon-button { flex: 0 0 44px; margin-left: 0; }
  body[data-space] .topbar-left { flex: 1 1 auto; min-width: 0; }
  body[data-space] .mobile-brand { display: flex; flex: 1 1 auto; min-width: 0; }
  body[data-space] .mobile-brand > img { display: block; flex-shrink: 0; }
  body[data-space] .mobile-brand > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body[data-space] .top-actions { flex: 0 0 auto; }
  body[data-space] :is(.main, .main.view-home) {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  body[data-space] .platform-heading h1 { white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
  body[data-space] :is(.page-title-row, .drama-page-heading, .screenplay-toolbar, .screenplay-writing-heading) { flex-wrap: wrap; }
  body[data-space] :is(.page-title-row, .drama-page-heading) > div:first-child { min-width: 0; }
  body[data-space] .page-title-row h1 { overflow-wrap: anywhere; }

  /* The page scrolls naturally while a software keyboard is open. */
  body[data-space] .workspace :is(.form-footer:not(.result-footer), .result-actions, .copy-actions) {
    position: static; margin-top: 24px; padding: 18px 0 0;
    border-top: 1px solid var(--pixel-line); color: var(--pixel-ink);
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body[data-space] .workspace .result-actions { flex-wrap: wrap; }
  body[data-space] .workspace .copy-actions { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  body[data-space] :is(input, textarea, select) { scroll-margin-block: 96px; }
  body[data-space] .bottom-nav {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  body[data-space] .nav-drawer { overscroll-behavior: contain; }
  body[data-space] .drawer-content {
    padding-left: max(17px, env(safe-area-inset-left));
    padding-top: max(25px, env(safe-area-inset-top));
  }

  body[data-space] :is(button, a, summary) { touch-action: manipulation; }
}
@media (max-width: 760px), (max-height: 500px) {
  body[data-space] :is(#modal:not(.model-picker), .auth-dialog) {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  body[data-space] #modal:not(.model-picker) .modal-heading {
    position: sticky; top: 0; z-index: 2; padding-block: 6px;
    color: var(--pixel-ink); background: var(--pixel-panel);
  }
  body[data-space] .auth-dialog .auth-close {
    position: sticky; top: 0; right: auto; z-index: 3; float: none;
    justify-content: flex-end; width: 100%; padding: 0;
    margin: -12px 0 12px; border-radius: 0; background: var(--auth-paper);
  }
  body[data-space] .lt-showcase-dialog,
  body[data-space] .lt-dialog-shell {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
@media (max-width: 430px) {
  body[data-space="drama"] .shot-card { grid-template-columns: minmax(0, 1fr); }
  body[data-space="drama"] .shot-card-frame { min-height: 0; aspect-ratio: 16 / 9; }
  body[data-space="drama"] .shot-card-info { padding: 6px 4px; }
}
/* Landscape phones keep full-width editors instead of a cramped desktop split. */
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  body[data-space] .sidebar { display: none; }
  body[data-space] .main-shell { margin-left: 0; }
  body[data-space] .sidebar-toggle.icon-button { display: inline-grid; flex: 0 0 44px; }
  body[data-space] .topbar {
    height: auto; min-height: 56px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  body[data-space] :is(.main, .main.view-home) {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  body[data-space] :is(.workspace-layout, .brand-layout, .character-workspace, .shot-board-layout) { grid-template-columns: minmax(0, 1fr); }
  body[data-space] :is(.character-inspector, .shot-inspector, .side-preview) { position: static; max-height: none; }
  body[data-space] .nav-drawer { overscroll-behavior: contain; }
}