/* Hard containment for Support messages and composer controls. */
.mobile-shell.is-support {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
}

.mobile-shell.is-support > .support-page,
.mobile-shell.is-support .sp-sheet,
.mobile-shell.is-support .sp-thread {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.mobile-shell.is-support .sp-msg {
  box-sizing: border-box !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 82% !important;
}

.mobile-shell.is-support .sp-bubble {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.mobile-shell.is-support .sp-bubble p {
  max-width: 100% !important;
  grid-template-areas: "attach input send" !important;
  word-break: break-word !important;
}

.mobile-shell.is-support .sp-composer {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  grid-template-areas: "attach input send" !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.mobile-shell.is-support .sp-composer > input[type="file"] {
  display: none !important;
}

.mobile-shell.is-support .sp-composer > .sp-plus {
  grid-area: attach !important;
}

.mobile-shell.is-support .sp-composer > label {
  grid-area: input !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.mobile-shell.is-support .sp-composer > .sp-send {
  grid-area: send !important;
  display: grid !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  visibility: visible !important;
}

.mobile-shell.is-support .sp-composer input:not([type="file"]) {
  width: 100% !important;
  min-width: 0 !important;
}