/* Widths for the personal and group workspaces. Login and admin dialogs keep
   their own layouts. Keep this stylesheet after the product stylesheets: some
   older card rules appear before the generic 360px .modal-card rule. */
body.personal-web,
body[data-field-icon-theme="group"] {
  --workspace-dialog-small: 420px;
  --workspace-dialog-medium: 560px;
  --workspace-dialog-large: 720px;
  --workspace-dialog-wide: 920px;
  --workspace-dialog-extra-wide: 1040px;
}

/* Compact sync, quota, voice help, import, and simple student dialogs match logout. */
:is(
  #voiceFirstRecordingTipModal,
  #webConfigCloudSyncModal,
  #webTableCloudSyncModal,
  #webGenerateQuotaDetailModal,
  #webQuotaAcquireModal,
  #groupQuotaAcquireModal,
  #bulkStudentImportModal,
  #bulkStudentImportConfirmModal,
  #createStudentProfileModal,
  #studentFormModal,
  #createClassModal,
  #studentProfileManagerModal,
  #myTemplateFormModal,
  #groupConfigCloudSyncModal,
  #groupTableCloudSyncModal,
  #groupBatchConfirmModal,
  #groupImageExportConfirmModal,
  #groupBatchQuotaRulesModal,
  #studentImportModal,
  #groupFeedbackTemplateFormModal,
  #draftCellModal
) {
  --workspace-dialog-width: var(--workspace-dialog-small);
}

/* Forms, settings, and other explanations. Unlisted dialogs use 420px. */
:is(
  .upgrade-welcome-screen[data-step="gift"],
  .upgrade-welcome-screen[data-step="2"],
  #voiceRecognitionScopeModal,
  #generationDraftModal,
  #personalEmojiHelpModal,
  #invalidInputReasonModal,
  #tableCustomizationModal,
  #subjectModal,
  #lessonMetaEditModal,
  #attendanceModal,
  #groupTableCustomizationModal,
  #groupLessonTimeEditModal,
  #groupEmojiHelpModal
) {
  --workspace-dialog-width: var(--workspace-dialog-medium);
}

/* Lists, previews, and panels with several content sections. */
:is(
  #personalProfileModeHelpModal,
  #groupGenerationModeHelpModal,
  #voiceQuickNoticeModal,
  #personalMemorySummaryModal,
  #copySuccessModal,
  #applyLastFeedbackModal,
  #feedbackTemplateModal,
  #groupMemorySummaryModal,
  #classStatusHelpModal,
  #planLimitModal,
  #groupFeedbackTemplatePickerModal,
  #groupCopyGenerateModal,
  #groupImageExportModal
) {
  --workspace-dialog-width: var(--workspace-dialog-large);
}

:is(
  #upgradeWelcomeScreen[data-step="profile"],
  #personalGenerationMethodHelpModal,
  #generationOptionsModal,
  #groupGenerationOptionsModal,
  #profileSelectModal,
  #studentProfileDetailModal,
  #groupStudentDetailModal
) {
  --workspace-dialog-width: var(--workspace-dialog-wide);
}

:is(
  #templateWorkspaceModal,
  #groupTemplateWorkspaceModal,
  #feedbackExportModal,
  #feedbackRecordDetailModal,
  #groupFeedbackExportModal,
  #groupFeedbackRecordModal,
  #groupFeedbackOptionsHelpModal
) {
  --workspace-dialog-width: var(--workspace-dialog-extra-wide);
}

/* The anchored group cell editor has its own 480/540/560px states. */
:is(body.personal-web, body[data-field-icon-theme="group"])
  .modal[role="dialog"]:not(.is-cell-popover):not(:is(
    #webLoginModal,
    #webLoginMembershipUpgradeModal,
    #webLoginRedemptionModal,
    #webLoginWelcomeModal,
    #groupWebLoginMembershipUpgradeModal,
    #groupWebLoginRedemptionModal,
    #groupWebWelcomeModal
  )) > .modal-card {
  box-sizing: border-box;
  width: min(var(--workspace-dialog-width, var(--workspace-dialog-small)), calc(100vw - 64px)) !important;
  max-width: min(var(--workspace-dialog-width, var(--workspace-dialog-small)), calc(100vw - 64px)) !important;
}

body[data-field-icon-theme="group"] .performance-panel.is-open {
  width: min(var(--workspace-dialog-wide), calc(100vw - 64px));
  max-width: var(--workspace-dialog-wide);
}