/* إصلاح مشكلة ظهور قائمة خيارات المحادثة تحت الشريط الجانبي */

/* تأكيد أن chat-options-menu تظهر فوق الشريط الجانبي */
.chat-options {
    position: relative;
    z-index: 10005 !important;
}

.chat-options-menu {
    position: absolute !important;
    z-index: 10006 !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25) !important;
    min-width: 150px !important;
    transform-origin: top left !important;
}

.chat-options-menu.show {
    z-index: 10006 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* تأكيد أن chat-item مع القائمة المفتوحة يظهر فوق الباقي */
.chat-item:has(.chat-options-menu.show),
.chat-item.menu-open {
    position: relative !important;
    z-index: 10005 !important;
}

/* إصلاح خاص للجوال */
@media (max-width: 768px) {
    .chat-options {
        z-index: 10010 !important;
    }
    
    .chat-options-menu {
        z-index: 10011 !important;
        position: fixed !important;
        transform-origin: top right !important;
    }
    
    .chat-options-menu.show {
        z-index: 10011 !important;
    }
    
    .chat-item:has(.chat-options-menu.show),
    .chat-item.menu-open {
        z-index: 10010 !important;
    }
}

/* إصلاح محدود ودقيق للـ overflow - فقط للعناصر المطلوبة */
.chat-options {
    overflow: visible !important;
}

.chat-options-menu {
    overflow: visible !important;
}

/* إصلاح الـ scroll بدقة - منع الـ scroll الأفقي مع المحافظة على العمودي */
.chat-list {
    overflow-y: auto !important;
    overflow-x: hidden !important; /* منع الـ scroll الأفقي */
}

/* ضمان عدم خروج المحتوى من حدود chat-item */
.chat-item {
    position: relative;
    overflow: visible !important; /* فقط للعناصر التي تحتاج للقوائم */
    white-space: nowrap; /* منع التفاف النص وبالتالي منع الـ scroll الأفقي */
}

/* إصلاح خاص للعنوان لمنع التفاف والـ scroll الأفقي */
.chat-item .chat-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: calc(100% - 40px) !important; /* حجز مساحة لزر الخيارات */
}

/* تأكيد أن user-info يحتفظ بـ z-index الطبيعي */
.user-info {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important; /* منع تداخل المحتوى */
}

/* تأكيد أن العناصر الأخرى في الشريط الجانبي لا تتأثر */
.sidebar-header,
.subscription-info,
.new-chat-btn {
    z-index: 1 !important;
    overflow: hidden !important;
}

/* تحسين الرؤية في الوضع المظلم */
.chat-options-menu {
    background: #ffffff !important;
    border: 1px solid #e1e5e9 !important;
    color: #333333 !important;
}

.chat-options-item {
    color: #333333 !important;
    background: transparent !important;
}

.chat-options-item:hover {
    background-color: #f8f9fa !important;
    color: #333333 !important;
}

.chat-options-item.delete:hover {
    background-color: #ffeaea !important;
    color: #dc3545 !important;
}

/* إصلاح خاص لقائمة تظهر أعلى الزر */
.chat-options-menu.show-above {
    bottom: 100% !important;
    top: auto !important;
    z-index: 10006 !important;
}

.chat-options-menu.show-above.show {
    z-index: 10006 !important;
}

/* حماية من أي CSS خارجي قد يؤثر على القائمة */
.chat-options-menu {
    display: block !important;
    position: absolute !important;
    white-space: nowrap !important;
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
}

.chat-options-menu.show {
    display: block !important;
}

/* تحسين التموضع للقوائم التي قد تخرج من الشاشة */
.chat-options-menu.position-left {
    left: auto !important;
    right: 0 !important;
}

.chat-options-menu.position-top {
    top: auto !important;
    bottom: 100% !important;
    transform: translateY(10px);
}

.chat-options-menu.position-top.show {
    transform: translateY(0);
}

/* =================================== */
/* إصلاحات محسنة ودقيقة للحالات الحرجة */
/* =================================== */

/* إصلاح للقوائم التي تظهر قريباً من الحافة اليسرى */
.chat-options-menu.show.edge-menu {
    position: fixed !important;
    z-index: 10020 !important;
    left: auto !important;
    right: 20px !important;
    max-width: 200px !important;
    transform: translateX(0) !important;
}

