/* ===== BASE ===== */
body {
    font-family: 'Google Sans', sans-serif;
    background: #f8f9fa;
    color: #1f1f1f;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* ===== BACKGROUND BLUR LAYER ===== */
.vedu-bg-blur {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(600px at 15% 20%, rgba(255, 221, 150, 0.45), transparent 60%),
        radial-gradient(700px at 85% 30%, rgba(120, 170, 255, 0.45), transparent 60%),
        radial-gradient(500px at 50% 90%, rgba(255, 200, 120, 0.25), transparent 60%);
    filter: blur(80px);
    pointer-events: none;
}

/* ===== LAYOUT COLORS ===== */
.bg-gemini-dark { background: transparent; }

.bg-gemini-sidebar {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(18px);
    border-right: 1px solid rgba(0,0,0,0.06);
}

.bg-gemini-input {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,0.08);
}

/* ===== SIDEBAR ITEMS ===== */
#vedu-new-chat { background: rgba(0,0,0,0.05); color: #333; }
#vedu-new-chat:hover { background: rgba(0,0,0,0.08); }

/* ===== CHAT AREA ===== */
#vedu-chat-container { color: #1f1f1f; }

/* ===== MESSAGES ===== */
.msg-in { animation: msgIn 0.35s ease-out forwards; }
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* USER MESSAGE */
.bg-\[\#2f2f2f\] { background: #e9ecef !important; color: #1f1f1f !important; }

/* AI AVATAR */
.bg-blue-700 { background: linear-gradient(135deg, #4285f4, #8ab4f8); }

/* ===== INPUT ===== */
/* Tìm đến đoạn #vedu-input trong file CSS của bạn và cập nhật */
#vedu-input {
    color: #1f1f1f;
    max-height: 200px;
    overflow-y: auto;
    /* Thêm các dòng dưới đây */
    height: 45px;         /* Chiều cao mặc định ban đầu */
    resize: none;         /* Ngăn người dùng kéo giãn bằng tay làm hỏng giao diện */
    transition: height 0.1s ease; /* Tạo cảm giác co giãn mượt mà */
    display: block;
    line-height: 1.5;
}
#vedu-input::placeholder { color: #888; }

/* ===== SEND BUTTON ===== */
#send-btn { color: #666; transition: transform 0.15s ease, color 0.15s ease; }
#send-btn:hover { color: #4285f4; transform: scale(1.15); }

/* ===== WELCOME EFFECT ===== */
.vedu-welcome-in {
    opacity: 0; filter: blur(16px); transform: translateY(16px);
    animation: veduFadeIn 1.3s ease forwards;
}
@keyframes veduFadeIn { to { opacity: 1; filter: blur(0); transform: translateY(0); } }

/* ===== LOADING ===== */
#vedu-loading { background: #f8f9fa; }
.loading-bar {
    width: 40%;
    background: linear-gradient(90deg, #fbbc04, #4285f4, #34a853);
    animation: loadingMove 1.2s ease-in-out infinite;
}
@keyframes loadingMove {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(150%); }
    100% { transform: translateX(150%); }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }

.chat-row { display: flex; align-items: flex-end; margin: 10px 0; }
.user-row { justify-content: flex-end; }
.ai-row { justify-content: flex-start; }

.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e5e7eb; display: flex; align-items: center; justify-content: center;
    font-size: 16px; margin: 0 8px;
}

.bubble {
    max-width: 60%; padding: 10px 14px; border-radius: 14px;
    font-size: 15px; line-height: 1.4;
}

.user-bubble { background: #2563eb; color: white; border-bottom-right-radius: 4px; }
.ai-bubble { background: #f3f4f6; color: #111; border-bottom-left-radius: 4px; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

#vedu-messages { overflow-y: auto; scroll-behavior: smooth; }

/* ===== SIDEBAR COLLAPSE ===== */
#sidebar { width: 260px; transition: all .25s ease; box-shadow: 4px 0 20px rgba(0,0,0,.15); }
#sidebar.collapsed { width: 70px; }
#sidebar.collapsed span, #sidebar.collapsed p { display: none; }
#sidebar.collapsed #vedu-new-chat { justify-content: center; padding: 12px; }
#sidebar.collapsed #user-status { display: none; }

.extend-btn {
    backdrop-filter: blur(14px);
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.6);
    padding: 8px 18px; border-radius: 999px;
    cursor: pointer; font-weight: 600; font-size: 14px; color: #111;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.7);
}

.ai-note {
    text-align: center; 
    font-size: 11px;       /* Thu nhỏ chữ xíu cho gọn */
    color: rgba(0,0,0,0.45);
    
    /* QUAN TRỌNG: Giảm 2 số này để hạ thanh input xuống */
    margin-top: 4px;       /* Khoảng cách giữa Input và Chữ -> Giảm từ 10 xuống 4 */
    margin-bottom: 2px;    /* Khoảng cách giữa Chữ và Đáy màn hình -> Giảm từ 10 xuống 2 */
    
    font-weight: 500; 
    letter-spacing: 0.2px;
}

.mobile-close-btn { display: none; }

/* ============================================================
   ===== MOBILE OVERRIDES (GIẢI QUYẾT TRIỆT ĐỂ LỖI ĐÈ NHAU) =====
   ============================================================ */
@media (max-width: 768px) {
    /* 1. Ép toàn màn hình thành Flexbox cứng cáp */
    html, body {
        height: 100dvh !important;
        width: 100vw !important;
        overflow: hidden !important; 
    }

    main {
        display: flex !important;
        flex-direction: column !important; /* Chia theo chiều dọc: Header -> Chat -> Input */
        height: 100dvh !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Đảm bảo header không bị ép nhỏ */
    header {
        flex-shrink: 0 !important;
        display: flex;
        align-items: center;
    }
    header img { width: 28px; height: 28px; }
    #user-status { display: none; }

    /* 2. CHAT KHÔNG CÒN BỊ CHE (Bởi vì Input đã được đẩy xuống dưới) */
    #vedu-chat-container {
        flex: 1 1 auto !important; /* Vùng chat tự động chiếm phần không gian trống ở giữa */
        height: auto !important;
        overflow-y: auto !important; /* Bật cuộn mượt mà */
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 20px !important; /* Chỉ cần đệm nhẹ, không cần lót 160px hên xui nữa */
        box-sizing: border-box !important;
    }
    
    .bubble { max-width: 85% !important; }

    /* 3. THANH INPUT: Nằm ngoan ngoãn ở đáy, KHÔNG NỔI LÊN NỮA */
    .input-mobile, .bg-gemini-input {
        position: relative !important; /* <--- ĐIỂM QUAN TRỌNG NHẤT: Bỏ fixed */
        flex-shrink: 0 !important; /* Không bị bóp méo khi màn hình nhỏ */
        width: 100% !important;
        bottom: auto !important;
        left: auto !important;
        padding: 12px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        background: white !important;
        border-top: 1px solid #ddd !important;
        z-index: 100 !important;
        box-sizing: border-box !important;
    }

    /* 4. FIX NÚT GIA HẠN ĐÈ AVATAR */
    .extend-btn {
        position: relative !important; /* Bỏ Absolute, cho nằm theo luồng tự nhiên */
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        margin-right: 10px !important; /* Đẩy Avatar ra xa 10px */
        right: auto !important;
        top: auto !important;
        z-index: 90 !important;
    }
    .extend-btn .text { display: none !important; }

    /* ẨN SIDEBAR MẶC ĐỊNH */
    #sidebar {
        display: none;
        position: fixed; left: 0; top: 0;
        height: 100%; width: 260px;
        z-index: 200; background: white;
        box-shadow: 4px 0 20px rgba(0,0,0,.15);
    }

    #sidebar.show { display: flex !important; }
    .mobile-close-btn { display: block !important; }
    .ai-note { font-size: 11px; opacity: 0.8; padding: 0 20px; line-height: 1.4; }
}

/* Ép cái lớp màng đen bọc ngoài modal phải nổi lên cao nhất, đè bẹp thanh chat */
.bg-black\/40.backdrop-blur-sm {
    z-index: 99999 !important;
}


.model-picker{
  position:relative;
}

.model-menu{
  position:absolute;
  bottom:45px;
  left:0;
  background:white;
  border:1px solid #ddd;
  border-radius:10px;
  display:none;
  min-width:140px;
}

.model-item{
  padding:8px 12px;
  cursor:pointer;
}

.model-item:hover{
  background:#f3f4f6;
}

/* =========================
   🌙 DARK MODE
========================= */

body.dark-mode{
    background:#0f172a;
    color:#e5e7eb;
}

/* blur nền tối hơn */
.dark-mode .vedu-bg-blur{
    background:
        radial-gradient(600px at 15% 20%, rgba(59,130,246,0.15), transparent 60%),
        radial-gradient(700px at 85% 30%, rgba(139,92,246,0.15), transparent 60%),
        radial-gradient(500px at 50% 90%, rgba(30,41,59,0.4), transparent 60%);
}

/* sidebar */
.dark-mode .bg-gemini-sidebar{
    background: rgba(17,24,39,0.85);
    border-right:1px solid rgba(255,255,255,0.08);
    color:white;
}

/* input box */
.dark-mode .bg-gemini-input{
    background: rgba(17,24,39,0.9);
    border:1px solid rgba(255,255,255,0.1);
}

/* chat text */
.dark-mode #vedu-chat-container{
    color:#e5e7eb;
}

