/* bidi.css — Arabic and English in one sentence, read in the right order.
 *
 * WHAT WAS WRONG. The dashboard is laid out left-to-right, so every block of
 * text in it has an LTR base direction. Unicode's own algorithm then orders a
 * mixed paragraph around that base: an Arabic sentence with a Latin handle,
 * a product name or a URL in it comes out with its pieces in the wrong places
 * and its punctuation at the wrong end. The words are all there and the
 * sentence is unreadable, which is what the owner's agents were looking at.
 *
 * THE FIX IS ONE PROPERTY, AND IT IS NOT `direction: rtl`. Forcing RTL would
 * break every English sentence in exactly the same way, and a support inbox
 * has both. `unicode-bidi: plaintext` applies the Unicode rule that email and
 * chat clients use: each paragraph takes its direction from its OWN first
 * strong character. An Arabic message reads right-to-left, the English one
 * under it reads left-to-right, and neither is told which to be.
 *
 * `text-align: start` belongs with it: under `plaintext` the start edge is the
 * paragraph's own, so each message also sits on the correct side.
 *
 * WHY IT IS A LIST AND NOT `*`. Applied to everything it would also re-align
 * labels, counters and buttons whose text happens to be Arabic, which is a
 * layout change nobody asked for. Only what holds somebody's own words is
 * named here: messages, previews, names, notes, and the CRM screens that quote
 * a customer back.
 */

/* ---- the message itself --------------------------------------------------
   .prose-bubble is the body of every bubble - incoming, outgoing, private
   note, and the summaries Captain writes, which is where this was first seen.
   The children are named too: the property applies per paragraph, so a
   multi-line message needs each line to get it. */
.prose-bubble,
.prose-bubble p,
.prose-bubble li,
.prose-bubble blockquote,
.prose-bubble h1, .prose-bubble h2, .prose-bubble h3,
.message-text,
.message-text p,
.message-text__content,
[class~="left-bubble"] .prose,
[class~="right-bubble"] .prose {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---- the conversation list ----------------------------------------------
   The preview line is one line of the customer's own text, and the name is
   often a shop's Arabic name with a Latin handle beside it. */
.conversations-list .conversation h4,
.conversations-list .conversation .overflow-hidden.text-ellipsis,
.conversation--user,
.conversation--message,
.conversation--details .conversation--message {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---- what the agent is typing -------------------------------------------
   Same rule while it is still being written, so what they see as they type is
   what the customer will read. */
.reply-box textarea,
.reply-box .ProseMirror,
.reply-box .ProseMirror p,
textarea.input {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---- the panel beside the conversation ----------------------------------
   Notes, the customer's own fields, and the earlier conversations we show. */
[data-crm-panel] .crm-note__text,
[data-crm-panel] .crm-also__where,
[data-crm-panel] .crm-also__sub,
[data-crm-panel] .crm-idcard__channel,
.crm-hist__where,
.crm-hist__text {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---- our own screens, wherever they quote a customer --------------------- */
.ovx-attn-copy strong,
.ovx-attn-copy span,
.crm-ms__name, .crm-ms__text,
.crm-pb__card-title, .crm-pb__card-sub,
.crm-cf__name, .crm-cf__line,
.crm-exec__rowname, .crm-exec__text,
.crm-out__name, .crm-out__draft,
.crm-lead__name, .crm-lead__text {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---- Copilot's answers (copilot-bidi.js gives each block its direction) ---
   Aligned to the block's own start: Arabic on the right, English on the left.
   Lists put their bullets on the side the text starts; English runs inside
   Arabic lines, and code, read left-to-right without moving the Arabic
   around them. */
[data-crm-bidi],
[data-crm-bidi] [dir] {
  text-align: start;
}
[data-crm-bidi] ul[dir],
[data-crm-bidi] ol[dir] {
  padding-inline-start: 1.4em;
  padding-inline-end: 0;
}
[data-crm-bidi] ul[dir="rtl"],
[data-crm-bidi] ol[dir="rtl"] {
  padding-left: 0;
  padding-right: 1.4em;
}
[data-crm-bidi] bdi.crm-ltr,
[data-crm-bidi] code {
  direction: ltr;
  unicode-bidi: isolate;
}
[data-crm-bidi] table[dir="rtl"] th,
[data-crm-bidi] table[dir="rtl"] td {
  text-align: right;
}
form textarea[dir="auto"] {
  text-align: start;
  unicode-bidi: plaintext;
}