/* Shared right-to-left support for Arabic across the website and add-ins. */
html[dir="rtl"] body {
  direction: rtl;
  text-align: start;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button,
html[dir="rtl"] [role="dialog"],
html[dir="rtl"] [role="menu"],
html[dir="rtl"] [role="menuitem"] {
  text-align: start;
}

html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] kbd,
html[dir="rtl"] samp,
html[dir="rtl"] .mono,
html[dir="rtl"] .formula,
html[dir="rtl"] .cell-address,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[inputmode="email"],
html[dir="rtl"] input[inputmode="url"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

html[dir="rtl"] user-message {
  margin-left: 0;
  margin-right: var(--pill-inset, 8px);
}

html[dir="rtl"] assistant-message {
  margin-right: 0;
  margin-left: var(--pill-inset, 8px);
}

html[dir="rtl"] .ai-account-menu,
html[dir="rtl"] .ai-context-menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] .ai-input__attach {
  left: auto;
  right: 8px;
}

html[dir="rtl"] .ai-input__send {
  right: auto;
  left: 8px;
}

html[dir="rtl"] svg[data-directional="true"] {
  transform: scaleX(-1);
}

/* Mirror the shared Word/sidebar chrome that still uses physical sides. */
html[dir="rtl"] .ai-dialog-close,
html[dir="rtl"] .ai-overlay-close {
  right: auto;
  left: 16px;
}

html[dir="rtl"] .ai-menu-utility,
html[dir="rtl"] .ai-tab-actions,
html[dir="rtl"] .ai-overlay-header__actions,
html[dir="rtl"] .ai-overlay-toolbar-status,
html[dir="rtl"] .ai-working-indicator__stop {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] markdown-block ul,
html[dir="rtl"] markdown-block ol,
html[dir="rtl"] .ai-tool-card ul,
html[dir="rtl"] .ai-tool-card ol,
html[dir="rtl"] .ai-file-tree,
html[dir="rtl"] .ai-dependency-tree {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .ai-tab {
  padding-right: initial;
  padding-left: 22px;
}

html[dir="rtl"] .ai-account-menu,
html[dir="rtl"] .ai-context-menu,
html[dir="rtl"] .ai-model-menu {
  transform-origin: top left;
}

html[dir="rtl"] .ai-tooltip--left {
  left: auto;
  right: 0;
}

html[dir="rtl"] .ai-tooltip--right {
  right: auto;
  left: 0;
}