/* ═══════════════════════════════════════════ NemoChat — RTL Support (ar, fa, he, ur) Applied via [dir="rtl"] on ═══════════════════════════════════════════ */ /* ── Basis: Text-Alignment ── */ [dir="rtl"] body, [dir="rtl"] .screen, [dir="rtl"] .welcome, [dir="rtl"] .dialog { text-align: right; } [dir="rtl"] .welcome { text-align: center; } /* Welcome bleibt zentriert */ /* ── Flexbox Direction umkehren ── */ [dir="rtl"] .header, [dir="rtl"] .chat-item, [dir="rtl"] .input-row, [dir="rtl"] .bottom-nav, [dir="rtl"] .members-bar, [dir="rtl"] .input-actions-menu { direction: rtl; } /* ── Header ── */ [dir="rtl"] .header { flex-direction: row-reverse; } [dir="rtl"] .header-title { text-align: right; } /* ── Chat-Liste ── */ [dir="rtl"] .chat-item { flex-direction: row-reverse; } [dir="rtl"] .chat-info { text-align: right; } [dir="rtl"] .chat-meta { align-items: flex-start; } [dir="rtl"] .chat-name, [dir="rtl"] .chat-last { text-align: right; } /* ── Nachrichten-Blasen ── */ [dir="rtl"] .msg.self { align-self: flex-start; } [dir="rtl"] .msg.other { align-self: flex-end; } [dir="rtl"] .msg.self .msg-bubble { border-bottom-right-radius: 16px; border-bottom-left-radius: 4px; } [dir="rtl"] .msg.other .msg-bubble { border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; } [dir="rtl"] .msg.self .msg-time { text-align: left; } [dir="rtl"] .msg-from { text-align: right; } /* ── Input-Leiste ── */ [dir="rtl"] .input-row { flex-direction: row-reverse; } [dir="rtl"] .input-field { text-align: right; direction: rtl; } /* ── Bottom Navigation ── */ [dir="rtl"] .bottom-nav { flex-direction: row-reverse; } /* ── Dialoge ── */ [dir="rtl"] .dialog h3 { text-align: right; } [dir="rtl"] .dialog p { text-align: right; } [dir="rtl"] .dialog-input { text-align: right; direction: rtl; } /* ── Settings-Sektionen ── */ [dir="rtl"] .sett-section-header { flex-direction: row-reverse; } [dir="rtl"] .sett-arrow { transform: scaleX(-1); } /* ── Call Overlay ── */ [dir="rtl"] .nemo-call-overlay { direction: rtl; } [dir="rtl"] .nemo-call-overlay__btns { flex-direction: row-reverse; } /* ── Profil / Contact Items ── */ [dir="rtl"] .contact-item { flex-direction: row-reverse; } [dir="rtl"] .contact-info { text-align: right; } /* ── Medien-Vorschau ── */ [dir="rtl"] .media-preview-close { left: 18px; right: auto; } /* ── Toast ── */ [dir="rtl"] .toast { direction: rtl; } /* ── E2E Badge ── */ [dir="rtl"] .e2e-badge { direction: rtl; } /* ── Members Bar ── */ [dir="rtl"] .members-bar { flex-direction: row-reverse; } /* ── Gallery Grid ── */ [dir="rtl"] .gallery-grid { direction: rtl; } /* ── Lang Dropdown ── */ .nemo-lang-dropdown { position: relative; } .nemo-lang-trigger { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #e0e0e0; font-size: 13px; cursor: pointer; font-family: inherit; } .nemo-lang-flag { font-size: 16px; } .nemo-lang-code { font-weight: 600; font-size: 12px; } .nemo-lang-arrow { font-size: 10px; color: #8899aa; } .nemo-lang-menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #253648; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; max-height: 320px; overflow-y: auto; z-index: 9999; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } [dir="rtl"] .nemo-lang-menu { left: auto; right: 0; } .nemo-lang-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: none; background: none; color: #e0e0e0; font-size: 13px; cursor: pointer; font-family: inherit; text-align: left; } [dir="rtl"] .nemo-lang-item { text-align: right; flex-direction: row-reverse; } .nemo-lang-item:hover { background: rgba(42,191,255,0.1); } .nemo-lang-item.active { background: rgba(42,191,255,0.15); color: #2ABFFF; }