/* css/chatbot-bubble.css: Bubble chat style với width constraints */

/* Message containers - User 95%, Bot 100% - HIGH SPECIFICITY */
.chatbot-history .chat-msg.user .text-end,
.chat-msg.user > .text-end {
  max-width: 95% !important;
  width: auto !important;
}

.chatbot-history .chat-msg.bot .text-start,
.chat-msg.bot > .text-start {
  max-width: 100% !important;
  width: 100% !important;
}

/* User bubble (canh phải) - giới hạn bởi container 95% */
.chat-bubble-user {
  display: inline-block;
  min-width: 32px;
  max-width: 100%; /* Sẽ bị giới hạn bởi container 95% */
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
  padding: 10px;
}

/* Bot bubble (canh trái) - full width 100% */
.chat-bubble-bot {
  display: block !important;
  min-width: 48px !important;
  width: 100% !important;
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* Highlight effect cho scroll to message */
.chat-msg.highlight-message {
  animation: highlightMessage 2s ease-in-out;
}

@keyframes highlightMessage {
  0% { 
    background-color: rgba(255, 193, 7, 0.3);
    transform: scale(1.02);
  }
  50% { 
    background-color: rgba(255, 193, 7, 0.2);
    transform: scale(1.01);
  }
  100% { 
    background-color: transparent;
    transform: scale(1);
  }
}

/* Responsive adjustments - User responsive, Bot always 100% */
@media (max-width: 768px) {
  /* User messages: giảm xuống 90% trên tablet */
  .chatbot-history .chat-msg.user .text-end,
  .chat-msg.user > .text-end {
    max-width: 90% !important;
  }
  
  /* Bot messages: vẫn giữ 100% full width */
  .chatbot-history .chat-msg.bot .text-start,
  .chat-msg.bot > .text-start {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* User messages: 95% trên mobile nhỏ */
  .chatbot-history .chat-msg.user .text-end,
  .chat-msg.user > .text-end {
    max-width: 95% !important;
  }
  
  /* Bot messages: vẫn giữ 100% full width */
  .chatbot-history .chat-msg.bot .text-start,
  .chat-msg.bot > .text-start {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Giảm padding trên mobile nhỏ */
  .chat-bubble-user,
  .chat-bubble-bot {
    padding: 8px !important;
  }
}