/* Cụm Launcher chứa cả bong bóng chữ và icon robot */
#custom-robot-launcher {
position: fixed;
bottom: 70px;
right: 24px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
z-index: 9999999;
animation: robot-wiggle-bounce 2.5s infinite ease-in-out;
transition: transform 0.2s ease;
}

#custom-robot-launcher:hover {
transform: scale(1.05);
}

/* Giao diện bong bóng chữ CHÁT NGAY */
.chat-bubble-prompt {
position: relative;
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: #ffffff;
padding: 10px 18px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
user-select: none;
white-space: nowrap;
}

/* Tạo mũi tên trỏ nhọn sang phải về phía icon robot */
.chat-bubble-prompt::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #4f46e5;
}

/* Vòng tròn chứa Icon Robot */
.robot-avatar-wrap {
width: 62px;
height: 62px;
background: #388ffc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(13, 71, 161, 0.4);
border: 2px solid #ffffff;
flex-shrink: 0;
}

.robot-avatar-wrap img {
width: 38px;
height: 38px;
object-fit: contain;
pointer-events: none;
}

@keyframes robot-wiggle-bounce {
0%, 100% { transform: scale(1) rotate(0deg); }
15% { transform: scale(1.08) rotate(-4deg); }
30% { transform: scale(1.08) rotate(4deg); }
45% { transform: scale(1.04) rotate(-2deg); }
60% { transform: scale(1.04) rotate(2deg); }
75% { transform: scale(1.01) rotate(0deg); }
}

/* Cửa sổ chat box - Mặc định cho Desktop */
#custom-chat-window {
position: fixed;
bottom: 96px;
right: 24px;
width: 390px;
height: 560px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
border: 1px solid #e2e8f0;
display: none;
flex-direction: column;
z-index: 9999999;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* TỐI ƯU RIÊNG CHO MÀN HÌNH DI ĐỘNG (MOBILE RESPONSIVE) */
@media screen and (max-width: 480px) {
#custom-chat-window {
width: 92vw !important;
right: 4vw !important;
left: 4vw !important;
bottom: 80px !important;
height: 75vh !important;
max-height: 520px;
border-radius: 16px;
}

#custom-robot-launcher {
right: 16px;
bottom: 70px;
}
}

#custom-chat-header {
background: linear-gradient(135deg, #0b1f3a 0%, #1a365d 100%);
color: #ffffff;
padding: 16px 20px;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}

#custom-chat-close, #custom-chat-reset {
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
transition: background 0.2s;
}

#custom-chat-close:hover, #custom-chat-reset:hover {
background: rgba(255, 255, 255, 0.4);
}

#custom-chat-messages {
flex: 1;
padding: 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
background: #f8fafc;
}

.message {
max-width: 85%;
padding: 10px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.5;
word-break: break-word;
}

.bot-message {
background: #ffffff;
color: #1e293b;
border: 1px solid #e2e8f0;
align-self: flex-start;
border-bottom-left-radius: 2px;
}
.bot-message p { margin: 0 0 8px 0; }
.bot-message p:last-child { margin-bottom: 0; }
.bot-message ul, .bot-message ol { margin: 0 0 8px 0; padding-left: 20px; }
.bot-message strong { color: #0d47a1; }
.bot-message code { background: #f1f5f9; padding: 2px 4px; border-radius: 4px; font-size: 12px; color: #d97706; }

/* ĐIỀU CHỈNH CỠ CHỮ TIÊU ĐỀ DO MARKED.JS RENDER RA */
.bot-message h1 { font-size: 17px !important; font-weight: 700 !important; color: #0d47a1; margin: 8px 0 4px 0; }
.bot-message h2 { font-size: 15px !important; font-weight: 700 !important; color: #0d47a1; margin: 8px 0 4px 0; }
.bot-message h3 { font-size: 14px !important; font-weight: 600 !important; color: #0d47a1; margin: 6px 0 4px 0; }

.user-message {
background: #0d47a1;
color: #ffffff;
align-self: flex-end;
border-bottom-right-radius: 2px;
}

/* Giao diện Menu Hỏi Nhanh (Dropdown) */
#custom-quick-menu-container {
position: relative;
padding: 8px 12px;
background: #f1f5f9;
border-top: 1px solid #e2e8f0;
}

#quick-menu-toggle-btn {
width: 100%;
background: #ffffff;
border: 1px solid #cbd5e1;
color: #0d47a1;
padding: 8px 12px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.2s;
}
#quick-menu-toggle-btn:hover { background: #0d47a1; color: #ffffff; border-color: #0d47a1; }

#quick-menu-dropdown {
position: absolute;
bottom: 50px;
left: 12px;
right: 12px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
display: none;
flex-direction: column;
z-index: 10000000;
overflow: hidden;
}

.quick-option {
padding: 10px 14px;
font-size: 13px;
color: #334155;
cursor: pointer;
border-bottom: 1px solid #f1f5f9;
transition: background 0.15s;
}
.quick-option:last-child { border-bottom: none; }
.quick-option:hover { background: #f8fafc; color: #0d47a1; font-weight: 500; }

/* Khu vực nhập liệu & Emoji Picker */
#custom-chat-input-area {
padding: 10px 12px;
background: #ffffff;
border-top: 1px solid #e2e8f0;
display: flex;
gap: 8px;
align-items: center;
}

#emoji-toggle-btn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
padding: 0 4px;
transition: transform 0.2s;
}
#emoji-toggle-btn:hover { transform: scale(1.15); }

/* Popup bảng chọn Emoji */
#emoji-picker-popup {
position: absolute;
bottom: 50px;
left: 0;
width: 220px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
padding: 8px;
display: none;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
z-index: 10000000;
text-align: center;
}
#emoji-picker-popup span {
font-size: 20px;
cursor: pointer;
padding: 4px;
border-radius: 6px;
transition: background 0.15s;
}
#emoji-picker-popup span:hover { background: #f1f5f9; }

#custom-chat-input {
flex: 1;
padding: 10px 14px;
border: 1px solid #cbd5e1;
border-radius: 10px;
outline: none;
font-size: 14px;
}
#custom-chat-input:focus { border-color: #0d47a1; }

#custom-chat-send-btn {
background: #0d47a1;
color: #ffffff;
border: none;
padding: 0 16px;
height: 38px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
#custom-chat-send-btn:hover { background: #1565c0; }

/* Hiệu ứng nhấp nháy cho dấu chấm suy nghĩ */
.typing-dots span {
animation: blink 1.4s infinite both;
font-weight: bold;
font-size: 16px;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
0% { opacity: .2; }
20% { opacity: 1; }
100% { opacity: .2; }
}