/* =========================================
   MYCAM CHATBOT FRONTEND STYLES (FULL UPDATED)
   assets/css/mycam-chat-front.css
   ========================================= */

/* 1. BONG BÓNG CHAT */
#mycam-chatbot-bubble {
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    width: 60px; 
    height: 60px;
    background: #8e44ad; 
    border-radius: 50%; 
    cursor: pointer; 
    z-index: 999999;
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.4); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: transform 0.3s;
}
#mycam-chatbot-bubble:hover { transform: scale(1.1); }
#mycam-chatbot-bubble img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.mycam-pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #8e44ad; animation: pulse-purple 2s infinite; z-index: -1; }
@keyframes pulse-purple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }

/* 2. CỬA SỔ CHAT (WINDOW) */
#mycam-chatbot-window {
    position: fixed; 
    bottom: 90px; 
    right: 20px; 
    width: 360px; 
    height: 520px;          /* Chiều cao cố định */
    max-height: 80vh; 
    background: #fff; 
    border-radius: 15px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: none; 
    flex-direction: column; 
    z-index: 999999; 
    overflow: hidden;       /* Ẩn phần thừa */
    border: 1px solid #ddd; 
    font-family: sans-serif;
}

/* HEADER */
.mycam-chat-header {
    background: linear-gradient(135deg, #8e44ad, #9b59b6); 
    color: #fff; 
    padding: 15px; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    height: 60px;           /* Chiều cao cố định header */
    box-sizing: border-box;
    flex-shrink: 0;
}
.mycam-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #fff; }
.mycam-agent-name { font-weight: bold; font-size: 15px; display: block; }
.mycam-hotline { font-size: 12px; opacity: 0.9; }
.mycam-hotline::before { content:''; display:inline-block; width:6px; height:6px; background:#2ecc71; border-radius:50%; margin-right:5px; }
.mycam-close-chat { margin-left: auto; cursor: pointer; font-size: 20px; opacity: 0.8; }

/* BODY - PHẦN CHỨA TIN NHẮN */
#mycam-chat-body { 
    /* Chiếm toàn bộ chiều cao trừ Header và Input */
    position: absolute;
    top: 60px;              /* Cách đỉnh bằng chiều cao Header */
    bottom: 70px;           /* Cách đáy bằng chiều cao Input Area */
    left: 0; 
    right: 0;
    
    overflow-y: auto; 
    padding: 15px; 
    background: #f4f7f9; 
    scroll-behavior: smooth;
}

/* FORM NHẬP THÔNG TIN (GUEST) */
#mycam-chat-form { 
    position: absolute;
    top: 60px; 
    bottom: 0; 
    width: 100%;
    background: #fff;
    padding: 30px 25px; 
    box-sizing: border-box;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    z-index: 20;
}
#mycam-chat-form p { margin-bottom: 20px; color: #555; text-align: center; }
#mycam-chat-form input { width: 100%; margin-bottom: 12px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }
#mycam-start-chat-btn { width: 100%; background: #8e44ad; color: #fff; padding: 12px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top: 10px; }

/* INPUT AREA - KHUNG NHẬP TIN NHẮN (FIX CỨNG Ở ĐÁY) */
#mycam-chat-input-area { 
    position: absolute;     /* Buộc chặt vào đáy */
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 70px;           /* Chiều cao cố định */
    
    background: #fff; 
    border-top: 1px solid #eee; 
    padding: 0 15px;        /* Padding ngang */
    box-sizing: border-box;
    
    display: none;          /* JS sẽ đổi thành flex */
    align-items: center;    /* Căn giữa dọc */
    gap: 10px;
    z-index: 10;
}

#mycam-chat-input { 
    flex: 1; 
    height: 40px;           /* Chiều cao input */
    border: 1px solid #ddd; 
    background: #f9f9f9;
    padding: 0 15px; 
    border-radius: 20px; 
    outline: none; 
    font-size: 14px;
    color: #333;
}
#mycam-chat-input:focus { background: #fff; border-color: #8e44ad; }

/* NÚT GỬI (FIX ICON) */
#mycam-chat-send { 
    width: 40px; 
    height: 40px; 
    background: #8e44ad; 
    border: none; 
    border-radius: 50%; 
    cursor: pointer; 
    padding: 0;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#mycam-chat-send:hover { background: #763891; }

/* Ép hiển thị Icon máy bay giấy */
#mycam-chat-send .dashicons {
    font-family: "dashicons" !important;
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: block;
    line-height: 1;
    color: #fff;
    margin-left: -2px;      /* Căn giữa mắt nhìn */
    margin-top: 2px;
}
/* Fallback nếu class dashicons không chạy: dùng ::before */
#mycam-chat-send .dashicons::before {
    content: "\f466";       /* Mã icon máy bay giấy */
}

/* 3. TIN NHẮN */
.mycam-msg-row { margin-bottom: 15px; display: flex; }
.mycam-msg-user { justify-content: flex-end; }
.mycam-msg-admin { justify-content: flex-start; }
.mycam-msg-system { justify-content: center; font-size: 12px; color: #999; margin: 10px 0; font-style: italic; width: 100%; text-align: center; }

.mycam-msg-bubble { 
    max-width: 80%; 
    padding: 10px 15px; 
    border-radius: 18px; 
    font-size: 14px; 
    line-height: 1.4; 
    word-wrap: break-word;
}
.mycam-msg-user .mycam-msg-bubble { background: #8e44ad; color: #fff; border-bottom-right-radius: 4px; }
.mycam-msg-admin .mycam-msg-bubble { background: #fff; color: #333; border: 1px solid #eee; border-bottom-left-radius: 4px; }

/* 4. ĐƠN HÀNG & QR */
.mycam-chat-order-card { background: #fff; border: 1px solid #ddd; padding: 15px; border-radius: 8px; font-size: 13px; color: #333; width: 100%; box-sizing: border-box; }
.mycam-btn-confirm-order { background: #27ae60; color: #fff; border: none; padding: 8px; width: 100%; margin-top: 8px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.mycam-chat-qr img { max-width: 100%; display: block; margin: 10px auto; }

/* 5. MOBILE */
@media (max-width: 480px) {
    #mycam-chatbot-window { width: 92%; right: 4%; bottom: 85px; height: 70vh; border-radius: 12px; }
    #mycam-chatbot-bubble { bottom: 15px; right: 15px; }
}

/* --- FIX LỖI KHOẢNG TRỐNG BÀN PHÍM (MOBILE) --- */

/* Khi body có class 'mycam-keyboard-open' (được thêm bởi JS khi gõ phím) */
body.mycam-keyboard-open #mycam-chatbot-window {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;       /* Dính chặt các cạnh */
    
    /* Chiều cao sẽ được JS ghi đè inline style, 
       nhưng ta set auto ở đây để flexbox hoạt động đúng */
    height: auto !important;    
    
    width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 99999999;
}

/* Ẩn bong bóng khi đang chat để đỡ vướng */
body.mycam-keyboard-open #mycam-chatbot-bubble {
    display: none !important;
}

/* Điều chỉnh lại khung chat body */
body.mycam-keyboard-open #mycam-chat-body {
    top: 50px; /* Thu gọn header chút nếu cần */
    bottom: 0; 
    padding-bottom: 70px; /* Chừa chỗ cho input */
    position: absolute;
    width: 100%;
}

/* Input Area dính đáy */
body.mycam-keyboard-open #mycam-chat-input-area {
    position: absolute; /* Absolute theo window cha (đã được JS chỉnh height) */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99999999;
    background: #fff;
}