/* ==========================================================
   🌐 Language support
   - Language switch button (both languages)
   - English (dir="ltr"): mirror the RTL rules from style.css.
     Everything below html[dir="ltr"] does nothing in Arabic.
   ========================================================== */

/* --- Language switch inside the login box --- */
.auth-lang-switch {
    position: absolute;
    top: 12px;
    inset-inline-end: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #8d6e63;
    text-decoration: none;
}
.auth-lang-switch:hover { color: var(--primary-color); }

/* --- Text alignment --- */
html[dir="ltr"] .message-content,
html[dir="ltr"] .dropdown-menu,
html[dir="ltr"] .header-dropdown,
html[dir="ltr"] .sidebar-dropdown { text-align: left; }

html[dir="ltr"] .message-content { font-family: 'Cairo', sans-serif; }

html[dir="ltr"] .new-chat-btn,
html[dir="ltr"] .new-folder-btn,
html[dir="ltr"] .history-item,
html[dir="ltr"] .clear-history-btn,
html[dir="ltr"] .folder-header,
html[dir="ltr"] .history-text,
html[dir="ltr"] .new-chat-folder-btn { text-align: left !important; }

html[dir="ltr"] #profile-modal .modal-content { text-align: left !important; }
html[dir="ltr"] #profile-modal i { margin-left: 0; margin-right: 5px; }

/* --- Lists inside answers --- */
html[dir="ltr"] .message-content ul,
html[dir="ltr"] .message-content ol {
    margin-right: 0 !important;
    margin-left: 25px !important;
    padding-left: 0 !important;
}
html[dir="ltr"] .typing-cursor::after { margin-right: 0; margin-left: 2px; }

/* --- Sidebar chat list --- */
html[dir="ltr"] .history-text { margin-left: 0 !important; margin-right: 10px !important; }
html[dir="ltr"] .history-item.active {
    border-right: none !important;
    border-left: 3px solid #ffb300 !important;
}
html[dir="ltr"] .folder-header .arrow-icon { margin-right: 0 !important; margin-left: auto !important; }
html[dir="ltr"] .folder-content {
    padding-right: 0; border-right: none; margin-right: 0;
    padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, 0.1); margin-left: 5px;
}
html[dir="ltr"] .menu-item:hover { padding-right: 15px; padding-left: 20px; }
html[dir="ltr"] .gold-icon { margin-right: 0; margin-left: auto; }
html[dir="ltr"] .sidebar-actions { margin-right: 0; margin-left: auto; padding-left: 0; padding-right: 10px; }

/* Profile row: the settings button pushes itself away from the name */
html[dir="ltr"] #user-profile-section .logout-btn:first-of-type { margin-right: 5px !important; margin-left: auto !important; }

/* --- Dropdowns open toward the inside of the screen --- */
html[dir="ltr"] .header-dropdown { left: auto; right: 0; }
html[dir="ltr"] .sidebar-dropdown { left: auto; right: 0; }

