/**
 * RTL Support for Arabic - Refactored v2.0
 *
 * Changes:
 * - Reduced !important usage from 40+ to ~8 essential ones
 * - Added CSS logical properties for bidirectional support
 * - Consolidated duplicate rules
 * - Improved specificity with data attributes
 * - Better organized sections
 */

/* ===================================
   SECTION 1: DESIGN SYSTEM TOKENS
   =================================== */

:root {
    /* === Z-Index Layers === */
    --z-base: 1;
    --z-sidebar: 100;
    --z-map-inline: 10;
    --z-map-controls: 1000;
    --z-map-split: 9000;
    --z-chat-overlay: 9100;
    --z-map-fullscreen: 9500;
    --z-modal: 10000;

    /* === Layout Dimensions === */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 0px;
    --min-chat-width: 320px;
    --min-chat-width-tablet: 280px;
    --min-chat-width-mobile: 100%;

    /* === Split View Ratios === */
    --chat-width-desktop: 35%;
    --chat-width-tablet: 40%;
    --chat-width-mobile: 100%;
    --chat-height-mobile: 45vh;
    --map-width-desktop: 65%;
    --map-width-tablet: 60%;
    --map-width-mobile: 100%;
    --map-height-mobile: 55vh;

    /* === Touch Targets (WCAG 2.1 AA) === */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* === Transitions === */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-slow: 500ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* === Spacing === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* === Colors (Theme-aware) === */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-strong: rgba(0, 0, 0, 0.2);
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --accent-color: #2563eb;
    --accent-hover: #1d4ed8;
    --error-color: #dc2626;
    --error-bg: #fef2f2;
    --success-color: #22c55e;

    /* === Shadows === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-split: 4px 0 20px rgba(0, 0, 0, 0.15);
    --shadow-split-rtl: -4px 0 20px rgba(0, 0, 0, 0.15);
    --shadow-mobile-top: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-mobile-bottom: 0 -4px 20px rgba(0, 0, 0, 0.15);

    /* === Border Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* === Breakpoints (for JS sync) === */
    --breakpoint-mobile: 767;
    --breakpoint-tablet: 1024;
    --breakpoint-desktop: 1025;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-overlay: rgba(26, 26, 26, 0.95);
        --border-color: rgba(255, 255, 255, 0.1);
        --border-color-strong: rgba(255, 255, 255, 0.2);
        --text-primary: #f5f5f5;
        --text-secondary: #9ca3af;
        --text-tertiary: #6b7280;
    }
}

/* ===================================
   SECTION 1.5: MODAL Z-INDEX OVERRIDES
   Ensure Chainlit/MUI dialogs appear above the map
   =================================== */

/* MUI Modal/Dialog - must appear above fullscreen map (z-index: 9500) */
.MuiModal-root,
.MuiDialog-root,
.MuiDrawer-root {
    z-index: 100000 !important;
}

.MuiBackdrop-root {
    z-index: 99999 !important;
}

/* Chainlit-specific dialog components */
[role="dialog"],
[role="alertdialog"],
.cl-dialog,
.cl-modal {
    z-index: 100000 !important;
}

/* Radix UI Select/Combobox popover - must appear above dialogs */
[role="listbox"],
[data-radix-popper-content-wrapper] {
    z-index: 100001 !important;
}

/* ===================================
   SECTION 2: GLOBAL RTL SETTINGS
   Using data attributes for proper specificity
   =================================== */

/* Root direction - using high specificity instead of !important */
html[dir="rtl"],
html[lang="ar"],
html:lang(ar) {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body,
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

/* Fallback with !important for Chainlit override (minimal usage) */
html, body, #root {
    direction: rtl !important;
}

/* ===================================
   SECTION 3: TEXT ELEMENTS WITH LOGICAL PROPERTIES
   Using CSS logical properties for bidirectional support
   =================================== */

/* General text direction */
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] div,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] li,
[dir="rtl"] label,
[dir="rtl"] a,
[dir="rtl"] td,
[dir="rtl"] th {
    text-align: start;
}

