/* Final phone layout pass for the commerce workspace. */
@media (max-width: 760px) {
  html,
  body,
  #root {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
  }

  .app-shell,
  .ant-layout,
  .app-content,
  .page-stack {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-header {
    min-height: 58px !important;
    height: 58px !important;
    gap: 8px !important;
    padding: 0 max(10px, env(safe-area-inset-right)) 0
      max(10px, env(safe-area-inset-left)) !important;
  }

  .mobile-menu-button,
  .top-header-icon-btn,
  .top-header-avatar {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .top-login-area,
  .top-user-area {
    min-width: 0;
    gap: 5px !important;
  }

  .top-ghost-btn,
  .top-primary-btn,
  .top-task-btn,
  .top-recharge-btn {
    min-width: 0 !important;
    min-height: 36px !important;
    padding-inline: 10px !important;
  }

  .app-content {
    padding: 12px 10px calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .ant-drawer-content-wrapper {
    width: min(86vw, 330px) !important;
  }

  .mobile-sidebar-panel {
    min-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-sidebar-panel .sidebar-brand {
    height: 76px !important;
    flex-basis: 76px !important;
  }

  .mobile-sidebar-panel .nav {
    padding-top: 4px !important;
  }

  .mobile-sidebar-panel .nav-item {
    min-height: 48px;
  }

  .ant-modal-root .ant-modal-wrap {
    overflow-x: hidden;
    padding: 8px 0;
  }

  .ant-modal-root .ant-modal {
    top: 0 !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
  }

  .ant-modal-root .ant-modal-content {
    max-height: calc(100dvh - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 16px !important;
  }

  .ant-modal-root .ant-modal-body {
    min-width: 0;
  }

  .ant-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ant-form-item,
  .ant-form-item-control,
  .ant-input,
  .ant-input-affix-wrapper,
  .ant-input-number,
  .ant-select {
    min-width: 0;
    max-width: 100%;
  }

  /* Home */
  .home-page {
    gap: 20px !important;
    padding: 0 0 26px !important;
  }

  .home-hero-panel {
    width: calc(100% + 20px) !important;
    margin: 0 -10px !important;
  }

  .home-composer {
    left: 7% !important;
    right: 7% !important;
  }

  .home-template-section,
  .home-section-head {
    min-width: 0;
  }

  .home-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Creation workflow */
  .commerce-video-create-page {
    --create-panel-height: auto;
    min-height: calc(100dvh - 58px) !important;
    margin: -12px -10px -28px !important;
    padding: 14px 10px calc(32px + env(safe-area-inset-bottom)) !important;
  }

  .create-workbench,
  .create-stage,
  .create-step-panel,
  .create-step-scroll,
  .create-preview-rail,
  .create-preview-rail-inner {
    width: 100%;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .create-workbench {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .create-stage {
    display: grid !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .create-step-panel,
  .create-step-scroll,
  .create-preview-rail-inner {
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }

  .create-step-scroll {
    padding-right: 0 !important;
  }

  .create-rail {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .create-rail-list {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
    padding: 2px 2px 8px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .create-rail-item {
    min-width: 108px;
    flex: 0 0 108px;
    scroll-snap-align: start;
  }

  .create-section {
    padding: 16px !important;
    border-radius: 18px !important;
    transform: none !important;
  }

  .create-section-head,
  .create-status-strip,
  .create-material-toolbar,
  .create-ai-prompt-head,
  .create-selected-assets-head,
  .create-subtitle-toolbar,
  .create-video-scenes-head,
  .create-storyboard-generation-status > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .create-section-head .ant-select,
  .create-source-actions,
  .create-source-actions .ant-space,
  .create-source-actions .ant-btn,
  .create-material-toolbar .ant-space,
  .create-material-toolbar .ant-btn {
    width: 100% !important;
  }

  .create-source-actions .ant-space,
  .create-material-toolbar .ant-space {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .create-launch-grid,
  .create-param-grid,
  .create-current,
  .create-preview-grid,
  .create-video-summary,
  .create-scene-edit-grid,
  .create-video-scene-layout,
  .create-asset-picker-filters {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .create-video-preview-stage,
  .create-video-preview-content {
    min-height: 210px !important;
  }

  .create-video-player,
  .create-video-scene-player {
    width: 100% !important;
    max-height: 62dvh !important;
  }

  .create-step-footer {
    position: sticky !important;
    bottom: 0;
    z-index: 12;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom)) !important;
  }

  .create-step-footer .ant-space,
  .create-step-footer .ant-btn,
  .create-flow-primary-action {
    width: 100% !important;
  }

  .create-asset-picker-grid,
  .simple-replicate-asset-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .create-asset-picker-upload {
    min-height: 160px !important;
  }

  .create-asset-picker-title,
  .create-asset-picker-toolbar,
  .create-asset-picker-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  /* Product image sets */
  .product-image-workspace {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 28px !important;
  }

  .product-image-workspace > section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .product-image-workspace > section > div,
  .product-image-workspace > section > .commerce-card,
  .product-set-preview {
    min-width: 0 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .commerce-card {
    padding: 15px !important;
    border-radius: 15px !important;
  }

  .commerce-upload-tile {
    min-height: 220px !important;
  }

  .commerce-upload-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .commerce-upload-action {
    width: 100%;
  }

  .product-image-advanced > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .product-set-preview-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .product-set-preview-head > div:last-child {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .product-set-preview-grid,
  .product-image-library {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .product-set-download,
  .product-set-regenerate {
    bottom: 7px !important;
  }

  .product-set-download {
    right: 7px !important;
  }

  .product-set-regenerate {
    left: 7px !important;
  }

  .product-set-failed,
  .product-set-generating {
    padding: 40px 10px 14px !important;
  }

  .product-set-lightbox {
    padding: 10px !important;
  }

  .product-set-lightbox-image {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  /* Replicate */
  .simple-replicate-topbar,
  .simple-replicate-card-head,
  .simple-replicate-video-params-head,
  .simple-replicate-generation-progress-head,
  .simple-replicate-result-head,
  .simple-replicate-showcase-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .simple-replicate-modebar {
    width: 100% !important;
  }

  .simple-replicate-mode-tab {
    min-width: 0 !important;
    flex: 1 1 0;
  }

  .simple-replicate-hero h1.ant-typography {
    font-size: 26px !important;
  }

  .simple-replicate-step {
    gap: 8px !important;
  }

  .simple-replicate-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .simple-replicate-video-params-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .simple-replicate-actions,
  .simple-replicate-generation-actions,
  .simple-replicate-material-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .simple-replicate-actions .ant-btn,
  .simple-replicate-generation-actions .ant-btn,
  .simple-replicate-material-actions .ant-btn {
    width: 100%;
  }

  .simple-replicate-material-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .simple-replicate-showcase-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .replicate-history-masonry {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .replicate-history-card {
    width: 100% !important;
    max-width: none !important;
  }

  /* Assets */
  .cv-asset-page {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cv-asset-hero,
  .cv-asset-filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cv-asset-hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .cv-asset-hero-metrics span {
    min-height: 70px !important;
    padding: 8px 4px !important;
  }

  .cv-asset-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .cv-asset-search {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
  }

  .cv-asset-masonry,
  .cv-asset-group-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    columns: auto !important;
  }

  .cv-asset-card,
  .cv-asset-masonry .asset-masonry-card {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
  }

  .cv-asset-card-actions .ant-btn {
    opacity: 1 !important;
  }

  .product-profile-grid,
  .asset-import-preview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .asset-zoom-image,
  .asset-zoom-video {
    max-width: 94vw !important;
    max-height: 88dvh !important;
  }

  /* Works and templates */
  .work-page-heading,
  .template-work-heading,
  .template-gallery-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .work-page-heading h1.ant-typography,
  .template-work-heading h1.ant-typography,
  .template-gallery-head h1.ant-typography {
    width: 100%;
    font-size: 24px !important;
    white-space: nowrap;
  }

  .work-type-select,
  .template-search,
  .template-work-select,
  .template-work-filters {
    width: 100% !important;
    max-width: none !important;
  }

  .template-work-filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .template-track-navigation,
  .template-track-primary,
  .template-track-secondary {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .template-track-navigation::-webkit-scrollbar,
  .template-track-primary::-webkit-scrollbar,
  .template-track-secondary::-webkit-scrollbar {
    display: none;
  }

  .work-masonry,
  .template-work-masonry,
  .template-waterfall {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .work-masonry-card,
  .template-work-card,
  .template-waterfall-card,
  .template-skeleton {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .work-delete-btn {
    opacity: 1 !important;
  }

  .product-set-work-gallery-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .product-set-work-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .template-create-page {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .template-preview-pane {
    min-height: auto !important;
    padding: 72px 14px 22px !important;
  }

  .template-preview-stage {
    width: min(100%, 360px) !important;
  }

  .template-create-panel {
    min-height: auto !important;
    padding: 22px 14px calc(94px + env(safe-area-inset-bottom)) !important;
  }

  .template-slot-preview,
  .template-create-title,
  .template-model-head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .template-sticky-action {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 10;
  }

  /* Recharge, authentication and account pages */
  .recharge-center {
    padding: 24px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .recharge-heading {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
  }

  .recharge-heading h2 {
    font-size: 26px !important;
  }

  .recharge-balance {
    min-width: 0 !important;
    width: 100%;
    text-align: left !important;
  }

  .recharge-package-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .recharge-package {
    min-height: 0 !important;
    padding: 20px !important;
  }

  .recharge-note {
    align-items: flex-start;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .auth-modal-box,
  .login-card.panel {
    padding: 22px 16px !important;
  }

  .profile-panel-head,
  .profile-panel-actions,
  .admin-page-heading,
  .admin-heading-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

@media (max-width: 380px) {
  .top-ghost-btn,
  .top-primary-btn,
  .top-task-btn,
  .top-recharge-btn {
    padding-inline: 8px !important;
    font-size: 12px !important;
  }

  .home-template-grid,
  .cv-asset-masonry,
  .cv-asset-group-grid,
  .work-masonry,
  .template-work-masonry,
  .template-waterfall,
  .product-set-work-gallery-grid {
    gap: 8px !important;
  }

  .work-masonry-meta,
  .template-work-meta {
    padding: 8px !important;
  }
}