/* =============================================================================
   AI CHATBOX CSS - FLATSOME INTEGRATED
   Sử dụng các biến CSS của Flatsome để đồng bộ giao diện.
   ========================================================================== */

:root {
    /* Không cần định nghĩa --primary-color và --font-family ở đây nữa,
       vì chúng ta sẽ kế thừa trực tiếp từ theme Flatsome. */
    --chatbox-border-radius: var(--border-radius, 15px); /* Sử dụng border-radius của Flatsome, nếu không có thì dùng 15px */
    --chatbox-shadow: var(--box-shadow-2, 0 5px 20px rgba(0,0,0,0.15)); /* Sử dụng shadow của Flatsome */
}

/* Kế thừa font chữ từ body của Flatsome */
#ai-chatbox #chatbox-input {
    flex-grow: 1; /* Cho phép co giãn để lấp đầy không gian */
    width: 0;     /* BẮT BUỘC ô nhập liệu phải tính toán lại độ rộng */
    border: none;
    padding: 10px 15px;
    border-radius: 99px;
    background-color: #f0f2f5;
    font-size: 1em;
    margin-right: 8px !important;
}

/* Nút bật/tắt Chat */
#chat-toggle {
    position: fixed ;
    bottom: 75px ;
    right: 30px ;
    width: 60px ;
    height: 60px ;
    background-image: url('http://chupanhdanang.com/wp-content/uploads/2024/07/logomini.png');
    background-size: 110% auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--primary-color); /* TỰ ĐỘNG LẤY MÀU CHỦ ĐẠO CỦA FLATSOME */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--box-shadow-1, 0 4px 10px rgba(0,0,0,0.2));
    z-index: 9998;
    transition: transform 0.2s ease-in-out;
}

#chat-toggle:hover {
    transform: scale(1.1);
}

/* Khung Chat chính */
#ai-chatbox {
    position: fixed ;
    bottom: 140px ;
    right: 50px ;
    width: 350px ;
    max-width: calc(100% - 40px);
    height: 500px;
    background-color: #eeebeb;
    border-radius: var(--chatbox-border-radius);
    box-shadow: var(--chatbox-shadow);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    transition: opacity 0.3s, transform 0.3s;
    transform-origin: bottom right;
}

#ai-chatbox.hidden {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

/* Header */
.chatbox-header {
    background-color: var(--primary-color) ; /* TỰ ĐỘNG LẤY MÀU CHỦ ĐẠO */
    color: white ;
    padding: 15px ;
    border-top-left-radius: var(--chatbox-border-radius) ;
    border-top-right-radius: var(--chatbox-border-radius) ;
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
}

.chatbox-info {
    display: flex ;
    flex-direction: column ; 
    flex-grow: 1 ; 
    text-align: left ;
    padding-right: 10px ;
}

.chatbox-title { 
    margin: 0;
    font-size: 1.2em;

    padding-bottom: 5px; 
}
.chatbox-status {
    margin: 0;
    font-size: 0.8em;
    opacity: 0.9;
}
#close-chatbox { background: none; border: none; color: white; font-size: 24px; cursor: pointer; transition: transform 0.3s ease-in-out;}
#close-chatbox:hover {
    transform: scale(1.5);
}

/* Thân Chat */
.chatbox-body {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
}

/* Định dạng tin nhắn */
.bot-message, .user-message {
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 10px;
    max-width: 80%;
    line-height: 1.4;
}
.bot-message p, .user-message p {
    margin: 0;
}