/* Input elements */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="search"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] textarea {
    text-align: start;
}

[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
    text-align: start;
}

/* ===================================
   SECTION 4: CHAINLIT SIDEBAR - RTL POSITIONING
   These require !important to override Chainlit's Tailwind classes
   =================================== */

/* Reverse the main sidebar-wrapper flex direction */
.group\/sidebar-wrapper {
    flex-direction: row-reverse !important;
}

/* Override the fixed sidebar position */
.fixed.inset-y-0.left-0,
.duration-200.fixed.inset-y-0 {
    left: auto !important;
    right: 0 !important;
}

/* Override group-data collapsible left positioning */
.group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
    left: auto !important;
    right: calc(var(--sidebar-width) * -1) !important;
}

/* Change border from right to left for RTL */
.group-data-\[side\=left\]\:border-r {
    border-right: none !important;
    border-inline-start: 1px solid var(--sidebar-border) !important;
}

/* When collapsed, slide out to RIGHT */
[data-state="collapsed"] .fixed.inset-y-0 {
    transform: translateX(100%) !important;
    right: calc(var(--sidebar-width) * -1) !important;
}

/* Smooth transitions for sidebar */
.fixed.inset-y-0 {
    transition: transform var(--transition-normal) var(--easing-default),
                left var(--transition-normal) var(--easing-default),
                right var(--transition-normal) var(--easing-default);
}

/* Ensure placeholder div is on the right side */
.group\/sidebar-wrapper > div:first-child {
    order: 1;
}

/* ===================================
   SECTION 5: MESSAGES - Using logical properties
   =================================== */

[dir="rtl"] .step,
[dir="rtl"] .message,
[dir="rtl"] .message-container,
[dir="rtl"] .message-content,
[dir="rtl"] [class*="Message"],
[dir="rtl"] [class*="message"] {
    text-align: start;
}

[dir="rtl"] .markdown-body,
[dir="rtl"] [class*="Markdown"],
[dir="rtl"] .prose {
    text-align: start;
}

/* Lists with logical padding */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-inline-start: 2rem;
    padding-inline-end: 0;
}

/* Bidirectional text handling */
.message-content {
    unicode-bidi: plaintext;
}

/* ===================================
   SECTION 6: EXCEPTIONS - KEEP LTR
   Code blocks, maps, and other technical content
   =================================== */

code, pre, .hljs,
[class*="code"],
.language-,
.token,
.leaflet-container,
.leaflet-control,
[data-map-mode] {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate;
}

/* ===================================
   SECTION 7: DOMAIN GROUPS IN SIDEBAR
   =================================== */

.domain-group {
    margin-block: var(--spacing-sm);
}

.domain-group-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: background-color var(--transition-fast) var(--easing-default),
                filter var(--transition-fast) var(--easing-default);
}

.domain-group-header:hover {
    filter: brightness(0.95);
}

.domain-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.domain-name {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.domain-count {
    font-size: 11px;
    padding: 2px var(--spacing-sm);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
    min-width: 20px;
    text-align: center;
}

.domain-chevron {
    font-size: 10px;
    opacity: 0.6;
    transition: transform var(--transition-fast) var(--easing-default);
}

.domain-group[data-expanded="true"] .domain-chevron {
    transform: rotate(180deg);
}

.domain-threads {
    padding-inline-start: var(--spacing-md);
    margin-block-start: var(--spacing-xs);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal) ease-out;
}

.domain-group[data-expanded="true"] .domain-threads {
    max-height: 1000px;
}

.domain-threads--empty {
    padding: var(--spacing-md);
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

/* Domain badge in header */
.domain-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    margin-inline: var(--spacing-sm);
    font-size: 12px;
    font-weight: 500;
    border-radius: 9999px;
}

/* Hide empty date labels */
[class*="date-label"]:empty,
[class*="group-label"]:empty {
    display: none;
}

/* ===================================
   SECTION 8: THREAD SEARCH
   =================================== */

