#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;

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

  .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;
      }
    }

    &-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);
    }
  }

  .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);
    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
    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);
      }
    }

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

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

      // Target: Old Firefox (Waterfox Classic)
      @supports not (padding-bottom: env(safe-area-inset-bottom)) {
        padding-bottom: 0;
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: -0.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,
.join-subscribe-button,
.messaging-disabled {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.MessageSelectToolbar-inner,
.unpin-all-button,
.join-subscribe-button,
.messaging-disabled {
  .mask-image-disabled & {
    box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
    border-radius: var(--border-radius-messages);
  }
}

.middle-column-footer-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);

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

    @media (max-width: 600px) {
      &:active,
      &:focus {
        .icon-unpin {
          color: var(--color-white);
        }
      }
    }

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

  .join-subscribe-button,
  .unpin-all-button {
    height: 3.5rem;
    transform: scaleX(1);
    transition: transform var(--select-transition), background-color 0.15s, color 0.15s;

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

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

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

    // Target: Old Firefox (Waterfox Classic)
    @supports (padding-bottom: calc(0.75rem + env(safe-area-inset-bottom))) {
      padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
  }

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