@media (max-width: 860px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #f7f7f8;
  }

  aside,
  .sidebar,
  #sidebar,
  .side,
  .sidenav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 340px) !important;
    max-width: 340px !important;
    z-index: 100000 !important;
    transform: translateX(-105%) !important;
    transition: transform .18s ease !important;
    box-shadow: 18px 0 60px rgba(15,23,42,.28) !important;
  }

  body.cl-sidebar-open aside,
  body.cl-sidebar-open .sidebar,
  body.cl-sidebar-open #sidebar,
  body.cl-sidebar-open .side,
  body.cl-sidebar-open .sidenav {
    transform: translateX(0) !important;
  }

  main,
  .main,
  .content,
  .chat,
  .chat-main,
  .app-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  header,
  .topbar,
  .appbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .messages,
  #messages {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .msg {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  form,
  .composer,
  #composer,
  .inputbar,
  .chat-input {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  textarea,
  #q {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #send,
  button[type="submit"] {
    min-width: 54px;
  }

  .cl-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15,23,42,.32);
    display: none;
  }

  body.cl-sidebar-open .cl-sidebar-scrim {
    display: block;
  }
}