/* إصلاح خاص للقوائم التي تتجاوز حدود الـ viewport */
.chat-options-menu.show {
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 40px) !important;
}

/* إصلاح للقوائم في المحادثات السفلية */
.chat-options-menu.bottom-edge {
    position: fixed !important;
    bottom: auto !important;
    top: auto !important;
    z-index: 10020 !important;
}

/* إصلاح خاص للحالات الحرجة - استخدام coordinates مطلقة */
.chat-options-menu.show.force-visible {
    position: fixed !important;
    z-index: 10020 !important;
    background: #ffffff !important;
    border: 2px solid #007bff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    max-width: 250px !important;
    min-width: 150px !important;
    width: auto !important;
    height: auto !important;
}

/* إصلاح محدود لـ z-index - فقط للعناصر المطلوبة */
.chat-options-menu.show,
.chat-options-menu.show-above,
.chat-options-menu.position-left,
.chat-options-menu.position-top {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10020 !important;
}

/* إصلاح خاص لمنع تأثير القوائم على العناصر الأخرى */
.chat-item:not(.menu-open) {
    z-index: 1 !important;
}

.chat-item.menu-open {
    z-index: 10005 !important;
}

/* تحسين خاص لـ mobile devices - أكثر محافظة */
@media (max-width: 768px) {
    /* السماح للسكريبت بالتحكم بالتموضع على الجوال حسب المحادثة التي تم النقر عليها */
    .chat-options-menu.show {
        position: fixed !important;
        z-index: 10020 !important;
        max-width: 90vw !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
        /* لا نفرض left/top هنا لتركها للسكريبت */
    }
    
    .chat-options-menu.show::before {
        content: none !important;
    }
}

/* إصلاح خاص للـ RTL (العربية) لمنع الاختفاء السريع */
[dir="rtl"] .chat-options-menu {
    left: 0 !important;
    right: auto !important;
    transform-origin: top right !important;
}

[dir="rtl"] .chat-options-menu.position-left {
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] .chat-options-menu.show.edge-menu {
    left: 20px !important;
    right: auto !important;
}

/* إصلاح للـ LTR (الفرنسية والإنجليزية) */
[dir="ltr"] .chat-options-menu {
    right: 0 !important;
    left: auto !important;
    transform-origin: top left !important;
}

[dir="ltr"] .chat-options-menu.position-left {
    right: 0 !important;
    left: auto !important;
}

[dir="ltr"] .chat-options-menu.show.edge-menu {
    right: 20px !important;
    left: auto !important;
} 

/* ===== تحسينات النص العريض في رسائل AI - مشابه لـ ChatGPT ===== */

