/* 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;
  }
}

/* ==========================================================================
   🤖 CHATBOT MESSAGES - REACTION STYLES & INTERACTIVE GLASSMORPHISM
   ========================================================================== */

/* Thanh reactions mờ nhạt ẩn hiện tinh tế bên dưới */
.chatbot-reactions-bar {
  opacity: 0.65;
  transition: opacity 0.2s ease-in-out;
  flex-wrap: wrap !important;
  gap: 6px 12px !important; /* Khoảng cách mặc định rất tinh tế */
}
.chat-bubble-bot:hover .chatbot-reactions-bar {
  opacity: 1;
}
 
/* Định nghĩa nút Like/Dislike nhẹ nhàng */
.chatbot-reactions-bar button {
  transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
  white-space: nowrap !important; /* 🚫 NGHIÊM CẤM bẻ gãy chữ xuống dòng dọc mọc râu */
}

/* ✅ TƯ DUY LOGIC: Tối ưu khoảng cách và cỡ chữ cực chuẩn dành riêng cho Mobile */
@media (max-width: 576px) {
  .gap-1 {
    gap: 0.1rem !important; /* Custom thu gọn khoảng cách tăm tắp cho mobile theo chỉ thị của ông chủ */
  }
  .chatbot-reactions-bar {
    gap: 4px 8px !important; /* Thu hẹp khoảng cách các nút trên mobile để không bị rớt dòng */
  }
  .chatbot-reactions-bar button {
    font-size: 0.75rem !important; /* Cỡ chữ mỏng nhẹ, tinh tế */
    padding: 0.25rem 0rem !important; /* Triệt tiêu padding ngang theo đề xuất cực chuẩn của ông chủ */
  }
  
  /* 🔄 Lật hướng mở popup sao chép và tải xuống sang trái để chống tràn và che khuất màn hình di động */
  .chatbot-download-picker-popup,
  .chatbot-copy-picker-popup {
    left: auto !important;
    right: 0 !important;
    transform-origin: bottom right !important;
  }
}
.chatbot-reactions-bar button:hover {
  color: var(--brown-tone, #5d4037) !important;
  transform: scale(1.08);
}
.chatbot-reactions-bar button:active {
  transform: scale(0.95);
}

/* Dải phản hồi cảm xúc nổi Glassmorphism cực sang xịn */
.chatbot-reactions-picker-popup {
  position: absolute;
  bottom: 28px;
  left: 0;
  width: max-content;
  min-width: 210px;
  height: 40px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(141, 110, 99, 0.18);
  z-index: 1050;
  display: none;
  justify-content: space-around;
  align-items: center;
  padding: 0 10px !important;
  animation: slideUpPopup 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
  transform-origin: bottom left;
}

/* 🛑 CẦU NỐI VÔ HÌNH CHỐNG MẤT HOVER: Tạo vùng đệm dưới để nối liền nút Thích và popup reaction (đặt z-index: -1 để không che đè nút bấm) */
.chatbot-reactions-picker-popup::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  background: transparent;
  z-index: -1;
}

/* Hover hiện popup mượt mà và giữ popup không bị mất nhấp nháy */
.chatbot-react-btn-wrap:hover .chatbot-reactions-picker-popup {
  display: flex !important;
}

/* Hiệu ứng trượt nhẹ nổi của popup */
@keyframes slideUpPopup {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Từng hạt biểu tượng cảm xúc trong picker popup */
.picker-emoji-item {
  font-size: 21px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.25);
  user-select: none;
  display: inline-block;
  line-height: 1;
}
.picker-emoji-item:hover {
  transform: scale(1.4) translateY(-4px);
}
.picker-emoji-item:active {
  transform: scale(0.95);
}

/* ==========================================
   📋 COPY TOOLTIPS - ĐA TÙY CHỌN (Text, MD, HTML)
   ========================================== */
.chatbot-copy-picker-popup {
  position: absolute;
  bottom: 28px;
  left: 0;
  width: 175px !important;
  min-width: 175px !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  z-index: 1050;
  display: none;
  flex-direction: column;
  padding: 0 !important;
  animation: slideUpPopup 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
  transform-origin: bottom left;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Cầu nối vô hình chống mất hover cho nút Copy (z-index: -1 tránh nuốt click) */
.chatbot-copy-picker-popup::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  background: transparent;
  z-index: -1;
}

.chatbot-copy-btn-wrap:hover .chatbot-copy-picker-popup {
  display: flex !important;
}

