/* Multilingual Support CSS */

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* Language Switcher Positioning */
[dir="rtl"] .language-switcher {
    left: 20px;
    right: auto;
}

[dir="ltr"] .language-switcher {
    right: 20px;
    left: auto;
}

/* Font Support for Different Languages */
[lang="he"] {
    font-family: 'Heebo', 'Assistant', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

[lang="en"] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Chat Messages Direction */
[dir="rtl"] .user-message {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

[dir="ltr"] .user-message {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

[dir="rtl"] .coach-message {
    margin-right: auto;
    margin-left: 0;
    text-align: right;
}

[dir="ltr"] .coach-message {
    margin-left: auto;
    margin-right: 0;
    text-align: left;
}

/* Form Elements */
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select {
    text-align: right;
}

[dir="ltr"] input, [dir="ltr"] textarea, [dir="ltr"] select {
    text-align: left;
}

/* Sidebar and Navigation */
[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
}

[dir="ltr"] .sidebar {
    left: 0;
    right: auto;
}

/* Responsive Language Switcher */
@media (max-width: 768px) {
    .language-switcher {
        top: 10px;
        gap: 5px;
    }
    
    .language-switcher a {
        width: 35px;
        height: 28px;
        font-size: 11px;
    }
    
    [dir="rtl"] .language-switcher {
        left: 10px;
        right: auto;
    }
    
    [dir="ltr"] .language-switcher {
        right: 10px;
        left: auto;
    }
}

/* Language-specific improvements */
[lang="en"] .main-title {
    letter-spacing: 0.5px;
}

[lang="he"] .main-title {
    letter-spacing: 0;
}

/* Smooth Transitions for Language Changes */
html[lang] {
    transition: all 0.3s ease;
}

/* Icon Flipping for RTL */
[dir="rtl"] .fa-arrow-left::before {
    content: "\f061"; /* arrow-right */
}

[dir="rtl"] .fa-arrow-right::before {
    content: "\f060"; /* arrow-left */
}

/* Chat Container Direction */
[dir="rtl"] .chat-container {
    flex-direction: row-reverse;
}

[dir="ltr"] .chat-container {
    flex-direction: row;
}