/* Responsive overrides shared across the story experience */

@media (max-width: 900px) {
  .page {
    width: calc(100% - 28px);
    padding-top: 85px;
  }

  .page.page-project {
    width: 100%;
    padding: 132px 14px 28px;
  }

  .project-grid {
    grid-template-columns: 1fr 1fr;
  }

  .user-name {
    max-width: 110px;
  }

  .project-shell {
    grid-template-columns: 1fr;
  }

  .project-menu-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .project-menu-card .create-title {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  /* Let the preview row size itself from aspect-ratio rather than a
     fixed pixel height — see the 620px block below for why this
     matters on narrow 2-col layouts. */
  .storyboard-shot-card {
    min-height: 0;
    grid-template-rows: auto auto 1fr auto;
    min-width: 0;
  }

  .storyboard-selector-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .storyboard-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .storyboard-edit-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 620px) {
  .new-project-btn {
    min-height: 120px;
    border-radius: 10px;
    font-size: clamp(1.2rem, 6vw, 1.8rem);
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    min-height: 124px;
    border-radius: 10px;
  }

  .top {
    align-items: flex-start;
    flex-direction: column;
  }

  .page.page-project .top-left {
    width: 100%;
    flex-wrap: wrap;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .chat-send-btn {
    min-height: 40px;
  }

  .create-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .project-menu-card {
    grid-template-columns: 1fr;
  }

  .section-inline-form {
    grid-template-columns: 1fr;
  }

  .section-inline-form button {
    min-height: 40px;
  }

  .characters-grid,
  .background-library {
    grid-template-columns: 1fr;
  }

  .background-create-hint {
    width: 100%;
  }

  .page.page-project {
    padding: 132px 10px 28px;
  }

  .background-modal {
    padding: 10px;
  }

  .storyboard-picker-dialog {
    width: min(960px, calc(100vw - 14px));
    max-height: calc(100vh - 14px);
    padding: 10px;
  }

  .storyboard-camera-dialog {
    width: min(980px, calc(100vw - 14px));
    max-height: calc(100vh - 14px);
    padding: 10px;
  }

  .storyboard-edit-dialog {
    width: min(1100px, calc(100vw - 14px));
    max-height: calc(100vh - 14px);
    padding: 10px;
  }

  .storyboard-create-dialog {
    width: min(760px, calc(100vw - 14px));
    max-height: calc(100vh - 14px);
    padding: 10px;
  }

  .storyboard-create-actions {
    flex-direction: column-reverse;
  }

  .storyboard-create-btn {
    width: 100%;
  }

  .storyboard-create-style-scroll,
  .create-style-scroll {
    grid-auto-columns: minmax(118px, 1fr);
  }

  .background-preview-modal {
    padding: 6px;
  }

  .background-modal-dialog {
    padding: 12px;
  }

  .background-modal-actions {
    flex-direction: column-reverse;
  }

  .background-modal-btn {
    width: 100%;
  }

  .project-delete-dialog {
    width: min(460px, calc(100vw - 14px));
    padding: 12px;
  }

  .project-delete-actions {
    flex-direction: column-reverse;
  }

  .project-delete-cancel-btn,
  .project-delete-confirm-btn {
    width: 100%;
  }

  .background-preview-image {
    max-height: calc(100vh - 34px);
  }

  .storyboard-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  /* Don't pin the preview row to a fixed pixel height on mobile — at
     2-col widths the resulting box is too short for 16:9 source images
     (cropped sides) and the conflict between the fixed row height and
     the aspect-ratio rule on .storyboard-shot-preview can cause the
     card to compute a wider intrinsic width than its grid column,
     which is what visually overflows past the right edge. */
  .storyboard-shot-card {
    min-height: 0;
    grid-template-rows: auto auto 1fr auto;
    min-width: 0;
  }

  .storyboard-action-btn {
    font-size: 0.76rem;
    padding-left: 8px;
    padding-right: 8px;
  }

  .storyboard-shot-prompt {
    min-height: 76px;
  }

  .storyboard-selector-grid {
    grid-template-columns: 1fr;
  }

  .storyboard-picker-grid {
    grid-template-columns: 1fr 1fr;
  }

  .storyboard-camera-grid {
    grid-template-columns: 1fr;
  }

  .storyboard-edit-image {
    min-height: 200px;
  }

}