/*
 * Global input/layout contract.
 *
 * All editable controls share the same mobile-safe sizing. This is deliberately
 * loaded last so dynamically mounted comments, messages and future text fields
 * inherit the contract without having to repeat it in each view.
 */

html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body,
#app,
#appRoot,
main,
.main-wrapper,
.main-content,
.content-container,
.cid-layout-surface,
#results,
#matrixCalculatorPanel,
#categoriesView,
#croixViewContainer,
#tableauxViewContainer,
#profileViewContainer,
#notificationCenter,
#archiveContent,
#rejectedContent,
#rejectedInlineContainer,
#rejectedInlineMain {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

input,
textarea,
select,
[contenteditable="true"] {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: 1.35;
}

textarea,
[contenteditable="true"] {
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

input::placeholder,
textarea::placeholder {
  overflow-wrap: anywhere;
}

img,
svg,
video,
canvas,
table {
  max-width: 100%;
}

/* Keep flex/grid children from creating a new horizontal scroll surface. */
*:where(.cid-layout-surface, .matrix-calc-content, .matrix-calc-input-row,
  .matrix-calc-plus-manual, .cid-comments-composer-row,
  .cid-croix-comment-form, .chat-composer-row) {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  input,
  textarea,
  select,
  [contenteditable="true"] {
    max-width: 100% !important;
  }
}