/**
 * Rogland RTL chat overrides
 * In Chatwoot RTL, visitor bubbles are mirrored to the LEFT.
 * Force visitor messages to the physical RIGHT; agent messages to the LEFT.
 */

/* Visitor / outgoing: pin to physical right */
html[dir='rtl'] .conversation-wrap .user-message-wrap {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-start !important; /* RTL main-start = right */
  flex-direction: row !important;
}

html[dir='rtl'] .conversation-wrap .user-message {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  text-align: right !important;
  max-width: 85% !important;
}

html[dir='rtl'] .conversation-wrap .user-message .message-wrap {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
}

/* Agent / incoming: pin to physical left */
html[dir='rtl'] .conversation-wrap .agent-message-wrap {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-end !important; /* RTL main-end = left */
  flex-direction: row !important;
}

html[dir='rtl'] .conversation-wrap .agent-message {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  justify-content: flex-start !important;
  max-width: 88% !important;
}

html[dir='rtl'] .conversation-wrap .agent-message .message-wrap {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
}

/* Message text + composer */
html[dir='rtl'] .conversation-wrap .chat-bubble,
html[dir='rtl'] .conversation-wrap .chat-bubble p,
html[dir='rtl'] .conversation-wrap .message-content,
html[dir='rtl'] .conversation-wrap textarea,
html[dir='rtl'] .conversation-wrap [contenteditable='true'],
html[dir='rtl'] .user-message-input,
html[dir='rtl'] textarea.user-message-input {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
}

/* Unread preview */
html[dir='rtl'] .is-widget-right .unread-wrap {
  text-align: right !important;
}

html[dir='rtl'] .is-widget-right .unread-wrap .chat-bubble {
  direction: rtl !important;
  text-align: right !important;
}

/* Dashboard message text */
html[dir='rtl'] .prose-bubble,
html[dir='rtl'] [data-bubble-name='text'],
html[dir='rtl'] [data-bubble-name='text'] p,
html[dir='rtl'] .ProseMirror,
html[dir='rtl'] .editor-root textarea,
html[dir='rtl'] [data-testid='message-input'],
html[dir='rtl'] .message-editor,
html[dir='rtl'] .ProseMirror-woot-style {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
}