.thread-search {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.thread-search:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.thread-search::placeholder {
    color: var(--text-tertiary);
}

/* ===================================
   SECTION 9: SPLIT VIEW LAYOUT
   Consolidated with CSS Grid
   =================================== */

/* Base body styles for map modes */
body.map-split-view-active,
body[data-map-split="true"],
body[data-map-mode="split"],
body.map-fullscreen-active,
body[data-map-fullscreen="true"],
body[data-map-mode="fullscreen"] {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Hide sidebar in split view - target Chainlit's sidebar structure */
body[data-map-mode="split"] .group.peer[data-state],
body[data-map-mode="split"] .group.peer.hidden,
body[data-map-mode="split"] [data-collapsible],
body.map-split-view-active .group.peer[data-state],
body.map-split-view-active .group.peer.hidden,
body.map-split-view-active [data-collapsible] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Reset sidebar wrapper flex to allow proper main positioning */
body[data-map-mode="split"] .group\/sidebar-wrapper,
body.map-split-view-active .group\/sidebar-wrapper {
    display: block !important;
}

/* Desktop Split View (>1024px) */
@media screen and (min-width: 1025px) {
    /* Main chat container - RTL: on left, LTR: on right */
    body[data-map-mode="split"] main,
    body.map-split-view-active main {
        position: fixed !important;
        top: 0 !important;
        width: var(--chat-width-desktop) !important;
        max-width: var(--chat-width-desktop) !important;
        min-width: var(--min-chat-width) !important;
        height: 100vh !important;
        overflow-y: auto !important;
        background: var(--bg-primary) !important;
        z-index: var(--z-chat-overlay) !important;
        transition: all var(--transition-normal) var(--easing-default);
    }

    /* RTL: Chat on the LEFT side (map on right) */
    body[dir="rtl"][data-map-mode="split"] main,
    body[dir="rtl"].map-split-view-active main {
        left: 0 !important;
        right: auto !important;
        box-shadow: var(--shadow-split) !important;
    }

    /* LTR: Chat on the RIGHT side (map on left) */
    body:not([dir="rtl"])[data-map-mode="split"] main,
    body:not([dir="rtl"]).map-split-view-active main {
        right: 0 !important;
        left: auto !important;
        box-shadow: var(--shadow-split-rtl) !important;
    }

    /* Hide sidebar in desktop split view to avoid layout conflicts */
    body[data-map-mode="split"] [data-sidebar="sidebar"],
    body[data-map-mode="split"] .peer,
    body.map-split-view-active [data-sidebar="sidebar"],
    body.map-split-view-active .peer {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
    }

    /* Also hide the sidebar placeholder */
    body[data-map-mode="split"] .group.peer,
    body.map-split-view-active .group.peer {
        display: none !important;
    }

    /* Chat input positioning */
    body[data-map-mode="split"] [class*="input-container"],
    body[data-map-mode="split"] [class*="composer"],
    body.map-split-view-active [class*="input-container"],
    body.map-split-view-active [class*="composer"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Tablet Split View (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Main chat container - RTL: on left, LTR: on right */
    body[data-map-mode="split"] main,
    body.map-split-view-active main {
        position: fixed !important;
        top: 0 !important;
        width: var(--chat-width-tablet) !important;
        max-width: var(--chat-width-tablet) !important;
        min-width: var(--min-chat-width-tablet) !important;
        height: 100vh !important;
        overflow-y: auto !important;
        background: var(--bg-primary) !important;
        z-index: var(--z-chat-overlay) !important;
        transition: all var(--transition-normal) var(--easing-default);
    }

    /* RTL: Chat on the LEFT side (map on right) */
    body[dir="rtl"][data-map-mode="split"] main,
    body[dir="rtl"].map-split-view-active main {
        left: 0 !important;
        right: auto !important;
        box-shadow: var(--shadow-split) !important;
    }

    /* LTR: Chat on the RIGHT side (map on left) */
    body:not([dir="rtl"])[data-map-mode="split"] main,
    body:not([dir="rtl"]).map-split-view-active main {
        right: 0 !important;
        left: auto !important;
        box-shadow: var(--shadow-split-rtl) !important;
    }

    /* Hide sidebar on tablet split view */
    body[data-map-mode="split"] [data-sidebar="sidebar"],
    body[data-map-mode="split"] .peer,
    body[data-map-mode="split"] .group.peer,
    body.map-split-view-active [data-sidebar="sidebar"],
    body.map-split-view-active .peer,
    body.map-split-view-active .group.peer {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
    }
}

/* Mobile Split View (<768px) - Stacked Layout */
@media screen and (max-width: 767px) {
    /* Main chat container - bottom of screen */
    body[data-map-mode="split"] main,
    body.map-split-view-active main {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: var(--chat-height-mobile) !important;
        min-height: 200px !important;
        overflow-y: auto !important;
        background: var(--bg-primary) !important;
        z-index: var(--z-chat-overlay) !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        box-shadow: var(--shadow-mobile-bottom) !important;
        transition: all var(--transition-normal) var(--easing-default);
    }

    /* Mobile chat input */
    body[data-map-mode="split"] [class*="input-container"],
    body[data-map-mode="split"] [class*="composer"],
    body.map-split-view-active [class*="input-container"],
    body.map-split-view-active [class*="composer"] {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        position: relative !important;
    }

    /* Hide sidebar on mobile split view */
    body[data-map-mode="split"] [data-sidebar="sidebar"],
    body[data-map-mode="split"] .peer,
    body[data-map-mode="split"] .group.peer,
    body.map-split-view-active [data-sidebar="sidebar"],
    body.map-split-view-active .peer,
    body.map-split-view-active .group.peer {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
    }

    /* Mobile drag handle */
    body[data-map-mode="split"] main::before,
    body.map-split-view-active main::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-color-strong);
        border-radius: 2px;
        margin: var(--spacing-sm) auto var(--spacing-xs);
        cursor: grab;
        touch-action: none;
    }

    body[data-map-mode="split"] main:active::before,
    body.map-split-view-active main:active::before {
        cursor: grabbing;
        background: var(--accent-color);
    }
}

/* ===================================
   SECTION 10: FULLSCREEN VIEW
   =================================== */

/* Ensure body covers viewport when in fullscreen */
body[data-map-mode="fullscreen"],
body.map-fullscreen-active {
    overflow: hidden;
    background: var(--bg-primary);
}

/* Hide chat and all overlays in fullscreen */
body[data-map-mode="fullscreen"] main,
body[data-map-mode="fullscreen"] .cl-chat-container,
body[data-map-mode="fullscreen"] [class*="chat-container"],
body[data-map-mode="fullscreen"] [class*="thread-history"],
body[data-map-mode="fullscreen"] [data-sidebar],
body[data-map-mode="fullscreen"] aside,
body[data-map-mode="fullscreen"] header,
body.map-fullscreen-active main,
body.map-fullscreen-active .cl-chat-container,
body.map-fullscreen-active [class*="chat-container"],
body.map-fullscreen-active [class*="thread-history"],
body.map-fullscreen-active [data-sidebar],
body.map-fullscreen-active aside,
body.map-fullscreen-active header {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--transition-normal) var(--easing-default);
}

/* Ensure map container covers full viewport in fullscreen */
body[data-map-mode="fullscreen"] .map-viewer-wrapper,
body.map-fullscreen-active .map-viewer-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: var(--z-map-fullscreen) !important;
    background: var(--bg-primary) !important;
}

