.chat-sidebar-header, .active-chat-header {
  align-items: center;
  flex-direction: row;
  height: 3.5rem;
  justify-content: space-between;
  margin-bottom: 0;
  min-height: 3.5rem;
  padding: 0.5rem 1rem;
}

section.chat-sidebar {
  .query-container {
    margin: 0 0.5rem;
    padding: 0;

    .field {
      margin-top: 0.5rem;
    }

    .query-results-container{
      padding-block: 0;
    }

    form {
      margin: 0;
      opacity: 1;
      transition: all 0.2s ease-in-out;

      &.closed {
        height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
      }
    }
  }

  .no-results-notice{
    padding: 0 0.5rem;
  }

  .chat-list-loading {
    display: none;
  }

  &:has(.card__chat-announcement) turbo-frame#chat_cards_list_wrapper {
    .cards-container {
      max-height: calc(100vh - var(--navbar-height) - 3.5rem - 8rem); /* 3.5rem is chat header height, 8rem is announcement card height */
      min-height: calc(100vh - var(--navbar-height) - 3.5rem - 8rem); /* 3.5rem is chat header height, 8rem is announcement card height */
    }
  }

  turbo-frame#chat_cards_list_wrapper {
    display: inherit;
    flex-direction: inherit;
    flex-grow: 1;
    overflow: clip;

    &[busy] {
      .chat-list-loading {
        display: block;

        .chat-list-loading-text {
          font-size: 1.5rem;
          color: var(--ink-gray);
          margin: 3rem auto 0 auto;
        }
      }
    }

    .cards-container {
      background-color: unset;
      border: unset;
      border-radius: unset;
      box-shadow: unset;
      max-height: calc(100vh - var(--navbar-height) - 3.5rem); /* 3.5rem is chat header height */
      min-height: calc(100vh - var(--navbar-height) - 3.5rem); /* 3.5rem is chat header height */
      overflow-y: scroll;

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

        .card__chat header.chat-card-header { /* RYAL-2818: Check below */
          height: 2rem;
          position: relative;
        }
      }
    }
  }
}