/*
 * KENNTI Support OS — RTL / BiDi fix for Chatwoot v4.17.0
 * Paste into: Settings -> Account -> Custom CSS.
 *
 * PROVENANCE: the class/attribute names below were read from Chatwoot's own
 * open-source frontend (github.com/chatwoot/chatwoot, `develop` branch,
 * app/javascript/dashboard/components-next/message/* and
 * dashboard/components/widgets/conversation/*, checked 2026-09-15) — NOT from
 * inspecting the live inbox.kennti.com DOM, which this suite is forbidden to
 * call. Each rule below says "confirmed" (read directly in that source) or
 * "defensive" (no stable hook exists in that source; a broad/structural
 * selector is used on purpose so the rule degrades safely if the markup
 * shifts). VISUAL_NOT_VERIFIED — this needs a real look at inbox.kennti.com
 * after pasting, from Tarek or a browser pass, before it's called done.
 *
 * Problem this file fixes: Chatwoot's own dashboard IS already RTL-aware for
 * its OWN chrome (Tailwind `ltr:`/`rtl:` utility pairs throughout the
 * component tree) — but that only mirrors LAYOUT. It does nothing for the
 * DIRECTION OF MESSAGE CONTENT ITSELF: a German reply typed inside an
 * Arabic-locale account (`#app[dir="rtl"]`) still inherits `direction: rtl`
 * from its container, so Latin words, phone numbers, order numbers and dates
 * embedded in Arabic text get visually reordered or truncated from the wrong
 * side. The fix is `unicode-bidi: plaintext`, which makes each block resolve
 * its OWN paragraph direction from its first strong character (UAX #9),
 * regardless of the ambient UI direction.
 */

/* ----------------------------------------------------------------------
 * 1. Message bubble content — confirmed: `<span class="prose prose-bubble">`
 *    in bubbles/Text/FormattedContent.vue wraps every rendered message body
 *    (incoming, outgoing, and private notes all go through this component).
 *    This is the single most important rule in this file.
 * -------------------------------------------------------------------- */
.prose-bubble {
  /* Fallback-then-modern-value pattern: `isolate` runs first for any engine
     that does not recognise `plaintext` as a unicode-bidi value (that
     declaration is simply invalid there and dropped, leaving `isolate` in
     effect); every current evergreen browser supports `plaintext` and the
     second declaration wins, resolving direction from the MESSAGE'S OWN
     first strong character rather than the surrounding Arabic/RTL shell —
     this is what stops German/English text from being visually reordered
     inside an Arabic account, and vice versa. */
  unicode-bidi: isolate;
  unicode-bidi: plaintext;
  /* "start" instead of "left"/"right" so it still follows CSS `direction`
     for the (rarer) case of a pure-RTL message rendered as a whole block. */
  text-align: start;
}

/* Long unbroken tokens (WhatsApp numbers, order codes, tracking links) must
 * never be sliced by the wrong-direction word-wrap algorithm. Confirmed
 * container: the same .prose-bubble span. */
.prose-bubble {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ----------------------------------------------------------------------
 * 2. Links, inline code and time-like tokens inside a message — DEFENSIVE.
 *    Chatwoot's MessageFormatter does not wrap plain phone/order numbers in
 *    a <bdi>-equivalent tag, so true per-substring isolation of an arbitrary
 *    "049 176 12345678" embedded mid-sentence is out of CSS's reach (it
 *    needs a wrapping element, which only the message-formatter can add).
 *    What CSS CAN do: force left-to-right, isolated rendering for the
 *    token types that DO get their own element — links (order/tracking
 *    URLs) and any future <bdi>/<time>/<code> the formatter emits — so at
 *    least those never scramble. This is the honest limit of a CSS-only fix.
 * -------------------------------------------------------------------- */
.prose-bubble a,
.prose-bubble code,
.prose-bubble time,
.prose-bubble bdi {
  unicode-bidi: isolate;
  direction: ltr;
  /* underline/color already come from Chatwoot's own prose theme; only
     direction is touched here. */
}

/* ----------------------------------------------------------------------
 * 3. Message row / bubble container — confirmed classes:
 *    `.message-bubble-container` (Message.vue root), `.left-bubble` /
 *    `.right-bubble` (Base.vue orientation classes on the bubble itself).
 *    These already get correct LTR/RTL corner-rounding from Chatwoot's own
 *    `ltr:`/`rtl:` Tailwind pairs — the only gap is making sure the bubble
 *    can grow to fit isolated content without clipping it.
 * -------------------------------------------------------------------- */