/* input text */
.dark-mode #vedu-input{
    color:white;
}
.dark-mode #vedu-input::placeholder{
    color:#9ca3af;
}

/* new chat button */
.dark-mode #vedu-new-chat{
    background: rgba(255,255,255,0.06);
    color:white;
}
.dark-mode #vedu-new-chat:hover{
    background: rgba(255,255,255,0.1);
}

/* bubbles */
.dark-mode .ai-bubble{
    background:#1f2937;
    color:white;
}

.dark-mode .user-bubble{
    background:#2563eb;
    color:white;
}

/* loading */
.dark-mode #vedu-loading{
    background:#020617;
}

/* scrollbar */
.dark-mode ::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.2);
}

/* extend button */
.dark-mode .extend-btn{
    background: rgba(30,41,59,0.6);
    color:white;
    border:1px solid rgba(255,255,255,0.15);
}

/* note */
.dark-mode .ai-note{
    color: rgba(255,255,255,0.5);
}

/* =========================
   🌙 DARK MODE (ĐÃ FIX LỖI)
========================= */

body.dark-mode {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

/* Blur nền tối hơn */
.dark-mode .vedu-bg-blur {
    background:
        radial-gradient(600px at 15% 20%, rgba(59,130,246,0.15), transparent 60%),
        radial-gradient(700px at 85% 30%, rgba(139,92,246,0.15), transparent 60%),
        radial-gradient(500px at 50% 90%, rgba(30,41,59,0.4), transparent 60%);
}

/* Sidebar */
.dark-mode .bg-gemini-sidebar {
    background: rgba(17,24,39,0.85) !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
}

/* Input box */
.dark-mode .bg-gemini-input {
    background: rgba(17,24,39,0.9) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ===== FIX LỖI BONG BÓNG CHAT ===== */
/* Ép buộc bong bóng chat của AI đổi sang màu tối */
.dark-mode .ai-bubble,
.dark-mode .bg-gray-100,
.dark-mode .bg-gray-50 {
    background-color: #1e293b !important; /* Xám đen tối */
    color: #f8fafc !important; /* Chữ trắng */
}

/* Ép buộc bong bóng chat của User (bao gồm class Tailwind custom của bạn) */
.dark-mode .user-bubble,
.dark-mode .bg-\[\#2f2f2f\] {
    background-color: #2563eb !important; /* Xanh dương */
    color: #ffffff !important;
}

/* ===== FIX LỖI POPUP / MODAL CÀI ĐẶT ===== */

/* 1. Đổ màu nền chia 2 cột rõ ràng */
.dark-mode .bg-white {
    background-color: #0f172a !important; /* Nền nội dung bên phải */
    border-color: rgba(255,255,255,0.1) !important;
}

.dark-mode .bg-gray-50, 
.dark-mode .bg-gray-100,
.dark-mode .bg-gray-50\/50 {
    background-color: #1e293b !important; /* Nền cột sidebar bên trái */
}

/* 2. Sửa lỗi tàng hình chữ "Cài đặt" (Ép các class chữ đen thành trắng) */
.dark-mode .text-gray-900,
.dark-mode .text-gray-800,
.dark-mode .text-black,
.dark-mode [class*="text-gray-900"] {
    color: #f8fafc !important; 
}

/* 3. Lấy lại hiệu ứng Hover và Active cho mục "Chung" */
.dark-mode .bg-gray-200,
.dark-mode .hover\:bg-gray-200:hover,
.dark-mode .bg-gray-200\/80 {
    background-color: #334155 !important; /* Xám nhạt hơn nền trái để nổi bật lên */
    color: #ffffff !important;
    transition: all 0.2s ease;
}

/* Sửa lỗi Sidebar nhỏ bên trái trong Modal Cài đặt */
.dark-mode [class*="bg-gray-200"],
.dark-mode [class*="bg-gray-300"] {
    background-color: #1e293b !important;
    color: #e5e7eb !important;
}

/* ===== TEXT CHUNG ===== */
/* LƯU Ý: Đã bỏ thẻ 'div' ra khỏi cụm này vì ép !important cho toàn bộ thẻ div 
   sẽ làm hỏng cấu trúc màu của các nút bấm, modal... */
.dark-mode,
.dark-mode p,
.dark-mode span,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
    color: #e5e7eb;
}

/* Dòng "Xin chào! Bạn có cần giúp đỡ gì không..." / "Hôm nay tôi có thể..." */
.dark-mode .vedu-welcome-in {
    color: #cbd5f1 !important;
}

/* ===== DROPDOWN / MENU ===== */
.dark-mode .model-menu {
    background: #111827 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: white !important;
}

.dark-mode .model-item:hover {
    background: #1f2937 !important;
}

/* ===== INPUT VÀ NÚT BẤM ===== */
.dark-mode #vedu-input {
    color: white !important;
    background: transparent !important;
}

