/*
Theme Name: Bahamgap
Theme URI: https://bahamgap.com
Author: Your Name
Description: قالب اختصاصی باهم گپ با قابلیت چت خصوصی و سیستم ورود هوشمند
Version: 1.1
*/

/* ==========================================================================
   تعریف فونت وریبل (متغیر) ایران یکان ایکس (اصلاح شده)
   ========================================================================== */
@font-face {
    font-family: 'IRANYekanXVF';
    src: url('assets/fonts/IRANYekanXVF.woff2') format('woff2-variations'),
         url('assets/fonts/IRANYekanXVF.woff2') format('woff2'),
         url('assets/fonts/IRANYekanXVF.woff') format('woff-variations'),
         url('assets/fonts/IRANYekanXVF.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   اعمال فونت روی تمامی عناصر سایت (متن‌ها و اعداد)
   ========================================================================== */
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input, select, textarea {
    font-family: 'IRANYekanXVF', tahoma, sans-serif !important;
}

/* ==========================================================================
   تنظیمات حرفه‌ای وزن (ضخامت) فونت برای زیبایی سایت
   ========================================================================== */
body, p, span, a, div, li, td, th { font-weight: 400 !important; }
h1 { font-weight: 900 !important; }
h2 { font-weight: 800 !important; }
h3 { font-weight: 700 !important; }
h4 { font-weight: 500 !important; }
h5, h6 { font-weight: 500 !important; }
strong, b { font-weight: 700 !important; }
small { font-weight: 300 !important; }
button, input[type="submit"], input[type="button"] { font-weight: 500 !important; }
input, textarea, select { font-weight: 400 !important; }

/* ========================================================= */
/* مخفی کردن هدر و عناوین پیش‌فرض قالب */
/* ========================================================= */
header#masthead, header.site-header, header#header, .site-branding,
.ast-main-header-wrap, .elementor-location-header, header.entry-header,
h1.entry-title, h1.page-title, .page-header, .ast-archive-description {
    display: none !important;
}

.site-content, .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ========================================================= */
/* استایل اصلی Body (ترکیب پس زمینه قدیمی و تنظیمات جدید) */
/* ========================================================= */
body {
    margin: 0;
    padding: 0;
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: #ffffff !important;
    /* مسیر تصویر پس زمینه به درستی برای پوشه assets اصلاح شد */
    background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.85)), url('assets/images/pattern-n.webp') !important;
    background-size: 1408px 768px !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-position: center top !important;
}

/* ========================================================= */
/* استایل‌های بخش ورود و ثبت‌نام (OTP) */
/* ========================================================= */
.gs-code-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
}

#gs-code {
    flex: 1;
    min-width: 0;
    padding: 12px;
    background: #f9f9fc;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    text-align: center;
    letter-spacing: 8px;
    font-size: 18px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

#gs-code:focus {
    border-color: #8cc63f;
}

#gs-resend-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f4f8;
    border-radius: 8px;
    padding: 0 15px;
    min-width: 100px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    border: 1px solid #eaeaea;
}

#gs-countdown-timer { display: inline; }

#gs-countdown {
    font-weight: bold;
    color: #333;
    direction: ltr;
    display: inline-block;
    margin-right: 3px;
}

#gs-resend-otp {
    display: none;
    background: none;
    border: none;
    color: #007cba;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    font-family: inherit;
    transition: color 0.3s ease;
}

#gs-resend-otp:hover {
    color: #005a87;
    text-decoration: underline;
}

#login-forms-container { min-height: 250px; }
#form-mode-mobile, #form-mode-username { width: 100%; }
#login-forms-container button svg { vertical-align: middle; }
#gs-login-username, #gs-login-password { font-family: 'IRANYekanXVF', sans-serif !important; }


/* =========================================
   Chat Panel Styles (BahamGap)
   ========================================= */
