/* Mobile layout and performance fixes */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
  }

  img {
    height: auto !important;
  }

  #root,
  .App-main,
  .QuestionPage,
  .QuestionHeader,
  .QuestionHeader-content,
  .QuestionHeader-footer-inner,
  .QuestionHeader-main,
  .QuestionHeader-footer-main,
  .Question-main,
  .Question-mainColumn,
  .AnswerItem,
  .Card,
  .List-item,
  .ContentItem,
  .RichContent,
  .RichText,
  .ztext {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .QuestionHeader-content,
  .QuestionHeader-footer-inner,
  .Question-main {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .QuestionHeader-side,
  .Question-sideColumn,
  .Question-sideColumn--sticky,
  .Question-sideColumn .Sticky,
  .dj-pcright-bar,
  .rightSideways,
  #fixed,
  .fixed-right-itzjj,
  .fixed-dialog-container,
  .CornerButtons {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .QuestionHeader-title {
    font-size: 22px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .QuestionHeader-title p,
  .QuestionRichText p,
  .RichText p,
  .ztext p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .Sticky--voteHolder {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ContentItem-actions,
  .RichContent-actions,
  .QuestionHeader-footer {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-whatsapp-float {
    left: 50% !important;
    right: auto !important;
    bottom: 16px !important;
    transform: translateX(-50%) !important;
  }

  .site-whatsapp-float:hover {
    transform: translateX(-50%) !important;
  }
}