.dark-mode #vedu-input::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #94a3b8 !important;
}

.dark-mode #send-btn {
    color: #cbd5f1 !important;
}

.dark-mode #send-btn:hover {
    color: #60a5fa !important;
}

/* Nút "New Chat" */
.dark-mode #vedu-new-chat {
    background: rgba(255,255,255,0.06) !important;
    color: white !important;
}
.dark-mode #vedu-new-chat:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Nút gia hạn (Kéo dài thời gian...) */
.dark-mode .extend-btn {
    background: rgba(30,41,59,0.6) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

/* Loading Bar & Scrollbar & Note */
.dark-mode #vedu-loading {
    background: #020617 !important;
}
.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2) !important;
}
.dark-mode .ai-note {
    color: rgba(255,255,255,0.5) !important;
}

/* =========================================
   🔧 FIX TRIỆT ĐỂ BONG BÓNG CHAT (DÁN XUỐNG DƯỚI CÙNG)
   ========================================= */

/* 1. Nền bong bóng AI và màu chữ gốc */
.dark-mode .ai-bubble {
    background-color: #1e293b !important; /* Xám đen tối */
    color: #f8fafc !important; /* Chữ trắng */
    border: 1px solid rgba(255,255,255,0.05) !important;
}

/* 2. ÉP BUỘC MỌI THẺ (p, span, div...) BÊN TRONG BONG BÓNG AI ĐỀU PHẢI MÀU TRẮNG */
/* (Đây là dòng quan trọng nhất để chữ không bị tàng hình) */
.dark-mode .ai-bubble *,
.dark-mode .ai-bubble p,
.dark-mode .ai-bubble span {
    color: #f8fafc !important;
}

