/* ════════════════════════════════════════════════════════════
   CraftCord AI — RTL (Arabic) overrides
   Loaded on every page; every rule is gated behind [dir="rtl"] so this file
   is completely inert for LTR languages. Flex/grid flows flip automatically
   with the dir attribute — these rules cover the physical (left/right)
   properties, fixed/absolute anchors, slide directions, and mirrored icons.
   ════════════════════════════════════════════════════════════ */

/* ── Typography: Arabic-first font stack ── */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family: 'Tajawal', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: 0;
}

/* Keep code/ids/tokens left-to-right even inside RTL text */
[dir="rtl"] code,
[dir="rtl"] .sub-row__val,
[dir="rtl"] .botmgr-token__id,
[dir="rtl"] .botmgr-token__input input,
[dir="rtl"] .cbot__token input,
[dir="rtl"] .aib-chat__usage {
  direction: ltr;
  unicode-bidi: embed;
}

/* ── Toasts: stack on the left, slide in from the left ── */
[dir="rtl"] .toast-stack { right: auto; left: 1.5rem; }
[dir="rtl"] .toast {
  padding-right: 1.05rem; padding-left: 2.7rem;
  transform: translateX(-120%) scale(0.96);
}
[dir="rtl"] .toast.is-visible { transform: translateX(0) scale(1); }
[dir="rtl"] .toast::before { left: auto; right: 0; }
[dir="rtl"] .toast::after,
[dir="rtl"] .toast--success::after,
[dir="rtl"] .toast--error::after { transform: scaleX(-1); }
[dir="rtl"] .toast__close { right: auto; left: 0.55rem; }
[dir="rtl"] .toast__bar { left: auto; right: 0; }
[dir="rtl"] .toast.is-hiding { transform: translateX(-35%) scale(0.94); padding-top: 0; padding-bottom: 0; }

/* ── Landing page ── */
[dir="rtl"] .hero__avatar { margin-left: 0; margin-right: -10px; }
[dir="rtl"] .hero__avatar:first-child { margin-right: 0; }
[dir="rtl"] .hero__subtitle { margin-left: auto; margin-right: auto; }
[dir="rtl"] .mockup__title { margin-left: 0; margin-right: 0.6rem; }
[dir="rtl"] .mockup__status { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mockup__sidebar { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .step__num { right: auto; left: 1.2rem; }
[dir="rtl"] .plan__badge { right: auto; left: 1.3rem; }
[dir="rtl"] .faq__q { text-align: right; }
[dir="rtl"] .legal ul { padding-left: 0; padding-right: 1.2rem; }
[dir="rtl"] .legal { text-align: right; }
/* Billing switch knob travels the other way */
[dir="rtl"] .switch__knob { left: auto; right: 3px; }
[dir="rtl"] .switch.is-on .switch__knob { transform: translateX(-24px); }

/* Subscribe modal: the summary column divider flips */
[dir="rtl"] .sub__right { border-left: none; border-right: 1px solid var(--border); }
@media (max-width: 860px) {
  [dir="rtl"] .sub__right { border-right: none; border-top: 1px solid var(--border); }
}

/* Landing pricing "see details" arrow mirrors */
[dir="rtl"] .pricing__more-link svg { transform: scaleX(-1); }
[dir="rtl"] .pricing__more-link:hover svg { transform: translateX(-3px) scaleX(-1); }

/* ── Dashboard shell ── */
[dir="rtl"] .sidebar__link.is-active::before { left: auto; right: 0; }
/* Free-trial card: glow corner + button arrow mirror */
[dir="rtl"] .sidebar__trial-glow { right: auto; left: -30%; }
[dir="rtl"] .sidebar__trial-btn svg { transform: scaleX(-1); }
[dir="rtl"] .sidebar__trial-btn:hover svg { transform: translateX(-3px) scaleX(-1); }
[dir="rtl"] .ai-cta { text-align: right; }
[dir="rtl"] .ai-cta:hover .ai-cta__btn svg { transform: translateX(-3px) scaleX(-1); }
[dir="rtl"] .ai-cta__btn svg { transform: scaleX(-1); }
[dir="rtl"] .console__time { margin-right: 0; margin-left: 0.4rem; }
[dir="rtl"] .console { text-align: right; }

/* Create-bot modal: right column divider flips */
[dir="rtl"] .cbot__right { border-left: none; border-right: 1px solid var(--border); }
@media (max-width: 860px) {
  [dir="rtl"] .cbot__right { border-right: none; border-top: 1px solid var(--border); }
}
[dir="rtl"] .cbot__token .input { padding-right: 0.9rem; padding-left: 3rem; }
[dir="rtl"] .cbot__eye { right: auto; left: 0.5rem; }

/* Bot-management token field (mirrors the inline page styles) */
[dir="rtl"] .botmgr-token__input input { padding: 0.65rem 0.85rem 0.65rem 2.8rem; }
[dir="rtl"] .botmgr-token__eye { right: auto; left: 0.5rem; }
[dir="rtl"] .botmgr-token__foot { justify-content: flex-start; }

/* Mobile dashboard sidebar drawer slides from the right */
@media (max-width: 860px) {
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .app.is-nav-open .sidebar,
  [dir="rtl"] .sidebar.is-open { transform: translateX(0); }
}

/* ── AI Command Builder ── */
/* The "back" arrow no longer needs mirroring — RTL flips it naturally */
[dir="rtl"] .aib-side__back { transform: none; }
[dir="rtl"] .aib-side__back:hover { transform: translateX(-2px); }
[dir="rtl"] .aib-list { padding-right: 0; padding-left: 0.2rem; }
[dir="rtl"] .aib-settings-btn__dot { margin-left: 0; margin-right: auto; }
[dir="rtl"] .aib-select select { padding-right: 0.9rem; padding-left: 2.4rem; }
[dir="rtl"] .aib-select svg { right: auto; left: 0.9rem; }
[dir="rtl"] .aib-dbsetting__head svg { margin-right: 0; margin-left: 0.3rem; }
[dir="rtl"] .aib-dbsetting__locked a { margin-left: 0; margin-right: auto; }

/* Desktop model dropdown anchors to the inline-start edge instead */
[dir="rtl"] .aib-modelsel__menu { right: auto; left: 0; transform-origin: top left; }

@media (max-width: 860px) {
  /* Builder sidebar drawer slides from the right */
  [dir="rtl"] .aib-side { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .aib.is-side-open .aib-side { transform: none; }
  [dir="rtl"] .aib-side-toggle { left: auto; right: 0.85rem; }
  /* Chat header: keep clearance for the floating toggle on the right */
  [dir="rtl"] .aib-chat__head { padding: 0.85rem 3.8rem 0.85rem 1rem; }
}

/* ── Footer / language selector ── */
[dir="rtl"] .footer__bar-links { flex-direction: row-reverse; }

/* ── Generic helpers ── */
[dir="rtl"] .pricing-back svg,
[dir="rtl"] .app__back svg { transform: scaleX(-1); }

/* Run Bot CTA — mirror the arrow and its hover slide */
[dir="rtl"] .cbot__run-go svg { transform: scaleX(-1); }
[dir="rtl"] .cbot__run:hover .cbot__run-go { transform: translateX(-4px); }