/* Chatbot_ar.css — RTL + left-side FAB
   Usage: set dir="rtl" on the #chatbot-lite container (and/or the <aside class="chat-panel-lite ajman">)
   Then include this file AFTER the English CSS so these overrides take effect.
*/

/* If you prefer to pull in the English base from the same folder, keep this import. 
   Otherwise, remove the line and paste the base CSS above this block.
*/
@import url('Chatbot_en.css');

/* ===== Base RTL flip + left docking ===== */
#chatbot-lite[dir="rtl"],
#chatbot-lite [dir="rtl"],
.chat-panel-lite.ajman[dir="rtl"] {
    direction: rtl;
}

/* Move the launcher button to the LEFT edge (override inline right:20px) */
#chatbot-lite[dir="rtl"] {
    position: fixed !important;
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    z-index: 2147483647;
}

    /* Keep the floating action button style; nothing to change visually. */
    #chatbot-lite[dir="rtl"] .chat-fab-lite {
        order: 1;
    }

    /* Make the unread ping appear on the TOP-LEFT of the fab in RTL */
    #chatbot-lite[dir="rtl"] .unread-ping-lite {
        left: -2px;
        right: auto;
    }

    /* Open the chat PANEL to the RIGHT of the left-docked button */
    #chatbot-lite[dir="rtl"] .chat-panel-lite.ajman {
        left: 0;
        right: auto;
        bottom: 70px;
        transform-origin: left bottom;
    }

    /* Header: swap close button side and align title to the right */
    #chatbot-lite[dir="rtl"] .chat-header-lite {
        flex-direction: row-reverse;
        text-align: right;
    }

    #chatbot-lite[dir="rtl"] .badge-wrap-lite {
        flex-direction: row-reverse;
    }

    #chatbot-lite[dir="rtl"] .status-dot-lite {
        box-shadow: 0 0 0 2px #0f0a1a;
    }

    /* Splash */
    #chatbot-lite[dir="rtl"] .splash {
        direction: rtl;
        text-align: right;
    }

    #chatbot-lite[dir="rtl"] .splash-right {
        order: -1; /* put artwork on the left in RTL */
    }

    /* Topics grid cards */
    #chatbot-lite[dir="rtl"] .topics {
        direction: rtl;
    }

    #chatbot-lite[dir="rtl"] .topic-card {
        flex-direction: row-reverse;
        text-align: right;
    }

    #chatbot-lite[dir="rtl"] .t-text {
        font: 600 13px system-ui;
    }

    /* Chips */
    #chatbot-lite[dir="rtl"] .chips-lite {
        direction: rtl;
    }

    #chatbot-lite[dir="rtl"] .chip-lite {
        text-align: right;
    }

    /* Messages list: right-align text; keep natural bubble directions */
    #chatbot-lite[dir="rtl"] .messages-lite {
        direction: rtl;
    }

    /* Bubbles: flip left/right ownership and border radii for RTL */
    #chatbot-lite[dir="rtl"] .bubble-lite {
        text-align: right;
    }

        #chatbot-lite[dir="rtl"] .bubble-lite.user {
            margin-right: auto; /* sent bubbles sit on LEFT in RTL */
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 16px;
        }

        #chatbot-lite[dir="rtl"] .bubble-lite.bot {
            margin-left: auto; /* bot bubbles sit on RIGHT in RTL */
            margin-right: 0;
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 16px;
        }

    /* Composer strip */
    #chatbot-lite[dir="rtl"] .composer-lite {
        direction: rtl !important;
    }

    #chatbot-lite[dir="rtl"] .composer-row {
        flex-direction: row-reverse;
    }

    /* Tools cluster: keep on the LEFT in RTL (i.e., near the launcher) */
    #chatbot-lite[dir="rtl"] .tools-left {
        order: 0;
    }

    /* Place the send button on the RIGHT side in RTL */
    #chatbot-lite[dir="rtl"] .send-lite,
    #chatbot-lite[dir="rtl"] #sendLite {
        order: 1;
        margin-right: 4px;
        margin-left: 0;
    }

    /* Textarea content should type RTL and align right */
    #chatbot-lite[dir="rtl"] #composerText {
        direction: rtl;
        text-align: right;
        padding: 12px 12px 12px 12px;
    }

    /* Attachment preview INSIDE the textarea: pin to the RIGHT in RTL */
    #chatbot-lite[dir="rtl"] .attachment-inside {
        right: 8px;
        left: auto;
    }

        #chatbot-lite[dir="rtl"] .attachment-inside .remove {
            left: 0;
            right: auto;
        }

    /* Topic and action icons: keep visual balance */
    #chatbot-lite[dir="rtl"] .t-icon {
        order: 1;
    }

    /* Icon buttons inside composer: keep spacing sane in RTL */
    #chatbot-lite[dir="rtl"] .icon-btn {
        transform-origin: right center;
    }

/* Small screens: nothing special beyond base, but ensure panel width uses viewport */
@media (max-width:420px) {
    #chatbot-lite[dir="rtl"] .chat-panel-lite.ajman {
        width: 94vw;
    }
}

/* Optional: flip scrollbar thumb direction in webkit for RTL (visual only) */
#chatbot-lite[dir="rtl"] .messages-lite::-webkit-scrollbar-thumb {
    border-left: 2px solid transparent;
    border-right: 0;
}

/*///////////////////////////*/

/* علشان يفضل كل المحتوى جوه البوكس حتى لما الشاشة تصغر */
@media (max-width: 1500px) {

    /* لما splash يكون hidden */
    body:has(.splash.hidden) .chat-panel-lite.ajman {
        width: 28vw;
		  height: 83vh;
  max-height: 600px;
  display: flex;
  flex-direction: column;
    }

    /* لما topics هو اللي يكون hidden */
    body:has(.topics.hidden) .chat-panel-lite.ajman {
        width: 31vw;
    }

    .t-text {
        font: 600 10px system-ui !important;
    }

    .chip-lite {
        font-size: 10px !important;
    }

    .bubble-lite {
        font: 10px / 1.45 system-ui !important;
    }

    .composer-row button, textarea {
        font-size: 10px !important;
    }

    .name-lite {
        font-size: 10px !important;
    }

    #composerText {
        font-size: 10px !important;
    }
	 .messages-lite {
     max-height: 320px;
     overflow: auto;
     padding: 12px 14px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1;
     max-height: 60%;
     overflow-y: auto;
     padding: 10px 14px;
     box-sizing: border-box;
 }
 .topics {
     padding: 4px 14px !important;
 }
}