.user-status {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; margin-right: 5px;
}
.status-online { background-color: #00e434; box-shadow: 0 0 5px #00e434;}
.status-offline { background-color: #999999; }

.chat-dashboard-wrapper {
    display: flex; height: 100vh;
    background: #f0f2f5; overflow: hidden;
    direction: rtl; width: 100%;
}

/* Sidebar (User List) */
.chat-sidebar {
    width: 320px; min-width: 320px; flex-shrink: 0;
    background: #ffffff; border-left: 1px solid #e0e0e0;
    display: flex; flex-direction: column; z-index: 10;
    transition: transform 0.3s ease;
}

.chat-sidebar h3 {
    background: #1198d8; color: #ffffff; margin: 0;
    padding: 18px 15px; font-size: 16px;
    font-weight: bold; text-align: center;
}

.user-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
.user-list li { padding: 12px 15px; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background 0.3s ease; }
.user-list li:hover { background: #f4f7fb; }
.user-list img {
    width: 48px; height: 48px; border-radius: 50%;
    margin-left: 12px; object-fit: cover;
    border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Main Chat Area */
.chat-main-area {
    flex: 1; min-width: 0; display: flex;
    flex-direction: column; background: #f3f8ff;
    position: relative; transition: transform 0.3s ease;
}

#chat-header {
    background: #ffffff; padding: 15px 25px;
    border-bottom: 1px solid #e0e0e0; font-weight: bold;
    font-size: 16px; color: #333; display: flex;
    align-items: center; min-height: 27px;
}

.back-to-users { display: none; cursor: pointer; margin-left: 15px; color: #1198d8; }

#chat-messages {
    flex: 1; padding: 25px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
}

/* Input Area */
#chat-input-area {
    background: #f3f8ff; padding: 15px 20px 15px 40px;
    display: flex; flex-direction: column; align-items: stretch;
    box-sizing: border-box; width: 100%;
}

.chat-input-container {
    display: flex; width: 100%; align-items: center;
    background: #ffffff; border-radius: 30px; padding: 5px 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); box-sizing: border-box;
}

/* استایل اصلی فیلد (بدون text-align و direction تا ویژگی dir="auto" بتواند کار کند) */
#chat-message-input {
    flex: 1; 
    padding: 12px 15px; 
    border: none; 
    outline: none;
    font-size: 14px; 
    background: transparent; 
    box-sizing: border-box;
}

/* این بخش جدید است: فقط زمانی که فیلد خالی است و متن نگهدارنده را نشان می‌دهد، راست‌چین می‌شود */
#chat-message-input:placeholder-shown {
    direction: rtl;
    text-align: right;
}


