/**
 * @file        asan-rtl.css
 * @path        assets/css/asan-rtl.css
 * @role        Layout — RTL-Specific Overrides
 * @description Supplementary overrides for right-to-left layouts that cannot
 *              be fully handled by CSS logical properties alone. Covers icon
 *              mirroring, directional SVG backgrounds, select dropdowns,
 *              third-party widget integration, specific border-radius corners,
 *              animation directions, and WordPress admin RTL adjustments.
 *              Enqueued AFTER all other Asan AI stylesheets.
 *
 * @author      Sirvan Alirezaei
 * @copyright   © Sirvan Alirezaei. All rights reserved.
 * @version     4.0.0
 * @since       2025-01
 * @status      Production-critical
 *
 * @note        The core design system uses CSS logical properties
 *              (inline-start, block-end, etc.) for most RTL handling.
 *              This file only contains overrides that cannot use logical
 *              properties — such as SVG transforms, third-party CSS, and
 *              specific visual mirroring requirements.
 */


/* ==========================================================================
   1. DIRECTIONAL ICON MIRRORING
   ========================================================================== */

/* Icons that should be mirrored in RTL:
   - Arrows (forward/back, send)
   - Chevrons (expand/collapse directional)
   - External link indicators
   - Navigation breadcrumb separators
*/

[dir="rtl"] .asan-ai-icon--directional,
[dir="rtl"] .asan-ai-icon--arrow,
[dir="rtl"] .asan-ai-icon--chevron-inline {
  transform: scaleX(-1);
}

[dir="rtl"] .asan-ai-breadcrumbs__separator {
  transform: scaleX(-1);
}

/* Do NOT mirror these icons in RTL:
   - Checkmarks
   - Plus/minus
   - Close (X)
   - Undo/redo (they represent timeline, not direction)
   - Refresh/sync
   - Download/upload (vertical)
*/


/* ==========================================================================
   2. SELECT DROPDOWN ARROW POSITION
   ========================================================================== */

/* Already handled inline in asan-components.css with RTL selector,
   but providing a reinforcement for specificity edge cases */

[dir="rtl"] .asan-ai-select {
  background-position: 16px center;
  padding-right: 16px;
  padding-left: 40px;
}


/* ==========================================================================
   3. PASSWORD TOGGLE POSITION
   ========================================================================== */

[dir="rtl"] .asan-ai-input-password__toggle {
  right: auto;
  left: 12px;
}


/* ==========================================================================
   4. TOGGLE SWITCH — Thumb Direction
   ========================================================================== */

/* Logical property transform doesn't flip translateX.
   The component CSS handles this, but this reinforces for specificity. */

[dir="rtl"] .asan-ai-toggle__input:checked + .asan-ai-toggle__track .asan-ai-toggle__thumb {
  transform: translateX(-18px);
}

[dir="rtl"] .asan-ai-toggle__input:not(:checked) + .asan-ai-toggle__track .asan-ai-toggle__thumb {
  transform: translateX(0);
}


/* ==========================================================================
   5. TOOLTIP ARROW & POSITION
   ========================================================================== */

[dir="rtl"] .asan-ai-tooltip__content {
  transform: translateX(50%);
}

[dir="rtl"] .asan-ai-tooltip__content::after {
  transform: translateX(50%);
}


/* ==========================================================================
   6. CONTEXT MENU DROPDOWN POSITION
   ========================================================================== */

[dir="rtl"] .asan-ai-context-menu__dropdown {
  right: auto;
  left: 0;
}


/* ==========================================================================
   7. CHATBOT — Message Bubble Corners
   ========================================================================== */

/* User message: sharp corner should be on the sending side */
[dir="rtl"] .asan-ai-chatbot-message--user .asan-ai-chatbot-message__bubble {
  border-radius: 14px 14px 14px 4px;
}

/* AI message: sharp corner on the receiving side */
[dir="rtl"] .asan-ai-chatbot-message--ai .asan-ai-chatbot-message__bubble {
  border-radius: 14px 14px 4px 14px;
}


/* ==========================================================================
   8. CHATBOT — Send Button Arrow
   ========================================================================== */

[dir="rtl"] .asan-ai-chatbot-input__send svg {
  transform: scaleX(-1);
}


/* ==========================================================================
   9. CHATBOT — Window Transform Origin
   ========================================================================== */

[dir="rtl"] .asan-ai-chatbot-window {
  transform-origin: bottom left;
}


/* ==========================================================================
   10. CHATBOT — Launcher Position
   ========================================================================== */

/* Launcher defaults use inset-inline-end, which is correct.
   But some themes override with explicit left/right — reinforce here. */

[dir="rtl"] .asan-ai-chatbot-launcher {
  right: auto;
  left: 24px;
}

[dir="rtl"] .asan-ai-chatbot-window {
  right: auto;
  left: 24px;
}

@media (max-width: 480px) {
  [dir="rtl"] .asan-ai-chatbot-launcher {
    left: 16px;
    right: auto;
  }

  [dir="rtl"] .asan-ai-chatbot-window {
    left: 0;
    right: 0;
  }
}


