Overleaf/services/web/frontend/stylesheets/pages/editor/chat.scss

:root {
  --chat-bg: var(--neutral-80);
  --chat-color: var(--white);
  --chat-instructions-color: var(--neutral-20);
  --chat-new-message-bg: var(--neutral-70);
  --chat-new-message-textarea-color: var(--neutral-90);
  --chat-new-message-textarea-bg: var(--neutral-20);
  --chat-new-message-textarea-border: var(--editor-border-color);
  --chat-new-message-border: var(--editor-border-color);
  --chat-message-date-color: var(--neutral-40);
  --chat-message-name-color: var(--white);
}

.ide-redesign-main {
  --chat-bg: var(--bg-dark-primary);
  --chat-color: var(--content-primary);
  --chat-instructions-color: var(--content-primary-dark);
  --chat-new-message-bg: var(--bg-dark-primary);
  --chat-new-message-textarea-color: var(--content-primary-dark);
  --chat-new-message-textarea-bg: var(--bg-dark-primary);
  --chat-message-date-color: var(--content-secondary-dark);
  --chat-message-name-color: var(--content-secondary-dark);
  --chat-date-align: center;
}

@include theme('light') {
  --chat-bg: var(--white);
  --chat-color: var(--neutral-70);
  --chat-instructions-color: var(--neutral-70);
  --chat-new-message-bg: var(--neutral-10);
  --chat-new-message-textarea-color: var(--neutral-90);
  --chat-new-message-textarea-bg: var(--white);
  --chat-new-message-textarea-border: var(--editor-border-color);
  --chat-new-message-border: var(--editor-border-color);
  --chat-message-date-color: var(--neutral-70);
  --chat-message-name-color: var(--neutral-70);

  .ide-redesign-main {
    --chat-bg: var(--white);
    --chat-color: var(--content-primary);
    --chat-instructions-color: var(--neutral-70);
    --chat-new-message-bg: var(--neutral-10);
    --chat-new-message-textarea-color: var(--neutral-90);
    --chat-new-message-textarea-bg: var(--white);
    --chat-new-message-textarea-border: var(--editor-border-color);
    --chat-new-message-border: var(--white);
    --chat-message-date-color: var(--neutral-70);
    --chat-message-name-color: var(--neutral-70);
    --chat-date-align: center;
  }
}