.chat-btn {
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #667781; padding: 8px; border-radius: 50%;
    transition: all 0.2s ease;
}
.chat-btn:hover { color: #1198d8; background: #f0f2f5; }
.chat-btn svg { width: 24px; height: 24px; fill: currentColor; }
.btn-send { background: #1198d8; color: #ffffff; margin-right: 10px; }
.btn-send:hover { background: #000000; color: #ffffff; }
.btn-send svg { fill: #ffffff; transform: rotate(180deg); }

/* Flexbox Message Bubbles */
.chat-message-row { display: flex; width: 100%; margin-bottom: 2px; }
.chat-message-row.my-message { justify-content: flex-start; }
.chat-message-row.their-message { justify-content: flex-end; }

.chat-bubble {
    max-width: 75%; border-radius: 12px; position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); word-wrap: break-word;
    font-size: 14px; line-height: 1.5; color: #333;
}
.my-message .chat-bubble { background: #ecffdc; border-top-right-radius: 4px; }
.their-message .chat-bubble { background: #ffffff; border-top-left-radius: 4px; }

.chat-date-divider { text-align: center; margin: 15px 0; width: 100%; display: flex; justify-content: center; }
.chat-date-divider span { background: rgb(17, 152, 216); color: #ffffff; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: bold; }

/* زمان پیام */
.chat-time { font-size: 10px; display: inline-block; }
.text-time { color: #888; float: left; margin-top: 5px; margin-right: 10px; }
.image-time { position: absolute; bottom: 8px; left: 12px; background: rgba(0,0,0,0.5); color: #fff; padding: 2px 6px; border-radius: 10px; z-index: 2; }

/* Chat Image Styles */
.chat-image-wrapper {
    position: relative; max-width: 260px; border-radius: 8px;
    overflow: hidden; cursor: pointer; background-color: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
}
.chat-image-wrapper img { width: 100%; height: auto; display: block; transition: filter 0.3s ease; }
.chat-img-blur { filter: blur(8px); }
.chat-image-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5); color: #fff; width: 40px; height: 40px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
}
.chat-image-wrapper:hover .chat-image-overlay { opacity: 1; }

/* Modal */
#chat-image-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); }
#chat-image-modal img { margin: auto; display: block; max-width: 90%; max-height: 80vh; margin-top: 5vh; border-radius: 10px; box-shadow: 0 5px 25px rgba(0,0,0,0.5); }
.chat-modal-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 35px; font-weight: bold; cursor: pointer; }
.chat-modal-download { display: block; width: 200px; margin: 20px auto 0; padding: 10px; text-align: center; background: #007bff; color: #fff; text-decoration: none; border-radius: 20px; }

.uploading-spinner { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; position: absolute; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .chat-sidebar { 
        width: 100%; 
        min-width: 100%; 
        position: absolute; 
        height: 100%; 
        top: 0; 
        right: 0; 
    }
    .chat-main-area { 
        width: 100%; 
        position: absolute; 
        height: 100%; 
        top: 0; 
        right: -100%; 
        /* اضافه شده برای رفع مشکل روی هم افتادن عناصر */
        visibility: hidden;
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s, visibility 0s 0.3s;
    }
    .back-to-users { 
        display: block; 
    }
    body.chat-active-mobile .chat-sidebar { 
        transform: translateX(100%); 
    }
    body.chat-active-mobile .chat-main-area { 
        transform: translateX(-100%); 
        /* اضافه شده برای نمایش صحیح بعد از ورود به چت */
        visibility: visible;
        opacity: 1;
        transition: transform 0.3s ease, opacity 0.3s, visibility 0s;
    }
}


/* WhatsApp Status Ticks Styles */
.chat-time { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.msg-tick { display: inline-flex; align-items: center; vertical-align: middle; }
.tick-sent, .tick-delivered { color: #999999; }
.tick-read { color: #53bdeb; }
.image-time .tick-sent, .image-time .tick-delivered { color: #e0e0e0; }

/* Advanced Emoji Picker Styles */
.emoji-picker-container {
    position: absolute; bottom: 75px; right: 20px; width: 320px; height: 350px;
    background: #ffffff; border: 1px solid #e0e0e0; border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15); z-index: 1000;
    display: flex; flex-direction: column; direction: rtl; overflow: hidden;
}
.emoji-tabs { display: flex; justify-content: space-around; background: #f7f9fa; border-bottom: 1px solid #e1e8ed; padding: 8px 0; }
.emoji-tab { font-size: 20px; cursor: pointer; padding: 5px 10px; border-radius: 8px; transition: all 0.2s; filter: grayscale(100%); opacity: 0.6; }
.emoji-tab:hover { background: #e1e8ed; }
.emoji-tab.active { filter: grayscale(0%); opacity: 1; background: #e8f0fe; }
.emoji-content { flex: 1; overflow-y: auto; padding: 12px; }
.emoji-content::-webkit-scrollbar { width: 6px; }
.emoji-content::-webkit-scrollbar-track { background: #f1f1f1; }
.emoji-content::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }
.emoji-header { font-size: 13px; color: #657786; margin-bottom: 10px; font-weight: bold; }
.emoji-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.emoji-item {
    font-size: 26px; cursor: pointer; padding: 6px; border-radius: 8px;
    transition: transform 0.15s ease, background 0.2s; user-select: none;
    line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; will-change: transform;
}
.emoji-item:hover { background: #f0f2f5; transform: scale(1.3); z-index: 10; }
.emoji-item:active { transform: scale(0.9); }

@media (max-width: 768px) {
    .emoji-picker-container { width: 90%; right: 5%; left: 5%; bottom: 80px; }
}

.emoji-search-box { padding: 8px 12px; background: #f0f2f5; border-bottom: 1px solid #e1e8ed; }
.emoji-search-box input {
    width: 100%; padding: 8px 15px; border-radius: 20px; border: 1px solid #ccc;
    font-size: 13px; outline: none; transition: all 0.3s ease; box-sizing: border-box;
    font-family: inherit; direction: rtl;
}
.emoji-search-box input:focus { border-color: #1198d8; box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2); }

/* اصلاحات پیشرفته موبایل */
@media (max-width: 768px) {
    body.chat-active-mobile { overflow: hidden !important; touch-action: none; }
    .chat-main-area { position: fixed !important; top: 0 !important; bottom: auto !important; height: var(--app-height, 100vh) !important; width: 100%; z-index: 9999; }
    #chat-header { flex-shrink: 0 !important; position: relative !important; z-index: 10; }
#chat-input-area { flex-shrink: 0 !important; position: relative !important; z-index: 10; padding: 10px 15px !important; background: #f0f2f5; box-sizing: border-box !important; }
    #chat-messages { flex-grow: 1 !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
    .chat-input-container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; }
    .chat-input-container #chat-message-input { flex: 1 1 auto !important; min-width: 0 !important; }
    .chat-input-container .chat-btn, .chat-input-container #btn-send-message { flex-shrink: 0 !important; }
}

/* منوی کلیک راست پیام و پیام کپی */
.bahamgap-context-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); z-index: 9998; display: none; }
.bahamgap-context-menu {
    position: fixed; background: #ffffff; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: none;
    flex-direction: column; z-index: 9999; min-width: 180px;
    overflow: hidden; font-size: 14px; transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0; transform: scale(0.9);
}
.bahamgap-context-menu.active { display: flex; opacity: 1; transform: scale(1); }
.bahamgap-context-menu-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 10px; color: #333; font-weight: 500; }
.bahamgap-context-menu-item:last-child { border-bottom: none; }
.bahamgap-context-menu-item:hover { background: #f5f5f5; }
.bahamgap-context-menu-item.danger { color: #ff3b30; }

.bahamgap-toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7); color: #fff; padding: 8px 16px;
    border-radius: 20px; font-size: 13px; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.bahamgap-toast.show { opacity: 1; }

.chat-bubble-deleted {
    font-style: italic !important; color: #888888 !important; background-color: transparent !important;
    border: 1px dashed #cccccc; box-shadow: none !important; padding: 8px 12px !important;
    user-select: none; cursor: default;
}
.my-message .chat-bubble-deleted { border-color: #a4d4b3; color: #5c8b6b !important; }

/* استایل‌های ریپلای و سنجاق پیام */
#chat-reply-preview { display: flex; align-items: center; justify-content: space-between; background: #e9ecef; border-right: 4px solid #1198d8; padding: 8px 12px; margin: 0 0 10px 0; border-radius: 8px; width: 100%; box-sizing: border-box; }
.reply-preview-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.reply-preview-label { font-size: 11px; color: #0088cc; font-weight: bold; margin-bottom: 2px; }
.reply-preview-text { font-size: 13px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-preview-close { cursor: pointer; font-size: 20px; color: #999; padding: 0 10px; }
.reply-preview-close:hover { color: #ff3b30; }

.chat-reply-block { background: rgba(0, 0, 0, 0.05); border-right: 3px solid #0088cc; padding: 6px 10px; margin-bottom: 6px; border-radius: 4px; font-size: 12px; color: #555; cursor: pointer; transition: background 0.2s; }
.chat-reply-block:hover { background: rgba(0, 0, 0, 0.08); }
.my-message .chat-reply-block { border-right: 3px solid #105e3c; background: rgba(255, 255, 255, 0.4); }
.my-message .chat-reply-block:hover { background: rgba(255, 255, 255, 0.6); }

#chat-pinned-banner { display: flex; align-items: center; background: #ffffff; border-bottom: 1px solid #e0e0e0; padding: 8px 15px; cursor: pointer; z-index: 9; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
#chat-pinned-banner:hover { background: #f9f9f9; }
.pinned-icon { font-size: 16px; margin-left: 12px; }
.pinned-content { display: flex; flex-direction: column; overflow: hidden; }
.pinned-label { font-size: 11px; color: #0088cc; font-weight: bold; margin-bottom: 2px; }
.pinned-text { font-size: 13px; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

@keyframes highlightMsg {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.02); filter: brightness(0.9); }
    100% { transform: scale(1); filter: brightness(1); }
}
.highlight-blink .chat-bubble { animation: highlightMsg 1s ease-in-out; box-shadow: 0 0 12px rgba(0, 136, 204, 0.6) !important; }
/* Floating Button */
.fab-button {
    position: fixed;
    bottom: 30px;
    left: 30px; /* تغییر: right: 30px به left: 30px تبدیل شد */
    width: 60px;
    height: 60px;
    background-color: #1198d8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 999;
    transition: transform 0.3s, background-color 0.3s;
}
.fab-button:hover {
    transform: scale(1.1) rotate(90deg);
    background-color: #000000;
}
/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none; /* مخفی به صورت پیش‌فرض */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

/* Modal Content Animation */
.modal-content {
    background: white;
    padding: 25px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    transform: translateY(20px);
    transition: transform 0.3s ease-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.close-modal {
    cursor: pointer;
    font-size: 28px;
    color: #999;
}

.modal-search-button {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: #1198d8;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.modal-search-button:hover {
    background: #000000;
}

/* افکت اضافه شدن کاربر جدید به لیست سایدبار */
@keyframes slideInLeftBounce {
    0% {
        opacity: 0;
        transform: translateX(50px) scale(0.9);
    }
    70% {
        transform: translateX(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.new-user-added {
    animation: slideInLeftBounce 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    background-color: #f0f8ff !important; /* یک رنگ پس‌زمینه موقت برای جلب توجه */
    border-right: 4px solid #007bff;
    transition: background-color 2s ease;
}

/* کلاس افکت آنلاین برای آواتار */
.online-glow-effect {
    border-color: #00e434 !important;
    /* انیمیشن ۳ ثانیه‌ای که به صورت بی‌نهایت تکرار می‌شود */
    animation: avatarPulse 3s infinite ease-in-out; 
}

/* تعریف انیمیشن پالس / درخشش */
@keyframes avatarPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* استایل حرفه‌ای و مینیمال نشانگر پیام نخوانده (سبک تلگرام/iOS) */
.pro-unread-badge {
    background-color: #1198d8; /* رنگ قرمز/مرجانی استاندارد و حرفه‌ای برای اعلان */
    color: #ffffff;
    border-radius: 20px; /* لبه‌های کاملاً گرد */
    padding: 0 6px;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    font-family: sans-serif;
    font-weight: 600; /* ضخامت ملایم‌تر و شیک‌تر فونت */
    display: inline-block;
    text-align: center;
    line-height: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 147, 255, 0.3); /* سایه بسیار محو و همرنگ با پس‌زمینه */
    
    /* انیمیشن ورود فقط یک‌بار هنگام نمایش اجرا می‌شود */
    animation: badgeSmoothEntry 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    margin-left: 5px;
}

/* انیمیشن لغزش نرم از پایین و محو شدن تدریجی (بدون تکرار) */
@keyframes badgeSmoothEntry {
    0% { transform: translateY(6px) scale(0.8); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ========================================================= */
/* انتقال اسکرول‌بار بخش پیام‌ها به سمت راست */
/* ========================================================= */
#chat-messages {
    direction: ltr !important; /* این خط اسکرول‌بار را به سمت راست می‌برد */
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#chat-messages > * {
    direction: rtl !important; /* این خط باعث می‌شود محتوا و حباب‌های پیام سر جای خود (راست‌چین) باقی بمانند */
}

/* زیباتر کردن ظاهر اسکرول‌بار پیام‌ها */
#chat-messages::-webkit-scrollbar {
    width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

#chat-messages::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 10px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
}

/* ========================================================= */
/* استایل‌های پس‌زمینه شطرنجی محیط چت */
/* ========================================================= */

/* آماده‌سازی محیط اصلی چت برای پس‌زمینه */
.chat-main-area {
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
}

/* اعمال خطوط شطرنجی به پس‌زمینه پیام‌ها */
#chat-messages {
    background-image: 
        linear-gradient(rgba(17, 152, 216, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 152, 216, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: transparent !important;
    position: relative;
    z-index: 2;
}

/* تضمین اینکه هدر و قسمت تایپ پیام روی آیکون‌ها قرار بگیرند */
#chat-header, #chat-input-area {
    position: relative;
    z-index: 10;
    background-color: #e1f2fa73;
}

/* ========================================================= */
/* استایل حباب پیام‌های دریافتی (طرف مقابل) */
/* ========================================================= */
.their-message .chat-bubble {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 14px !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    color: #2d3748 !important;
}

/* ========================================================= */
/* استایل حباب پیام‌های ارسالی (شما) */
/* ========================================================= */
.my-message .chat-bubble {
    background: rgba(17, 152, 216, 0.08) !important;
    border: 1px solid rgba(17, 152, 216, 0.15) !important;
    border-radius: 14px !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    color: #2d3748 !important;
}

/* ========================================================= */
/* تنظیمات آیکون‌های متحرک (موشک، قلب و ...) */
/* ========================================================= */
.chat-bg-icons {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1; /* این عدد باعث می‌شود آیکون‌ها بروند زیر پیام‌ها */
    pointer-events: none;
}

.chat-bg-icons .float-icon {
    position: absolute;
    opacity: 0.12;
    fill: none;
    stroke: #1198d8;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* جایگاه و انیمیشن هر آیکون */
.chat-bg-icons .icon-1 { top: 15%; right: 10%; width: 24px; animation: float-slow 6s infinite ease-in-out; }
.chat-bg-icons .icon-2 { top: 50%; right: 5%; width: 18px; animation: float-slow 8s infinite ease-in-out reverse; }
.chat-bg-icons .icon-3 { bottom: 20%; left: 12%; width: 28px; animation: float-slow 7s infinite ease-in-out; }
.chat-bg-icons .icon-4 { top: 20%; left: 8%; width: 20px; animation: float-slow 5s infinite ease-in-out reverse; }
.chat-bg-icons .icon-5 { top: 65%; right: 80%; width: 22px; animation: float-slow 9s infinite ease-in-out; }

@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(8deg); }
}

/* تنظیمات دسکتاپ (پیش‌فرض) */
#emoji-picker {
    position: absolute;
    bottom: 70px; /* بالای باکس تایپ */
    left: 20px;
    z-index: 1000;
}

/* تنظیمات مخصوص موبایل و تبلت */
@media (max-width: 768px) {
    #chat-input-area {
        display: flex !important;
        flex-direction: column;
    }
    
    #emoji-picker {
        position: static !important; /* خروج از حالت شناور */
        width: 100% !important;
        height: 300px !important; /* ارتفاع تقریبی کیبورد */
        border: none !important;
        border-top: 1px solid #eee !important;
        box-shadow: none !important;
        display: none; /* توسط JS کنترل می‌شود */
    }

    /* وقتی ایموجی باز است، انحنای پایین باکس تایپ را صاف می‌کنیم */
    .emoji-open .chat-input-container {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* استایل دکمه شناور Backspace در پنل ایموجی */
#emoji-backspace-btn {
    position: absolute;
    bottom: 50px; /* قرارگیری بالای تب‌های پایین پنل */
    right: 15px; /* گوشه سمت راست (اگر می‌خواهید سمت چپ باشد این را به left: 15px تغییر دهید) */
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
    border-radius: 50%; /* گرد کردن دکمه */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100; /* قرارگیری روی ایموجی‌ها */
    color: #666;
    transition: all 0.2s ease;
}

#emoji-backspace-btn:active {
    background-color: #f0f0f0;
    transform: scale(0.95);
}

/* برای حالت موبایل */
@media (max-width: 768px) {
    #emoji-backspace-btn {
        bottom: 60px;
        right: 10px;
        width: 48px;
        height: 48px;
    }
}

/* === استایل‌های جدید برای انواع فایل در چت === */

/* --- استایل عمومی ویدیو و صوت --- */
.chat-bubble video,
.chat-bubble audio {
    max-width: 100%;
    border-radius: 8px;
    display: block;
}

.chat-bubble audio {
    width: 100%;
    min-width: 250px;
}

/* --- استایل حباب فایل (شبیه تلگرام) --- */
.chat-file-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.chat-file-wrapper .file-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-color: #4991ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    background-size: cover;
    background-position: center;
}

/* --- آیکن‌های اختصاصی برای هر فرمت --- */
.chat-file-wrapper .file-icon[data-ext="pdf"] { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM9.5 18H7v-5h2.5a1.5 1.5 0 0 1 0 3H8.5v2zm.5-3.5H8.5v-1h1.5a.5.5 0 0 0 0-1H8.5v-1h2a1.5 1.5 0 1 1 0 3zM18 18h-2.5a1.5 1.5 0 0 1-1.5-1.5v-2A1.5 1.5 0 0 1 15.5 13H18v1.5h-2.5v1h2V18zM14 9h- аспектыZ"/></svg>'); }
.chat-file-wrapper .file-icon[data-ext="zip"],
.chat-file-wrapper .file-icon[data-ext="rar"] { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-2 6h-2v2h2v2h-2v2h-2v-2h2v-2h-2v-2h2v-2h-2V8h2v2z"/></svg>'); }
.chat-file-wrapper .file-icon[data-ext="mp3"],
.chat-file-wrapper .file-icon[data-ext="wav"] { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>'); }
.chat-file-wrapper .file-icon[data-ext="mp4"],
.chat-file-wrapper .file-icon[data-ext="mov"] { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/></svg>'); }


.chat-file-wrapper .file-info {
    flex-grow: 1;
    overflow: hidden;
}

.chat-file-wrapper .file-info .file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    direction: ltr;
    text-align: left;
}

.chat-file-wrapper .file-info .file-size {
    font-size: 0.85em;
    color: #6c757d;
}
.my-message .chat-file-wrapper .file-info .file-size {
    color: #e0e0e0;
}

/* --- استایل پیام موقت آپلود --- */
.uploading-spinner-wrapper {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 10px;
    color: #555;
}
.my-message .uploading-spinner-wrapper {
    color: white;
}

/* استایل برای آیکون سه نقطه منوی فایل */
.chat-file-menu-trigger {
    position: absolute;
    top: 4px;
    right: 4px; /* برای پیام‌های طرف مقابل (به سمت راست منتقل شد) */
    left: auto;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    z-index: 10;
}

.my-message .chat-file-menu-trigger {
    right: auto;
    left: 4px; /* برای پیام‌های شما (به سمت چپ منتقل شد) */
}

.chat-file-menu-trigger svg {
    width: 20px;
    height: 20px;
    stroke: #888; /* رنگ آیکون سه نقطه */
}

.chat-file-menu-trigger:hover {
    background-color: rgba(0, 0, 0, 0.08);
}