/* ========================================
   🌐 LTR SUPPORT (English Mode)
   ======================================== */

html[dir="ltr"] body {
    direction: ltr;
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Reset Directions for LTR */
html[dir="ltr"] .message {
    flex-direction: row;
    /* Default LTR */
}

html[dir="ltr"] .message.user {
    align-self: flex-end;
    /* Right */
    flex-direction: row-reverse;
    /* Avatar Right, Content Left */
}

html[dir="ltr"] .message.ai {
    align-self: flex-start;
    /* Left */
    flex-direction: row;
    /* Avatar Left, Content Right */
}

html[dir="ltr"] .message.user .message-text {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 4px;
}

/* Sidebar Flip */
html[dir="ltr"] .sidebar {
    right: auto;
    left: 20px;
}

html[dir="ltr"] .sidebar.open {
    transform: translateX(0);
}

html[dir="ltr"] .sidebar {
    transform: translateX(-120%);
    /* Hide via Left */
}

/* Input Row Flip */
html[dir="ltr"] .input-bottom-row {
    direction: ltr !important;
}

html[dir="ltr"] .message-input {
    text-align: left !important;
    direction: ltr !important;
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    overflow-y: hidden !important;
    min-height: 40px !important;
    max-height: 120px !important;
}

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

/* Sidebar Toggle / Menu Button is usually in .header-right in default HTML, 
   but in LTR it should be on LEFT. 
   Default HTML: 
   Left: Status
   Right: Menu (Sidebar Toggle)
   
   LTR Goal:
   Left: Menu (Sidebar Toggle)
   Right: Status
*/

html[dir="ltr"] .header-right {
    /* The Menu Button Container */
    order: -1 !important;
    /* Move to Start (Left) */
    justify-self: start !important;
}

html[dir="ltr"] .header-left {
    /* The Status/Back Container */
    order: 3 !important;
    /* Move to End (Right) */
    justify-self: end !important;
}



/* Conversation List */
html[dir="ltr"] .conversation-actions {
    transform: translateX(10px);
}

html[dir="ltr"] .conversation-item:hover .conversation-actions {
    transform: translateX(0);
}

/* Button Shape Fix for LTR */
html[dir="ltr"] .glass-button-small {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html[dir="ltr"] .lang-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Flip Icons for LTR */
html[dir="ltr"] .fa-arrow-right,
html[dir="ltr"] .fa-chevron-right,
html[dir="ltr"] .fa-paper-plane {
    transform: scaleX(-1);
    display: inline-block;
    /* Required for transform */
}

/* Home Header Flip */
html[dir="ltr"] .home-header {
    left: auto !important;
    right: 20px !important;
}

/* Specific Icon Flips for Back and Start Buttons */
html[dir="ltr"] #startChatBtn .button-icon,
html[dir="ltr"] #backHomeBtn svg {
    transform: scaleX(-1);
}

/* FIX: Restore small square shape for Sidebar Buttons in LTR */
html[dir="ltr"] .conversation-actions .glass-button-small {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
}

/* Typing Indicator: Keep on Left in LTR (like AI messages) */
html[dir="ltr"] .typing-message {
    align-self: flex-start !important;
    flex-direction: row !important;
}