section.active-chat {

  & > turbo-frame {
    display: inherit;
    flex-direction: inherit;
    min-height: inherit;
    max-height: inherit;
    overflow: inherit;
  }

  & > turbo-frame {
    width: 100%;
  }

  .active-chat-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--navbar-height));
    max-height: calc(100vh - var(--navbar-height));

    .active-chat-header {
      border-left: 1px solid var(--light-gray);

      .heading-wrapper {
        gap: 0;
      }

      .link-back {
        margin: 0;
        padding: 0.5rem;
      }
    }

    &:not(:has(.message-input-section)) {
      .messages-frame {
        max-height: calc(100vh - var(--navbar-height) - 3.5rem);
        min-height: calc(100vh - var(--navbar-height) - 3.5rem);
      }
    }

    .messages-frame {
      display: flex;
      flex-direction: column-reverse;
      height: calc(100vh - var(--navbar-height) - (3.5rem + 3rem)); /* 3.5rem = .active-chat-section, 3rem = .message-input-section */
      margin: auto;
      max-height: calc(100vh - var(--navbar-height) - (3.5rem + 3rem));
      overflow-y: scroll;
      padding: 1rem;
      width: 100%;

      .messages-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 0 auto;
        width: 100%;

        &.announcements {
          max-width: var(--container-m);
        }

        .message-wrapper {
          display: flex;
          flex: 1;
          flex-direction: row;
          gap: 0.25rem;

          &:hover {
            .message-actions {
              opacity: 1;
            }
          }

          &.sent-by-current-user {
            justify-content: flex-end;

            .message-actions {
              order: -1;
            }
          }

          .message-actions {
            align-self: center;
            opacity: 0;
            padding: 0 1rem;
            transition: 0.4s ease-in-out;
          }

          &.system-message {
            justify-content: center;

            .message-content {
              background-color: color-mix(in srgb, var(--ink), transparent 50%);
              border-radius: var(--border-radius);
              color: var(--off-white);
              max-width: 16rem;
              padding: 0.25rem 0.5rem;
              text-align: center;

              .message-body p {
                font-size: 0.75rem;
              }

              /*RYAL-2818*/
              .meta {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}