/* ===================================
   SECTION 11: INLINE MAP
   =================================== */

.map-viewer-inline,
[data-map-mode="inline"] {
    width: 100%;
    margin-block: var(--spacing-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: height var(--transition-normal) var(--easing-default);
}

/* Responsive inline heights */
@media screen and (min-width: 1025px) {
    .map-viewer-inline,
    [data-map-mode="inline"] {
        height: 500px;
        max-height: 60vh;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .map-viewer-inline,
    [data-map-mode="inline"] {
        height: 400px;
        max-height: 50vh;
    }
}

@media screen and (max-width: 767px) {
    .map-viewer-inline,
    [data-map-mode="inline"] {
        height: 300px;
        max-height: 45vh;
        border-radius: var(--radius-md);
    }
}

/* ===================================
   SECTION 12: MAP CONTAINER
   =================================== */

.map-container {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--bg-secondary);
    transition: all var(--transition-normal) var(--easing-default);
}

/* Inline mode */
.map-container[data-mode="inline"] {
    height: 500px;
    max-height: 60vh;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .map-container[data-mode="inline"] {
        height: 400px;
        max-height: 50vh;
    }
}

@media screen and (max-width: 767px) {
    .map-container[data-mode="inline"] {
        height: 300px;
        max-height: 45vh;
        border-radius: var(--radius-md);
    }
}

/* Split mode - map-container class */
.map-container[data-mode="split"] {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    height: 100vh;
    z-index: var(--z-map-split);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
}

/* Split mode - map-viewer-wrapper class (from MapViewer.jsx) */
body[data-map-mode="split"] .map-viewer-wrapper,
body.map-split-view-active .map-viewer-wrapper,
.map-viewer-wrapper[data-mode="split"] {
    position: fixed !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: var(--z-map-split) !important;
    border-radius: 0 !important;
}

/* RTL: Map on the right side */
[dir="rtl"] body[data-map-mode="split"] .map-viewer-wrapper,
body[dir="rtl"][data-map-mode="split"] .map-viewer-wrapper,
[dir="rtl"] .map-viewer-wrapper[data-mode="split"],
.map-viewer-wrapper[data-mode="split"][data-rtl="true"] {
    right: 0 !important;
    left: auto !important;
}

/* LTR: Map on the left side */
[dir="ltr"] body[data-map-mode="split"] .map-viewer-wrapper,
body[dir="ltr"][data-map-mode="split"] .map-viewer-wrapper,
body:not([dir="rtl"])[data-map-mode="split"] .map-viewer-wrapper,
[dir="ltr"] .map-viewer-wrapper[data-mode="split"],
.map-viewer-wrapper[data-mode="split"]:not([data-rtl="true"]) {
    left: 0 !important;
    right: auto !important;
}

/* Desktop split widths */
@media screen and (min-width: 1025px) {
    .map-container[data-mode="split"],
    body[data-map-mode="split"] .map-viewer-wrapper,
    .map-viewer-wrapper[data-mode="split"] {
        width: var(--map-width-desktop) !important;
    }
}

/* Tablet split widths */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .map-container[data-mode="split"],
    body[data-map-mode="split"] .map-viewer-wrapper,
    .map-viewer-wrapper[data-mode="split"] {
        width: var(--map-width-tablet) !important;
    }
}

