/* Flatcast Chat V26 - mobile normal-screen width fix only.
   IMPORTANT: desktop and fullscreen layouts are intentionally untouched. */
@media (max-width: 767px) {
  /* Normal mobile view must use the whole available content width. */
  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) > .fc-chat-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) .fc-chat-messages {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-right: 0 !important;
    overflow-x: hidden !important;
  }

  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) .fc-chat-message,
  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) .fc-chat-line-head {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Old V1 mobile rule used a fixed 170px text basis. Remove it so text
     can use the full phone width instead of visually sticking to the left. */
  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) .fc-chat-line-head .fc-chat-text {
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Online users remain a drawer and never reserve a hidden right column. */
  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) .fc-chat-sidebar {
    position: fixed !important;
    width: min(330px, 88vw) !important;
    max-width: 88vw !important;
    margin: 0 !important;
  }

  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) > .fc-chat-composer,
  .fc-chat-shell:not(.is-fullscreen):not(:fullscreen) .fc-chat-composer-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}