/* إزالة الخلفية من النص العريض - مشابه لـ ChatGPT */
.message.ai .message-content strong,
.message.ai .message-content b {
    font-weight: 700 !important;
    color: inherit !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    transition: none !important;
    display: inline !important;
    line-height: inherit !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.message.ai .message-content strong:hover,
.message.ai .message-content b:hover {
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* إزالة الخلفية من النص العريض في القوائم */
.message.ai .message-content li strong {
    margin: 0 !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}

/* إزالة الخلفية من النص العريض في الاقتباسات */
.message.ai .message-content blockquote strong {
    background: none !important;
    border-left: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* إزالة الخلفية من النص العريض في العناوين */
.message.ai .message-content h1 strong,
.message.ai .message-content h2 strong,
.message.ai .message-content h3 strong,
.message.ai .message-content h4 strong,
.message.ai .message-content h5 strong,
.message.ai .message-content h6 strong {
    background: none !important;
    border-left: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    color: inherit !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* إزالة الأنيميشن من النص العريض أثناء البث الحرفي */
.message.ai.streaming .message-content strong {
    animation: none !important;
}

@keyframes boldPulse {
    0%, 100% {
        background: none !important;
    }
    50% {
        background: none !important;
    }
}

/* إزالة الخلفية من النص العريض في الوضع المظلم */
@media (prefers-color-scheme: dark) {
    .message.ai .message-content strong,
    .message.ai .message-content b {
        background: none !important;
        color: inherit !important;
        border-left: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    
    .message.ai .message-content strong:hover,
    .message.ai .message-content b:hover {
        background: none !important;
        box-shadow: none !important;
    }
}

/* ===== إزالة الهوامش الزائدة بين الأسطر والعناوين ===== */

/* ===== تجاوز تنسيقات marked.js وإزالة التباعد ===== */

/* إزالة الهوامش من جميع عناصر النص في رسائل AI - قواعد قوية */
.message.ai .message-content p,
.message.ai .message-content h1,
.message.ai .message-content h2,
.message.ai .message-content h3,
.message.ai .message-content h4,
.message.ai .message-content h5,
.message.ai .message-content h6,
.message.ai .message-content ul,
.message.ai .message-content ol,
.message.ai .message-content li,
.message.ai .message-content blockquote,
.message.ai .message-content pre,
.message.ai .message-content code,
.message.ai .message-content a,
.message.ai .message-content div,
.message.ai .message-content span {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 0.1 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    font-family: 'Inter', 'Segoe UI', 'Arial', sans-serif !important;
}

/* تجاوز تنسيقات marked.js للعناوين */
.message.ai .message-content h1,
.message.ai .message-content h2,
.message.ai .message-content h3,
.message.ai .message-content h4,
.message.ai .message-content h5,
.message.ai .message-content h6 {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-weight: bold !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* تجاوز تنسيقات marked.js للقوائم */
.message.ai .message-content ul,
.message.ai .message-content ol {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

.message.ai .message-content li {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    display: list-item !important;
}

/* تجاوز تنسيقات marked.js للاقتباسات */
.message.ai .message-content blockquote {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* تجاوز تنسيقات marked.js للكود */
.message.ai .message-content pre,
.message.ai .message-content code {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* تجاوز تنسيقات marked.js للروابط */
.message.ai .message-content a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    text-decoration: underline !important;
}

/* ===== قواعد إضافية لتجاوز تنسيقات marked.js ===== */

/* تجاوز أي تنسيقات إضافية من marked.js */
.message.ai .message-content * {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* استثناء للروابط - الحفاظ على التنسيق الأساسي */
.message.ai .message-content a {
    text-decoration: underline !important;
    color: inherit !important;
}

/* استثناء للعناوين - الحفاظ على التنسيق الأساسي */
.message.ai .message-content h1,
.message.ai .message-content h2,
.message.ai .message-content h3,
.message.ai .message-content h4,
.message.ai .message-content h5,
.message.ai .message-content h6 {
    font-weight: bold !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* تجاوز تنسيقات marked.js للعناصر المضمنة */
.message.ai .message-content strong,
.message.ai .message-content b,
.message.ai .message-content em,
.message.ai .message-content i {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    font-weight: inherit !important;
    font-style: inherit !important;
}

/* إزالة الهوامش من العناوين - قواعد أكثر تحديداً */
.message.ai .message-content h1,
.message.ai .message-content h2,
.message.ai .message-content h3,
.message.ai .message-content h4,
.message.ai .message-content h5,
.message.ai .message-content h6 {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 1.3 !important;
    font-weight: bold !important;
}

/* إزالة الهوامش من العناصر المحيطة بالعناوين */
.message.ai .message-content h1 + *,
.message.ai .message-content h2 + *,
.message.ai .message-content h3 + *,
.message.ai .message-content h4 + *,
.message.ai .message-content h5 + *,
.message.ai .message-content h6 + *,
.message.ai .message-content * + h1,
.message.ai .message-content * + h2,
.message.ai .message-content * + h3,
.message.ai .message-content * + h4,
.message.ai .message-content * + h5,
.message.ai .message-content * + h6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* إزالة الهوامش من القوائم */
.message.ai .message-content ul,
.message.ai .message-content ol {
    margin: 0 !important;
    padding: 0 !important;
}

.message.ai  {
    margin: 0 !important;
    padding: 0 !important;
}
.message-content li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0.4 !important;
}

/* إزالة الهوامش من الاقتباسات */
.message.ai .message-content blockquote {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* إزالة الهوامش من الكود */
.message.ai .message-content pre,
.message.ai .message-content code {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* إزالة الهوامش من الروابط */
.message.ai .message-content a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* ===== قواعد إضافية لتقليل المسافات حول العناوين ===== */

/* تقليل المسافات بين العناوين والنصوص - قواعد شاملة */
.message.ai .message-content h1,
.message.ai .message-content h2,
.message.ai .message-content h3,
.message.ai .message-content h4,
.message.ai .message-content h5,
.message.ai .message-content h6 {
    margin: 0 !important;
    margin-top: 0.1em !important;
    margin-bottom: 0.1em !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-weight: bold !important;
    display: block !important;
}

/* تطبيق نفس القواعد على جميع العناوين بغض النظر عن المحتوى */
.message.ai .message-content h1 *,
.message.ai .message-content h2 *,
.message.ai .message-content h3 *,
.message.ai .message-content h4 *,
.message.ai .message-content h5 *,
.message.ai .message-content h6 * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

/* تقليل المسافات بين الفقرات */
.message.ai .message-content p {
    margin: 0 !important;
    margin-top: 0.1em !important;
    margin-bottom: 0.1em !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    font-family: 'Inter', 'Segoe UI', 'Arial', sans-serif !important;
}

/* تقليل المسافات بين عناصر القائمة */
.message.ai {
    margin: 0 !important;
    margin-top: 0.05em !important;
    margin-bottom: 0.05em !important;
    padding: 0 !important;
}

.message-content li {
    margin: 0 !important;
    margin-top: 0.05em !important;
    margin-bottom: 0.05em !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* ضمان عدم وجود مسافات زائدة حول العناوين */
.message.ai .message-content h1:first-child,
.message.ai .message-content h2:first-child,
.message.ai .message-content h3:first-child,
.message.ai .message-content h4:first-child,
.message.ai .message-content h5:first-child,
.message.ai .message-content h6:first-child {
    margin-top: 0 !important;
}

.message.ai .message-content h1:last-child,
.message.ai .message-content h2:last-child,
.message.ai .message-content h3:last-child,
.message.ai .message-content h4:last-child,
.message.ai .message-content h5:last-child,
.message.ai .message-content h6:last-child {
    margin-bottom: 0 !important;
}

/* ===== قواعد خاصة للعناوين التي تحتوي على strong/bold ===== */

/* تقليل المسافات للعناوين مع strong */
.message.ai .message-content h1 strong,
.message.ai .message-content h2 strong,
.message.ai .message-content h3 strong,
.message.ai .message-content h4 strong,
.message.ai .message-content h5 strong,
.message.ai .message-content h6 strong,
.message.ai .message-content h1 b,
.message.ai .message-content h2 b,
.message.ai .message-content h3 b,
.message.ai .message-content h4 b,
.message.ai .message-content h5 b,
.message.ai .message-content h6 b {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: inherit !important;
    font-weight: bold !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* تقليل المسافات للعناوين نفسها عندما تحتوي على strong */
.message.ai .message-content h1:has(strong),
.message.ai .message-content h2:has(strong),
.message.ai .message-content h3:has(strong),
.message.ai .message-content h4:has(strong),
.message.ai .message-content h5:has(strong),
.message.ai .message-content h6:has(strong),
.message.ai .message-content h1:has(b),
.message.ai .message-content h2:has(b),
.message.ai .message-content h3:has(b),
.message.ai .messae-content h4:has(b),
.message.ai .message-content h5:has(b),
.message.ai .message-content h6:has(b) {
    margin: 0 !important;
    margin-top: 0.1em !important;
    margin-bottom: 0.1em !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-weight: bold !important;
}

/* قواعد بديلة للمتصفحات التي لا تدعم :has() */
.message.ai .message-content h1 strong,
.message.ai .message-content h2 strong,
.message.ai .message-content h3 strong,
.message.ai .message-content h4 strong,
.message.ai .message-content h5 strong,
.message.ai .message-content h6 strong {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* المسافات حول العناوين */
.message.ai .message-content * + h1:has(strong),
.message.ai .message-content * + h2:has(strong),
.message.ai .message-content * + h3:has(strong),
.message.ai .message-content * + h4:has(strong),
.message.ai .message-content * + h5:has(strong),
.message.ai .message-content * + h6:has(strong),
.message.ai .message-content h1:has(strong) + *,
.message.ai .message-content h2:has(strong) + *,
.message.ai .message-content h3:has(strong) + *,
.message.ai .message-content h4:has(strong) + *,
.message.ai .message-content h5:has(strong) + *,
.message.ai .message-content h6:has(strong) + * {
    margin-top: 1em !important;
    margin-bottom: 0 !important;
}