#middle-column-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  z-index: -1;

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--theme-background-color);
  }

  &::after {
    .theme-light & {
      background-image: url('../../assets/chat-bg.jpg');

      @media (max-width: 600px) {
        background-image: url('../../assets/chat-bg-mobile.jpg');
      }
    }

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    body:not(.animation-level-0) #root & {
      transition: transform var(--layer-transition), opacity .2s !important;
    }

    body.animation-level-0 & {
      transition: none;
    }
  }

  .custom-bg-color:not(.custom-bg-image) > &::after {
    opacity: 0;
  }

  .custom-bg-image > &::after {
    background-image: var(--custom-background) !important;
    filter: none;
    transform: scale(1.1);
  }

  .custom-bg-image.blurred > &::after {
    filter: blur(12px);
  }

  @media screen and (min-width: 1276px) {
    body.animation-level-2 &::after {
      margin: -16rem -5rem -20rem 0;
      overflow: hidden;
      transform: scale(1);
      transform-origin: left center;
      transition: transform var(--layer-transition);
    }

    body.animation-level-2 #Main.right-column-open &::after {
      transform: scale(0.67) !important;
    }
  }
}

#MiddleColumn {
  display: flex;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 1;
  min-width: 0;

  @media (max-width: 600px) {
    overflow: hidden;
  }

  .messages-layout {
    --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    > .Transition {
      width: 100%;
      height: 100%;
      overflow: hidden;

      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }

  .messaging-disabled {
    &-inner {
      width: 100%;
      padding: 1rem;
      border-radius: var(--border-radius-messages);
      background: var(--color-background);
      color: var(--color-text-secondary);
      text-align: center;
      box-shadow: 0 1px 2px var(--color-default-shadow);
    }
  }

  .Composer {
    #message-compose {
      transform: scaleX(1) translateX(0);
      transition: transform var(--select-transition), border-bottom-right-radius var(--select-transition);

      &::before {
        transform: scaleX(-1) translateX(0);
        transition: transform var(--select-transition);
      }

      body.animation-level-0 & {
        &, &::before {
          transition: none !important;
        }
      }
    }

    .message-input-wrapper, &::before {
      opacity: 1;
      transition: opacity var(--select-transition);

      body.animation-level-0 & {
        transition: none !important;
      }
    }

    > .Button {
      opacity: 1;
      transform: scale(1);
      transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s, color 0.15s;

      body.animation-level-0 & {
        transition: none !important;
      }
    }

    &.hover-disabled, &:not(.shown) {
      pointer-events: none;
    }

    &:not(.shown) {
      .ComposerEmbeddedMessage {
        height: 0;
      }

      #message-compose {
        transform: scaleX(var(--composer-hidden-scale, 1)) translateX(var(--composer-translate-x, 0));
        border-bottom-right-radius: var(--border-radius-messages);

        &::before {
          transform: scaleX(-1) translateX(200%);
        }
      }

      #editable-message-text {
        height: 3.5rem !important;

        @media (max-width: 600px) {
          height: 2.5rem !important;
        }
      }

      .message-input-wrapper, &::before {
        opacity: 0;
      }

      > .Button {
        opacity: 0 !important;
        transform: scale(0.5);
      }
    }
  }

  .messaging-disabled {
    transform: scaleX(1);
    transition: transform var(--select-transition);

    .messaging-disabled-inner span {
      opacity: 1;
      transition: opacity var(--select-transition);

      body.animation-level-0 & {
        transition: none !important;
      }
    }

    body.animation-level-0 & {
      transition: none !important;
    }

    &:not(.shown) {
      transform: scaleX(var(--composer-hidden-scale, 1));
      pointer-events: none;

      .messaging-disabled-inner span {
        opacity: 0;
      }
    }
  }

  .middle-column-footer {
    width: 100%;
    max-width: var(--messages-container-width);
    padding: 0 1rem;
    position: relative;
    display: flex;
    align-items: flex-end;
    z-index: var(--z-middle-footer);

    transform: translate3d(0, 0, 0);
    transition: top 200ms, transform var(--layer-transition);

    body.animation-level-0 & {
      transition: none !important;
    }

    @media (min-width: 1276px) {
      width: calc(100% - var(--right-column-width));

      #Main.right-column-open & {
        transform: translate3d(calc(var(--right-column-width) / -2), 0, 0);
      }
    }

    @media (max-width: 600px) {
      padding: 0 0.5rem;

      body.is-symbol-menu-open & {
        transform: translate3d(0, calc(-1 * (var(--symbol-menu-height) + var(--symbol-menu-footer-height))), 0);
      }
    }

    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      &:not(.no-composer) {
        padding-bottom: env(safe-area-inset-bottom);
        top: 0;

        body.keyboard-visible & {
          top: env(safe-area-inset-bottom);
        }
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: -.5625rem;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0) 100%);
      opacity: 0;
      transition: opacity 350ms ease;

      @media (max-width: 600px) {
        left: -2%;
        right: -2%;
      }
    }

    &.with-notch::before {
      opacity: 1;
    }

    html.theme-dark &::before {
      background: linear-gradient(90deg, rgba(127, 127, 127, 0) 0%, rgba(127, 127, 127, 0.4) 2%, rgba(127, 127, 127, 0.4) 98%, rgba(127, 127, 127, 0) 100%);
    }
  }
}

/* Common styles for message list fade-out shadow */
.Composer,
.MessageSelectToolbar,
.messaging-disabled {
  margin-bottom: 1.25rem;

  @media (max-width: 600px) {
    margin-bottom: 0.5rem;
  }
}

.Composer,
.MessageSelectToolbar,
.unpin-all-button,
.messaging-disabled {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.MessageSelectToolbar-inner,
.unpin-all-button,
.messaging-disabled {
  .mask-image-disabled & {
    box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
    border-radius: var(--border-radius-messages);
  }
}

.unpin-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  padding-bottom: 1.25rem;

  .unpin-all-button {
    text-transform: capitalize;
    color: var(--color-black);
    height: 3.5rem;
    overflow: visible;
    transform: scaleX(1);
    transition: transform var(--select-transition), background-color .15s, color .15s;

    &:hover {
      .icon-unpin {
        color: var(--color-white);
      }
    }

    .select-mode-active + .middle-column-footer & {
      box-shadow: none;
      transform: scaleX(var(--unpin-hidden-scale));
    }

    @media (max-width: 600px) {
      height: 2.5rem;
    }

    .icon-unpin {
      margin-inline-start: -0.4375rem;
      margin-inline-end: .75rem;
      color: var(--color-text-secondary);
      font-size: 1.5rem;
      transition: color .15s
    }
  }

  @media (max-width: 600px) {
    padding-bottom: 0.75rem;

    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    }
  }

  .mask-image-disabled &::before {
    background: unset;
  }
}