/* --- CÀI ĐẶT FONT VÀ BIẾN MÀU --- */
:root {
    --primary-color: #0d6efd;
    --light-gray: #f0f2f5;
    --border-color: #dee2e6;
    --bot-bg: #e9ecef;
    --user-bg: var(--primary-color);
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--light-gray);
    
    /* THAY ĐỔI 1: SỬ DỤNG DVH (Dynamic Viewport Height) THAY CHO VH */
    /* Điều này giúp ứng dụng chiếm đúng 100% chiều cao nhìn thấy được trên mọi thiết bị, đặc biệt là di động */
    display: flex;
    flex-direction: column;
    height: 100dvh; 
    overflow: hidden; /* Ngăn body bị cuộn */
}

/* --- BỐ CỤC CHÍNH --- */
header, footer {
    flex-shrink: 0; 
}

/* THAY ĐỔI 2: HEADER GỌN GÀNG HƠN */
header .navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* THAY ĐỔI 3: FOOTER GỌN GÀNG HƠN */
footer {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.chat-container {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.chat-box {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem; /* Giảm padding một chút */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- TÙY CHỈNH THANH CUỘN --- */
.chat-box::-webkit-scrollbar { width: 8px; }
.chat-box::-webkit-scrollbar-track { background: transparent; }
.chat-box::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 10px; border: 2px solid var(--light-gray); }
.chat-box::-webkit-scrollbar-thumb:hover { background-color: #aaa; }

/* --- KIỂU DÁNG TIN NHẮN --- */
.message {
    display: flex;
    align-items: flex-end;
    max-width: 75%;
    animation: fadeIn 0.5s ease-in-out;
}
.message-content { padding: 12px 18px; border-radius: 20px; word-wrap: break-word; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.message-content p:last-child { margin-bottom: 0; }
.bot-message { align-self: flex-start; }
.bot-message .message-content { background-color: #ffffff; color: #333; border-top-left-radius: 5px; }
.bot-message .avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.user-message { align-self: flex-end; }
.user-message .message-content { background-color: var(--user-bg); color: white; border-top-right-radius: 5px; }

/* --- KHU VỰC NHẬP LIỆU --- */
.chat-input-area .form-control { border-radius: 2rem 0 0 2rem; padding: 0.6rem 1.1rem; border-right: 0; }
.chat-input-area .form-control:focus { box-shadow: none; border-color: var(--border-color); }
.chat-input-area .input-group .btn { transition: background-color 0.2s ease, color 0.2s ease; }
.chat-input-area .input-group .btn:last-child { border-radius: 0 2rem 2rem 0; }

/* --- CÁC GỢI Ý --- */
.suggestions { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; }
.suggestion-item { padding: 6px 14px; border: 1px solid var(--primary-color); color: var(--primary-color); border-radius: 20px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; }
.suggestion-item:hover { background-color: var(--primary-color); color: #fff; }

/* --- CHỈ BÁO ĐANG GÕ --- */
.typing-indicator { display: flex; align-items: center; gap: 5px; }
.typing-indicator span { width: 8px; height: 8px; background-color: #6c757d; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0s; }

/* --- ANIMATIONS --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 10% { transform: scale(1); } }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

/* --- RESPONSIVE CHO MÀN HÌNH NHỎ --- */
@media (max-width: 768px) {
    .chat-box { padding: 1rem; }
    .message { max-width: 90%; }
    .chat-input-area { padding: 0.75rem; }
}
/* --- TỐI ƯU KHU VỰC NHẬP LIỆU VỚI NÚT MICRO BÊN TRONG --- */

/* MỚI: Định dạng lại khu vực nhập liệu thành flex container */
.chat-input-area {
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 0.75rem; /* Khoảng cách giữa ô input và nút gửi */
}

/* MỚI: Wrapper cho input và nút mic */
.input-wrapper {
    position: relative; /* Tạo không gian định vị cho nút mic */
    flex-grow: 1; /* Cho phép wrapper chiếm hết không gian còn lại */
}

/* THAY ĐỔI: Điều chỉnh lại ô input */
.chat-input-area .form-control {
    border-radius: 2rem !important; /* Luôn bo tròn các góc */
    padding-right: 45px !important; /* Thêm khoảng trống bên phải để chứa nút mic */
    height: 48px; /* Tăng chiều cao một chút cho cân đối */
}

/* MỚI: Tạo kiểu và định vị cho nút micro */
#mic-btn {
    position: absolute; /* Đặt nút mic đè lên trên input */
    top: 50%;
    right: 8px; /* Khoảng cách từ lề phải của ô input */
    transform: translateY(-50%); /* Căn giữa theo chiều dọc */
    z-index: 10;

    /* Tạo kiểu hình tròn */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;

    /* Căn giữa icon */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    /* Màu sắc và hiệu ứng */
    background-color: transparent;
    color: #6c757d;
    transition: background-color 0.2s ease;
}

#mic-btn:hover {
    background-color: #e9ecef; /* Hiệu ứng hover nhẹ nhàng */
}

/* THAY ĐỔI: Nút gửi bây giờ là hình tròn */
#send-btn {
    flex-shrink: 0; /* Ngăn nút bị co lại */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
}

#send-btn i {
    margin: 0; /* Bỏ margin của icon bên trong nút gửi */
}

/* THAY ĐỔI: Cập nhật lại trạng thái "recording" cho nút mic */
#mic-btn.recording {
    color: #dc3545;
    background-color: #f8d7da; /* Thêm nền đỏ nhạt khi đang ghi âm */
    animation: pulse 1.5s infinite;
}