/* Typing Indicator Styles */
.typing-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-family: inherit;
}

.typing-container strong {
    margin-right: 8px;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #f1f3f5; /* ডটের পেছনের ব্যাকগ্রাউন্ড কালার */
    padding: 6px 12px;
    border-radius: 12px;
    width: fit-content;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background-color: #6c757d; /* ডটের কালার */
    border-radius: 50%;
    animation: typingBounce 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; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

 
  /* ইনপুট বক্সের সাধারণ লেখার রং */
    #user-input {
        color: #000000; /* কালো */
        background-color: #ffffff; /* সাদা */
    }

    /* প্লেসহোল্ডার (Placeholder) এর রং পরিবর্তনের জন্য */
    #user-input::placeholder {
        color: #555555!important; /* গাঢ় ধূসর */
        opacity: 1; /* ফায়ারফক্স বা অন্য ব্রাউজারের জন্য */
    }

    /* ইন্টারনেট এক্সপ্লোরার বা এজ ব্রাউজারের পুরনো ভার্সনের জন্য */
    #user-input:-ms-input-placeholder {
        color: #555555;
    }
    
    #user-input::-ms-input-placeholder {
        color: #555555;
    }

 /* চ্যাট বক্সের ফ্লেক্স লেআউট নতুন */
    #chat-messages {
        display: flex;
        flex-direction: column;
        gap: 15px; /* মেসেজগুলোর মাঝে ফাঁকা */
        padding: 10px;
    }

    /* মেসেজ বাবল ডিজাইন */
    .message-bubble {
        max-width: 80%;
        padding: 10px 15px;
        border-radius: 20px;
        font-size: 15px;
        line-height: 1.4;
        position: relative;
        word-wrap: break-word;
    }

    /* ইউজারের মেসেজ (ডান পাশে, নীল রঙের) */
    .user-msg {
        align-self: flex-end;
        background-color: #24b6f7; /* নীল */
        color: white;
        border-bottom-right-radius: 2px;
        text-align: right;
    }

    /* মেন্টরের মেসেজ (বাম পাশে, ছাই রঙের) */
    .bot-msg {
        align-self: flex-start;
        background-color: #f1f0f0; /* হালকা ছাই */
        color: #333;
        border-bottom-left-radius: 2px;
        text-align: left;
    }

    /* বাটনগুলোর কন্টেইনার */
    .interactive-ui {
        align-self: flex-start;
        margin-left: 5px;
    }

    /* টাইপিং ইন্ডিকেটর এনিমেশন (৩টি ডট) */
    .typing-indicator {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 10px;
        background: #f1f0f0;
        border-radius: 15px;
        border-bottom-left-radius: 2px;
    }
    .typing-indicator span {
        display: block;
        width: 6px;
        height: 6px;
        background-color: #888;
        border-radius: 50%;
        animation: typing 1.4s infinite ease-in-out both;
    }
    .typing-indicator span:nth-child(1) { animation-delay: 0s; }
    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typing {
        0%, 80%, 100% { transform: scale(0); }
        40% { transform: scale(1); }
    }
/* --- চ্যাটবক্সের মূল ডিজাইন (ডেস্কটপ/ল্যাপটপ ডিফল্ট) --- */
#chat-wrapper {
    /* ৬ ইঞ্চি চওড়া (আনুমানিক ৫৮০ পিক্সেল) */
    width: 100%; 
    max-width: 480px; 
    
    /* ১০ ইঞ্চি উচ্চতা (কিন্তু স্ক্রিনের বাইরে যেন না যায় তাই max-height দেওয়া হলো) */
    height: 700px; 
    max-height: 90vh; 
    
    /* মাঝখানে রাখার জন্য (ঐচ্ছিক) */
    margin: 20px auto; 
    
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* বর্ডার রেডিয়াস ঠিক রাখার জন্য */
    border: 1px solid #ddd;
}

/* --- হেডার সেকশন --- */
#chat-header {
    background: #242943;
    padding: 15px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center; /* লেখা মাঝখানে থাকবে */
}

/* ব্যাক বাটন ডিফল্ট অবস্থায় লুকানো থাকবে (ডেস্কটপে লাগবে না) */
#close-fullscreen-btn {
    display: none; 
    background: transparent;
    border: none;
    color: white;
    font-size: 17px;
    cursor: pointer;
    position: absolute; /* বাম পাশে ফিক্সড করার জন্য */
    left: 5px;
}

/* --- মেসেজ এরিয়া --- */
#chat-messages {
    flex: 1; /* বাকি সব জায়গা নিবে */
    padding: 15px;
    overflow-y: auto;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- ইনপুট এরিয়া --- */
#input-area {
    display: flex;
    padding: 10px;
    background: white;
    border-top: 1px solid #ddd;
}

#user-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

#send-btn {
    padding: 1px 25px 10px;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 5px;
    font-weight: bold;
}

/* =========================================
   মোবাইল রেসপনসিভ ও ফুল স্ক্রিন লজিক 
   ========================================= */
@media screen and (max-width: 768px) {
    /* ১. মোবাইলে সাধারণ অবস্থায় চ্যাটবক্স যেমন দেখাবে */
    #chat-wrapper {
        height: 500px;
        margin: 10px auto;
        width: 95%;
    }

    /* ২. যখন ইউজার চ্যাটে ক্লিক করবে (ফুল স্ক্রিন মোড) */
    #chat-wrapper.fullscreen-active {
        position: fixed !important; 
        top: 0 !important;          
        left: 0 !important;         
        right: 0 !important;
        bottom: 0 !important;
        
        width: 100% !important;    /* 100vw এর বদলে 100% দেওয়া হলো */
        height: 100% !important;   /* 100vh এর বদলে 100% দিলে ব্রাউজারে ঢাকা পড়বে না */
        
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        
        z-index: 2147483647 !important; 
        background: white;
        
        /* Flexbox লেআউট নিশ্চিত করা */
        display: flex !important;
        flex-direction: column !important;
    }

    /* ফুল স্ক্রিন মোডে ব্যাক বাটন দেখা যাবে */
    #chat-wrapper.fullscreen-active #close-fullscreen-btn {
        display: block;
    }
    
    /* ৩. ইনপুট এরিয়া (Absolute পজিশন বাদ দেওয়া হয়েছে) */
    #chat-wrapper.fullscreen-active #input-area {
        width: 100%;
        box-sizing: border-box; /* এটি নিশ্চিত করবে যে ইনপুট বক্সটি স্ক্রিনের ডানে-বামে কেটে যাবে না */
        /* Flexbox এর কারণে এটি স্বয়ংক্রিয়ভাবে নিচেই থাকবে */
    }

    /* ৪. মেসেজ এরিয়া */
    #chat-wrapper.fullscreen-active #chat-messages {
        flex: 1; /* বাকি সব জায়গা মেসেজ এরিয়া দখল করবে */
        overflow-y: auto; /* স্ক্রল করার জন্য */
    }
}