/* =========================
   Chat Input Container
   Figma: Input Container Chat / Input Container Messenger.
   Rich input bar with attachment, text field, send and optional actions.
========================= */

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

.chat-input {
  display: flex;
  align-items: flex-end;
  gap: $space-2;
  width: 100%;
  padding: $space-2;
  border: $border-width-base $border-style-base $neutral-200;
  border-radius: $radius-xl;
  background-color: $neutral-0;

  &__prefix,
  &__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: $radius-full;
    background-color: transparent;
    color: $neutral-500;
    cursor: pointer;
    transition:
      background-color $motion-base $motion-ease,
      color $motion-base $motion-ease;

    &:hover {
      background-color: $neutral-100;
      color: $neutral-900;
    }

    &:focus-visible {
      @include focus_ring;
    }

    .vmk-icon,
    .ph {
      width: 20px;
      height: 20px;
      font-size: 20px;
    }
  }

  &__prefix {
    align-self: flex-end;
    width: 36px;
    height: 36px;
    margin-bottom: 2px;
  }

  &__field {
    flex: 1 1 auto;
    min-height: 40px;
    max-height: 120px;
    padding: $space-2 $space-1;
    border: 0;
    background-color: transparent;
    color: $neutral-900;
    font-family: inherit;
    font-size: $font-size-md;
    line-height: $line-height-normal;
    resize: none;
    outline: none;

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

  &__actions {
    display: inline-flex;
    align-items: center;
    gap: $space-2;
    flex-shrink: 0;
    margin-bottom: 2px;
  }

  &__action {
    width: 40px;
    height: 40px;

    &--mic {
      background-color: transparent;
      border: 1px solid $mint-300;
      color: $mint-700;

      &:hover {
        background-color: $mint-50;
        color: $mint-800;
      }
    }

    &--send {
      background-color: $yellow-300;
      color: $neutral-900;

      &:hover {
        background-color: $yellow-400;
        color: $neutral-900;
      }
    }
  }

  &--messenger {
    align-items: center;
    border-radius: $radius-full;
    padding: $space-1 $space-2;

    .chat-input__prefix {
      align-self: center;
      width: 32px;
      height: 32px;
      margin: 0;
      color: $mint-700;

      &:hover {
        background-color: $mint-50;
        color: $mint-800;
      }

      .vmk-icon,
      .ph {
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }

    .chat-input__field {
      min-height: 36px;
      padding: $space-1 0;
    }

    .chat-input__actions {
      margin: 0;
    }

    .chat-input__action {
      width: 36px;
      height: 36px;

      .vmk-icon,
      .ph {
        width: 18px;
        height: 18px;
        font-size: 18px;
      }

      &--send {
        background-color: transparent;
        border: 1px solid $mint-500;
        color: $mint-700;

        &:hover {
          background-color: $mint-50;
          color: $mint-800;
        }
      }
    }
  }
}