/* ==========================================================
   🌐 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 .lang-switch-btn,
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; }