محادثة دعم

<span class="rtlok support-chat" data-ar="RTL مُختبَر" data-en="RTL verified">RTL مُختبَر</span>
        <div class="mini chat">
          <div class="bub you" data-ar="أهلًا، كيف أضيف موظفًا جديدًا؟" data-en="Hi, how do I add a new employee?">أهلًا، كيف أضيف موظفًا جديدًا؟</div>
          <div class="bub me" data-ar="من لوحة الموارد البشرية ← إضافة موظف" data-en="From HR dashboard → Add employee">من لوحة الموارد البشرية ← إضافة موظف</div>
          <div class="bub you" data-ar="شكرًا، وجدتها ✓" data-en="Thanks, found it ✓">شكرًا، وجدتها ✓</div>
          <div class="bub me typing"><i></i><i></i><i></i></div>
        </div>

/* pt-scoped */
/* محادثة — الفقاعات تنتقل للجهة الصحيحة تلقائيًا */
.support-chat .chat{width:100%;display:flex;flex-direction:column;gap:6px}
.support-chat .bub{max-width:76%;padding:7px 10px;font-size:9px;line-height:1.5;
  border-radius:var(--pt-radius-md)}
.support-chat .bub.me{margin-inline-start:auto;background:var(--pt-accent);color:var(--pt-on-accent);
  border-end-end-radius:var(--pt-radius-xs)}
.support-chat .bub.you{margin-inline-end:auto;background:var(--pt-surface);
  border:1px solid var(--pt-border-default);border-end-start-radius:var(--pt-radius-xs)}
.support-chat .chat .typing{display:flex;gap:3px;align-items:center}
.support-chat .chat .typing i{width:4px;height:4px;border-radius:50%;background:var(--pt-text-muted);
  animation:blip 1.2s infinite}
.support-chat .chat .typing i:nth-child(2){animation-delay:.15s}
.support-chat .chat .typing i:nth-child(3){animation-delay:.3s}

# Support Chat

**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.

**Goal:** Support Chat — Bubbles swap sides

**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.

**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.

**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.

**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.

**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.

**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.

**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.

**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.