/* css/custom-theme.css: Custom theme với tone màu #FBF0E1, #795548, #ebebeb */

/* === COLOR VARIABLES === */
:root {
  --warm-cream: #FBF0E1;
  /* Màu kem ấm - primary background */
  --brown-tone: #5D4037;
  /* Màu nâu đậm - thay thế blue primary */
  --light-gray: #ebebeb;
  /* Màu xám nhạt - secondary background */
  --warm-cream-dark: #F5E6D3;
  /* Màu kem đậm hơn cho hover */
  --brown-light: #795548;
  /* Màu nâu nhạt hơn */
  --brown-dark: #3E2723;
  /* Màu nâu rất đậm */
  --chat-response-bg: #F9F7F4;
  /* Nền sáng cho câu trả lời bot */
}

/* === ROW HEADER === */
#row-header {
  background: var(--warm-cream) !important;
  border-bottom: 2px solid var(--brown-tone) !important;
}

/* === RESIZABLE COLUMNS === */
.resizable-col {
  background: var(--light-gray) !important;
}

/* === CHATBOT COMPONENTS === */
.chatbot-header {
  background: var(--warm-cream) !important;
}

.chatbot-input {
  background: var(--warm-cream) !important;
  border-top: 1px solid var(--brown-tone) !important;
}

.chatbot-history {
  background: #fff !important;
  scroll-behavior: auto !important;
}

/* === CONVERSATION SIDEBAR === */
#sidebar-conv-list .list-group-item:hover {
  background-color: var(--warm-cream) !important;
}

#sidebar-conv-list .list-group-item.active {
  background-color: var(--warm-cream-dark) !important;
  border-left-color: var(--brown-tone) !important;
}