/* Item lựa chọn copy */
.picker-copy-item {
  font-size: 0.75rem;
  font-weight: 500;
  color: #4e342e;
  padding: 6px 14px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.picker-copy-item:hover {
  background-color: #f5ece4;
  color: #3e2723;
}
.picker-copy-item:first-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.picker-copy-item:last-child {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

/* ==========================================
   📥 DOWNLOAD TOOLTIPS - ĐA TÙY CHỌN (Text, PDF, Word, Excel, Markdown)
   ========================================== */
.chatbot-download-picker-popup {
  position: absolute;
  bottom: 28px;
  left: 0;
  width: 195px !important;
  min-width: 195px !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  z-index: 1050;
  display: none;
  flex-direction: column;
  padding: 0 !important;
  animation: slideUpPopup 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
  transform-origin: bottom left;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Cầu nối vô hình chống mất hover cho nút Download (z-index: -1 tránh nuốt click) */
.chatbot-download-picker-popup::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  background: transparent;
  z-index: -1;
}

.chatbot-download-btn-wrap:hover .chatbot-download-picker-popup {
  display: flex !important;
}

/* Item lựa chọn download */
.picker-download-item {
  font-size: 0.75rem;
  font-weight: 500;
  color: #4e342e;
  padding: 6px 14px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.picker-download-item:hover {
  background-color: #f5ece4;
  color: #3e2723;
}
.picker-download-item:first-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.picker-download-item:last-child {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

/* Hạt cảm xúc bay lơ lửng khi bấm (Floating Emoji Particle) */
.chatbot-emoji-particle {
  transition: opacity 1.3s ease-out, transform 1.3s cubic-bezier(0.1, 0.8, 0.3, 1);
  opacity: 1;
  transform: scale(1);
}
.chatbot-emoji-particle.animating {
  opacity: 0;
  transform: translateY(-130px) translateX(var(--travel-x, 30px)) scale(1.4) rotate(var(--target-rotate, 15deg));
}

/* Hiệu ứng badge đếm cảm xúc tích lũy */
.chatbot-reaction-badge-item {
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  color: #495057 !important;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.15s ease-in-out !important;
}
.chatbot-reaction-badge-item:hover {
  background-color: #f5ece4 !important;
  border-color: #d7ccc8 !important;
  transform: scale(1.08) translateY(-1px);
}
.chatbot-reaction-badge-item:active {
  transform: scale(0.95);
}

/* ==========================================================================
   ✨ CUSTOM INSTANT TOOLTIPS & POPUP AUTO-HIDE
   ========================================================================== */
.picker-emoji-item,
.picker-copy-item,
.chatbot-reaction-badge-item {
  position: relative;
}

/* Custom Tooltip tức thì cho các icon Emoji trong Popup */
.picker-emoji-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: rgba(33, 37, 41, 0.92);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out;
  z-index: 10050;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
}

.picker-emoji-item[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* Custom Tooltip tức thì cho Badge cảm xúc */
.chatbot-reaction-badge-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: rgba(33, 37, 41, 0.92);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out;
  z-index: 10050;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  line-height: 1.2;
}

.chatbot-reaction-badge-item[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* Ép ẩn popup ngay lập tức sau khi bấm icon cảm xúc/copy - Độ ưu tiên cao nhất đè bẹp hover */
.chatbot-react-btn-wrap:hover .chatbot-reactions-picker-popup.popup-force-hidden,
.chatbot-copy-btn-wrap:hover .chatbot-copy-picker-popup.popup-force-hidden,
.chatbot-download-btn-wrap:hover .chatbot-download-picker-popup.popup-force-hidden,
.chatbot-react-btn-wrap .chatbot-reactions-picker-popup.popup-force-hidden,
.chatbot-copy-btn-wrap .chatbot-copy-picker-popup.popup-force-hidden,
.chatbot-download-btn-wrap .chatbot-download-picker-popup.popup-force-hidden,
.chatbot-reactions-picker-popup.popup-force-hidden,
.chatbot-copy-picker-popup.popup-force-hidden,
.chatbot-download-picker-popup.popup-force-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   💬 KHUNG HỎI Ý KIẾN PHẢN HỒI KHI DISLIKE / TỨC GIẬN
   ========================================================================== */
.chatbot-feedback-box {
  background: #ffffff;
  border: 1px solid #e0d6ce;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  animation: fadeInFeedback 0.25s ease-out forwards;
}

@keyframes fadeInFeedback {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chatbot-feedback-box textarea.feedback-input-text {
  border: 1px solid #d7ccc8;
  border-radius: 6px;
  font-size: 0.82rem;
  padding: 8px 10px;
  resize: vertical;
  min-height: 55px;
  width: 100%;
  transition: border-color 0.15s ease-in-out;
}

.chatbot-feedback-box textarea.feedback-input-text:focus {
  border-color: #8d6e63;
  outline: none;
  box-shadow: 0 0 0 2px rgba(141, 110, 99, 0.2);
}