/* --- Chat details (admin view) --- */
html[dir="ltr"] .chat-msg.user { border-right: none; border-left: 4px solid #2196f3; margin-left: 0; margin-right: 20px; }
html[dir="ltr"] .chat-msg.ai { border-right: 1px solid #ddd; border-left: 4px solid #4caf50; margin-right: 0; margin-left: 20px; }

/* --- Answer loading spinner sits in the far corner --- */
html[dir="ltr"] .message-spinner { left: auto; right: 15px; }

/* --- Desktop: sidebar is on the left, so the typing box and keyboard center in the space to its right --- */
@media (min-width: 769px) {
    html[dir="ltr"] .sidebar { right: auto !important; left: 0 !important; }

    html[dir="ltr"] form,
    html[dir="ltr"] .input-group-form,
    html[dir="ltr"] .input-box-container {
        right: auto !important;
        left: calc(50% + 150px) !important;
        transform: translateX(-50%) !important;
    }

    html[dir="ltr"] .coptic-keyboard {
        right: auto !important;
        left: calc(50% + 150px) !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
    }

    /* Arabic: same centering formula as the typing box (the old auto-margin version drifted on wide screens) */
    html[dir="rtl"] .coptic-keyboard {
        left: auto !important;
        right: calc(50% + 150px) !important;
        margin: 0 !important;
        transform: translateX(50%) !important;
    }
}

/* --- Mobile: sidebar slides in from the left --- */
@media (max-width: 768px) {
    html[dir="ltr"] .sidebar {
        right: auto !important;
        left: 0 !important;
        transform: translateX(-100%) !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5) !important;
    }
    html[dir="ltr"] .sidebar.active { transform: translateX(0) !important; }

    html[dir="ltr"] .close-sidebar-btn { left: auto !important; right: 15px !important; }

    html[dir="ltr"] .menu-container { margin-right: 0; padding-left: 0; margin-left: -10px; padding-right: 10px; }
}

/* --- Print blocker message --- */
@media print {
    html[dir="ltr"] body::before { content: "⚠️ Sorry, printing is only available through the PDF button for Premium and Researcher members."; }
}

/* --- Coptic letters (and other scripts) inside answers and inputs ---
   'Noto Sans Coptic' is loaded in index.html. It comes LAST, so it's only used for
   characters the normal fonts don't have (Arabic/English text looks exactly the same). */
body { font-family: 'Cairo', sans-serif, 'Noto Sans Coptic'; }
.message-content { font-family: 'Noto Kufi Arabic', sans-serif, 'Noto Sans Coptic'; }
html[dir="ltr"] .message-content { font-family: 'Cairo', sans-serif, 'Noto Sans Coptic'; }
textarea, .history-text, #chat-header-title { font-family: 'Cairo', sans-serif, 'Noto Sans Coptic' !important; }

/* --- Coptic / Greek / Hebrew keyboard: language tabs on top, keys below --- */
.coptic-keyboard.active { grid-template-columns: 1fr !important; }
.kbd-tabs { display: flex; gap: 6px; margin-bottom: 6px; direction: ltr; }
.coptic-key.kbd-tab {
    flex: 1; padding: 5px 0 !important; font-size: 1.05rem !important;
    background-color: #efebe9 !important; color: #5d4037 !important; border-color: #d7ccc8 !important;
}
.coptic-key.kbd-tab.active { background-color: #3e2723 !important; color: #ffb300 !important; border-color: #3e2723 !important; }
.kbd-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)); gap: 6px; }
.coptic-keyboard[data-lang="greek"] .coptic-key,
.coptic-keyboard[data-lang="hebrew"] .coptic-key { font-family: 'Cairo', sans-serif, 'Noto Sans Coptic' !important; }
.coptic-keyboard[data-lang="hebrew"] .kbd-keys .coptic-key:not(.control-key) { font-size: 1.45rem !important; }
/* Tabs stay visible while the keys scroll (small screens) */
.kbd-tabs { position: sticky; top: -10px; z-index: 2; background: #f5f5f5; padding: 4px 0 6px; margin-top: -4px; }

/* 🎛️ ميزات مقفولة من لوحة التحكم (صفحة "تحديثات") - الكلاسات بتتحط على <html> من translations.js */
html.no-share .share-option,
html.no-pdf .pdf-btn,
html.no-pdf .pdf-option,
html.no-keyboard #coptic-toggle-btn,
html.no-keyboard #coptic-keyboard,
html.no-rating .rating-buttons,
html.no-registration #auth-switch-text,
html.single-lang .auth-lang-switch,
html.single-lang #profile-language-row,
html.single-lang .lang-link { display: none !important; }

/* 🇪🇹 الأمهري: خط Noto Sans Ethiopic (بيتحمّل من translations.js لما اللغة am) */
html[lang="am"] body,
html[lang="am"] .message-content,
html[lang="am"] textarea,
html[lang="am"] .history-text,
html[lang="am"] #chat-header-title,
html[lang="am"] button,
html[lang="am"] input,
html[lang="am"] select { font-family: 'Noto Sans Ethiopic', 'Cairo', sans-serif, 'Noto Sans Coptic' !important; }
/* 🇨🇳🇯🇵 الصيني (المبسّط zh-Hans) والياباني: خط Noto بتاعهم (بيتحمّل من translations.js للغة دي بس) */
html[lang="zh-Hans"] body, html[lang="zh-Hans"] .message-content, html[lang="zh-Hans"] textarea, html[lang="zh-Hans"] .history-text,
html[lang="zh-Hans"] #chat-header-title, html[lang="zh-Hans"] button, html[lang="zh-Hans"] input,
html[lang="zh-Hans"] select { font-family: 'Cairo', 'Noto Sans SC', sans-serif, 'Noto Sans Coptic' !important; }
html[lang="ja"] body, html[lang="ja"] .message-content, html[lang="ja"] textarea, html[lang="ja"] .history-text,
html[lang="ja"] #chat-header-title, html[lang="ja"] button, html[lang="ja"] input,
html[lang="ja"] select { font-family: 'Cairo', 'Noto Sans JP', sans-serif, 'Noto Sans Coptic' !important; }
/* 🇬🇪🇦🇲 الجورجي والأرميني: خط Noto بتاعهم (بيتحمّل من translations.js للغة دي بس) */
html[lang="ka"] body, html[lang="ka"] .message-content, html[lang="ka"] textarea, html[lang="ka"] .history-text,
html[lang="ka"] #chat-header-title, html[lang="ka"] button, html[lang="ka"] input,
html[lang="ka"] select { font-family: 'Cairo', 'Noto Sans Georgian', sans-serif, 'Noto Sans Coptic' !important; }
html[lang="hy"] body, html[lang="hy"] .message-content, html[lang="hy"] textarea, html[lang="hy"] .history-text,
html[lang="hy"] #chat-header-title, html[lang="hy"] button, html[lang="hy"] input,
html[lang="hy"] select { font-family: 'Cairo', 'Noto Sans Armenian', sans-serif, 'Noto Sans Coptic' !important; }
/* 🇹🇼🇰🇷 الصيني التقليدي (zh-Hant) والكوري: خط Noto بتاعهم (بيتحمّل من translations.js للغة دي بس) */
html[lang="zh-Hant"] body, html[lang="zh-Hant"] .message-content, html[lang="zh-Hant"] textarea, html[lang="zh-Hant"] .history-text,
html[lang="zh-Hant"] #chat-header-title, html[lang="zh-Hant"] button, html[lang="zh-Hant"] input,
html[lang="zh-Hant"] select { font-family: 'Cairo', 'Noto Sans TC', sans-serif, 'Noto Sans Coptic' !important; }
html[lang="ko"] body, html[lang="ko"] .message-content, html[lang="ko"] textarea, html[lang="ko"] .history-text,
html[lang="ko"] #chat-header-title, html[lang="ko"] button, html[lang="ko"] input,
html[lang="ko"] select { font-family: 'Cairo', 'Noto Sans KR', sans-serif, 'Noto Sans Coptic' !important; }
/* الكوري بيتلف عند المسافات بس (مش في نص الكلمة) */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
/* 🇮🇳 الهندي والمالايالامي: خط Noto بتاعهم (بيتحمّل من translations.js للغة دي بس) */
html[lang="hi"] body, html[lang="hi"] .message-content, html[lang="hi"] textarea, html[lang="hi"] .history-text,
html[lang="hi"] #chat-header-title, html[lang="hi"] button, html[lang="hi"] input,
html[lang="hi"] select { font-family: 'Cairo', 'Noto Sans Devanagari', sans-serif, 'Noto Sans Coptic' !important; }
html[lang="ml"] body, html[lang="ml"] .message-content, html[lang="ml"] textarea, html[lang="ml"] .history-text,
html[lang="ml"] #chat-header-title, html[lang="ml"] button, html[lang="ml"] input,
html[lang="ml"] select { font-family: 'Cairo', 'Noto Sans Malayalam', sans-serif, 'Noto Sans Coptic' !important; }
/* 🇪🇷 التيغريني: نفس خط الأمهري (الحروف الجعزية) */
html[lang="ti"] body, html[lang="ti"] .message-content, html[lang="ti"] textarea, html[lang="ti"] .history-text,
html[lang="ti"] #chat-header-title, html[lang="ti"] button, html[lang="ti"] input,
html[lang="ti"] select { font-family: 'Noto Sans Ethiopic', 'Cairo', sans-serif, 'Noto Sans Coptic' !important; }

/* ❌ زر إغلاق قائمة اختيار اللغة (بيتحط في الجهة المقابلة لبداية الكلام زي نافذة الملف الشخصي) */
.lang-picker-overlay .site-popup { position: relative; }
.lang-picker-close { position: absolute; top: 10px; inset-inline-end: 12px; background: none; border: none;
    font-size: 1.4rem; color: #aaa; cursor: pointer; padding: 4px 6px; line-height: 1; }
.lang-picker-close:hover { color: #555; }
.lang-picker-close:focus-visible { outline: 3px solid var(--accent-color, #ffb300); outline-offset: 2px; border-radius: 6px; }
.lang-picker-overlay .site-popup-msg { padding: 0 28px; max-height: none; overflow: visible; } /* العنوان سطر واحد: من غير شريط تمرير */
/* 🌐 قائمة اللغات طويلة (9 لغات): أزرار أصغر شوية، ولو الشاشة قصيرة القائمة تتمرر بدل ما تتقص */
.lang-picker-overlay .site-popup { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.lang-picker-overlay .site-popup-actions { gap: 8px; }
.lang-picker-overlay .site-popup-actions button { padding: 8px 18px; }
/* 🌐 13 لغة: القائمة عمودين عشان متبقاش طويلة جداً */
.lang-picker-overlay .site-popup-actions { display: grid; grid-template-columns: 1fr 1fr; }
.lang-picker-overlay .site-popup-actions button { min-width: 0; }

/* زر إغلاق نافذة الدخول: في الجهة المقابلة لرابط اللغة (في الاتجاهين) */
#auth-modal .close-modal-btn { right: auto; inset-inline-start: 15px; }
/* زر إغلاق الملف الشخصي: الـ style جوه HTML بيحط left: 15px، والكلاس بيحط right: 15px، فالزرار كان بيتمدد بعرض النافذة و✕ تقع فوق العنوان */
#profile-modal .close-modal-btn { right: auto; }