/* === BUTTONS === */
.btn-primary {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-primary:hover {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

.btn-outline-primary {
  color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-outline-primary:hover {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
  color: white !important;
}

/* === CARDS & CONTAINERS === */
.card {
  border: 1px solid var(--brown-tone) !important;
}

.card-header {
  background-color: var(--warm-cream) !important;
  border-bottom: 1px solid var(--brown-tone) !important;
}

/* === DROPDOWNS === */
.dropdown-menu {
  border: 1px solid var(--brown-tone) !important;
}

.dropdown-item {
  color: var(--brown-dark) !important;
}

.dropdown-item:hover {
  background-color: var(--warm-cream) !important;
  color: var(--brown-dark) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brown-tone) !important;
  color: #ffffff !important;
}

/* === BORDERS & DIVIDERS === */
.border-end {
  border-color: var(--brown-tone) !important;
}

.border-top {
  border-color: var(--brown-tone) !important;
}

.border-bottom {
  border-color: var(--brown-tone) !important;
}

/* === CHAT BUBBLES === */
.chat-bubble-user {
  background: var(--brown-tone) !important;
  color: white !important;
}

.chat-bubble-bot {
  background: var(--chat-response-bg) !important;
  border: 1px solid var(--brown-light) !important;
  color: var(--brown-dark) !important;
}

/* === FORM CONTROLS === */
.form-control:focus {
  border-color: var(--brown-tone) !important;
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.chatbot-textarea:focus {
  border-color: var(--brown-tone) !important;
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

/* === WELCOME SCREEN === */
.chatbot-related-question {
  border: 1px solid var(--brown-tone) !important;
  color: var(--brown-tone) !important;
}

.chatbot-related-question:hover {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
  color: white !important;
}

/* === CONVERSATION ITEMS === */
.conversation-item:hover {
  background-color: var(--warm-cream) !important;
}

.conversation-item.active {
  background-color: var(--warm-cream-dark) !important;
  border-left: 4px solid var(--brown-tone) !important;
}

/* === LINKS === */
a {
  color: var(--brown-tone) !important;
}

a:hover {
  color: var(--brown-dark) !important;
}

/* === TEXT COLORS === */
.text-primary {
  color: var(--brown-tone) !important;
}

.text-muted {
  color: var(--brown-light) !important;
}

/* === BADGES === */
.badge.bg-primary {
  background-color: var(--brown-tone) !important;
}

/* === SCROLLBARS (Webkit browsers) === */
.chatbot-history::-webkit-scrollbar,
#sidebar-conv-list::-webkit-scrollbar,
.sidebar-content::-webkit-scrollbar,
#col-left .col-content-section::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.chatbot-history::-webkit-scrollbar-track,
#sidebar-conv-list::-webkit-scrollbar-track,
.sidebar-content::-webkit-scrollbar-track,
#col-left .col-content-section::-webkit-scrollbar-track {
  background: transparent;
}

.chatbot-history::-webkit-scrollbar-thumb,
#sidebar-conv-list::-webkit-scrollbar-thumb,
.sidebar-content::-webkit-scrollbar-thumb,
#col-left .col-content-section::-webkit-scrollbar-thumb {
  background-color: var(--brown-tone);
  background-clip: padding-box;
  border: 4px solid transparent; /* Tạo thanh cuộn mảnh mặc định (12px - 8px = 4px) */
  border-radius: 6px;
  cursor: grab !important;
}

/* Kích hoạt to lên khi hover vào CẢ VÙNG CHAT GIỮA để tránh lag khi đang lăn chuột */
.chatbot-history:hover::-webkit-scrollbar-thumb {
  background-color: var(--brown-light);
  border-width: 2px; /* Phình to khi hover vùng chứa (12px - 4px = 8px) */
  cursor: grab !important;
}

.chatbot-history::-webkit-scrollbar-thumb:active {
  background-color: var(--brown-dark);
  border-width: 1px; /* To hết cỡ khi đang kéo (12px - 2px = 10px) */
  cursor: grabbing !important;
}

/* =========================================================================
   ✅ CỘT TRÁI: Thanh cuộn mặc định siêu mảnh (3px) + lùi sang trái, 
   chỉ phình to lên (7px) khi đưa chuột vào cột trái (#col-left:hover) như cột giữa
   ========================================================================= */
#col-left .col-content-section::-webkit-scrollbar,
#col-left .sidebar-content::-webkit-scrollbar,
#col-left #sidebar-conv-list::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

#col-left .col-content-section::-webkit-scrollbar-track,
#col-left .sidebar-content::-webkit-scrollbar-track,
#col-left #sidebar-conv-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Mặc định: Thanh cuộn cột trái nhỏ mảnh (3px) và dịch sang trái 7px để tránh thanh resize */
#col-left .col-content-section::-webkit-scrollbar-thumb,
#col-left .sidebar-content::-webkit-scrollbar-thumb,
#col-left #sidebar-conv-list::-webkit-scrollbar-thumb {
  background-color: var(--brown-tone);
  background-clip: padding-box;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
  border-right: 7px solid transparent; /* 14px - (4px + 7px) = 3px mảnh mai */
  border-radius: 6px;
  cursor: grab !important;
}

/* Khi hover vào CỘT TRÁI hoặc hover trực tiếp vào thanh cuộn: Nở to lên 7px như cột giữa */
#col-left:hover .col-content-section::-webkit-scrollbar-thumb,
#col-left:hover .sidebar-content::-webkit-scrollbar-thumb,
#col-left:hover #sidebar-conv-list::-webkit-scrollbar-thumb,
#col-left .col-content-section::-webkit-scrollbar-thumb:hover,
#col-left .sidebar-content::-webkit-scrollbar-thumb:hover,
#col-left #sidebar-conv-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--brown-light);
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 5px solid transparent; /* 14px - (2px + 5px) = 7px to rõ như cột giữa */
}

/* Khi đang bấm kéo thanh cuộn cột trái */
#col-left .col-content-section::-webkit-scrollbar-thumb:active,
#col-left .sidebar-content::-webkit-scrollbar-thumb:active,
#col-left #sidebar-conv-list::-webkit-scrollbar-thumb:active {
  background-color: var(--brown-dark);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 4px solid transparent; /* 14px - (1px + 4px) = 9px */
  cursor: grabbing !important;
}

/* Ẩn nút close đỏ của cột phải khi mở widget panel (nhường chỗ cho nút close của riêng widget) */
body.sidebar-open #sticky-close-right-col-wrap {
  display: none !important;
}

