/* Chatbot Window Container အောက်ခံ */
.mbt-chat-wrapper {
    width: 360px;
    height: 500px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: sans-serif;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
}

/* Chatbot ရဲ့ Header (ခေါင်းစဉ်ပိုင်း) - #ea1d24 နှင့် အဖြူရောင်စာသား */
.mbt-chat-header {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
	align-items: center;
    background: #ea1d24;
    color: #ffffff;
    padding: 15px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Chat Body (စကားပြောခန်းအတွင်းပိုင်း) */
.mbt-chat-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: #fdfdfd;
    display: flex;
    flex-direction: column;
}

/* Bot က တုံ့ပြန်မည့် Message Bubble - အဖြူရောင်အောက်ခံ + စာသားအမည်း */
.bot-msg-bubble {
    background: #ffffff;
    color: #111111;
    padding: 10px 14px;
    border-radius: 14px 14px 14px 0px;
    margin-bottom: 12px;
    max-width: 85%;
    align-self: flex-start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #f0f0f0;
}

/* User က နှိပ်လိုက်သည့် Message Bubble - အမည်းရောင်အောက်ခံ + စာသားအဖြူ */
.user-msg-bubble {
    background: #111111;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 14px 14px 0px 14px;
    margin-bottom: 12px;
    max-width: 85%;
    align-self: flex-end;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ခလုတ်များနှင့် Dropdown များ သိမ်းဆည်းမည့်နေရာ */
.mbt-btn-holder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
	margin-bottom: 10px;
}

/* မေးခွန်းရွေးချယ်ရန် ခလုတ်များ */
.mbt-faq-trigger-btn {
    background: #ffffff;
    border: 1px solid #ea1d24;
    color: #111111;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    font-size: 13.5px;
    font-weight: 500;
}

/* ခလုတ်ပေါ် Mouse တင်လိုက်သည့်အခါ (Hover Effect) */
.mbt-faq-trigger-btn:hover {
    background: #ea1d24;
    color: #ffffff;
}

/* 🌟 Dropdown Box အလှဆင်ခြင်း အပိုင်း */
.mbt-select-wrapper {
    background: #ffffff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ea1d24;
    margin-top: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.mbt-custom-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    color: #333333;
    background: #fafafa;
	height: 60px;
}
.mbt-custom-select:focus {
    border-color: #ea1d24;
    background: #ffffff;
}

/* ပင်မ Menu သို့ ပြန်သွားရန် ခလုတ် */
.mbt-reset-wrapper {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
}
.mbt-back-to-main-btn {
    background: #222222;
    border: none;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s ease;
}
.mbt-back-to-main-btn:hover {
    background: #ea1d24;
}

/* အဖြေထဲတွင် ပါလာမည့် ဖုန်းနံပါတ်လင့်ခ်များ အလှဆင်ခြင်း */
.bot-msg-bubble a {
    color: #ea1d24;
    text-decoration: none;
    font-weight: bold;
}
.bot-msg-bubble a:hover {
    text-decoration: underline;
}

/* စာသားအသစ်များ ပေါ်လာလျှင် သဘာဝကျကျ Animation ဖြစ်စေရန် */
.animate-msg {
    animation: mbtFadeIn 0.3s ease-in-out forwards;
}
@keyframes mbtFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 📍 ပင်မ ကွန်တိန်နာအား ညာဘက်အောက်ခြေတွင် Fixed နေရာချခြင်း */
.mbt-chatbot-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999999;
    font-family: sans-serif;
}

/* 💬 Floating Chat Icon Badge Button ပုံစံ */
.mbt-chat-badge-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ea1d24; /* MBT Corporate Red */
    color: white;
    border: none;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.2s ease;
}
.mbt-chat-badge-btn:hover {
    transform: scale(1.08);
    background: #111111; /* Hover လျှင် Black ပြောင်းမည် */
}

/* 📦 Chat Window အား ပေါ့ပ်အပ်အဖြစ် Position ပြင်ဆင်ခြင်း */
.mbt-chat-wrapper {
    position: absolute;
    bottom: 80px; /* Icon ရဲ့ အပေါ်နားတင် ကွက်တိပွင့်ရန် */
    right: 0;
    width: 350px;
    height: 450px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mbtPopupSlide 0.3s ease-out;
}

/* ❌ Header ထဲက Close Button အသေးလေး */
.mbt-header-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.mbt-header-close-btn:hover {
    opacity: 1;
}

/* ✨ ပွင့်လာလျှင် အောက်ကနေ အပေါ်သို့ ပေါ့ပေါ့ပါးပါး တက်လာမည့် Animation Effect */
@keyframes mbtPopupSlide {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}