/* Shared iOS/mobile width and focus stability for forms and Messages. */
:is(body.add-edit-layout, body.messages-layout),
:is(body.add-edit-layout, body.messages-layout) *,
:is(body.add-edit-layout, body.messages-layout) *::before,
:is(body.add-edit-layout, body.messages-layout) *::after {
  box-sizing: border-box;
}

:is(body.add-edit-layout, body.messages-layout) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}

:is(body.add-edit-layout, body.messages-layout) :is(
  .app-shell,
  .main,
  .page-shell,
  .main-grid,
  .main-inner,
  .ms-form-page,
  .profile-add-edit-main,
  .profile-add-edit-card,
  .profile-add-edit-card-body,
  .form-page,
  .form-card,
  .profile-form-shell,
  .profile-form-card,
  .module-form-page,
  .module-form-card,
  .ms-form-body,
  .settings-form,
  .messages-wrap,
  .messages-card,
  .messages-list,
  .messages-new-page,
  .messages-new-recipients-card,
  .messages-members-page,
  .messages-members-card,
  .message-thread-shell,
  .thread-header-card,
  .thread-header-main,
  .thread-messages-panel,
  .thread-composer,
  .thread-composer-input-row,
  .thread-media-preview,
  .thread-media-preview-card
) {
  min-width: 0;
  max-width: 100%;
}

body.add-edit-layout :is(
  .ms-form-page,
  .profile-add-edit-main,
  .form-page,
  .profile-form-shell,
  .module-form-page
),
body.messages-layout :is(.messages-wrap, .message-thread-shell) {
  width: 100%;
  margin-inline: auto;
}

:is(body.add-edit-layout, body.messages-layout) :is(
  form,
  fieldset,
  .form-row,
  .form-grid,
  .module-form-grid,
  .form-field,
  .ms-form-group,
  [role="dialog"],
  .modal,
  .event-modal-card,
  .group-form,
  .messages-compose-search-row,
  .messages-compose-recipient-field,
  .messages-members-card,
  .thread-member-panel,
  .thread-participants-panel,
  .thread-member-row,
  .thread-participants-row,
  .message-row,
  .message-stack,
  .message-bubble,
  .message-media-card,
  .message-shared-content-card,
  .message-bubble--shared-content
) {
  min-width: 0;
  max-width: 100%;
}

:is(body.add-edit-layout, body.messages-layout) :is(
  input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  [role="combobox"],
  [role="textbox"],
  [contenteditable="true"]
) {
  min-width: 0;
  max-width: 100%;
  font-size: 16px !important;
  scroll-margin-block: 16px;
}

:is(body.add-edit-layout, body.messages-layout) :is(
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  .ms-tag-search-input,
  .autocomplete-input,
  [data-autocomplete] input,
  [role="dialog"] input,
  [role="dialog"] select,
  [role="dialog"] textarea,
  .thread-compose-input
) {
  font-size: 16px !important;
}

body.messages-layout :is(.messages-new-page, .messages-members-page, .thread-lightbox) {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.messages-layout :is(.messages-new-recipients-card, .messages-members-card) {
  width: 100%;
  max-width: 100%;
}

body.messages-layout :is(.thread-participant-summary, .messages-compose-chip-list) {
  flex-wrap: wrap;
  overflow-x: hidden;
}

body.messages-layout :is(
  .thread-media-preview-body,
  .thread-lightbox-stage,
  .message-media-card,
  .message-shared-content-card,
  .message-bubble--shared-content
) :is(img, video, iframe) {
  max-width: 100%;
}

body.messages-layout :is(.message-media-card, .message-bubble--shared-content) {
  width: 100%;
  max-width: 100%;
}

body.messages-layout :is(
  .message-bubble-text,
  .message-preview,
  .thread-reply-preview__copy,
  .thread-media-preview-name,
  .message-shared-content-card
) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.messages-layout .thread-compose-input {
  width: auto;
  flex: 1 1 0;
}

/* Add/edit dialogs can be opened from non-form pages, so stabilize them too. */
:is([role="dialog"], .modal, .ms-modal, .event-modal-card),
:is([role="dialog"], .modal, .ms-modal, .event-modal-card) * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

:is([role="dialog"], .modal, .ms-modal, .event-modal-card) :is(
  input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  [role="combobox"],
  [role="textbox"],
  [contenteditable="true"]
) {
  font-size: 16px !important;
}

body.messages-layout :is(.thread-attachment-button, .thread-emoji-picker, .thread-send) {
  flex-shrink: 0;
}

@media (min-width: 992px) {
  body.messages-layout {
    --messages-desktop-nav-gutter: calc(var(--desktop-side-nav-width, 96px) + 24px);
  }

  body.messages-layout .app-shell {
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
  }

  body.messages-layout .main.page-shell {
    box-sizing: border-box;
    width: 100%;
    padding-left: var(--messages-desktop-nav-gutter) !important;
    padding-right: 32px !important;
  }

  body.messages-layout .main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch;
    width: 100%;
  }

  body.messages-layout .main-inner {
    width: 100%;
    max-width: 800px !important;
    min-width: 0;
    margin-inline: auto !important;
  }

  body.messages-layout .messages-page-shell {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
  }
}

@media (max-width: 991px) {
  :is(body.add-edit-layout, body.messages-layout) :is(
    .app-shell,
    .main,
    .page-shell,
    .main-grid,
    .main-inner
  ) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.add-edit-layout :is(
    .ms-form-page,
    .profile-add-edit-main,
    .form-page,
    .profile-form-shell,
    .module-form-page
  ) {
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  }

  body.add-edit-layout .add-edit-ad-slot,
  body.add-edit-layout .media-add-form-page .add-edit-ad-slot {
    width: 100%;
    max-width: 100%;
  }

  :is([role="dialog"], .modal, .ms-modal, .event-modal-card) {
    width: min(var(--mobile-dialog-max-width, 720px), 100%);
    max-width: 100%;
    overflow-x: hidden;
  }

  body.add-edit-layout :is(
    .profile-add-edit-card,
    .profile-form-card,
    .form-card,
    .module-form-card,
    .form-row,
    .form-grid,
    .module-form-grid
  ) {
    width: 100%;
    max-width: 100%;
  }

  body.messages-layout :is(.messages-wrap, .message-thread-shell, .messages-members-page) {
    width: 100%;
    max-width: 100%;
  }

  body.messages-layout :is(.messages-new-recipients-card, .messages-members-card) {
    width: 100%;
  }

  body.messages-layout .thread-participants-panel {
    width: min(400px, calc(100% - 16px));
    max-width: calc(100% - 16px);
  }

  body.messages-layout .thread-member-panel {
    width: auto;
    max-width: none;
    left: 8px;
    right: 8px;
  }

  body.messages-layout :is(.message-stack, .message-media-card, .message-bubble--shared-content) {
    max-width: 100%;
  }

  body.messages-layout .message-stack {
    max-width: 85%;
  }

  body.messages-layout .thread-messages-panel {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

body.add-edit-layout [role="dialog"] :is(form, .form-field, .ms-form-group) {
  min-width: 0;
  max-width: 100%;
}