@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'VazirMatn';
    src: url('../fonts/VazirMatn/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
* { box-sizing: border-box; font-family: 'VazirMatn', Tahoma, sans-serif; }
body { margin: 0; background: #f0f2f5; height: 100vh; overflow: hidden; }

/* Layout */
.messenger-container { display: flex; height: 100vh; max-width: 1400px; margin: 0 auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.sidebar { width: 300px; border-left: 1px solid #ddd; display: flex; flex-direction: column; }
.chat-area { flex: 1; display: flex; flex-direction: column; background: #eef2f6; position: relative; }

/* Sidebar */
.sidebar-header { padding: 15px; background: #f5f5f5; border-bottom: 1px solid #ddd; }
.contact-list { overflow-y: auto; flex: 1; }
.contact { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; transition: 0.2s; border-bottom: 1px solid #f0f0f0; }
.contact:hover, .contact.active { background: #e8f0fe; }
.avatar { width: 40px; height: 40px; background: #1a73e8; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-left: 10px; }
.status { font-size: 12px; color: #666; }

/* Chat Area */
.chat-header { padding: 15px; background: #fff; border-bottom: 1px solid #ddd; font-weight: bold; }
.messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.message-bubble { max-width: 70%; padding: 10px 15px; border-radius: 12px; font-size: 14px; line-height: 1.4; position: relative; }
.msg-sent { align-self: flex-end; background: #1a73e8; color: white; border-bottom-left-radius: 0; }
.msg-received { align-self: flex-start; background: #fff; color: #333; border-bottom-right-radius: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.placeholder-text { text-align: center; margin-top: 50px; color: #888; }

/* ... کدهای قبلی ... */

/* Message Actions */
.message-bubble { position: relative; }
.message-bubble:hover .msg-actions { display: flex; }

.msg-actions {
    display: none;
    position: absolute;
    top: -10px;
    left: 10px; /* برای پیام‌های دریافتی */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    padding: 2px;
}

.msg-sent .msg-actions {
    left: auto; 
    right: 10px; /* برای پیام‌های ارسالی */
}

.action-btn {
    cursor: pointer;
    padding: 3px 6px;
    font-size: 12px;
    color: #555;
    transition: 0.2s;
}
.action-btn:hover { color: #1a73e8; background: #f0f0f0; border-radius: 3px; }
.action-btn.delete:hover { color: #d93025; }

.edited-flag {
    font-size: 10px;
    opacity: 0.7;
    margin-right: 5px;
    font-style: italic;
}

/* حالت حذف شده */
.msg-deleted {
    background: #f0f2f5 !important;
    color: #999 !important;
    font-style: italic;
    border: 1px dashed #ccc;
}

/* ... کدهای قبلی ... */

/* استایل کانتینر محتوای پیام برای چیدمان تیک */
.msg-content-wrapper {
    display: flex;
    align-items: flex-end; /* تیک پایین پیام باشد */
    gap: 5px;
    flex-wrap: wrap;
}

.msg-text {
    word-break: break-word; /* شکستن متن طولانی */
}

/* استایل تیک‌ها */
.tick-status {
    display: inline-flex;
    align-items: center;
    height: 14px;
    margin-right: 2px; /* فاصله کم از متن */
}

.tick-icon {
    width: 14px;
    height: 14px;
    fill: #aebac1; /* رنگ طوسی برای یک تیک (خوانده نشده) */
    transition: fill 0.3s ease;
}

/* وقتی پیام من است و بک‌گراند آبی دارد، تیک‌ها باید رنگ خاصی داشته باشند */
.msg-sent .tick-icon {
    fill: #8ab4f8; /* آبی کمرنگ روی زمینه آبی */
}

/* دو تیک خوانده شده */
.tick-read .tick-icon {
    fill: #4fc3f7; /* آبی روشن‌تر برای خوانده شده */
}

/* اصلاح رنگ تیک برای وقتی زمینه پیام آبی تیره است */
.msg-sent .tick-read .tick-icon {
    fill: #fff; /* سفید یا سبز روشن برای خوانده شده در پیام ارسالی */
}




/* Input */
.input-area { padding: 15px; background: #fff; display: flex; align-items: center; border-top: 1px solid #ddd; }
.input-area input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 24px; outline: none; margin-left: 10px; }
.send-btn { background: none; border: none; color: #1a73e8; cursor: pointer; }

/* Auth */
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 350px; text-align: center; }
.auth-card input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; }
.auth-card button { width: 100%; padding: 10px; background: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer; }
.hidden { display: none; }