weseek__growi/apps/app/src/features/openai/chat/components/AiChatModal/MessageCard.module.scss

@use '@growi/core-styles/scss/bootstrap/init' as bs;
@use '@growi/core-styles/scss/variables/growi-official-colors';

// remove margin from last child
.message-card :global {
  .card-body {
    p:last-child {
      margin-bottom: 0;
    }
  }
}


/*************************
 * AssistantMessageCard
 ************************/
.assistant-message-card :global {
  .card-body {
    --bs-card-spacer-x: 0;
    --bs-card-spacer-y: 0.8rem;
  }
}

.assistant-message-card :global {
  .grw-ai-icon {
    padding: 0.4em;
  }
}

// text animation
// refs: https://web.dev/articles/speedy-css-tip-animated-gradient-text?hl=ja
.assistant-message-card :global {
  .text-thinking {
    --bg-size: 400%;
    --color-one: var(--bs-tertiary-color);
    --color-two: var(--grw-highlight-300);
    color: transparent;
    background: linear-gradient(
                  -90deg,
                  var(--color-one),
                  var(--color-two),
                  var(--color-one)
                ) 0 0 / var(--bg-size) 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }

  @media (prefers-reduced-motion: no-preference) {
    .text-thinking {
      &:local {
        animation: move-bg 6s linear infinite;
      }
    }
    @keyframes move-bg {
      from {
        background-position: var(--bg-size) 0;
      }
    }
  }
}


 /*******************
 * UserMessageCard
 *******************/

.user-message-card :global {
  .card-body {
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 0.8rem;
  }
}

// baloon style
.user-message-card :global {
  border: 0;

  --bs-card-border-radius: var(--bs-border-radius-xxl);
  border-bottom-right-radius: var(--bs-border-radius-lg);
}

// max width
.user-message-card :global {
  max-width: 85%;
  @include bs.media-breakpoint-up(lg) {
    max-width: 75%;
  }
}



// == Colors
.assistant-message-card :global {
  .grw-ai-icon {
    color: white;
    background-color: growi-official-colors.$growi-ai-purple;
  }
}