/* 3. Đổi nền avatar AI và User cho tiệp màu tối */
.dark-mode .avatar {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

/* 4. Đảm bảo bong bóng User cũng hiển thị chuẩn */
.dark-mode .user-bubble,
.dark-mode .bg-\[\#2f2f2f\] {
    background-color: #2563eb !important; /* Xanh dương */
    color: #ffffff !important;
}

.dark-mode .user-bubble * {
    color: #ffffff !important;
}

/* ===== FIX AVATAR USER DARK MODE ===== */
.dark-mode #user-avatar {
    /* Chuyển từ gradient vàng-trắng sang gradient tím-tối */
    background: linear-gradient(135deg, #4c1d95, #1e1b4b) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    color: #a78bfa !important; /* Đổi màu icon người dùng sang tím nhạt */
}

/* Nếu bạn muốn đổi cả màu của icon AI/User trong hàng chat khi ở Dark Mode */
.dark-mode .avatar {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ===== FIX CHỮ LOGO VEDUAI TRONG DARK MODE ===== */
.dark-mode header .text-\[\#222222\], 
.dark-mode header div.font-bold {
    color: #ffffff !important; /* Chuyển sang màu trắng tinh */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Thêm chút ánh sáng nhẹ cho sang */
}

/* Fix lỗi chân trắng ở thanh Input Mobile trong Dark Mode */
.dark-mode .input-mobile {
    background-color: #0f172a !important; /* Đổ màu nền tối cho toàn bộ vùng chân trang */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Viền trên mờ cho tinh tế */
}

/* Đảm bảo vùng chứa thực tế của input cũng đồng màu */
.dark-mode .bg-gemini-input {
    background-color: #1e293b !important; /* Màu box input hơi sáng hơn nền một chút để phân biệt */
}
/* CHẾ ĐỘ SÁNG: Màu nền AI sáng sủa hơn */
.ai-bubble {
    background: #ffffff !important; /* Đổi thành màu trắng tinh */
    color: #1f1f1f !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important; /* Viền mờ nhẹ để nổi bật trên nền sáng */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); /* Đổ bóng nhẹ nhàng */
    backdrop-filter: none !important;
}

/* (Giữ nguyên phần Dark Mode bên dưới để không bị ảnh hưởng) */
.dark-mode .ai-bubble {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Tùy chỉnh dấu nháy chuột khi đang gõ để không bị lệch màu */
.typing-cursor {
    color: currentColor;
    margin-left: 2px;
    font-weight: bold;
}

/* ===== REMOVE INPUT LINE DARK MODE ===== */

.dark-mode .input-mobile,
.dark-mode .bg-gemini-input {
    border-top: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== XỬ LÝ KHI SIDEBAR THU GỌN (PC) ===== */

/* 1. Thiết lập chiều rộng khi thu gọn */
#sidebar.collapsed {
    width: 80px; /* Thu nhỏ lại còn 80px */
    transition: width 0.3s ease;
}

/* 2. Ẩn toàn bộ danh sách chat cũ và tiêu đề 'Gần đây' */
#sidebar.collapsed #vedu-chat-list, 
#sidebar.collapsed p.text-gray-400 { 
    display: none !important;
}

/* 3. Chỉnh lại nút 'Trò chuyện mới' */
/* Ẩn chữ 'Trò chuyện mới', chỉ giữ lại dấu + */
#sidebar.collapsed #vedu-new-chat span {
    display: none !important;
}

/* Căn giữa dấu + */
#sidebar.collapsed #vedu-new-chat {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* 4. Ẩn phần thông tin User ở dưới cùng (nếu muốn) */
#sidebar.collapsed #user-status {
    display: none !important;
}

/* 5. Ẩn nút đóng sidebar mobile (đề phòng lỗi hiển thị trên PC) */
#sidebar.collapsed #closeSidebarMobile {
    display: none;
}

