.channel-insights-card,
.auth-modal-card {
  width: min(100% - 24px, 960px);
  max-height: min(88vh, 960px);
  overflow: hidden;
}

#channelAiModal .channel-insights-card,
#videoAiModal .channel-insights-card {
  width: min(100% - 24px, 1120px);
}

#categoryVideoModal .channel-insights-card,
#myChannelVideoModal .channel-insights-card {
  width: min(100% - 24px, 1040px);
}

#rivalGapActionModal .channel-insights-card,
#adminAiTokenDetailModal .channel-insights-card {
  width: min(100% - 24px, 840px);
}

.channel-insights-card > .channel-insights-body,
.auth-modal-right,
.my-channel-video-modal-card,
.mobile-filter-sheet,
.mobile-discover-panel,
.tutorial-card {
  max-height: inherit;
  overflow-y: auto;
}

.mobile-filter-sheet,
.mobile-discover-sheet,
.tutorial-overlay {
  padding: 12px;
}

.mobile-filter-sheet,
.mobile-discover-panel {
  width: min(100%, 560px);
  max-height: min(82vh, 760px);
  border-radius: 22px 22px 0 0;
}

.tutorial-card {
  width: min(100% - 24px, 760px);
  max-height: min(86vh, 840px);
  overflow-y: auto;
}

.account-menu,
.nav-dropdown-menu,
.nav-command-results {
  max-width: min(calc(100vw - 24px), 420px);
}

@media (max-width: 767px) {
  .channel-insights-card,
  .auth-modal-card {
    width: min(100% - 16px, 100%);
    max-height: min(92vh, 920px);
    border-radius: 20px;
  }

  .channel-insights-card {
    padding: 14px;
  }

  .auth-modal-card {
    min-height: auto;
  }

  .account-menu {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }

  .nav-dropdown-menu {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    left: 12px;
    right: 12px;
    min-width: 0;
  }

  .nav-command-results {
    width: min(calc(100vw - 24px), 520px);
  }
}

@media (min-width: 768px) {
  .mobile-filter-sheet,
  .mobile-discover-sheet {
    align-items: flex-end;
  }

  .mobile-filter-sheet,
  .mobile-discover-panel {
    border-radius: 24px 24px 0 0;
  }
}

@media (min-width: 1024px) {
  .channel-insights-card,
  .auth-modal-card {
    width: min(100% - 64px, 960px);
  }

  #channelAiModal .channel-insights-card,
  #videoAiModal .channel-insights-card {
    width: min(100% - 64px, 1200px);
  }

  #categoryVideoModal .channel-insights-card,
  #myChannelVideoModal .channel-insights-card {
    width: min(100% - 64px, 1120px);
  }

  .account-menu {
    max-width: 360px;
  }
}