/* =================================== */
/*  RTL (Right-to-Left) Support       */
/*  For Arabic and other RTL languages*/
/* =================================== */

.rtl,
body.rtl {
    direction: rtl;
    text-align: right;
    font-family: var(--font-ar, 'Cairo', 'Segoe UI', system-ui, sans-serif);
}

/* ============ LAYOUT ============ */
.rtl .app-container {
    direction: rtl;
}

/* ============ SIDEBAR ============ */
.rtl .sidebar,
.rtl #main-sidebar {
    border-right: none;
}

html[dir="rtl"] .sidebar:not(.open) {
    transform: translateX(100%); /* hidden on right */
    position: fixed;
    box-shadow: none;
}

/* Desktop RTL: sidebar in normal flow */
@media (min-width: 769px) {
    html[dir="rtl"] .sidebar.open {
        transform: translateX(0);
        position: relative;
        z-index: auto;
        box-shadow: none;
    }
}

/* Mobile RTL: sidebar is fixed overlay above backdrop */
@media (max-width: 768px) {
    html[dir="rtl"] .sidebar.open {
        transform: translateX(0);
        position: fixed;
        z-index: 2100;
        box-shadow: var(--shadow-sidebar);
        right: 0;
        left: auto;
    }
}

.rtl .sidebar-tiny-bar {
    border-right: none;
    border-left: 1px solid var(--border-primary);
}

/* ============ SEARCH ============ */
[dir="rtl"] .search-icon,
.rtl .search-icon {
    left: auto;
    right: 12px;
}
[dir="rtl"] .search-input,
.rtl .search-input {
    padding: 10px 40px 10px 12px;
}
[dir="rtl"] .search-clear,
.rtl .search-clear {
    left: 8px;
    right: auto;
}

/* ============ MESSAGES ============ */
.rtl .message.user,
.rtl .user-message,
[dir="rtl"] .message.user,
[dir="rtl"] .user-message {
    justify-content: flex-end;
}

.rtl .message.bot,
.rtl .bot-message,
[dir="rtl"] .message.bot,
[dir="rtl"] .bot-message {
    justify-content: flex-start;
}

/* Fix user message content alignment in RTL */
.rtl .message.user .message-content,
[dir="rtl"] .message.user .message-content {
    align-items: flex-end;
}

/* Fix user message corner radius in RTL */
.rtl .message.user .message-text,
.rtl .user-message .message-text,
[dir="rtl"] .message.user .message-text,
[dir="rtl"] .user-message .message-text {
    border-radius: 18px 18px 18px 4px !important;
}

/* Fix bot message corner radius in RTL */
.rtl .message.bot .message-text,
.rtl .bot-message .message-text,
[dir="rtl"] .message.bot .message-text,
[dir="rtl"] .bot-message .message-text {
    border-radius: 18px 18px 4px 18px !important;
}

/* Fix user message time in RTL */
.rtl .message.user .message-time,
[dir="rtl"] .message.user .message-time {
    text-align: left;
}

/* Fix typing indicator in RTL */
.rtl .typing-indicator,
[dir="rtl"] .typing-indicator {
    border-radius: 18px 18px 4px 18px;
}

.rtl .message-text,
[dir="rtl"] .message-text {
    text-align: right;
    line-height: 1.8;
}

/* ============ HISTORY & SIDEBAR ITEMS ============ */
.rtl .history-item:hover,
[dir="rtl"] .history-item:hover {
    transform: translateX(-4px);
}

.rtl .user-section,
.rtl .sidebar-footer,
[dir="rtl"] .user-section,
[dir="rtl"] .sidebar-footer {
    flex-direction: row-reverse;
}

/* ============ ACTIONS & BUTTONS ============ */
.rtl .chat-actions,
.rtl .header-right,
[dir="rtl"] .chat-actions,
[dir="rtl"] .header-right {
    flex-direction: row-reverse;
}

/* ============ LISTS & TEXT ALIGNMENT ============ */
.rtl .message-text ul,
.rtl .message-text ol,
[dir="rtl"] .message-text ul,
[dir="rtl"] .message-text ol {
    padding-left: 0;
    padding-right: var(--space-6);
}