/* ==========================================================================
   11. CODE BLOCKS — Always LTR
   ========================================================================== */

[dir="rtl"] .asan-ai-chatbot-message__bubble pre,
[dir="rtl"] .asan-ai-chatbot-message__bubble code,
[dir="rtl"] .asan-ai-chatbot-code-header,
[dir="rtl"] .asan-ai-mono,
[dir="rtl"] .asan-ai-table__mono {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}


/* ==========================================================================
   12. LICENSE KEY INPUT — Always LTR
   ========================================================================== */

[dir="rtl"] .asan-ai-license__activation-form .asan-ai-input {
  direction: ltr;
  text-align: left;
}


/* ==========================================================================
   13. API KEY INPUTS — Always LTR
   ========================================================================== */

[dir="rtl"] .asan-ai-provider-card .asan-ai-input[type="password"],
[dir="rtl"] .asan-ai-provider-card .asan-ai-input[type="text"][data-api-key] {
  direction: ltr;
  text-align: left;
}


/* ==========================================================================
   14. NUMBERS & STATS — LTR for readability
   ========================================================================== */

[dir="rtl"] .asan-ai-stat__value {
  direction: ltr;
  unicode-bidi: embed;
}

[dir="rtl"] .asan-ai-stat__trend {
  direction: ltr;
  unicode-bidi: embed;
}


/* ==========================================================================
   15. TOAST NOTIFICATIONS — Position
   ========================================================================== */

[dir="rtl"] .asan-ai-toast-container {
  right: auto;
  left: 24px;
}

[dir="rtl"] .asan-ai-toast {
  animation-name: asan-ai-slide-down-rtl;
}

@keyframes asan-ai-slide-down-rtl {
  from {
    opacity: 0;
    transform: translateY(-8px) translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}


/* ==========================================================================
   16. LANGUAGE SWITCHER DROPDOWN
   ========================================================================== */

[dir="rtl"] .asan-ai-lang-switcher__dropdown {
  right: auto;
  left: 0;
}


/* ==========================================================================
   17. SETTINGS ROW — Label alignment
   ========================================================================== */

[dir="rtl"] .asan-ai-settings__row {
  text-align: right;
}


/* ==========================================================================
   18. SIDEBAR NAV — Active indicator
   ========================================================================== */

/* If using a left-border active indicator (optional enhancement),
   flip to right border in RTL */

[dir="rtl"] .asan-ai-sidebar__nav-item--active {
  border-right: 3px solid var(--asan-accent, #007aff);
  border-left: none;
}

/* LTR version */
[dir="ltr"] .asan-ai-sidebar__nav-item--active {
  border-left: 3px solid var(--asan-accent, #007aff);
  border-right: none;
}


/* ==========================================================================
   19. PROGRESS BAR — Direction
   ========================================================================== */

[dir="rtl"] .asan-ai-progress-bar__fill {
  transform-origin: right center;
}

[dir="ltr"] .asan-ai-progress-bar__fill {
  transform-origin: left center;
}


/* ==========================================================================
   20. TABLE — Sort indicators
   ========================================================================== */

[dir="rtl"] .asan-ai-table th[data-sort]::after {
  margin-right: 6px;
  margin-left: 0;
}


/* ==========================================================================
   21. FORM FIELD — Required asterisk position
   ========================================================================== */

/* In RTL, the asterisk naturally appears to the left of text.
   No override needed as ::after works correctly in both directions. */


/* ==========================================================================
   22. WORDPRESS ADMIN RTL ADJUSTMENTS
   ========================================================================== */

/* WordPress admin sidebar pushes content — ensure our layout adapts */

body.rtl #wpbody-content .asan-ai-wrap {
  margin-right: 0;
  margin-left: 0;
}

body.rtl .asan-ai-page-header {
  text-align: right;
}

/* WP admin notices inside our wrap */
body.rtl #wpbody-content .asan-ai-update-notice {
  text-align: right;
}


/* ==========================================================================
   23. MODAL — Close button position
   ========================================================================== */

/* Close button should stay in the far corner — logical property handles this,
   but some absolute-positioned modals need explicit reinforcement */

/* [dir="rtl"] .asan-ai-modal__close — no override needed; handled by flex layout */


/* ==========================================================================
   24. ANIMATION DIRECTION OVERRIDES
   ========================================================================== */

/* Slide animations that have directional movement */

[dir="rtl"] .asan-ai-animate-slide-in {
  animation-name: asan-ai-slide-in-rtl;
}

@keyframes asan-ai-slide-in-rtl {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* LTR version for explicit directional slides */
[dir="ltr"] .asan-ai-animate-slide-in {
  animation-name: asan-ai-slide-in-ltr;
}

@keyframes asan-ai-slide-in-ltr {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ==========================================================================
   25. PRINT — RTL text direction preservation
   ========================================================================== */

@media print {
  [dir="rtl"] .asan-ai-wrap {
    direction: rtl;
    text-align: right;
  }

  [dir="rtl"] .asan-ai-wrap code,
  [dir="rtl"] .asan-ai-wrap pre {
    direction: ltr;
    text-align: left;
  }
}