/* Shared workspace layout. Keep narrow-screen overrides after the base skins. */
.editor-shell, .editor-shell > *, .sb-layout > * { min-width: 0; }
.sb-layout { grid-template-columns: 256px minmax(0, 1fr); }
.sb-desc > div, .sb-line > div { min-width: 0; overflow-wrap: anywhere; }
.sb-line { grid-template-columns: 92px minmax(0, 1fr); }
.vf-nav-label { display: none; }
body:has(.vh-overlay, .sb-overlay.show) { overflow: hidden; }
.modal-bd > .modal-box, .modal-bd > .mat-modal-card, .vh-overlay > .vh-modal, .sb-overlay > .sb-modal {
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
}

@media (max-width: 900px) {
  .container-page { max-width: 100%; padding-inline: 16px; }
  .sb-layout { grid-template-columns: minmax(0, 1fr); }
  .sb-editor-head { flex-wrap: wrap; gap: 12px; }
  .mp-layout { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .mp-sidebar { overflow: visible; }
}

@media (max-width: 640px) {
  .container-page { padding: 16px 12px 32px; }
  .topnav { padding: 8px 12px; gap: 8px; }
  .topnav .tab { min-height: 40px; display: inline-flex; align-items: center; }
  .topnav .brand, .topnav-actions { min-width: 0; }
  .topnav-actions { gap: 6px; }
  .topnav-actions .credit-topup { padding: 8px 12px; font-size: 13px; }
  .topnav #classic-account { max-width: 70px; }
  #tab-editor .step-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 6px; margin-bottom: 16px; }
  #tab-editor .step-item { min-width: 0; min-height: 56px; flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
  #tab-editor .step-num { width: 26px; height: 26px; font-size: 12px; }
  #tab-editor .step-label { font-size: 12px; }
  #tab-editor .step-label small, #tab-editor .step-connector { display: none; }
  .container-page :is(button, input, select, textarea) { max-width: 100%; }
  .container-page :is(input, select, textarea) { min-width: 0; }
  .container-page :is(.btn-ghost, .btn-primary-acc, .src-btn), .sb-overlay button { min-height: 44px; }
  /* 16px input text prevents iOS from zooming the viewport on focus. */
  #tab-editor :is(input[type=text], input[type=number], textarea, select),
  :is(.modal-box, .mat-modal-card, .vh-modal, .sb-modal) :is(input[type=text], textarea, select) { font-size: 16px !important; }
  .card-dark { padding: 16px; }
  .project-grid, .plib-grid, #finals-list, #rmxhist-list { grid-template-columns: minmax(0, 1fr) !important; }
  .library-header { flex-wrap: wrap; gap: 12px; }
  .library-header > *, .prompt-foot > *, .src-panel > * { min-width: 0; max-width: 100%; }
  .prompt-foot { flex-wrap: wrap; }
  .prompt-foot > div { flex-wrap: wrap; }
  .prompt-foot :is(button, select) { flex: 1 1 auto; }

  .sb-layout { gap: 16px; }
  .sb-editor { padding: 16px 12px; }
  .sb-editor-title { flex-wrap: wrap; font-size: 16px; }
  .sb-editor-head > div:last-child { justify-content: flex-start !important; }
  .sb-editor-head > div:last-child > button { flex: 1 1 110px; }
  .sb-shot-head { gap: 8px; }
  .sb-shot-head .sb-scene { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
  .sb-shot-head .sb-ai-shot { margin-left: 0; }
  .sb-line { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  .sb-role { white-space: normal; overflow-wrap: anywhere; }
  .sb-desc { flex-wrap: wrap; padding: 10px; }
  .sb-aibar { position: static; display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; margin-top: 6px; box-shadow: none; }
  .sb-aibar .sep { display: none; }
  .sb-desc > .sb-aibar { flex-basis: 100%; }
  .sb-modal-head, .sb-modal-foot, .sb-manual-lines-head { flex-wrap: wrap; gap: 12px; }
  .sb-modal-foot > div { width: 100%; }
  .sb-modal-foot > div > button { flex: 1; }
  .sb-manual-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; padding: 8px; }
  .sb-manual-line > * { min-width: 0; }
  .sb-manual-line-del { width: 44px; height: 44px; }
  .sb-manual-modal { max-height: calc(100dvh - 24px); }
  .mp-toolbar { flex-wrap: wrap; }
  .mp-modal-box { height: calc(100dvh - 24px); }

  #sec-4 .export-actions > button { width: 100%; }
  #sec-4 .export-actions > label { min-height: 44px; }
  #sec-4 #export-shots-overview { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #sec-4 #export-summary { line-height: 1.8; overflow-wrap: anywhere; }

  /* Dialogs scroll inside the available screen, including short landscape screens. */
  .modal-bd, .modal-bd.mat-modal, .vh-overlay, .sb-overlay { padding: 12px; }
  .modal-bd > .modal-box, .modal-bd > .mat-modal-card, .vh-overlay > .vh-modal, .sb-overlay > .sb-modal {
    min-width: 0; max-width: 100%; max-height: calc(100dvh - 24px); padding: 16px !important; overflow-y: auto; overscroll-behavior: contain;
  }
  :is(.modal-box, .mat-modal-card, .vh-modal, .sb-modal) :is(input, select, textarea, button, audio) { min-width: 0; max-width: 100%; }
  :is(.modal-box, .mat-modal-card, .vh-modal, .sb-modal) :is(button, .mat-btn, .vh-btn) { min-height: 44px; white-space: normal; }
  :is(.mat-modal-card, .vh-modal) :is(.icon, button[aria-label^="关闭"]) { min-width: 44px; flex-shrink: 0; }
  .mat-modal-head, .mat-modal-actions, .vh-modal > div { flex-wrap: wrap; gap: 10px; }
  .mat-modal-head .ttl, .vh-modal .vh-mat-tab { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .mat-modal-head .ttl { flex: 1; }
  .mat-modal-actions > button { flex: 1; }
  .vh-modal .vh-mat-tab { flex-wrap: wrap; min-height: 44px; }
  .vh-modal .vf-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  #shot-history-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #mat-voice-body > div, #mat-voice-body > div > div { flex-wrap: wrap; }
  #mat-voice-body > div > select { flex-basis: 100% !important; }
  #mat-next-list > div { flex-wrap: wrap; }
  .gen-dock-head { flex-wrap: wrap; }
  .gen-dock-panel { max-height: calc(100dvh - 60px); }
}