/* Mobile split view - stacked vertically */
@media screen and (max-width: 767px) {
    .map-container[data-mode="split"],
    body[data-map-mode="split"] .map-viewer-wrapper,
    .map-viewer-wrapper[data-mode="split"] {
        width: 100% !important;
        height: var(--map-height-mobile) !important;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
        box-shadow: var(--shadow-mobile-top) !important;
    }
}

/* Fullscreen mode */
.map-container[data-mode="fullscreen"] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-map-fullscreen);
    border-radius: 0;
    animation: fullscreen-enter var(--transition-normal) var(--easing-default);
}

@keyframes fullscreen-enter {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===================================
   SECTION 13: MAP CONTROLS
   =================================== */

.map-viewer-toolbar,
.map-controls,
[class*="map-toolbar"] {
    direction: ltr;
}

/* Unified control button styling */
.map-control-btn,
.map-control-button {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    width: 34px;
    height: 34px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast) var(--easing-default);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.map-control-btn:hover,
.map-control-button:hover {
    background: var(--bg-secondary);
    transform: scale(1.05);
}

.map-control-btn:active,
.map-control-button:active {
    transform: scale(0.95);
}

.map-control-btn:focus-visible,
.map-control-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Button variants */
.map-control-btn--primary,
.map-control-button--active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-hover);
}

.map-control-btn--close,
.map-control-button--close {
    background: var(--error-color);
    color: white;
    border-color: #b91c1c;
}

