/* Fararoom console layout — dashboard / chat / CDS chrome.
   FA → RTL (sidebar on the right). EN → leave product LTR. CDS canvas stays LTR. */

html.fararoom-fa,
html.fararoom-fa body {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  text-align: start;
}

html.fararoom-en,
html.fararoom-en body {
  text-align: start;
}

/* —— Dashboard sidebar on the right when Persian —— */
html[dir="rtl"]:not(.fararoom-chat) .sidebar:not(app-sidebar),
html[dir="rtl"]:not(.fararoom-chat) .off-canvas-sidebar,
html[dir="rtl"] .ails-sidebar {
  left: auto !important;
  right: 0 !important;
  width: 70px !important;
  z-index: 1030 !important;
}

html[dir="rtl"]:not(.fararoom-chat) .main-panel {
  float: none !important;
  width: calc(100% - 70px) !important;
  margin-right: 70px !important;
  margin-left: 0 !important;
}

html[dir="rtl"] .navbar,
html[dir="rtl"] .navbar-header,
html[dir="rtl"] .navbar-brand {
  text-align: start;
}

/* Project switcher must sit above the icon rail (native sidebar z-index is 1052). */
html[dir="rtl"]:not(.fararoom-chat):not(.fararoom-panel) .navbar-absolute,
html[dir="rtl"]:not(.fararoom-chat):not(.fararoom-panel) .main-panel > .navbar,
html[dir="rtl"]:not(.fararoom-chat):not(.fararoom-panel) appdashboard-navbar {
  overflow: visible !important;
  z-index: 1080 !important;
}
html:not(.fararoom-chat):not(.fararoom-panel) .user-details-sidebar {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
html:not(.fararoom-chat):not(.fararoom-panel) .user-details-sidebar #user-details.active,
html:not(.fararoom-chat):not(.fararoom-panel) .user-details-sidebar #user-details.open {
  pointer-events: auto !important;
}

html[dir="rtl"] .sidebar .nav p,
html[dir="rtl"] .sidebar .nav a,
html[dir="rtl"] .sidebar .logo,
html[dir="rtl"] .main-content,
html[dir="rtl"] .page-header,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
  text-align: start;
}

html[dir="rtl"] .dropdown-menu {
  text-align: start;
}

html[dir="rtl"] .mat-mdc-form-field,
html[dir="rtl"] .mat-form-field,
html[dir="rtl"] .form-group,
html[dir="rtl"] .card-content,
html[dir="rtl"] .card-header {
  text-align: start;
}

html[dir="rtl"] table {
  text-align: start;
}

html[dir="rtl"] .cdk-overlay-pane,
html[dir="rtl"] .mat-mdc-menu-panel,
html[dir="rtl"] .dropdown-menu {
  direction: rtl;
}

html[dir="ltr"] .cdk-overlay-pane,
html[dir="ltr"] .mat-mdc-menu-panel {
  direction: ltr;
}

/* Settings secondary sidebar — keep full labels; RTL ellipsis was clipping English from the left. */
html[dir="rtl"] appdashboard-settings-sidebar,
html[dir="rtl"] appdashboard-bots-sidebar {
  border-right: none !important;
  border-left: 1px solid #e5effe !important;
  flex: 0 0 auto;
}

html[dir="rtl"] .settings-sidebar-wpr {
  padding-right: 0;
  padding-left: 10px;
}

html[dir="rtl"] .settings-sidebar-wpr-opened {
  flex: 0 0 248px;
  width: 248px;
  min-width: 248px;
  max-width: 248px;
}

html[dir="rtl"] .settings-sidebar,
html[dir="rtl"] .left-sidebar,
html[dir="rtl"] .nav-settings {
  text-align: start;
}

html[dir="rtl"] .settings-sidebar > li {
  justify-content: flex-start;
  margin-right: 0;
  margin-left: 6px;
}

html[dir="rtl"] .settings-sidebar > li > a,
html[dir="rtl"] a.settings-sidebar-anchor {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-left: 0 !important;
  padding-inline-start: 12px;
  display: flex;
  align-items: center;
  flex-direction: row;
}

