@use 'sae-lib/src/styles/variables' as variables;

:host {
  width: 100%;
}

.avatar {

  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: contain !important;

  .user & {
    background-size: contain;
    background: yellow url('../../../../public/user.png');
  }


  .llm & {
    background: yellow url('../../../../public/chatbot.png');
  }


}


.message {

  .user-more-infos {
    margin-top: -35px;
    margin-left: 39px;
  }

  &.user {
    background: white;
    color: #000;
  }

  &.llm {
    .message-content {
      color: #000;
    }

    .actions {
      .button {
        background: rgba(59, 135, 204, 0.7);
        color: black;
      }
    }

  }

  .actions {
    .fullscreen {
      float: right;
    }
  }

  .app-theme-light & {

    background: #F5F5F5;

  }

  .app-theme-dark & {

    background: #2c2c2c;
    color: #d5d5d5;

    .message {

      &.user {
        background: #232432;
        color: #8b8ecf;
      }

      &.llm {
        background: #232432;

        .message-content {
          color: #8b8ecf;
        }

        .actions {

          .button {
            background: #0d0e15;
            color: grey;
          }
        }

      }
    }

  }

  .app-theme-funky & {
    color: #1B1D27;
    background: #ffe8e8;

    .message {
      .message-content {
        color: #fff3f3;
      }

      &.user {
        background: #d6a3a3;
        color: #1B1D27;
      }

      &.llm {

        background: #9f36bc;
        color: #bba7d6;

        .actions {

          .button {
            background: #b08eba;
            color: #d4b4ff;
          }
        }

      }
    }

  }

  .message {

    &.user {
      background: variables.$neutral-white;
    }

    &.llm {
      background: rgba(#3B87CC1A, 10%);

    }
  }
}


.expanded-message-fullscreen {
  display: none;
  width: 50%;

  &.is-visible {
    display: block;
    padding: 20px;
    background: #ccc;
    border-radius: 3px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;

  }
}