.message-bubble-container .left-bubble,
.message-bubble-container .right-bubble {
  max-width: 100%;
  overflow: hidden; /* clip the bubble's own rounded corners, not its text —
                        .prose-bubble above already prevents mid-token cuts. */
}

/* ----------------------------------------------------------------------
 * 4. Contact name — confirmed class `.conversation--user`, applied to the
 *    <h4> in ConversationCard.vue (conversation list) and reused by the
 *    same class name in the conversation header. An Arabic contact name
 *    inside the LTR list-row layout (or a German name inside an Arabic
 *    account) must not be reordered or right-truncated from the wrong end.
 * -------------------------------------------------------------------- */
.conversation--user {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ----------------------------------------------------------------------
 * 5. Conversation-list message preview — DEFENSIVE. Read directly in
 *    MessagePreview.vue: the preview text sits in a bare `<span>` with NO
 *    semantic class (only `overflow-hidden text-ellipsis whitespace-nowrap`
 *    Tailwind utilities on its wrapping <div>), so there is no stable hook
 *    to target it in isolation. It is a structural sibling of
 *    `.conversation--user` (the name) inside the same card row, so it is
 *    targeted via that relationship plus a name-agnostic fallback in case a
 *    future Chatwoot version adds a real class.
 * -------------------------------------------------------------------- */
.conversation--user ~ div,
[class*="conversation"] [class*="preview"],
[class*="last-message"] {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ----------------------------------------------------------------------
 * 6. Private-note composer must be UNMISTAKABLE — confirmed classes:
 *    `.reply-box` (root), `.reply-box.is-private` (Chatwoot's own SCSS
 *    already adds a faint `bg-n-solid-amber` tint here — ReplyBox.vue,
 *    scoped <style>), `.reply-box__top` (toolbar strip), `.send-button`
 *    (the send/reply button, styled from ReplyBottomPanel.vue).
 *    The spec calls a private note mistakenly sent to a customer a real
 *    risk, so this section makes the note composer visibly, unambiguously
 *    different — not just "a bit more yellow" — via background, a colored
 *    accent border on the leading edge, and a distinct send-button color.
 * -------------------------------------------------------------------- */
.reply-box.is-private {
  /* Custom CSS is injected as a late stylesheet but Tailwind's own utility
     classes on the same element (bg-n-solid-amber, border-n-amber-*) carry
     enough specificity/order to still win without !important in most
     browsers; !important here guarantees the override survives regardless
     of Chatwoot's internal Tailwind build order, which this suite cannot
     inspect live. */
  background-color: #fff7e6 !important;
  border-color: #f2b705 !important;
  /* Visible accent border on the START edge (logical, so it lands on the
     correct side in both the LTR and RTL dashboard shell) — this is the
     "you are about to write an internal note" cue the spec asks for. */
  border-inline-start: 4px solid #d97706 !important;
}

/* A persistent label-style cue in the toolbar strip, reinforcing the accent
 * border above whenever the note composer is open. */
.reply-box.is-private .reply-box__top {
  background-color: #fdecc8 !important;
}

/* Send button inside an active private note must never look like the
 * ordinary (green/blue) "reply to customer" send button. */
.reply-box.is-private .send-button {
  background-color: #d97706 !important; /* amber-600: reads as "internal", not "sent to customer" */
  color: #ffffff !important;
  border-color: #b45309 !important;
}

/* ----------------------------------------------------------------------
 * 7. RTL shell scoping — confirmed attribute: `#app[dir="rtl"]` is set by
 *    App.vue (`:dir="isRTL ? 'rtl' : 'ltr'"`) whenever the account/agent
 *    locale is Arabic. Chatwoot's own Tailwind `ltr:`/`rtl:` pairs already
 *    flip PADDING/MARGIN/ROUNDING correctly for this case; the one thing
 *    they do not touch is horizontal SCROLL/OVERFLOW direction on wide
 *    elements (e.g. a long untranslated German URL or table pasted into a
 *    note), which can otherwise start scrolled from the visually wrong end
 *    in an RTL shell.
 * -------------------------------------------------------------------- */
#app[dir="rtl"] .prose-bubble {
  direction: rtl; /* base direction for the shell; plaintext (rule 1) still
                      overrides this per-message when content says otherwise */
}

#app[dir="ltr"] .prose-bubble {
  direction: ltr;
}