html[dir="rtl"] .sidebar-item {
  text-align: start;
}

html[dir="rtl"] p.custom_paragraph,
html[dir="rtl"] .custom_paragraph {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: start;
  width: auto !important;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  padding-inline-start: 8px;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

html[dir="rtl"] .settings-sidebar-icons {
  margin-left: 0 !important;
  margin-right: 6px !important;
  flex: 0 0 auto;
}

html[dir="rtl"] .sidebar-item-no-link {
  padding-left: 0;
  padding-right: 12px;
}

/* Integrations list + form */
html[dir="rtl"] .integrations-content,
html[dir="rtl"] .integration-outer-container,
html[dir="rtl"] .menu-container,
html[dir="rtl"] .list .element {
  text-align: start;
}

.list .element {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
}

/* Keep latin tokens LTR inside RTL pages */
html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] pre,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* —— CDS: never flip the flow canvas; RTL only chrome when FA —— */
html.fararoom-cds {
  direction: ltr;
}

html.fararoom-cds.fararoom-fa header,
html.fararoom-cds.fararoom-fa .header,
html.fararoom-cds.fararoom-fa .cds-header,
html.fararoom-cds.fararoom-fa .header-panel-intent,
html.fararoom-cds.fararoom-fa .panel-intent-detail,
html.fararoom-cds.fararoom-fa .footer-panel,
html.fararoom-cds.fararoom-fa .cds-action-detail,
html.fararoom-cds.fararoom-fa .right-panel,
html.fararoom-cds.fararoom-fa .left-panel,
html.fararoom-cds.fararoom-fa cds-panel-elements,
html.fararoom-cds.fararoom-fa .panel-action-detail {
  direction: rtl;
  text-align: start;
}

html.fararoom-cds .box-primary,
html.fararoom-cds #svg-canvas,
html.fararoom-cds .canvas,
html.fararoom-cds cds-canvas,
html.fararoom-cds .tds-canvas {
  direction: ltr !important;
  text-align: left;
}

/* Chat (Ionic) RTL chrome */
html[dir="rtl"] ion-menu,
html[dir="rtl"] ion-header,
html[dir="rtl"] ion-toolbar,
html[dir="rtl"] ion-list,
html[dir="rtl"] ion-item,
html[dir="rtl"] ion-label,
html[dir="rtl"] ion-title {
  text-align: start;
}

html[dir="rtl"] ion-item {
  --inner-text-align: start;
}

/* Native selected integration row (AIpanel nav uses the same) */
.list .element.is-active,
.list .element.selected,
.fararoom-aipanel-nav.is-active {
  background: var(--settings-sidebar-active-background-color, rgb(220, 233, 255)) !important;
  color: var(--settings-sidebar-active-color, #080f1a) !important;
  font-weight: 500;
}

html[dir="rtl"] .page-title--sidebar-settings,
html[dir="rtl"] .navbar-brand-title,
html[dir="rtl"] span.navbar-brand-sidebar-settings {
  font-family: "Vazirmatn", Tahoma, sans-serif;
}

html.fararoom-fa .custom_paragraph,
html.fararoom-fa .settings-sidebar > li,
html.fararoom-fa .sidebar-item,
html.fararoom-fa .card,
html.fararoom-fa .card-header,
html.fararoom-fa .card-content,
html.fararoom-fa .page-header,
html.fararoom-fa .navbar-brand-title,
html.fararoom-fa table,
html.fararoom-fa th,
html.fararoom-fa td,
html.fararoom-fa label,
html.fararoom-fa .btn,
html.fararoom-fa button:not(.mat-mdc-icon-button):not(.mat-icon-button),
html.fararoom-fa h1,
html.fararoom-fa h2,
html.fararoom-fa h3,
html.fararoom-fa h4,
html.fararoom-fa p,
html.fararoom-fa .quick-tips,
html.fararoom-fa .tips {
  font-family: "Vazirmatn", Tahoma, sans-serif;
}