/* =========================================
   FIX DARK MODE: INPUT & BUTTON
   ========================================= */

/* 1. Đổi nền thanh input thành màu tối */
.dark-mode .vedu-input-box {
    background-color: #1e1f20 !important; /* Màu xám đen Google */
    border-color: #444746 !important;
}

/* 2. Đổi màu chữ trong ô nhập liệu thành trắng */
.dark-mode #vedu-input {
    color: #e3e3e3 !important;
}
.dark-mode #vedu-input::placeholder {
    color: #8e918f !important;
}

/* 3. Đổi màu icon Ảnh và Mic sang trắng (để không bị chìm) */
.dark-mode #image-btn img,
.dark-mode .voice-btn svg {
    filter: brightness(0) invert(1);
    stroke: #e3e3e3; /* Cho icon svg */
}
.dark-mode .voice-btn:hover {
    background-color: rgba(255,255,255,0.1);
}

/* 4. Chỉnh nút Gửi (Send Button) */
.dark-mode #send-btn {
    /* Nếu bạn muốn nút gửi màu xanh trong darkmode thì dùng mã này: */
    /* background-color: #1a73e8 !important; */ 
    
    /* Nếu muốn giữ màu hồng nhưng tối hơn chút cho đỡ chói: */
    background-color: #ff69b4 !important; 
    border: 1px solid rgba(255,255,255,0.1);
}

