/* =========================
   Chat / Messenger
   Figma: Chat Messages & Bubbles / Messenger Messages & Bubbles.
========================= */

@use "../kit-deps" as *;

.chat-message {
  display: flex;
  flex-direction: column;
  gap: $space-2;
  max-width: 80%;

  &.chat-message-user {
    align-self: flex-end;
    align-items: flex-end;

    .chat-bubble {
      background-color: $mint-100;
      border-color: $mint-200;
      color: $neutral-900;
      border-bottom-right-radius: $radius-xs;
    }
  }

  &.chat-message-ai {
    align-self: flex-start;
    align-items: flex-start;

    .chat-bubble {
      background-color: $neutral-0;
      border-color: $neutral-200;
      color: $neutral-900;
      border-bottom-left-radius: $radius-xs;
    }
  }
}

.chat-bubble {
  padding: $space-3 $space-4;
  border: 1px solid;
  border-radius: $radius-lg;
  font-size: $font-size-base;
  line-height: 1.5;
  word-break: break-word;

  p {
    margin: 0;

    & + p {
      margin-top: $space-2;
    }
  }

  ul,
  ol {
    margin: $space-2 0 0;
    padding-left: $space-5;
  }

  li + li {
    margin-top: $space-1;
  }
}

.chat-message-title {
  margin: 0;
  color: $neutral-700;
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
}

.chat-message-actions {
  display: inline-flex;
  align-items: center;
  gap: $space-2;

  .chat-message-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: $radius-md;
    background: transparent;
    color: $neutral-500;
    cursor: pointer;
    transition:
      background-color $motion-base $motion-ease,
      color $motion-base $motion-ease;

    &:hover {
      background-color: rgba($neutral-900, 0.06);
      color: $neutral-900;
    }

    &:focus-visible {
      @include focus_ring;
    }
  }
}

.chat-message-options {
  display: flex;
  flex-direction: column;
  gap: $space-2;
  width: 100%;
  margin-top: $space-2;

  .chat-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $space-2;
    width: 100%;
    padding: $space-3 $space-4;
    border: 1px solid $neutral-200;
    border-radius: $radius-lg;
    background-color: $neutral-0;
    color: $neutral-900;
    font: inherit;
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    cursor: pointer;
    transition:
      background-color $motion-base $motion-ease,
      border-color $motion-base $motion-ease;

    &:hover {
      background-color: $yellow-100;
      border-color: $yellow-400;
    }

    &:focus-visible {
      @include focus_ring;
    }
  }
}

.chat-input-container {
  display: flex;
  align-items: center;
  gap: $space-3;
  width: 100%;
  padding: $space-2 $space-3 $space-2 $space-4;
  border: 1px solid $neutral-200;
  border-radius: $radius-full;
  background-color: $neutral-0;

  .chat-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: $space-2 0;
    border: 0;
    background: transparent;
    color: $neutral-900;
    font: inherit;
    font-size: $font-size-base;
    line-height: 1.4;

    &::placeholder {
      color: $neutral-500;
    }

    &:focus {
      outline: none;
    }
  }

  .chat-input-actions {
    display: inline-flex;
    align-items: center;
    gap: $space-1;
    flex-shrink: 0;
  }
}

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: $space-1;
  padding: $space-3 $space-4;
  border-radius: $radius-lg;
  background-color: $neutral-0;
  border: 1px solid $neutral-200;

  span {
    width: 6px;
    height: 6px;
    border-radius: $radius-full;
    background-color: $neutral-400;
    animation: chat-typing-bounce 1.4s infinite ease-in-out both;

    &:nth-child(1) { animation-delay: -0.32s; }
    &:nth-child(2) { animation-delay: -0.16s; }
  }
}

@keyframes chat-typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
  40% { transform: scale(1); opacity: 1; }
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: $space-4;
  width: 100%;
  max-width: 720px;
  padding: $space-3;
  border: 1px solid $neutral-100;
  border-radius: $radius-lg;
  background-color: $neutral-50;
}