.chat {
  $new-message-height: 80px;

  color: var(--chat-color);

  .no-messages {
    padding: calc(var(--line-height-03) / 2);
    color: var(--chat-instructions-color);
  }

  .first-message {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: calc(var(--line-height-03) / 2);
    color: var(--chat-instructions-color);
  }

  .chat-error {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--chat-bg);
    padding: calc(var(--line-height-03) / 2);
    text-align: center;
  }

  .messages {
    position: absolute;
    inset: 0;
    bottom: $new-message-height;
    overflow-x: hidden;
    background-color: var(--chat-bg);

    li.message {
      margin: calc(var(--line-height-03) / 2);

      .date {
        font-size: var(--font-size-01);
        color: var(--chat-message-date-color);
        margin-bottom: calc(var(--line-height-03) / 2);
        text-align: var(--chat-date-align, right);
      }

      .message-wrapper {
        .name {
          font-size: var(--font-size-01);
          color: var(--chat-message-name-color);
          margin-bottom: var(--spacing-02);
          min-height: 16px;
        }

        .message {
          border-left: 3px solid transparent;
          font-size: var(--font-size-02);
          box-shadow: none;
          border-radius: var(--border-radius-base);
          position: relative;

          .message-and-dropdown {
            clear: both;

            &.pending-message {
              opacity: 0.6;
            }
          }

          .message-dropdown:not(.show) {
            visibility: hidden;
          }

          .message-content {
            padding: var(--spacing-03) var(--spacing-05);
            overflow-x: auto;
            color: var(--white);
            font-weight: bold;

            a {
              color: var(--white);
            }

            .message-edited {
              @include body-xs;

              font-weight: normal;
            }
          }

          .arrow {
            transform: rotate(90deg);
            right: 90%;
            top: -15px;
            border: solid;
            content: ' ';
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-top-color: transparent !important;
            border-bottom-color: transparent !important;
            border-width: 10px;
          }

          .message-dropdown-menu {
            min-width: var(--bs-dropdown-min-width);
          }

          .message-dropdown-menu-btn {
            @include reset-button;
            @include action-button;

            color: var(--white);
            padding: 0;
            width: 30px;
            height: 30px;
          }
        }

        &.own-message-wrapper .message-and-dropdown:hover {
          background-color: rgb($neutral-90, 0.08);

          .message-dropdown {
            visibility: visible;
          }
        }

        p {
          margin-bottom: calc(var(--line-height-03) / 4);

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      &:not(.self) {
        .message {
          .arrow {
            border-left-color: transparent !important;
          }
        }
      }

      &.self {
        margin-top: var(--line-height-03);

        .message-wrapper .message {
          border-left: none;
          border-right: 3px solid transparent;

          .arrow {
            left: 100%;
            right: auto;
            border-right-color: transparent !important;
          }
        }
      }
    }
  }

  .new-message {
    @extend .full-size;

    top: auto;
    height: $new-message-height;
    background-color: var(--chat-new-message-bg);
    padding: calc(var(--line-height-03) / 4);
    border-top: 1px solid var(--chat-new-message-border);

    textarea {
      overflow: auto;
      resize: none;
      border-radius: var(--border-radius-base);
      border: 1px solid var(--chat-new-message-textarea-border);
      height: 100%;
      width: 100%;
      color: var(--chat-new-message-textarea-color);
      font-size: var(--font-size-02);
      padding: calc(var(--line-height-03) / 4);
      background-color: var(--chat-new-message-textarea-bg);
    }
  }
}

.chat-empty-state-placeholder {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
  gap: var(--spacing-06);
  padding: var(--spacing-02);

  .chat-empty-state-icon {
    padding: var(--spacing-08);
    font-size: var(--font-size-08);
    height: 80px;
    width: 80px;
    border-radius: 50%;
    display: inline-block;
    line-height: 32px;
    background-color: var(--bg-secondary-themed);
    color: var(--content-primary-themed);

    .material-symbols {
      font-size: 32px;
    }
  }

  .chat-empty-state-title {
    color: var(--content-primary-themed);
    font-size: var(--font-size-02);
    line-height: var(--line-height-02);
    font-weight: bold;
  }

  .chat-empty-state-body {
    font-size: var(--font-size-02);
    line-height: var(--line-height-02);
    color: var(--content-secondary-themed);
  }
}

.chat-message-redesign {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-01);

  .message-row {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-03);
  }

  .message-avatar,
  .message-avatar-placeholder {
    flex: 0 0 24px;
  }

  .message-avatar .avatar {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    text-align: center;
    color: var(--white);
    text-transform: uppercase;
  }

  .message-avatar .message-avatar-deleted-user-icon {
    line-height: 24px;
    font-size: 16px;
  }

  .message-author,
  .message-container {
    flex: 1 1 auto;
    max-width: calc(100% - 24px - var(--spacing-03));
  }

  .message-container {
    display: flex;
    justify-content: flex-start;

    .message-dropdown:not(.show) {
      visibility: hidden;
    }

    &.pending-message {
      opacity: 0.6;
    }

    &:hover {
      .message-dropdown {
        visibility: visible;
      }
    }

    .message-dropdown-menu-btn {
      @include reset-button;
      @include action-button;

      color: var(--content-primary-themed);
      padding: 0;
      width: 30px;
      height: 30px;
    }
  }

  .message-author {
    color: var(--chat-message-name-color);
    font-size: var(--font-size-01);
    line-height: var(--line-height-01);
  }

  .message-content {
    background-color: var(--bg-light-secondary);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-03) var(--spacing-04);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;

    p {
      margin: 0;
    }

    .message-edited {
      @include body-xs;

      font-weight: normal;
    }
  }

  .message-container.message-from-self {
    justify-content: flex-end;

    .message-content {
      background-color: var(--bg-accent-03);
    }

    &:not(.first-row-in-message) .message-content {
      border-top-right-radius: var(--border-radius-base);
    }

    &:not(.last-row-in-message) .message-content {
      border-bottom-right-radius: var(--border-radius-base);
    }
  }

  .message-container:not(.message-from-self) {
    &:not(.first-row-in-message) .message-content {
      border-top-left-radius: var(--border-radius-base);
    }

    &:not(.last-row-in-message) .message-content {
      border-bottom-left-radius: var(--border-radius-base);
    }
  }
}

.chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;

  .chat-wrapper {
    flex: 1 1 auto;
    position: relative;
  }
}