/* Logaa Chat - RTL Advanced Theme v2 */
.logaa-chat-widget, .logaa-chat-widget * {
    box-sizing: border-box;
    direction: rtl; /* Ensure RTL direction for all elements */
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: right; /* Default text alignment to right */
}

/* Floating Button (FAB) */
#logaa-chat-fab {
    position: fixed;
    bottom: 25px;
    right: 25px; /* Positioned to the right for RTL */
    left: auto;
    width: 60px;
    height: 60px;
    background: #FF4500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 9998;
    transition: transform 0.2s;
}
#logaa-chat-fab:hover { transform: scale(1.1); }

/* Main Widget Container */
#logaa-chat-widget {
    position: fixed;
    bottom: 100px;
    right: 25px; /* Positioned to the right for RTL */
    left: auto;
    width: 350px;
    height: 500px;
    background-color: #f9f9f9;
    border-radius: 20px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
#logaa-chat-widget.active { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }

/* Header */
.logaa-chat-header {
    background: linear-gradient(90deg, #1e3a8a, #ff4500);
    color: white;
    padding: 10px 15px;
    display: flex;
    /* justify-content: space-between; -- we use order for RTL */
    align-items: center;
    flex-shrink: 0;
}
.logaa-chat-header-btn { background: none; border: none; color: white; font-size: 28px; cursor: pointer; line-height: 1; padding: 5px; opacity: 0.8; transition: opacity 0.2s; }
.logaa-chat-header-btn:hover { opacity: 1; }

/* RTL ordering for header items */
#logaa-chat-close { order: 1; }
#logaa-chat-header-title { order: 2; flex-grow: 1; text-align: right; padding-right: 10px; font-size: 16px; font-weight: bold; }
#logaa-chat-back { order: 3; }
#logaa-chat-back svg { transform: scaleX(-1); } /* Flip the back arrow icon */


/* Body and Options View */
.logaa-chat-body { flex-grow: 1; display: flex; flex-direction: column; }
#logaa-chat-options-view { padding: 20px; }
.logaa-chat-option { background: white; padding: 20px; border-radius: 12px; margin-bottom: 15px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.logaa-chat-option:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.logaa-chat-option h4 { margin: 0 0 5px 0; font-size: 16px; color: #333; }
.logaa-chat-option p { margin: 0; font-size: 14px; color: #777; }
.logaa-chat-option-link { text-decoration: none; color: inherit; }

/* Conversation View */
#logaa-chat-conversation-view { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.logaa-chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; background-color: white; display: flex; flex-direction: column; }
.logaa-chat-message { padding: 12px 18px; border-radius: 20px; max-width: 85%; line-height: 1.6; margin-bottom: 10px; }
.logaa-chat-bot { background-color: #f1f1f1; color: #333; border-bottom-right-radius: 5px; align-self: flex-start; }
.logaa-chat-user { background-color: #007bff; color: white; border-bottom-left-radius: 5px; align-self: flex-end; }
.logaa-chat-input-area { padding: 10px; display: flex; align-items: center; background-color: #f9f9f9; flex-shrink: 0; }
#logaa-chat-input { flex-grow: 1; border: none; background: white; padding: 12px 15px; border-radius: 20px; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
#logaa-chat-send-btn { background: none; border: none; cursor: pointer; color: #ff4500; padding: 8px; margin-left: 8px; margin-right: 0; /* Adjusted for RTL */ }

/* Typing Indicator */
#logaa-chat-typing-indicator { position: absolute; bottom: 65px; left: 20px; right: auto; background: #f1f1f1; padding: 5px 10px; border-radius: 10px; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
#logaa-chat-typing-indicator span { height: 8px; width: 8px; background-color: #b3b3b3; border-radius: 50%; display: inline-block; animation: bounce 1.4s infinite ease-in-out both; }
#logaa-chat-typing-indicator span:nth-of-type(2) { animation-delay: -0.16s; }
#logaa-chat-typing-indicator span:nth-of-type(3) { animation-delay: -0.32s; }
/* --- FOCUS AND VISIBILITY FIX --- */

/* Ensure the form area is always treated as a block-level element */
#logaa-chat-input-form {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure the text input itself cannot be hidden or disabled by conflicting styles */
#logaa-chat-input {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important; /* Make sure it's always clickable/tappable */
    -webkit-user-select: text !important; /* Allow text selection on iOS */
    user-select: text !important;
}
/* Ensure the main body has the correct flex properties */
.logaa-chat-body {
    display: flex;
    flex-direction: column;
    height: 100%; /* Make sure it takes up the full height of the widget */
    overflow: hidden; /* Prevent double scrollbars */
}

/* Ensure the conversation view takes up all available space */
#logaa-chat-conversation-view {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* This is the most important part: The message container */
#logaa-chat-messages {
    flex-grow: 1; /* Allow this element to grow and fill the space */
    overflow-y: auto; /* Show a scrollbar ONLY when needed */
    padding: 15px;
}

/* Make sure the header doesn't get hidden */
.logaa-chat-header {
    flex-shrink: 0; /* Prevent the header from shrinking */
    display: flex;
    align-items: center;
}

/* RTL ordering for header items */
#logaa-chat-close { order: 1; }
#logaa-chat-header-title { order: 2; flex-grow: 1; text-align: right; padding-right: 10px; }
#logaa-chat-back { order: 3; }
#logaa-chat-back svg { transform: scaleX(-1); }