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

:root {
  --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-new-message-border: var(--border-divider-dark);
  --chat-date-align: center;
}

@include theme('light') {
  --chat-bg: var(--white);
  --chat-color: var(--content-primary);
  --chat-instructions-color: var(--neutral-70);
  --chat-new-message-bg: var(--white);
  --chat-new-message-textarea-color: var(--neutral-90);
  --chat-new-message-textarea-bg: var(--white);
  --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);

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

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

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

  .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(--border-divider-themed);
      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 {
  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;
  }
}