/* Timeline body scrollbars */
.timeline-body::-webkit-scrollbar {
  width: 6px;
}

.timeline-body::-webkit-scrollbar-track {
  background: var(--light-gray);
}

.timeline-body::-webkit-scrollbar-thumb {
  background: var(--brown-tone);
  border-radius: 3px;
}

.timeline-body::-webkit-scrollbar-thumb:hover {
  background: var(--brown-dark);
}

/* Timeline item interactions */
.timeline-header:hover {
  background-color: rgba(108, 117, 125, 0.08) !important;
  transition: background-color 0.15s ease-in-out;
}

.timeline-item.expanded {
  border: 1px solid #adb5bd !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0;
}

.timeline-item.expanded .timeline-header {
  border-radius: 6px 6px 0 0;
}

.timeline-item.expanded .timeline-body {
  border-radius: 0 0 6px 6px;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 767.98px) {

  .chatbot-header,
  .chatbot-input {
    background: var(--warm-cream) !important;
  }
}

/* === HOVER EFFECTS === */
.nav-link:hover {
  background-color: var(--warm-cream) !important;
  color: var(--brown-tone) !important;
}

.list-group-item:hover {
  background-color: var(--warm-cream) !important;
}

/* === FOCUS STATES === */
.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.btn-info:focus {
  box-shadow: 0 0 0 0.2rem rgba(121, 85, 72, 0.25) !important;
}

/* === ACTIVE STATES === */
.btn-primary:active {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

/* === LOADING STATES === */
.spinner-border.text-primary {
  color: var(--brown-tone) !important;
}

/* === TABLE STYLES === */
.table thead th {
  background-color: var(--warm-cream) !important;
  border-color: var(--brown-tone) !important;
  color: var(--brown-dark) !important;
}

.table tbody tr:hover {
  background-color: var(--warm-cream) !important;
}

.table td,
.table th {
  border-color: var(--brown-tone) !important;
}

/* === ACCORDION & COLLAPSE === */
.accordion-item {
  border: 1px solid var(--brown-tone) !important;
}

.accordion-button {
  background-color: var(--warm-cream) !important;
  color: var(--brown-tone) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--warm-cream-dark) !important;
  color: var(--brown-dark) !important;
}

/* === MODAL === */
.modal-header {
  background-color: var(--warm-cream) !important;
  border-bottom: 1px solid var(--brown-tone) !important;
}

.modal-footer {
  border-top: 1px solid var(--brown-tone) !important;
}

/* === TOAST === */
.toast-header {
  background-color: var(--warm-cream) !important;
  border-bottom: 1px solid var(--brown-tone) !important;
}

/* === PROGRESS BAR === */
.progress-bar {
  background-color: var(--brown-tone) !important;
}

/* === PAGINATION === */
.page-link {
  color: var(--brown-tone) !important;
}

.page-link:hover {
  background-color: var(--warm-cream) !important;
  border-color: var(--brown-tone) !important;
}

.page-item.active .page-link {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

/* === BOOTSTRAP BLUE OVERRIDES === */
/* Override tất cả Bootstrap blue colors thành brown tone */

/* Primary color overrides */
.bg-primary {
  background-color: var(--brown-tone) !important;
}

.text-primary {
  color: var(--brown-tone) !important;
}

.border-primary {
  border-color: var(--brown-tone) !important;
}

/* Button variants */
.btn-primary {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

.btn-outline-primary {
  color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
  color: white !important;
}

/* Info color overrides (thường là blue) */
.bg-info {
  background-color: var(--brown-light) !important;
}

.text-info {
  color: var(--brown-light) !important;
}

.btn-info {
  background-color: var(--brown-light) !important;
  border-color: var(--brown-light) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.btn-outline-info {
  color: var(--brown-light) !important;
  border-color: var(--brown-light) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
  background-color: var(--brown-light) !important;
  border-color: var(--brown-light) !important;
  color: white !important;
}

/* Alert variants */
.alert-primary {
  background-color: rgba(93, 64, 55, 0.1) !important;
  border-color: var(--brown-tone) !important;
  color: var(--brown-dark) !important;
}

.alert-info {
  background-color: rgba(121, 85, 72, 0.1) !important;
  border-color: var(--brown-light) !important;
  color: var(--brown-tone) !important;
}

/* Link colors */
a:not(.btn) {
  color: var(--brown-tone) !important;
}

a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--brown-dark) !important;
}

/* Badge variants */
.badge.bg-primary {
  background-color: var(--brown-tone) !important;
}

.badge.bg-info {
  background-color: var(--brown-light) !important;
}

/* Progress bar */
.progress-bar {
  background-color: var(--brown-tone) !important;
}

.progress-bar.bg-info {
  background-color: var(--brown-light) !important;
}

/* Nav pills/tabs */
.nav-pills .nav-link.active {
  background-color: var(--brown-tone) !important;
}

.nav-tabs .nav-link.active {
  border-color: var(--brown-tone) var(--brown-tone) transparent !important;
  color: var(--brown-tone) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--brown-light) var(--brown-light) transparent !important;
  color: var(--brown-tone) !important;
}