.map-control-btn--close:hover,
.map-control-button--close:hover {
    background: #b91c1c;
}

/* Mobile touch-friendly sizing */
@media screen and (max-width: 767px) {
    .map-control-btn,
    .map-control-button,
    .leaflet-control-zoom a {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        font-size: 20px;
        border-radius: var(--radius-md);
    }
}

/* Touch device optimization */
@media (pointer: coarse) {
    .map-control-btn,
    .map-control-button {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
}

/* ===================================
   SECTION 14: MAP LOADING & ERROR
   =================================== */

.map-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-overlay);
    z-index: var(--z-map-controls);
}

.map-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: mapSpin 0.7s linear infinite;
}

@keyframes mapSpin {
    to { transform: rotate(360deg); }
}

.map-error-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--error-bg);
    z-index: var(--z-map-controls);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

/* ===================================
   SECTION 15: LEAFLET OVERRIDES
   =================================== */

.leaflet-container {
    direction: ltr !important;
    font-family: inherit;
}

/* Responsive popups */
@media screen and (max-width: 767px) {
    .leaflet-popup-content-wrapper {
        max-width: 250px;
        font-size: 13px;
    }

    .leaflet-popup-content {
        margin: 10px 12px;
    }
}

/* Ensure map iframe doesn't get RTL override */
[class*="MapViewer"] iframe,
.map-wrapper iframe {
    direction: ltr !important;
}

/* ===================================
   SECTION 16: RTL-AWARE POSITIONING
   Using logical properties
   =================================== */

/* RTL-aware shadows for split view */
[dir="rtl"] .map-container[data-mode="split"] {
    box-shadow: var(--shadow-split-rtl);
}

[dir="ltr"] .map-container[data-mode="split"] {
    box-shadow: var(--shadow-split);
}

/* RTL-aware control positioning */
.map-controls,
.map-control-group {
    inset-inline-start: var(--spacing-md);
    inset-inline-end: auto;
}

/* ===================================
   SECTION 17: TRANSITIONS
   =================================== */

.map-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.map-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all var(--transition-normal) var(--easing-default);
}

.map-transition-exit {
    opacity: 1;
    transform: translateY(0);
}

.map-transition-exit-active {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-normal) var(--easing-default);
}

/* Disable transitions during mode change */
body[data-map-transitioning="true"] * {
    transition-duration: 0s;
}

body[data-map-transitioning="true"] .map-container,
body[data-map-transitioning="true"] main {
    transition-duration: var(--transition-normal);
}

/* GPU acceleration for smooth animations */
.map-container,
body.map-split-view-active main,
body[data-map-mode="split"] main {
    will-change: width, height, transform;
}

.map-container:not([data-transitioning="true"]) {
    will-change: auto;
}

/* ===================================
   SECTION 18: ACCESSIBILITY
   =================================== */

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    inset-inline-start: 0;
    background: var(--accent-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: var(--z-modal);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Focus indicators */
:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .map-loading-spinner {
        animation: none;
        opacity: 0.7;
    }
}

/* ===================================
   SECTION 19: TYPING INDICATOR
   =================================== */

.typing-indicator {
    display: inline-flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
}

.typing-indicator__dot {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-indicator__dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator__dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .typing-indicator__dot {
        animation: none;
        opacity: 0.5;
    }
}

/* ===================================
   SECTION 20: MESSAGE BUBBLES
   =================================== */

/* User message styling */
[dir="rtl"] .message--user,
.message[data-role="user"] {
    background: var(--accent-color);
    color: white;
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
    max-width: 80%;
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* Assistant message styling */
[dir="rtl"] .message--assistant,
.message[data-role="assistant"] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);
    max-width: 85%;
    margin-inline-end: auto;
    margin-inline-start: 0;
}

/* System message styling */
.message--system,
.message[data-role="system"] {
    background: transparent;
    border: 1px dashed var(--border-color);
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 100%;
    margin-inline: auto;
}

/* Message metadata */
.message-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 11px;
    color: var(--text-tertiary);
    margin-block-start: var(--spacing-xs);
}

