/* ── RTL mirror rules — Phase 2 ──────────────────────────────────────────
   Scaffold for bilingual (Arabic / English) support.
   Activate by setting <html dir="rtl" lang="ar">. The Arabic font stack
   (IBM Plex Sans Arabic) is applied automatically when dir="rtl".
   Margin/padding flips use logical properties where possible so modern
   components work out of the box; legacy rules are mirrored below.
   ──────────────────────────────────────────────────────────────────────── */

html[dir="rtl"] body {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .font-display,
html[dir="rtl"] .display,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  font-family: var(--font-arabic);
}

/* Layout — sidebar mirror */
html[dir="rtl"] .app-shell { flex-direction: row-reverse; }
html[dir="rtl"] .sidebar { border-left: 1px solid rgba(255,255,255,0.08); border-right: none; }

/* Flip icon-only directional affordances (chevrons, arrows used as "back") */
html[dir="rtl"] .icon-flip,
html[dir="rtl"] [data-lucide="arrow-left"],
html[dir="rtl"] [data-lucide="arrow-right"],
html[dir="rtl"] [data-lucide="chevron-left"],
html[dir="rtl"] [data-lucide="chevron-right"] {
  transform: scaleX(-1);
}

/* Live interview transcript — per-turn direction override.
   Each transcript line should carry data-lang="ar" or data-lang="en"
   (set by the WebSocket handler based on STT language detection). */
.transcript-line { unicode-bidi: plaintext; }
.transcript-line[data-lang="ar"] { direction: rtl; text-align: right; font-family: var(--font-arabic); }
.transcript-line[data-lang="en"] { direction: ltr; text-align: left;  font-family: var(--font-body); }

/* Gap/margin helpers — flip physical to logical when possible */
html[dir="rtl"] .ml-auto { margin-left: initial; margin-inline-start: auto; }
html[dir="rtl"] .mr-auto { margin-right: initial; margin-inline-end: auto; }

/* Smooth transition when toggling direction at runtime */
html.dir-transition,
html.dir-transition body,
html.dir-transition .app-shell {
  transition: background var(--dur-med) var(--ease-smooth);
}

/* Language toggle button helper (used in header of new pages) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  color: var(--text-dark-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth);
}
.lang-toggle:hover { background: var(--glass-bg-strong); }