/* List group */
.list-group-item.active {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

/* Dropdown */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brown-tone) !important;
}

/* Form controls */
.form-control:focus,
.form-select:focus {
  border-color: var(--brown-tone) !important;
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

.form-check-input:checked {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25) !important;
}

/* Pagination */
.page-link {
  color: var(--brown-tone) !important;
}

.page-link:hover,
.page-link:focus {
  background-color: var(--warm-cream) !important;
  border-color: var(--brown-tone) !important;
  color: var(--brown-dark) !important;
}

.page-item.active .page-link {
  background-color: var(--brown-tone) !important;
  border-color: var(--brown-tone) !important;
}

/* Spinner */
.spinner-border.text-primary {
  color: var(--brown-tone) !important;
}

.spinner-border.text-info {
  color: var(--brown-light) !important;
}

/* Offcanvas */
.offcanvas-header {
  border-bottom-color: var(--brown-tone) !important;
}

/* Toast */
.toast-header {
  background-color: var(--warm-cream) !important;
  border-bottom: 1px solid var(--brown-tone) !important;
}

/* Carousel */
.carousel-indicators [data-bs-target] {
  background-color: var(--brown-tone) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(0.3) sepia(1) saturate(3) hue-rotate(15deg) brightness(0.8) !important;
}

/* === COMPACT LAYOUT - GIAO DIỆN NHỎ GỌN === */

/* Giảm font size tổng thể */
body {
  font-size: 0.875rem !important;
  /* 14px thay vì 16px */
  line-height: 1.4 !important;
}

/* Header nhỏ gọn */
.chatbot-header {
  padding: 0.5rem 0.75rem !important;
  /* Giảm từ 1rem */
  font-size: 0.8rem !important;
}

.chatbot-header .small {
  font-size: 0.75rem !important;
}

/* Input area nhỏ gọn */
.chatbot-input {
  padding: 0.5rem !important;
  /* Giảm từ 1rem */
}

.chat-input-rounded {
  padding: 0.375rem 0.5rem !important;
  /* Giảm padding */
  gap: 0.5rem !important;
}

.chatbot-textarea {
  font-size: 0.875rem !important;
  padding: 0.375rem 0.5rem !important;
}

.chatbot-input .chatbot-textarea {
  margin-right: -50px !important;
}

/* Buttons nhỏ gọn */
.btn {
  font-size: 0.8rem !important;
  padding: 0.375rem 0.75rem !important;
}

.btn-sm {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
}

.btn-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 0.25rem !important;
}

.btn-send {
  width: 36px !important;
  height: 36px !important;
  padding: 0.375rem !important;
}

/* Chat history nhỏ gọn */
.chatbot-history {
  padding: 0.5rem !important;
  /* Giảm từ 1rem */
}

.chat-msg {
  margin-bottom: 0.75rem !important;
  /* Giảm từ 1rem */
}

/* Chat bubbles nhỏ gọn */
.chat-bubble-user,
.chat-bubble-bot {
  padding: 0.5rem 0.75rem !important;
  /* Giảm từ 0.75rem 1rem */
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}

/* Welcome screen nhỏ gọn */
#chatbot-welcome {
  padding: 1rem !important;
  /* Giảm từ 2rem */
}