.bot-message {
    background-color: #e9e9eb;
    color: #000;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.user-message {
    background-color: var(--primary-color); /* TỰ ĐỘNG LẤY MÀU CHỦ ĐẠO */
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.is-typing p {
    color: #666;
    animation: typing-blink 1.5s infinite;
}
@keyframes typing-blink {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

/* Footer */
.chatbox-footer { display: flex; align-items: center; padding: 10px; border-top: 1px solid #ddd; }
#chatbox-input { flex-grow: 1; border: none; padding: 10px; border-radius: 18px; background-color: #f0f2f5; font-size: 1em; }
#chatbox-input:focus { outline: none; }

#chatbox-send {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0; /* <-- Đã xóa khoảng đệm thừa */
    transition: transform 0.2s;
    width: 36px;
    height: 36px;
    flex-shrink: 0; /* Ngăn nút bị co lại */
}

#chatbox-send:hover {
    transform: scale(1.1);
}

#chatbox-send svg {
    fill: var(--primary-color); /* TỰ ĐỘNG LẤY MÀU CHỦ ĐẠO */
}

/* =============================================================================
   CSS THÍCH ỨNG CHO GIAO DIỆN ĐIỆN THOẠI
   Sử dụng breakpoint của Flatsome (849px)
   ========================================================================== */
@media screen and (max-width: 849px) {

    #chat-toggle {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }

    #ai-chatbox {
        position: fixed;
        right: 20px;
        bottom: 85px; 
        width: calc(100% - 40px);
        max-width: 400px; 
        height: 70vh;
        max-height: 550px; 
        
        opacity: 1;
        transform: translateY(0) scale(1);
        transform-origin: bottom right; 
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    
    #ai-chatbox.hidden {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
        pointer-events: none;
    }

    #close-chatbox {
        font-size: 28px;
        padding: 5px;
    }
}
/* =============================================================================
   SỬA LỖI TRIỆT ĐỂ CHO CHATBOX TRÊN FLATSOME (Bản Cập Nhật)
   ========================================================================== */


#ai-chatbox .chatbox-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 15px !important; /* Điều chỉnh lại padding chung */
}

#ai-chatbox .chatbox-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-grow: 1 !important;
    /* Giới hạn chiều rộng và ẩn phần thừa để tránh tràn giao diện */
    overflow: hidden;
    margin-right: 10px; /* Tạo khoảng cách với nút close */
}

#ai-chatbox .chatbox-title {
    white-space: nowrap !important; /* Quan trọng: Ngăn không cho xuống dòng */
    overflow: hidden !important; /* Ẩn phần chữ bị dư */
    text-overflow: ellipsis !important; /* Hiển thị "..." nếu quá dài */
    width: 100%; /* Chiếm hết không gian của khối cha */
}

#ai-chatbox #close-chatbox {
    padding: 0 !important; /* Xóa padding thừa */
    margin: 0 !important;  /* Xóa margin thừa */
    flex-shrink: 0;
}

/* =============================================================================
   TINH CHỈNH CUỐI CÙNG CHO FOOTER CHATBOX
   ========================================================================== */

/* Căn giữa tất cả các mục trong footer một cách chính xác */
#ai-chatbox .chatbox-footer {
    display: flex !important;
    align-items: center !important; /* Căn giữa theo chiều dọc */
}

/* Quan trọng: Căn chỉnh nút gửi và icon bên trong */
#ai-chatbox #chatbox-send {
    display: flex !important;           /* Dùng flex để căn chỉnh icon */
    align-items: center !important;     /* Căn giữa icon theo chiều dọc */
    justify-content: center !important; /* Căn giữa icon theo chiều ngang */
    flex-shrink: 0 !important;          /* Không cho nút bị co lại */
    
    margin-left: 5px !important;        /* Tạo khoảng cách với ô input */
}
/* =============================================================================
   KHẮC PHỤC LỖI MARGIN 28PX TỪ THEME FLATSOME
   ========================================================================== */

#ai-chatbox .chatbox-header,
#ai-chatbox .chatbox-footer {
    margin: 0 !important; /* Đặt lại tất cả các giá trị margin về 0 */
}
/* =============================================================================
   FINAL FIX: HEADER TITLE COLOR
   ========================================================================== */

#ai-chatbox .chatbox-header .chatbox-title {
    color: white !important;
}