.rtl .message-text blockquote,
[dir="rtl"] .message-text blockquote {
    border-left: none;
    border-right: 3px solid var(--primary);
    padding-left: 0;
    padding-right: var(--space-4);
}

.rtl .alert,
[dir="rtl"] .alert {
    border-left: none;
    border-right: 4px solid;
}

/* ============ LANGUAGE SWITCHER ============ */
.rtl .language-switcher select,
[dir="rtl"] .language-switcher select {
    /* padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10); */
    /* text-align: right; */
}

.rtl .language-switcher::after,
[dir="rtl"] .language-switcher::after {
    /* right: auto; */
    /* left: var(--space-4); */
}

/* ============ SCAN CONTROLS ============ */
.rtl #scan-controls,
[dir="rtl"] #scan-controls {
    flex-direction: row-reverse;
}

/* ============ CHAT INPUT IN RTL ============ */
.rtl .chat-input-container,
[dir="rtl"] .chat-input-container {
    width: 100%;
    box-sizing: border-box;
}

.rtl .chat-form,
.rtl #chat-form,
[dir="rtl"] .chat-form,
[dir="rtl"] #chat-form {
    width: 100%;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}

/* ============ SIDEBAR IN RTL ============ */
.rtl .sidebar,
.rtl #main-sidebar,
[dir="rtl"] .sidebar,
[dir="rtl"] #main-sidebar {
    right: 0;
    left: auto;
    border-right: none;
    border-left: 1px solid var(--border-primary);
}

.rtl .sidebar-tiny-bar,
[dir="rtl"] .sidebar-tiny-bar {
    right: 0;
    left: auto;
}

/* RTL: sidebar on the right - only when terminal is closed */
/* When terminal is open, terminal.css handles the combined state */

/* Desktop RTL: sidebar is in normal flex flow (position:relative), so chat just fills remaining space */
@media (min-width: 769px) {
  html[dir="rtl"] body:not(.terminal-panel-open) .sidebar.open ~ .chat-container {
    margin-right: 0;
    margin-left: 0;
    width: auto;
    flex: 1;
    transition: margin 0.3s ease, width 0.3s ease;
  }

  html[dir="rtl"] body:not(.terminal-panel-open) .sidebar:not(.open) ~ .chat-container {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
  }
}

/* Mobile RTL: sidebar overlays, chat always full width */
@media (max-width: 768px) {
  html[dir="rtl"] .sidebar.open ~ .chat-container,
  html[dir="rtl"] .sidebar:not(.open) ~ .chat-container {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
  }
}

/* ============ RESPONSIVE RTL ADJUSTMENTS ============ */
@media (min-width: 1025px) {
    .rtl body:not(.terminal-panel-open) .sidebar.open ~ .chat-container,
    .rtl body:not(.terminal-panel-open) .sidebar.open ~ .chat-main,
    [dir="rtl"] body:not(.terminal-panel-open) .sidebar.open ~ .chat-container,
    [dir="rtl"] body:not(.terminal-panel-open) .sidebar.open ~ .chat-main {
        margin-left: 0;
        margin-right: 0;
        width: auto;
        flex: 1;
    }
}