/* Sửa lỗi hover nền trắng của nút mic trong darkmode */
.dark-mode .voice-btn:hover {
    background-color: #333 !important;
}

#send-btn {
    width: 42px;  /* Cố định chiều rộng */
    height: 42px; /* Cố định chiều cao để tạo hình tròn hoàn hảo */
    padding: 0 !important; /* Xóa padding mặc định để căn icon chính xác giữa */
    display: flex;
    align-items: center;
    justify-content: center;
}

#send-btn img {
    width: 20px; /* Chỉnh lại kích thước icon send cho vừa mắt */
    height: 20px;
    /* Nếu icon send bị lệch, bạn có thể dùng transform để nhích nhẹ */
    transform: translateX(1px); 
}

/* Tinh chỉnh cho Dark Mode để không bị mất viền tròn */
.dark-mode #send-btn {
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.2);
}

/* Ẩn thanh cuộn cho ô nhập liệu */
#vedu-input {
    scrollbar-width: none; /* Cho Firefox */
    -ms-overflow-style: none;  /* Cho IE và Edge */
}

#vedu-input::-webkit-scrollbar {
    display: none; /* Cho Chrome, Safari và Opera */
}

/* 1. Container chính */
.vedu-input-box {
    position: relative;
    z-index: 1;
    background-color: #ffffff !important;
    border-radius: 28px;
    transition: all 0.3s ease;
}

.dark-mode .vedu-input-box {
    background-color: #1e2024 !important;
}

/* 2. Lớp Glow (Mặc định ẩn bằng opacity) */
.vedu-input-box::before {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    z-index: -2;
    
    background: linear-gradient(90deg, 
        #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
    background-size: 200% auto;
    border-radius: 30px;
    filter: blur(8px);
    
    /* QUAN TRỌNG: Trạng thái ban đầu mờ tịt */
    opacity: 0; 
    visibility: hidden;
    /* Hiệu ứng chuyển đổi mượt mà khi xuất hiện và biến mất */
    transition: opacity 0.6s ease, visibility 0.6s ease; 
}

/* 3. Khi AI phản hồi: Hiện Glow mượt mà từ từ */
.vedu-input-box.ai-responding::before {
    opacity: 0.6; /* Hiện lên tinh tế */
    visibility: visible;
    animation: glowMove 2.5s linear infinite;
}

/* 4. Lớp chặn màu bên trong (luôn hiện để giữ nền sạch) */
.vedu-input-box::after {
    content: "";
    position: absolute;
    inset: 0; 
    z-index: -1;
    background: inherit;
    border-radius: inherit;
}

@keyframes glowMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Hiệu ứng xuất hiện mượt mà cho tin nhắn AI */
.ai-bubble-fade {
    opacity: 0;
    transform: translateY(10px); /* Trượt nhẹ từ dưới lên */
    animation: typingFade 0.5s ease forwards;
}

@keyframes typingFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hiệu ứng con trỏ nhấp nháy tinh tế */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 15px;
    background-color: #ff69b4;
    margin-left: 4px;
    animation: blink 0.8s infinite;
    vertical-align: middle;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Khi body có class dark-mode, tất cả icon có class auto-icon sẽ tự đảo màu */
.dark-mode .auto-icon {
    filter: invert(1) brightness(2) !important;
}

/* Thêm hiệu ứng chuyển mượt cho icon */
.auto-icon {
    transition: filter 0.3s ease;
}

/* Làm mượt thanh cuộn ngang trên mobile */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

/* Hiệu ứng Scale nhẹ khi di chuột vào */
#vedu-suggestions div:hover {
    transform: translateY(-4px);
}

/* LIGHT MODE */
#vedu-suggestions .edu-icon {
    filter: brightness(0);
    transition: filter 0.3s ease;
}

/* DARK MODE (đúng theo hệ thống của bạn) */
.dark-mode #vedu-suggestions .edu-icon {
    filter: brightness(0) invert(1);
}