#chatbot-welcome h5 {
  font-size: 1rem !important;
  /* Giảm từ 1.25rem */
  margin-bottom: 0.75rem !important;
}

#chatbot-welcome p {
  font-size: 0.875rem !important;
  margin-bottom: 0.75rem !important;
}

#welcome-avatar {
  width: 60px !important;
  /* Giảm từ 80px */
  height: 60px !important;
  margin-bottom: 0.75rem !important;
}

/* Câu hỏi thường gặp nhỏ gọn */
.chatbot-related-question {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0.125rem !important;
}

.chatbot-related-questions .card-header {
  padding: 0.5rem !important;
  font-size: 0.8rem !important;
}

.chatbot-related-questions .card-body {
  padding: 0.5rem !important;
}

/* Sidebar nhỏ gọn */
.conversation-item {
  padding: 0.5rem !important;
  font-size: 0.8rem !important;
}

.conversation-item .conversation-title {
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
}

.conversation-item .conversation-meta {
  font-size: 0.7rem !important;
}

/* Cards nhỏ gọn */
.card {
  font-size: 0.875rem !important;
}

.card-header {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8rem !important;
}

.card-body {
  padding: 0.75rem !important;
}

/* Modals nhỏ gọn */
.modal-header {
  padding: 0.75rem 1rem !important;
}

.modal-body {
  padding: 1rem !important;
  font-size: 0.875rem !important;
}

.modal-footer {
  padding: 0.75rem 1rem !important;
}

.modal-title {
  font-size: 1rem !important;
}

/* Dropdowns nhỏ gọn */
.dropdown-menu {
  font-size: 0.8rem !important;
}

.dropdown-item {
  padding: 0.375rem 0.75rem !important;
}

/* Forms nhỏ gọn */
.form-control {
  font-size: 0.875rem !important;
  padding: 0.375rem 0.5rem !important;
}

.form-select {
  font-size: 0.875rem !important;
  padding: 0.375rem 0.5rem !important;
}

.form-label {
  font-size: 0.8rem !important;
  margin-bottom: 0.25rem !important;
}

/* Tables nhỏ gọn */
.table {
  font-size: 0.8rem !important;
}

.table th,
.table td {
  padding: 0.375rem !important;
}

/* Badges nhỏ gọn */
.badge {
  font-size: 0.7rem !important;
  padding: 0.25rem 0.5rem !important;
}

/* Alerts nhỏ gọn */
.alert {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
}

/* Breadcrumbs nhỏ gọn */
.breadcrumb {
  font-size: 0.8rem !important;
  padding: 0.5rem 0.75rem !important;
}

/* Pagination nhỏ gọn */
.page-link {
  font-size: 0.8rem !important;
  padding: 0.375rem 0.5rem !important;
}

/* Toast nhỏ gọn */
.toast {
  font-size: 0.875rem !important;
}

.toast-body {
  padding: 0.5rem 0.75rem !important;
}

/* Offcanvas nhỏ gọn */
.offcanvas-header {
  padding: 0.75rem 1rem !important;
}

.offcanvas-body {
  padding: 1rem !important;
  font-size: 0.875rem !important;
}

.offcanvas-title {
  font-size: 1rem !important;
}

/* Message actions nhỏ gọn */
.msg-actions .btn {
  padding: 0.125rem 0.25rem !important;
  font-size: 0.7rem !important;
}

.msg-actions .dropdown-menu {
  min-width: 140px !important;
  font-size: 0.75rem !important;
}

/* Thinking display nhỏ gọn */
.thinking-display {
  font-size: 0.8rem !important;
  padding: 0.5rem 0.75rem !important;
}

/* Attachments nhỏ gọn */
.chat-attachments .att-item {
  font-size: 0.75rem !important;
  padding: 0.125rem 0.375rem !important;
}