/* Message actions on hover */
.message-actions {
    opacity: 0;
    position: absolute;
    top: -12px;
    inset-inline-start: 0;
    display: flex;
    gap: var(--spacing-xs);
    transition: opacity var(--transition-fast);
}

.message:hover .message-actions {
    opacity: 1;
}

.message-action-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.message-action-btn:hover {
    background: var(--bg-secondary);
}

/* ===================================
   SECTION 21: PRINT STYLES
   =================================== */

@media print {
    .map-viewer-inline,
    [data-map-mode="inline"],
    .map-container[data-mode="inline"] {
        height: 400px;
        page-break-inside: avoid;
    }

    .map-control-btn,
    .map-controls,
    .map-control-button {
        display: none;
    }

    .map-container[data-mode="split"],
    .map-container[data-mode="fullscreen"] {
        position: static;
        width: 100%;
        height: 400px;
    }

    .domain-indicator,
    #domain-indicator,
    .thread-search,
    #thread-search {
        display: none;
    }
}

/* ===================================
   SECTION 22: UTILITY CLASSES
   =================================== */

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }

/* Spacing utilities */
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }

/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Transitions */
.transition-fast { transition: all var(--transition-fast) var(--easing-default); }
.transition-normal { transition: all var(--transition-normal) var(--easing-default); }

/* ===================================
   SIDEBAR STYLING - MODERN & FANCY
   Beautiful RTL sidebar for Arabic UI
   =================================== */

/* Sidebar container - clean dark background */
[data-sidebar="sidebar"] {
    background: rgba(28, 28, 32, 0.98) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-right: none !important;
}

/* Sidebar content area */
[data-sidebar="content"] {
    padding: 4px 0 !important;
}

/* Date/time group headers - subtle */
[data-sidebar="group"] > div:first-child,
.text-muted-foreground.text-xs {
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    padding: 8px 4px 4px 2px !important;
    margin-top: 4px !important;
}

