/* --- متغیرها --- */
:root {
    --vina-primary: #5b4dff;
    --vina-secondary: #00c853;
    --vina-bg: #f5f7fb;
    --vina-white: #ffffff;
    --vina-text: #333;
    --vina-input-bg: #f0f2f5;
    --vina-light-text: #888;
}

/* تنظیمات کلی */
.vinachat-admin-wrapper, #vinachat-box, .vinachat-container {
    font-family: Tahoma, sans-serif;
    direction: rtl;
    box-sizing: border-box;
}
* { box-sizing: border-box; }

/* --- استایل ادمین پنل --- */
.vinachat-container { 
    display: flex; 
    height: 80vh; 
    min-height: 500px;
    border-radius: 12px; 
    background: var(--vina-white); 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
    overflow: hidden; 
    margin-top: 20px; 
    border: 1px solid #e1e4e8; 
    position: relative;
}

/* سایدبار ادمین */
.vinachat-sidebar { 
    width: 300px; 
    border-left: 1px solid #eee; 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0;
}
.sidebar-header { padding: 15px; border-bottom: 1px solid #f0f0f0; background: #f9f9f9; }
.vinachat-sidebar ul { margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.vinachat-sidebar li { padding: 15px; border-bottom: 1px solid #f4f4f4; cursor: pointer; transition: 0.2s; }
.vinachat-sidebar li:hover, .vinachat-sidebar li.active { background: #f0f5ff; border-right: 3px solid var(--vina-primary); }
.vinachat-sidebar li .u-name { font-weight: bold; font-size: 14px; margin-bottom: 5px; color: #333; }
.vinachat-sidebar li .u-meta { font-size: 11px; color: var(--vina-light-text); display: flex; justify-content: space-between; }
.unread-badge { background: #ff4757; color: white; border-radius: 50%; padding: 2px 6px; font-size: 10px; }

/* بخش اصلی چت ادمین */
.vinachat-main { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: var(--vina-bg); 
    min-width: 0; /* جلوگیری از سرریز فلکس */
}
#vinachat-chat-header { 
    padding: 15px; 
    background: #fff; 
    border-bottom: 1px solid #eee; 
    font-weight: bold; 
    color: var(--vina-primary); 
    display: flex;
    align-items: center;
    gap: 10px;
}
/* دکمه بازگشت موبایل (پیش‌فرض مخفی) */
.admin-back-btn {
    display: none;
    cursor: pointer;
    font-size: 20px;
    color: #555;
    padding: 5px;
}

#vinachat-messages-area { 
    flex: 1; 
    padding: 20px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

/* رسپانسیو ادمین (حالت موبایل) */
@media screen and (max-width: 768px) {
    .vinachat-container { height: 85vh; border: none; }
    
    /* حالت پیش‌فرض: لیست نمایش داده شود، چت مخفی */
    .vinachat-sidebar { width: 100%; display: flex; }
    .vinachat-main { display: none; width: 100%; }
    
    /* وقتی کلاس .show-chat اضافه شد: لیست مخفی، چت نمایش */
    .vinachat-container.show-chat .vinachat-sidebar { display: none; }
    .vinachat-container.show-chat .vinachat-main { display: flex; }
    
    /* نمایش دکمه بازگشت */
    .admin-back-btn { display: block; }
}

/* --- استایل مشترک پیام‌ها --- */
.vinachat-msg { max-width: 80%; padding: 10px 15px; border-radius: 12px; font-size: 13px; line-height: 1.5; position: relative; word-wrap: break-word; }
.vinachat-msg.sent { align-self: flex-end; background: var(--vina-primary); color: white; border-bottom-left-radius: 2px; }
.vinachat-msg.received { align-self: flex-start; background: white; color: var(--vina-text); border: 1px solid #eee; border-bottom-right-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* ورودی متن (فیکس پایین) */
.vinachat-input-area, .vinachat-footer { 
    padding: 10px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    display: flex; 
    align-items: center; 
    gap: 8px;
    width: 100%;
    flex-shrink: 0; /* جلوگیری از جمع شدن */
}
.vinachat-input-area input, .vinachat-footer input { 
    flex: 1; 
    padding: 12px; 
    border: none; 
    border-radius: 24px; 
    background: var(--vina-input-bg); 
    color: #333; 
    outline: none; 
    font-size: 14px;
}
.vinachat-input-area button, .vinachat-footer button { 
    background: var(--vina-primary); 
    color: white; 
    border: none; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* --- استایل فرانت‌اند (ویجت سایت) --- */
#vinachat-widget-icon {
    position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--vina-primary), #3a2db5);
    border-radius: 50%; cursor: pointer; z-index: 99999;
    box-shadow: 0 4px 15px rgba(91, 77, 255, 0.4);
    display: flex; justify-content: center; align-items: center;
}
#vinachat-widget-icon svg { width: 30px; height: 30px; fill: white; }

/* باکس چت اصلی کاربر */
#vinachat-box {
    position: fixed; 
    bottom: 90px; right: 20px; 
    width: 360px; 
    height: 550px; /* فال‌بک برای مرورگرهای قدیمی */
    max-height: 80vh;
    background: #fff; 
    box-shadow: 0 5px 30px rgba(0,0,0,0.15);
    border-radius: 16px; 
    z-index: 99999; 
    display: none; 
    flex-direction: column;
    overflow: hidden;
}
#vinachat-box.open { display: flex; }

.vinachat-header {
    background: linear-gradient(135deg, var(--vina-primary), #3a2db5);
    color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
}
.vinachat-body { 
    flex: 1; 
    padding: 15px; 
    overflow-y: auto; 
    background: #e5ddd5; 
    display: flex; 
    flex-direction: column; 
    gap: 8px;
    scroll-behavior: smooth;
}

/* حالت موبایل ویجت سایت */
@media screen and (max-width: 480px) {
    #vinachat-widget-icon { bottom: 100px; right: 20px; }
    
    #vinachat-box {
        bottom: 0 !important; 
        right: 0 !important; 
        width: 100% !important; 
        border-radius: 0;
        /* جادوی حل مشکل کیبورد: */
        height: 100dvh !important; 
        max-height: 100dvh !important;
    }
    
    /* جلوگیری از اسکرول بادی سایت وقتی چت باز است */
    body.vinachat-open { overflow: hidden; }
}

/* تیک‌ها و متا */
.msg-meta { display: flex; justify-content: flex-end; align-items: center; margin-top: 5px; font-size: 10px; opacity: 0.8; gap: 5px; }
.tick.two { color: #4fc3f7; }