/* Mobile adjustments cho compact layout */
@media (max-width: 767.98px) {
  body {
    font-size: 0.8rem !important;
  }

  .chatbot-header {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  .chatbot-input {
    padding: 0.375rem !important;
  }

  .chat-input-rounded {
    padding: 0.25rem 0.375rem !important;
  }

  .chatbot-textarea {
    font-size: 0.8rem !important;
  }

  .btn-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .btn-send {
    width: 32px !important;
    height: 32px !important;
  }

  #chatbot-welcome {
    padding: 0.75rem !important;
  }

  #welcome-avatar {
    width: 50px !important;
    height: 50px !important;
  }

  .chatbot-related-question {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.375rem !important;
  }
}

/* === THINKING CURSOR ANIMATION === */
@keyframes blink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.thinking-cursor {
  animation: blink 1s step-end infinite;
}

/* === CONVERSATION STATUS INDICATORS IN SIDEBAR === */
#sidebar-conv-list .list-group-item.conv-processing {
  opacity: 0.6;
}

#sidebar-conv-list .list-group-item.conv-processing:hover {
  opacity: 0.8;
}

#sidebar-conv-list .list-group-item.conv-processing .conv-title-text {
  font-style: italic;
}

.conv-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.conv-status-icon .spinner-border {
  vertical-align: middle;
}

.conv-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === MOBILE ZALO-STYLE NAVIGATION & LAYOUT === */
@media (max-width: 767.98px) {
  /* Bottom Navigation Bar */
  .chatbot-mobile-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background-color: #ffffff !important;
    border-top: 1px solid #eaeaea !important;
    z-index: 1040 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
  }
  
  .chatbot-mobile-nav .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8e8e93 !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    width: 33.33% !important;
    height: 100% !important;
    transition: color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .chatbot-mobile-nav .nav-item i {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }
  
  .chatbot-mobile-nav .nav-item.active {
    color: var(--brown-tone, #5D4037) !important;
  }

  /* === TAB-BASED COLUMN VISIBILITY === */
  /* Tab Lịch sử: có bottom nav (56px) */
  body.tab-history #col-left {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
  }
  body.tab-history #col-middle,
  body.tab-history #col-right {
    display: none !important;
  }
  
  /* Tab Trò chuyện (User đã đăng nhập: bottom nav bị ẩn -> full 100dvh) */
  body.tab-chat #col-middle {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  /* Tab Trò chuyện (Guest: có bottom bar 44px) */
  body.tab-chat.guest-mode #col-middle {
    height: calc(100vh - 44px) !important;
    height: calc(100dvh - 44px) !important;
  }
  body.tab-chat #col-left,
  body.tab-chat #col-right {
    display: none !important;
  }
  
  /* Tab Cá nhân: có bottom nav (56px) */
  body.tab-account #col-right {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    background: #ffffff !important;
  }
  body.tab-account #col-left,
  body.tab-account #col-middle {
    display: none !important;
  }
  
  /* Main Layout & Row content */
  #main-layout {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  
  #row-content {
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  /* Left column (conversation list) styling */
  #col-left #conversation-sidebar {
    display: flex !important;
    height: 100% !important;
    border: none !important;
  }

  /* Right column (account panel) styling */
  #col-right {
    padding: 0 !important;
    border: none !important;
  }
  #col-right .col-content-section {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 30px !important;
  }

  /* Mobile headers (gradient brown bar) */
  .chatbot-mobile-header {
    flex-shrink: 0 !important;
  }
}

/* === CHAT BUBBLE LOADING STATUS BAR PROGRESS ANIMATION === */
.chatbot-loading-status-bar {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background: rgba(93, 64, 55, 0.07) !important;
  border: 1px solid rgba(121, 85, 72, 0.18) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
}

.chatbot-loading-status-bar::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--progress-pct, 15%) !important;
  background: linear-gradient(90deg, rgba(230, 205, 180, 0.5) 0%, rgba(205, 170, 135, 0.75) 80%, rgba(180, 140, 100, 0.9) 100%) !important;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.chatbot-loading-status-bar::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--progress-pct, 15%) !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%) !important;
  background-size: 150px 100% !important;
  animation: botProgressShimmer 2s infinite linear !important;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.chatbot-loading-status-bar .status-text-inner {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  color: var(--brown-dark, #3E2723) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
}

@keyframes botProgressShimmer {
  0% {
    background-position: -150px 0;
  }
  100% {
    background-position: 250px 0;
  }
}