/* Thread items container */
[data-sidebar="menu"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* Individual thread items - clean minimal style */
a[href*="/thread/"] {
    display: flex !important;
    align-items: center !important;
    padding: 7px 4px 7px 2px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
    gap: 0 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Thread item hover effect - subtle */
a[href*="/thread/"]:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Active/selected thread - minimal accent */
a[href*="/thread/"][data-active="true"],
a[href*="/thread/"].bg-accent {
    background: rgba(139, 92, 246, 0.15) !important;
    border-right: 2px solid rgb(139, 92, 246) !important;
}

/* Style the action menu icon (don't hide it) */
a[href*="/thread/"] svg {
    opacity: 0.4 !important;
    width: 16px !important;
    height: 16px !important;
}

/* Show action icon on hover */
a[href*="/thread/"]:hover svg {
    opacity: 0.8 !important;
}

/* Thread text styling - clean and compact */
a[href*="/thread/"] span,
a[href*="/thread/"] .truncate {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.3 !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Thread hover text */
a[href*="/thread/"]:hover span {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Scrollbar styling for sidebar */
[data-sidebar="content"]::-webkit-scrollbar {
    width: 6px !important;
}

[data-sidebar="content"]::-webkit-scrollbar-track {
    background: transparent !important;
}

[data-sidebar="content"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 3px !important;
}

[data-sidebar="content"]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Remove any decorative gradients */
[data-sidebar="sidebar"]::before,
[data-sidebar="sidebar"]::after {
    display: none !important;
}

/* Sidebar header/footer styling */
[data-sidebar="header"],
[data-sidebar="footer"] {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Fix sidebar list items */
nav li,
nav ul li,
[class*="sidebar"] li {
    padding-right: 0 !important;
    margin-right: 0 !important;
    list-style: none !important;
}

/* ===================================
   LOGIN PAGE LOGO FIX
   Hide broken logo on top-right of login page
   =================================== */

/* Hide broken logo image on login page */
img[alt="logo"][src*="logo"]:not([src*="nw-logo"]),
img[alt="logo"]:not([src*=".png"]):not([src*=".jpg"]):not([src*=".svg"]) {
    display: none !important;
}

/* Also target the specific broken logo pattern */
.absolute.top-4.right-4 img,
.absolute.top-4.left-4 img {
    display: none !important;
}

/* ===================================
   LOGIN PAGE - RTL & RESPONSIVE FIXES
   =================================== */

/* Password eye icon - RTL position fix */
[dir="rtl"] .relative input[type="password"] + button,
[dir="rtl"] .relative input[type="password"] ~ button,
[dir="rtl"] input[type="password"] + button[type="button"],
[dir="rtl"] .password-toggle,
[dir="rtl"] button[aria-label*="password"],
[dir="rtl"] button[aria-label*="Show"],
[dir="rtl"] button[aria-label*="Hide"] {
    right: auto !important;
    left: 0.75rem !important;
}

/* Password input padding adjustment for RTL */
[dir="rtl"] input[type="password"] {
    padding-right: 1rem !important;
    padding-left: 2.5rem !important;
}

/* Generic eye icon button in password fields - RTL */
[dir="rtl"] .relative > button:last-child,
[dir="rtl"] div[class*="password"] button {
    right: auto !important;
    left: 0.5rem !important;
}

/* ===================================
   LOGIN PAGE - RESPONSIVE DESIGN
   =================================== */

/* Login container - responsive */
.login-container,
[class*="login"],
form[class*="auth"],
.auth-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 1rem;
}

/* Login page wrapper - center content */
[data-testid="login-page"],
.login-page,
main > div:has(form) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

/* Login logo - responsive sizing */
.login-logo,
[class*="login"] img,
img[alt*="logo"],
img[src*="modrik-logo"] {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin: 0 auto 2rem;
    display: block;
}

/* Form inputs - full width on mobile */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

/* Mobile responsive - small screens */
@media (max-width: 480px) {
    .login-container,
    [class*="login"],
    form {
        padding: 0.75rem;
        max-width: 100%;
    }

    .login-logo,
    [class*="login"] img,
    img[alt*="logo"],
    img[src*="modrik-logo"] {
        max-width: 200px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"] {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    button[type="submit"] {
        width: 100%;
        padding: 0.875rem 1rem;
    }
}

/* Tablet responsive */
@media (min-width: 481px) and (max-width: 768px) {
    .login-container,
    [class*="login"] {
        max-width: 380px;
    }

    .login-logo,
    img[src*="modrik-logo"] {
        max-width: 250px;
    }
}

/* Large screens */
@media (min-width: 769px) {
    .login-container,
    [class*="login"] {
        max-width: 420px;
    }

    .login-logo,
    img[src*="modrik-logo"] {
        max-width: 300px;
    }
}

/* Fix login form layout */
form {
    width: 100%;
}

/* Button styling - responsive */
button[type="submit"],
.login-button,
.submit-button {
    width: 100%;
    min-height: 44px; /* Touch-friendly */
}

/* Error messages - responsive */
.error-message,
[class*="error"],
.text-red-500 {
    font-size: 0.875rem;
    text-align: center;
    margin-top: 0.5rem;
}

/* =============================================
   LOGIN PAGE - CUSTOM LOGO (Robust Solution)
   Since Chainlit's login_page_image is disabled,
   we add the logo ourselves with full control
   ============================================= */

/* Add logo on the LEFT panel using pseudo-element */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0 !important;
    right: auto !important;
    width: 50vw;
    height: 100vh;
    background-image: url('/public/modrik-logo.png');
    background-size: 65% auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #4a4a4a;
    z-index: 1;
    pointer-events: none;
}

/* For RTL: ensure left positioning works */
[dir="rtl"] body::before,
html[dir="rtl"] body::before {
    left: 0 !important;
    right: auto !important;
}

/* Hide when user is logged in (chat interface visible) */
body:has(.MuiDrawer-root)::before,
body:has([class*="sidebar"])::before,
body:has([data-testid="chat"])::before {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body::before {
        width: 100vw;
        height: 40vh;
        background-size: 50% auto;
    }
}