/* Ensure no unwanted borders on chat-container in RTL */
[dir="rtl"] .chat-container,
html[dir="rtl"] .chat-container {
    border-left: none;
    border-right: none;
    outline: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .rtl .chat-container,
    .rtl .chat-main,
    [dir="rtl"] .chat-container,
    [dir="rtl"] .chat-main {
        margin-left: 0;
        /* margin-right: var(--sidebar-rail-width); */
    }

    /* Tablet RTL should behave like overlay sidebar, not push content width */
    [dir="rtl"] .sidebar,
    [dir="rtl"] #main-sidebar {
        right: 0;
        left: auto;
    }

    [dir="rtl"] .sidebar:not(.open),
    [dir="rtl"] #main-sidebar:not(.open) {
        transform: translateX(100%);
        position: fixed;
    }

    [dir="rtl"] .sidebar.open,
    [dir="rtl"] #main-sidebar.open {
        transform: translateX(0);
        position: fixed;
        z-index: 2100;
    }

    [dir="rtl"] .sidebar.open ~ .chat-container,
    [dir="rtl"] .sidebar.open ~ .chat-main,
    [dir="rtl"] .sidebar:not(.open) ~ .chat-container,
    [dir="rtl"] .sidebar:not(.open) ~ .chat-main {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Mobile RTL fixes */
@media (max-width: 768px) {
    .rtl .sidebar,
    .rtl #main-sidebar,
    [dir="rtl"] .sidebar,
    [dir="rtl"] #main-sidebar {
        right: 0;
        left: auto;
        transform: translateX(100%);
        position: fixed;
    }

    .rtl .sidebar.open,
    .rtl #main-sidebar.open,
    [dir="rtl"] .sidebar.open,
    [dir="rtl"] #main-sidebar.open {
        transform: translateX(0);
        position: fixed;
        z-index: 2100;
    }

    .rtl .chat-input-container,
    [dir="rtl"] .chat-input-container {
        left: 0 !important;
        right: 0 !important;
    }
}

/* ============ INFRASTRUCTURE MODAL RTL ============ */
.rtl .infrastructure-header,
[dir="rtl"] .infrastructure-header {
    flex-direction: row-reverse;
}

.rtl .infrastructure-controls,
[dir="rtl"] .infrastructure-controls {
    flex-direction: row-reverse;
}

.rtl .infrastructure-legend,
[dir="rtl"] .infrastructure-legend {
    flex-direction: row-reverse;
}

@media (max-width: 1024px) {
    .rtl .infrastructure-controls,
    [dir="rtl"] .infrastructure-controls {
        justify-content: flex-end;
    }
}

/* Tiny bar tooltip flip for RTL */
.rtl .tiny-bar-item[title]:hover::after,
[dir="rtl"] .tiny-bar-item[title]:hover::after,
.rtl .sidebar-toggle[title]:hover::after,
[dir="rtl"] .sidebar-toggle[title]:hover::after {
    left: auto;
    right: calc(100% + 8px);
}

/* ============ TERMINAL MINI-BAR RTL ============ */
[dir="rtl"] .terminal-mini-bar {
    flex-direction: row-reverse;
}

[dir="rtl"] .terminal-mini-bar-info {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .terminal-mini-bar-stats {
    flex-direction: row-reverse;
}

[dir="rtl"] .terminal-mini-bar-expand {
    flex-direction: row-reverse;
}

/* ============ CHAT INPUT SEND BUTTON RTL ============ */
[dir="rtl"] #send-btn,
[dir="rtl"] .send-btn {
    order: 1;
}

[dir="rtl"] #chat-input {
    order: 0;
}

[dir="rtl"] #stop-generating-btn {
    order: 1;
}

/* ============ BOT MESSAGE TIME RTL ============ */
.rtl .message.bot .message-time,
[dir="rtl"] .message.bot .message-time {
    text-align: right;
}

/* ============ LARGE SCREEN RTL CONTAINMENT ============ */

/* Full HD RTL (1920px+) */
@media (min-width: 1920px) {
    [dir="rtl"] .chat-messages,
    [dir="rtl"] #chat-messages {
        max-width: 54rem;
        margin-left: auto;
        margin-right: auto;
    }

    [dir="rtl"] .chat-input-container {
        max-width: 54rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Ultra-wide RTL (2560px+) */
@media (min-width: 2560px) {
    [dir="rtl"] .chat-messages,
    [dir="rtl"] #chat-messages {
        max-width: 60rem;
    }

    [dir="rtl"] .chat-input-container {
        max-width: 60rem;
    }
}

/* 4K RTL (3840px+) */
@media (min-width: 3840px) {
    [dir="rtl"] .chat-messages,
    [dir="rtl"] #chat-messages {
        max-width: 68rem;
    }

    [dir="rtl"] .chat-input-container {
        max-width: 68rem;
    }
}