.wrapper-bubble--chat .bubble-chat--box{
  display: flex;
  align-items: start;
  gap: 10px;
  width: 100%;
}

.wrapper-bubble--chat.bubble-chat--question,
.wrapper-bubble--chat.bubble-chat--question .bubble-chat--box{
  justify-content: end;
}

.wrapper-bubble--chat.bubble-chat--response,
.wrapper-bubble--chat.bubble-chat--response .bubble-chat--box{
  justify-content: start;
}

.wrapper-bubble--chat .bubble-chat--box .wrapper-chat--message{
  padding: 16px;
  border-radius: 10px;
  position: relative;
}

.bubble-chat--question .bubble-chat--box .wrapper-chat--message{
  background-color: #757983;
}

.bubble-chat--question .bubble-chat--box .wrapper-chat--message .chat-message--text{
  color: white;
}

.bubble-chat--response .bubble-chat--box .wrapper-chat--message{
  background-color: #F4F5F8;
}

.bubble-chat--response .bubble-chat--box .wrapper-chat--message .chat-message--text{
  color: #212529;
}

.wrapper-bubble--chat .bubble-chat--box .wrapper-chat--message .chat-message--text a{
  color: #0000EE;
  transition: .3s;
}

.wrapper-bubble--chat .bubble-chat--box .wrapper-chat--message .chat-message--text a:hover{
  text-decoration: underline;
}

.bubble-chat--response .bubble-chat--box .wrapper-chat--avatar,
.bubble-chat--question .bubble-chat--box .wrapper-chat--content,
.bubble-chat--response .bubble-chat--box .wrapper-chat-skeleton--avatar{
  order: 1;
}

.bubble-chat--question .bubble-chat--box .wrapper-chat--avatar,
.bubble-chat--response .bubble-chat--box .wrapper-chat--content,
.bubble-chat--question .bubble-chat--box .wrapper-chat-skeleton--avatar{
  order: 2;
}

.bubble-chat--box .wrapper-chat--avatar{
  background-color: rgba(75, 73, 172, .3);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.wrapper-chat--avatar .chat-avatar--icon{
  color: var(--primary);
}

.chat-message--text :last-child {
  margin-bottom: 0px !important;
}


/* Styling for Section Actions */
.wrapper-bubble--chat .bubble-chat--box .wrapper-chat--action{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.wrapper-bubble--chat .bubble-chat--box .wrapper-chat--action .chat-action--text{
  font-size: 14px;
  color: #4D4D4D;
  font-weight: 400;
}

.wrapper-bubble--chat .bubble-chat--box .wrapper-chat--action .chat-action{
  display: flex;
  align-items: center;
  gap: 10px;
}

.wrapper-bubble--chat .bubble-chat--box .wrapper-chat--action .chat-action i{
  color: #005DA4;
  cursor: pointer;
  transition: .3s;
}

.wrapper-bubble--chat .bubble-chat--box .wrapper-chat--action .chat-action i:hover{
  transform: translateY(-3px);
}

.wrapper-bubble--chat.bubble-chat--skeleton .wrapper-chat--content{
  width: 100%;
}

.wrapper-bubble--chat.bubble-chat--question.bubble-chat--skeleton .wrapper-chat--content .wrapper-chat--skeleton{
  justify-content: end;
}

.wrapper-bubble--chat.bubble-chat--response.bubble-chat--skeleton .wrapper-chat--content .wrapper-chat--skeleton{
  justify-content: start;
}

.bubble-skeleton {
  background: linear-gradient(90deg, #dfdfdf 25%, #ededed 50%, #dfdfdf 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  animation-delay: 0.5s;
}

.bubble-short {
    height: 55px;
    width: 30%;
}

.bubble-medium {
    height: 55px;
    width: 50%;
}

.bubble-long {
    height: 55px;
    width: 100%;
}

.bubble-multiline {
    height: 80px;
}

.bubble-skeleton.bubble-avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.bubble-chat--skeleton .wrapper-chat--content,
.bubble-chat--skeleton .wrapper-chat--content .wrapper-chat--skeleton{
  max-width: 100% !important;
  width: 100% !important;
}

.wrapper-bubble--chat.bubble-chat--skeleton .bubble-chat--box{
  max-width: 100% !important;
}

/* Animasi shimmer */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}