/* Fararoom dashboard + operator chat — layout, login, analytics, widget setup. */

:root {
  --fararoom-teal: #0f766e;
  --fararoom-teal-2: #14b8a6;
  --fararoom-ink: #0b1220;
  --fararoom-paper: #f4f7fb;
}

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

a[href*="signup"],
a[href*="sign-up"],
a[href*="#/signup"],
appdashboard-signup,
.signup-hide,
#signup {
  display: none !important;
}

/* —— Footer —— */
#fararoom-support-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: 8px 16px;
  background: rgba(11, 18, 32, 0.94);
  color: #e2e8f0;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0;
  border-top: 1px solid rgba(20, 184, 166, 0.35);
  pointer-events: none;
}
#fararoom-support-footer strong {
  color: #5eead4;
  font-weight: 700;
}
html.has-fararoom-footer body,
html.has-fararoom-footer .main-panel,
html.has-fararoom-footer ion-app {
  padding-bottom: 36px;
}

/* —— Login —— */
html.fararoom-login,
html.fararoom-login body {
  background: #06221f !important;
  overflow: auto !important;
}
html.fararoom-login .sidebar,
html.fararoom-login .navbar,
html.fararoom-login .off-canvas-sidebar,
html.fararoom-login footer:not(#fararoom-support-footer) {
  display: none !important;
}
html.fararoom-login .main-panel,
html.fararoom-login .wrapper,
html.fararoom-login .main-content {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  background: transparent !important;
  min-height: 100vh;
}
#fararoom-login-orbit {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.fararoom-login-mesh {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(20, 184, 166, 0.35), transparent 55%),
    radial-gradient(700px 480px at 90% 80%, rgba(245, 158, 11, 0.22), transparent 50%),
    radial-gradient(600px 400px at 50% 110%, rgba(15, 118, 110, 0.45), transparent 45%),
    linear-gradient(165deg, #041614 0%, #0b3d38 45%, #06221f 100%);
  animation: fararoom-mesh 18s ease-in-out infinite alternate;
}
.fararoom-login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
}
.fararoom-login-orb.o1 {
  width: 280px; height: 280px; left: -40px; top: 12%;
  background: radial-gradient(circle, #2dd4bf, transparent 70%);
  animation: fararoom-float 9s ease-in-out infinite;
}
.fararoom-login-orb.o2 {
  width: 220px; height: 220px; right: 8%; bottom: 10%;
  background: radial-gradient(circle, #fbbf24, transparent 70%);
  animation: fararoom-float 11s ease-in-out infinite reverse;
}
.fararoom-login-orb.o3 {
  width: 160px; height: 160px; right: 28%; top: 18%;
  background: radial-gradient(circle, #99f6e4, transparent 70%);
  animation: fararoom-float 7s ease-in-out infinite;
}
.fararoom-login-copy {
  position: absolute;
  top: 7vh;
  right: 0;
  left: 0;
  text-align: center;
  color: #f8fafc;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
.fararoom-login-copy img {
  height: 52px;
  margin-bottom: 12px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
}
.fararoom-login-copy h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fararoom-login-copy p {
  margin: 8px 0 0;
  opacity: 0.85;
  font-size: 15px;
}
@keyframes fararoom-mesh {
  from { transform: scale(1) translate3d(0,0,0); }
  to { transform: scale(1.08) translate3d(-2%, 2%, 0); }
}
@keyframes fararoom-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(24px, -18px, 0); }
}

html.fararoom-login .card,
html.fararoom-login .main-content .card,
html.fararoom-login form {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 22vh auto 48px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px);
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 28px 28px 24px !important;
}
html.fararoom-login input[type="email"],
html.fararoom-login input[type="password"],
html.fararoom-login input[type="text"] {
  border-radius: 12px !important;
  min-height: 46px;
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  font-size: 15px !important;
}
html.fararoom-login button[type="submit"],
html.fararoom-login .btn-primary,
html.fararoom-login .btn.btn-primary {
  background: #0f766e !important;
  border-color: #0f766e !important;
  border-radius: 12px !important;
  min-height: 46px;
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  font-weight: 700;
  width: 100%;
}
html.fararoom-login #fararoom-support-footer {
  background: transparent;
  border: 0;
  color: #ccfbf1;
}

/* —— Cards / tables / home / requests —— */
html.fararoom-fa .card {
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  border: 1px solid #e8eef5;
}
html.fararoom-fa .card-header {
  border-bottom: 1px solid #eef2f7;
}
html[dir="rtl"] .table > thead > tr > th,
html[dir="rtl"] .table > tbody > tr > td {
  text-align: start;
  vertical-align: middle;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html[dir="rtl"] .table {
  direction: rtl;
}
html.fararoom-fa .btn-primary,
html.fararoom-fa .btn-success {
  background: #0f766e;
  border-color: #0f766e;
  border-radius: 10px;
}
html.fararoom-fa .project-item,
html.fararoom-fa .project-card,
html.fararoom-fa .ws-request,
html.fararoom-fa .request-row {
  border-radius: 12px;
}

/* Home profile */
html[dir="rtl"] appdashboard-home .row,
html[dir="rtl"] appdashboard-home .card-content {
  text-align: start;
}
html[dir="rtl"] .user-profile,
html[dir="rtl"] .profile-container {
  direction: rtl;
  text-align: start;
}

/* Conversations list (dashboard /wsrequests) */
html[dir="rtl"] appdashboard-wsrequests,
html[dir="rtl"] appdashboard-wsrequests-msgs,
html[dir="rtl"] appdashboard-ws-shared,
html[dir="rtl"] appdashboard-history,
html[dir="rtl"] appdashboard-ws-requests-unserved,
html[dir="rtl"] appdashboard-ws-requests-served {
  direction: rtl;
  text-align: start;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  min-width: 0;
  max-width: 100%;
}

/* Keep PerfectScrollbar intact. overflow:visible + max-height made the
   monitor jump and painted a white horizontal scrollbar. */
html:not(.fararoom-chat):not(.fararoom-panel) {
  overflow-x: hidden !important;
}
html:not(.fararoom-chat):not(.fararoom-panel) body,
html:not(.fararoom-chat):not(.fararoom-panel) .wrapper {
  overflow-x: hidden !important;
  max-width: 100%;
}
html:not(.fararoom-chat):not(.fararoom-panel) .main-panel .ps__rail-x,
html:not(.fararoom-chat):not(.fararoom-panel) .main-panel.ps--active-x > .ps__rail-x {
  display: none !important;
}
html:not(.fararoom-chat):not(.fararoom-panel) #alert-container {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html[dir="rtl"]:not(.fararoom-chat):not(.fararoom-panel) .main-panel {
  max-width: 100%;
  min-width: 0;
}
html[dir="rtl"]:not(.fararoom-chat):not(.fararoom-panel) .container-fluid {
  min-width: 0 !important;
  max-width: 100%;
}

/* —— Navbar project switcher —— */
html:not(.fararoom-chat):not(.fararoom-panel) .navbar .dropdown-menu,
html:not(.fararoom-chat):not(.fararoom-panel) #navbar_dropdown {
  z-index: 5000 !important;
  min-width: 280px;
  max-height: min(360px, calc(100vh - 90px)) !important;
  padding: 8px 0 10px;
  margin-top: 8px;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
  background: #fff !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}
html:not(.fararoom-chat) .navbar li.open > #navbar_dropdown,
html:not(.fararoom-chat) .navbar .open > #navbar_dropdown {
  position: fixed !important;
  top: 56px !important;
  right: 86px !important;
  left: auto !important;
  float: none;
}
html:not(.fararoom-chat) .navbar .project-dropdown {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  max-width: min(420px, 46vw);
  padding: 8px 12px !important;
  margin: 8px 4px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-transform: none !important;
}
html:not(.fararoom-chat) .navbar .project-dropdown:hover,
html:not(.fararoom-chat) .navbar .open > .project-dropdown {
  background: #dcfce7 !important;
  color: #115e59 !important;
}
html:not(.fararoom-chat) #navbar_dropdown > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 13.5px;
  color: #0f172a !important;
  border-radius: 0;
}
html:not(.fararoom-chat) #navbar_dropdown > li > a:hover,
html:not(.fararoom-chat) #navbar_dropdown > li > a.li-selected {
  background: #ecfdf5 !important;
  color: #0f766e !important;
}
html:not(.fararoom-chat) #navbar_dropdown .divider {
  margin: 8px 0;
  background: #e2e8f0;
}

/* —— Monitor page —— */
html.fararoom-fa:not(.fararoom-chat):not(.fararoom-login) body {
  background: #eef2f6 !important;
}
html[dir="rtl"] appdashboard-wsrequests .card,
html[dir="rtl"] appdashboard-wsrequests .card-content {
  overflow: visible;
  min-width: 0;
}
html.fararoom-fa appdashboard-wsrequests .card {
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
  background: #fff !important;
}
html.fararoom-fa appdashboard-wsrequests .card-header,
html.fararoom-fa appdashboard-wsrequests .card-header-custom {
  background: transparent !important;
  border: 0 !important;
  padding: 16px 20px 8px !important;
}
html[dir="rtl"] appdashboard-wsrequests .table-responsive {
  overflow-x: auto;
  max-width: 100%;
  border-radius: 12px;
}
html[dir="rtl"] appdashboard-wsrequests table,
html[dir="rtl"] appdashboard-wsrequests .table {
  width: 100%;
  min-width: 640px;
  table-layout: auto;
}
html[dir="rtl"] appdashboard-wsrequests .table th,
html[dir="rtl"] appdashboard-wsrequests .table td {
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 13px;
  padding: 12px 14px !important;
}
html.fararoom-fa appdashboard-wsrequests .table thead th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.fararoom-fa appdashboard-wsrequests .table tbody tr {
  transition: background 0.12s ease;
}
html.fararoom-fa appdashboard-wsrequests .table tbody tr:hover {
  background: #f0fdfa !important;
}
html[dir="rtl"] .requests-list,
html[dir="rtl"] .ws-requests-list,
html[dir="rtl"] .ws-requests-ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
html[dir="rtl"] .request-item,
html[dir="rtl"] .ws-request-row,
html[dir="rtl"] appdashboard-wsrequests tr {
  min-width: 0;
}
html[dir="rtl"] appdashboard-wsrequests .card-header-custom,
html[dir="rtl"] appdashboard-wsrequests .filter-convs-title-wpr,
html[dir="rtl"] appdashboard-wsrequests .navbar-brand {
  text-align: start;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html[dir="rtl"] appdashboard-wsrequests .nav-pills,
html[dir="rtl"] appdashboard-wsrequests .teammates-carousel,
html[dir="rtl"] appdashboard-wsrequests .legend-items-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
html[dir="rtl"] appdashboard-wsrequests .requester-avatar,
html[dir="rtl"] appdashboard-wsrequests .team-avatar {
  flex: 0 0 auto;
}
html[dir="rtl"] appdashboard-wsrequests .column-td,
html[dir="rtl"] appdashboard-wsrequests .table-body-span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
html[dir="rtl"] appdashboard-wsrequests .huge {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #0f766e;
}
html.fararoom-fa appdashboard-wsrequests .huge {
  font-size: 28px;
  letter-spacing: -0.03em;
}
#fr-monitor-empty {
  display: none;
  margin: 28px 8px 12px;
  padding: 36px 24px;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
#fr-monitor-empty.is-on { display: block; }
#fr-monitor-empty img {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}
#fr-monitor-empty h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}
#fr-monitor-empty p {
  margin: 0;
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.7;
}

/* Request detail messages */
html[dir="rtl"] appdashboard-wsrequests-msgs .messages,
html[dir="rtl"] .chat-message,
html[dir="rtl"] .bubble {
  text-align: start;
}
html[dir="rtl"] .right-sidebar,
html[dir="rtl"] .details-panel {
  border-right: none;
  border-left: 1px solid #e8eef5;
}

/* Analytics: numbers LTR, chrome RTL */
html[dir="rtl"] appdashboard-analytics {
  direction: rtl;
  text-align: start;
}
html[dir="rtl"] appdashboard-analytics canvas,
html[dir="rtl"] appdashboard-analytics .chartjs-render-monitor,
html[dir="rtl"] appdashboard-analytics .chart {
  direction: ltr;
  unicode-bidi: isolate;
}
html.fararoom-fa appdashboard-analytics .card {
  min-height: 140px;
}
html.fararoom-fa appdashboard-analytics h3,
html.fararoom-fa appdashboard-analytics .metric,
html.fararoom-fa appdashboard-analytics .number {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Widget setup: keep Bootstrap grid. Only RTL chrome + visible controls. */
html[dir="rtl"] appdashboard-widget-set-up {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  text-align: start;
}
html[dir="rtl"] appdashboard-widget-set-up .teplate-content {
  min-width: 0;
}
@media (min-width: 768px) {
  html[dir="rtl"] .widget-all-settings-wrap > .row.no-gap > #widget-settings-manage {
    float: right;
    width: 58.33333333%;
  }
  html[dir="rtl"] .widget-all-settings-wrap > .row.no-gap > #appearance-widget-preview-wpr {
    float: left;
    width: 41.66666667%;
  }
}
html[dir="rtl"] appdashboard-widget-set-up .widget-section-header__title-underlined {
  margin-left: 0 !important;
  margin-right: 45px !important;
  text-align: start;
  overflow: visible;
  white-space: nowrap;
}
html[dir="rtl"] appdashboard-widget-set-up .widget-setting-icon-wrap {
  margin-left: 0 !important;
  left: auto !important;
  right: 5px;
}
html[dir="rtl"] appdashboard-widget-set-up .section-offset {
  margin-left: 0 !important;
  margin-right: 45px;
}
html[dir="rtl"] appdashboard-widget-set-up .widget-section-arrow-icon {
  right: auto !important;
  left: 0;
}
html[dir="rtl"] appdashboard-widget-set-up .widget-section-accordion,
html[dir="rtl"] appdashboard-widget-set-up .widget-settings-control-label,
html[dir="rtl"] appdashboard-widget-set-up .widget-settings-control-head-label,
html[dir="rtl"] appdashboard-widget-set-up .widget-settings-control-head-label-info,
html[dir="rtl"] appdashboard-widget-set-up .widget-settings-control-subhead-label,
html[dir="rtl"] appdashboard-widget-set-up label,
html[dir="rtl"] appdashboard-widget-set-up .control-label {
  text-align: start !important;
  overflow: visible;
  white-space: normal;
}
html[dir="rtl"] appdashboard-widget-set-up .widget-settings-control-head-label .material-icons,
html[dir="rtl"] appdashboard-widget-set-up label .material-icons,
html[dir="rtl"] appdashboard-widget-set-up .widget-settings-control-head-label mat-icon {
  font-size: 16px;
  vertical-align: middle;
  margin-inline-start: 6px;
}
html[dir="rtl"] .preset-colors-first-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 320px;
}
html[dir="rtl"] .preset-colors-first-line > [class*="col-"] {
  float: none !important;
  width: auto !important;
  padding: 0;
}
html[dir="rtl"] appdashboard-widget-set-up .btn,
html[dir="rtl"] appdashboard-widget-set-up .btn-tdblu-no-boxshadow,
html[dir="rtl"] appdashboard-widget-set-up .btn-primary,
html[dir="rtl"] appdashboard-widget-set-up button.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 36px;
  height: auto !important;
  max-width: 100%;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html[dir="rtl"] appdashboard-widget-set-up .btn-tdblu-no-boxshadow {
  background: #0f766e !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-weight: 700;
}
html[dir="rtl"] appdashboard-widget-set-up .widget-section-accordion {
  border-bottom: 1px solid #e8eef5;
  margin-bottom: 8px;
}
html[dir="rtl"] appdashboard-widget-set-up .section-offset {
  padding-bottom: 8px;
}
html[dir="rtl"] appdashboard-widget-set-up .form-group {
  margin-bottom: 16px;
}
html[dir="rtl"] appdashboard-widget-set-up input.form-control,
html[dir="rtl"] appdashboard-widget-set-up .form-control {
  border-radius: 10px;
  min-height: 38px;
}
html[dir="rtl"] appdashboard-widget-set-up input[type="text"],
html[dir="rtl"] appdashboard-widget-set-up textarea {
  text-align: start;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html[dir="rtl"] appdashboard-widget-set-up input[type="url"],
html[dir="rtl"] #custom-launcher-logo-in-widget-setup,
html[dir="rtl"] appdashboard-widget-set-up input[type="color"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}
html[dir="rtl"] appdashboard-widget-set-up .appearance_save_btn_bottom,
html[dir="rtl"] appdashboard-widget-set-up .appearance-save-btn-desktop {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  float: none !important;
  clear: both;
  margin: 16px 0 8px !important;
  min-height: 42px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  position: sticky;
  bottom: 12px;
  z-index: 30;
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.28);
}
#fr-widget-save {
  position: fixed;
  z-index: 1400;
  bottom: 20px;
  right: 280px;
  left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px, calc(100vw - 320px));
  padding: 12px 14px;
  background: #0f766e;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 118, 110, 0.32);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  direction: rtl;
}
#fr-widget-save button {
  appearance: none;
  border: 0;
  background: #fff;
  color: #0f766e;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
}
#fr-widget-save span {
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.95;
}
#fr-widget-disclaimer {
  margin: 12px 16px 18px;
  padding: 14px 16px 16px;
  background: #fff;
  border: 1px solid #ccfbf1;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  direction: rtl;
}
#fr-widget-disclaimer h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #0f766e;
}
#fr-widget-disclaimer p {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 12.5px;
}
#fr-widget-disclaimer textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 64px;
  resize: vertical;
  font: inherit;
}
#fr-widget-disclaimer .fr-disc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
#fr-widget-disclaimer button {
  appearance: none;
  border: 0;
  background: #0f766e;
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
}
#fr-widget-disclaimer .fr-disc-actions span {
  font-size: 12px;
  color: #64748b;
}
@media (max-width: 991px) {
  #fr-widget-save {
    right: 12px;
    left: 12px;
    max-width: none;
    bottom: 12px;
  }
}
html[dir="rtl"] #appearance-widget-preview,
html[dir="rtl"] .appearance-preview,
html[dir="rtl"] .widget-preview-container,
html[dir="rtl"] appdashboard-widget-home,
html[dir="rtl"] appdashboard-widget-chat,
html[dir="rtl"] appdashboard-widget-callout {
  direction: ltr !important;
  text-align: left;
  unicode-bidi: isolate;
}
html[dir="rtl"] .custom-launcher-logo,
html[dir="rtl"] #custom-launcher-button-in-widget-setup img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

/* —— Dashboard conversation iframe (request-for-panel) —— */
html.fararoom-panel #fararoom-support-footer,
html.fararoom-panel .sidebar,
html.fararoom-panel app-sidebar,
html.fararoom-panel .navbar,
html.fararoom-panel .navbar-header,
html.fararoom-panel .main-panel > .navbar,
html.fararoom-panel appdashboard-navbar,
html.fararoom-panel .footer,
html.fararoom-panel #fararoom-login-orbit {
  display: none !important;
}
html.fararoom-panel,
html.fararoom-panel body {
  overflow: auto !important;
  height: 100% !important;
}
html.fararoom-panel .main-panel,
html.fararoom-panel .wrapper,
html.fararoom-panel .wrapper-full-page,
html.fararoom-panel appdashboard-root,
html.fararoom-panel .main-content {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
  min-height: 100% !important;
  background: transparent !important;
}
html.fararoom-panel.has-fararoom-footer body,
html.fararoom-panel.has-fararoom-footer .main-panel {
  padding-bottom: 0 !important;
}
html.fararoom-panel appdashboard-ws-request-detail-for-panel,
html.fararoom-panel .ws-request-detail-for-panel,
html.fararoom-panel .card,
html.fararoom-panel .card-content {
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  border: 0 !important;
}
html.fararoom-panel {
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-thread app-sidebar,
html.fararoom-thread .sidebar,
html.fararoom-thread nav.navbar,
html.fararoom-thread .navbar,
html.fararoom-thread appdashboard-navbar,
html.fararoom-thread .conv-info-sidebar-wpr,
html.fararoom-thread .conv-info-sidebar,
html.fararoom-thread .right-sidebar,
html.fararoom-thread #user-details {
  display: none !important;
  width: 0 !important;
}
html.fararoom-thread .main-panel,
html.fararoom-thread .wrapper,
html.fararoom-thread .main-content,
html.fararoom-thread appdashboard-ws-request-detail-for-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
html.fararoom-thread,
html.fararoom-thread body {
  background: #f0f2f5 !important;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-thread.fr-thread-gone .main-panel,
html.fararoom-thread.fr-thread-gone .wrapper,
html.fararoom-thread.fr-thread-gone appdashboard-ws-request-detail-for-panel,
html.fararoom-thread.fr-thread-gone .message-text-area,
html.fararoom-thread.fr-thread-gone app-message-text-area,
html.fararoom-thread.fr-thread-gone .row_message_text_area,
html.fararoom-thread.fr-thread-gone .public-answer,
html.fararoom-thread.fr-thread-gone [class*="public-answer"] {
  display: none !important;
}
html.fararoom-thread #fr-thread-gone {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-thread #fr-thread-gone[hidden] {
  display: none !important;
}
html.fararoom-thread #fr-thread-gone .fr-empty-card {
  text-align: center;
  padding: 22px 20px;
  max-width: 300px;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  direction: rtl;
}
html.fararoom-thread #fr-thread-gone h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
html.fararoom-thread #fr-thread-gone p {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.7;
}
html.fararoom-panel .form-group {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
html.fararoom-panel .card-header,
html.fararoom-panel h3,
html.fararoom-panel h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px !important;
  line-height: 1.35;
}
html.fararoom-panel .form-control {
  min-height: 32px;
  font-size: 12.5px;
  max-width: 100%;
}
html.fararoom-panel .main-content,
html.fararoom-panel .card-content {
  padding: 8px 10px !important;
}
html.fararoom-panel img.avatar,
html.fararoom-panel .requester-avatar,
html.fararoom-panel .contact-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  object-fit: cover;
}
html.fararoom-panel .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.fararoom-panel [class*="col-"] {
  padding: 2px 6px !important;
  min-height: 0;
  float: none;
}
html.fararoom-panel .nav-tabs,
html.fararoom-panel .mat-mdc-tab-header,
html.fararoom-panel .mat-tab-header {
  min-height: 34px;
}
html.fararoom-panel .nav-tabs > li > a,
html.fararoom-panel .mat-mdc-tab {
  padding: 6px 10px !important;
  font-size: 12.5px;
}
html.fararoom-panel .conv-info-sidebar-wpr,
html.fararoom-panel .conv-info-sidebar-header-wpr,
html.fararoom-panel .conv-info-sidebar-header-contact-info,
html.fararoom-panel .td-dropdown {
  overflow: visible !important;
}
html.fararoom-panel .conv-info-sidebar-wpr {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px !important;
}
html.fararoom-panel .fr-status-bar,
html.fararoom-panel .header-badge-wpr {
  display: none !important;
}
html.fararoom-panel .fr-status-bar .dropdown,
html.fararoom-panel .header-badge-wpr .dropdown {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  float: none !important;
}
html.fararoom-panel .fr-status-bar .working-status-dropdown-btn,
html.fararoom-panel .header-badge-wpr .working-status-dropdown-btn {
  display: none !important;
}
html.fararoom-panel .fr-status-bar .dropdown-menu-working-status,
html.fararoom-panel .header-badge-wpr .dropdown-menu-working-status,
html.fararoom-panel .dropdown-menu-working-status-chat {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  position: static !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 1px solid #d9e1ea !important;
  border-radius: 12px !important;
  background: #f4f7f9 !important;
  box-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 40 !important;
}
html.fararoom-panel .dropdown-menu-working-status > li,
html.fararoom-panel .dropdown-menu-working-status-chat > li {
  flex: 1 1 0;
  float: none !important;
  margin: 0 !important;
  list-style: none;
}
html.fararoom-panel .dropdown-menu-working-status > li > a,
html.fararoom-panel .dropdown-menu-working-status-chat > li > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 6px 8px !important;
  border-radius: 9px !important;
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  text-align: center;
  white-space: nowrap;
  background: transparent;
}
html.fararoom-panel .dropdown-menu-working-status > li > a:hover,
html.fararoom-panel .dropdown-menu-working-status-chat > li > a:hover {
  background: #fff !important;
  color: #0f766e !important;
}
html.fararoom-panel .working-status-dropdown-btn.open ~ .dropdown-menu-working-status .conversation-open-assigned > a,
html.fararoom-panel .working-status-dropdown-btn.open ~ .dropdown-menu-working-status .ticket-open-assigned > a,
html.fararoom-panel .working-status-dropdown-btn.open ~ .dropdown-menu-working-status-chat .conversation-open-assigned > a {
  background: #1abc9c !important;
  color: #fff !important;
}
html.fararoom-panel .working-status-dropdown-btn.pending ~ .dropdown-menu-working-status .pending > a,
html.fararoom-panel .working-status-dropdown-btn.pending ~ .dropdown-menu-working-status-chat .pending > a {
  background: #f59e0b !important;
  color: #fff !important;
}
html.fararoom-panel .working-status-dropdown-btn.closed ~ .dropdown-menu-working-status .conversation-resolved > a,
html.fararoom-panel .working-status-dropdown-btn.closed ~ .dropdown-menu-working-status .resolved > a,
html.fararoom-panel .working-status-dropdown-btn.closed ~ .dropdown-menu-working-status-chat .conversation-resolved > a {
  background: #64748b !important;
  color: #fff !important;
}
html.fararoom-panel .dropdown-menu,
html.fararoom-panel .ng-dropdown-panel,
html.fararoom-panel .cdk-overlay-pane,
html.fararoom-panel .mat-mdc-select-panel,
html.fararoom-panel sat-popover-container {
  z-index: 5000 !important;
}
html.fararoom-panel .dropdown-menu:not(.dropdown-menu-working-status):not(.dropdown-menu-working-status-chat) {
  position: absolute !important;
  max-width: calc(100% - 12px) !important;
}
html.fararoom-panel .td-dropdown {
  position: relative;
  width: 100%;
  display: block;
}
html.fararoom-panel .td-dropdown__trigger {
  display: block;
  width: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 8px;
}
html.fararoom-panel .dropdown__menu-form,
html.fararoom-panel .dropdown__menu-form-chat-mode,
html.fararoom-panel #edit-fullname-content-form {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.fararoom-panel .dropdown__menu-form--active,
html.fararoom-panel .dropdown__menu-form.dropdown__menu-form--active {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5000 !important;
  transform: none !important;
}
html.fararoom-panel .dropdown__menu-form--active #edit-fullname-content-form,
html.fararoom-panel .dropdown__menu-form--active .dropdown__content-form {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 12px 14px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  background: #fff !important;
  border: 1px solid #d9e1ea !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
html.fararoom-panel .dropdown__menu-form--active .contact-form,
html.fararoom-panel .dropdown__menu-form--active .input-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
html.fararoom-panel .dropdown__menu-form--active .form-input {
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid #d9e1ea;
  padding: 8px 12px;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 13px;
  margin-bottom: 8px !important;
}
html.fararoom-panel .done--btn {
  width: 100% !important;
  margin: 4px 0 0 !important;
  min-height: 36px;
  padding: 8px 12px !important;
  border-radius: 10px;
  background: #1abc9c !important;
  color: #fff !important;
  border: 0 !important;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-weight: 800;
}
html.fararoom-panel .conv-info-sidebar-header,
html.fararoom-panel .conv-info-sidebar-header-wpr,
html.fararoom-panel .conv-info-sidebar-header-contact-info-wpr {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 4px 10px 8px !important;
  margin: 0 !important;
}
html.fararoom-panel .conv-info-sidebar-header-contact-info-wpr {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 4px;
  position: relative;
  width: 100%;
  cursor: default;
  padding: 8px 8px 4px !important;
}
html.fararoom-panel .avatar.chat-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  margin: 0 auto !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #94a3b8;
  background: #e8edf2 !important;
}
html.fararoom-panel .contact--offline-status,
html.fararoom-panel .contact--offline-status-chat,
html.fararoom-panel .contact--online-status {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  position: absolute !important;
  top: 50px !important;
  left: 50% !important;
  right: auto !important;
  margin: 0 0 0 16px !important;
  z-index: 2;
}
html.fararoom-panel .conv-info-sidebar-header-contact-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: auto !important;
  gap: 2px;
  width: 100%;
}
html.fararoom-panel .contact-info-wpr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 0 !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  border-radius: 8px;
}
html.fararoom-panel .contact-info--name,
html.fararoom-panel h3.contact-info--name {
  font-size: 14px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-align: center;
  max-width: none !important;
}
html.fararoom-panel .contact-info-wpr:hover {
  background: #f4f7f9;
}
html.fararoom-panel .edit--icon {
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  flex: 0 0 auto;
  opacity: 0.45;
}
html.fararoom-panel .contact-info-wpr:hover .edit--icon {
  opacity: 1;
}
html.fararoom-panel .contact-location-and-served-by-wpr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
html.fararoom-panel .contact-location,
html.fararoom-panel .served-by-wpr,
html.fararoom-panel .served-by {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
html.fararoom-panel .served-by-avatar--img,
html.fararoom-panel img.served-by-avatar--img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
}
html.fararoom-panel .cdk-overlay-container,
html.fararoom-panel .cdk-global-overlay-wrapper {
  position: absolute !important;
  inset: 0 !important;
  overflow: auto;
}
html.fararoom-panel .main-panel,
html.fararoom-panel .card-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100%;
}

/* —— Ionic operator chat: compact professional console —— */
html.fararoom-chat {
  --fr-rail: 52px;
  --fr-top: 44px;
  --fr-list: 280px;
  --fr-info: 260px;
  --fr-teal: #0f766e;
  --fr-teal-2: #14b8a6;
  --fr-line: #e8edf3;
  --fr-bg: #f4f6f8;
  --fr-rail-bg: #ffffff;
  --fr-list-bg: #ffffff;
  --fr-chat-bg: #f0f2f5;
  --fr-info-bg: #ffffff;
  --fr-text: #0f172a;
  --fr-muted: #64748b;
  --fr-bubble-agent: #d9fdd3;
  --fr-bubble-bot: #c5e7ff;
  --fr-bubble-visitor: #ffffff;
  --fr-footer: 28px;
  --sidebar-width: 52px !important;
  --sidebar-background-color: #ffffff !important;
  --sidebar-color: #0f172a !important;
  --sidebar-icon-color: #64748b !important;
  --sidebar-hover-icon-color: #0f766e !important;
  --sidebar-active-icon: #0f766e !important;
  --sidebar-background-item-hover: rgba(15, 118, 110, 0.1) !important;
  --ion-font-family: "Vazirmatn", Tahoma, sans-serif;
  --nav-bar-heigth: 44px;
}
html.fararoom-chat[data-theme="dark"],
html.fararoom-chat.fararoom-night {
  --fr-line: rgba(255, 255, 255, 0.08);
  --fr-bg: #1c1f24;
  --fr-rail-bg: #16181c;
  --fr-list-bg: #22262c;
  --fr-chat-bg: #1a1d22;
  --fr-info-bg: #20242a;
  --fr-text: #e8edf2;
  --fr-muted: #8b97a8;
  --fr-bubble-visitor: #2c3138;
  --sidebar-background-color: #16181c !important;
  --sidebar-color: #e8edf2 !important;
  --sidebar-icon-color: #9aa6b5 !important;
}
html.fararoom-chat[data-theme="dark"] #fararoom-chat-chrome,
html.fararoom-chat.fararoom-night #fararoom-chat-chrome {
  background: #16181c;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html.fararoom-chat[data-theme="dark"] #fararoom-chat-chrome .fr-chrome-brand,
html.fararoom-chat.fararoom-night #fararoom-chat-chrome .fr-chrome-brand {
  color: #e8edf2;
}
html.fararoom-chat[data-theme="dark"] #fararoom-chat-chrome .fr-chrome-proj,
html.fararoom-chat.fararoom-night #fararoom-chat-chrome .fr-chrome-proj,
html.fararoom-chat[data-theme="dark"] #fararoom-chat-chrome .fr-chrome-sound,
html.fararoom-chat.fararoom-night #fararoom-chat-chrome .fr-chrome-sound {
  background: #22262c;
  color: #e8edf2;
}
html.fararoom-chat,
html.fararoom-chat body,
html.fararoom-chat ion-app,
html.fararoom-chat app-root {
  height: 100%;
  max-width: 100vw;
  overflow: hidden !important;
  background: var(--fr-bg);
  color: var(--fr-text);
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-chat.has-fararoom-footer body,
html.fararoom-chat.has-fararoom-footer ion-app {
  padding-bottom: 0 !important;
}
html.fararoom-chat app-navbar {
  display: none !important;
}
html.fararoom-chat #fararoom-support-footer {
  display: flex !important;
  min-height: var(--fr-footer);
  height: var(--fr-footer);
  padding: 0 14px;
  font-size: 11.5px;
  opacity: 0.85;
}

/* Top chrome: same family as dashboard navbar */
html.fararoom-chat #fararoom-chat-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--fr-top);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px 0 10px;
  background: #fff;
  border-bottom: 1px solid var(--fr-line);
  box-shadow: none;
  direction: rtl;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #0f172a;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-brand > span {
  unicode-bidi: isolate;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-brand img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-project {
  position: relative;
  min-width: 0;
  margin-inline-start: 2px;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj {
  appearance: none;
  border: 0;
  max-width: min(380px, 42vw);
  padding: 4px 10px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #0f172a;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj:hover,
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-project.is-open .fr-chrome-proj {
  background: #dcfce7;
  color: #115e59;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  max-width: min(340px, 70vw);
  max-height: min(360px, calc(100vh - 80px));
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--fr-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 80;
  padding: 4px 0;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-menu[hidden] {
  display: none !important;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-menu button,
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-all {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 9px 16px;
  text-align: right;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 13.5px;
  color: #0f172a;
  cursor: pointer;
  text-decoration: none;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-menu button.is-on,
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-menu button:hover,
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-all:hover {
  background: #ecfdf5;
  color: #0f766e;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-all {
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-proj-empty {
  display: block;
  padding: 10px 16px;
  color: #64748b;
  font-size: 13px;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-sound {
  appearance: none;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #0f766e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-sound.is-off {
  color: #94a3b8;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-sound:hover {
  background: #ccfbf1;
}
html.fararoom-chat #fararoom-chat-chrome .fr-chrome-sound svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Icon rail: one column only, never wrap into the list */
html.fararoom-chat app-sidebar.sidebar {
  position: fixed !important;
  top: var(--fr-top) !important;
  bottom: var(--fr-footer, 0px) !important;
  left: auto !important;
  right: 0 !important;
  width: var(--fr-rail) !important;
  min-width: var(--fr-rail) !important;
  max-width: var(--fr-rail) !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  background-color: #fff !important;
  color: var(--fr-text) !important;
  border-left: 1px solid var(--fr-line);
  box-shadow: none !important;
  overflow: hidden !important;
}
html.fararoom-chat app-sidebar .sidebar-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
}
html.fararoom-chat app-sidebar .logo,
html.fararoom-chat app-sidebar .nav-custom {
  width: 100% !important;
  max-width: var(--fr-rail) !important;
  background: transparent !important;
  overflow: hidden !important;
}
html.fararoom-chat app-sidebar .nav-custom.sidebar-up {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html.fararoom-chat app-sidebar .nav-custom.sidebar-bottom {
  flex: 0 0 auto;
  margin-top: auto;
  overflow: hidden !important;
}
html.fararoom-chat app-sidebar .logo {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
html.fararoom-chat app-sidebar .sidebar-avatar-container,
html.fararoom-chat app-sidebar .sidebar-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}
html.fararoom-chat app-sidebar .nav-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
}
html.fararoom-chat app-sidebar .nav-custom > div {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.fararoom-chat app-sidebar .logoBrand img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
}
html.fararoom-chat app-sidebar .item-active {
  background: #1abc9c !important;
}
html.fararoom-chat app-sidebar svg,
html.fararoom-chat app-sidebar svg path,
html.fararoom-chat app-sidebar svg ellipse,
html.fararoom-chat app-sidebar svg circle,
html.fararoom-chat app-sidebar svg rect,
html.fararoom-chat app-sidebar ion-icon {
  fill: #64748b !important;
  stroke: none !important;
  color: #64748b !important;
}
html.fararoom-chat app-sidebar .item-active svg,
html.fararoom-chat app-sidebar .item-active svg path,
html.fararoom-chat app-sidebar .item-active svg ellipse,
html.fararoom-chat app-sidebar .item-active svg circle,
html.fararoom-chat app-sidebar .item-active ion-icon {
  fill: #fff !important;
  stroke: none !important;
  color: #fff !important;
}
html.fararoom-chat[data-theme="dark"] app-sidebar.sidebar,
html.fararoom-chat.fararoom-night app-sidebar.sidebar {
  background: #16181c !important;
}
html.fararoom-chat[data-theme="dark"] app-sidebar svg,
html.fararoom-chat[data-theme="dark"] app-sidebar svg path,
html.fararoom-chat.fararoom-night app-sidebar svg,
html.fararoom-chat.fararoom-night app-sidebar svg path {
  fill: #cbd5e1 !important;
  color: #cbd5e1 !important;
}
html.fararoom-chat .cdk-overlay-container .mat-mdc-tooltip,
html.fararoom-chat .cdk-overlay-container .mat-tooltip,
html.fararoom-chat .cdk-overlay-container .custom-mat-tooltip {
  display: none !important;
}

/* Operator profile drawer: sit left of the rail, never leave the viewport */
html.fararoom-chat .user-details-sidebar,
html.fararoom-chat app-sidebar-user-details {
  position: fixed !important;
  top: var(--fr-top) !important;
  bottom: var(--fr-footer, 0px) !important;
  right: var(--fr-rail) !important;
  left: auto !important;
  width: min(300px, calc(100vw - var(--fr-rail) - 12px)) !important;
  max-width: min(300px, calc(100vw - var(--fr-rail) - 12px)) !important;
  height: auto !important;
  z-index: 80 !important;
  overflow: visible !important;
  pointer-events: none;
  background: transparent !important;
  transform: none !important;
}
html.fararoom-chat #user-details {
  position: absolute !important;
  top: 10px !important;
  bottom: 10px !important;
  right: 8px !important;
  left: auto !important;
  width: calc(100% - 8px) !important;
  max-width: 292px !important;
  height: auto !important;
  max-height: calc(100vh - 24px - var(--fr-footer, 0px)) !important;
  margin: 0 !important;
  transform: translateX(120%) !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 81 !important;
  background: #fff !important;
  color: var(--fr-text) !important;
  border: 1px solid var(--fr-line);
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  direction: rtl;
  text-align: start;
  padding: 16px 16px 12px !important;
  box-sizing: border-box;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
}
html.fararoom-chat #user-details.active,
html.fararoom-chat #user-details.fr-open,
html.fararoom-chat .user-details-sidebar.open #user-details,
html.fararoom-chat .user-details-sidebar.active #user-details {
  transform: none !important;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
html.fararoom-chat #user-details .user-details-btn-close {
  left: 10px !important;
  right: auto !important;
}
html.fararoom-chat #user-details .user-details-fullname,
html.fararoom-chat #user-details .user-details-email,
html.fararoom-chat #user-details .user-details-role,
html.fararoom-chat #user-details .availability-section,
html.fararoom-chat #user-details .user-details-help-center,
html.fararoom-chat #user-details .logout-btn-wpr {
  text-align: start;
  direction: rtl;
}
html.fararoom-chat #user-details ng-select,
html.fararoom-chat #user-details .ng-select-container {
  width: 100% !important;
  max-width: 100% !important;
  text-align: start !important;
}
html.fararoom-chat #user-details .chat-version {
  font-size: 11px;
  color: var(--fr-muted);
}

.fararoom-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 8;
  cursor: col-resize;
  background: transparent;
}
.fararoom-resize:hover,
body.fararoom-resizing .fararoom-resize {
  background: rgba(26, 188, 156, 0.35);
}
body.fararoom-resizing,
body.fararoom-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
#fararoom-resize-list { left: 0; }
#fararoom-resize-info { right: 0; }

@media (min-width: 768px) {
  html.fararoom-chat ion-split-pane,
  html.fararoom-chat ion-split-pane:not(.mobile) {
    display: flex !important;
    flex-direction: row-reverse !important;
    direction: ltr;
    margin: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    width: auto !important;
    inset: var(--fr-top) var(--fr-rail) var(--fr-footer) 0 !important;
    position: absolute !important;
    background: var(--fr-bg);
  }
  html.fararoom-chat ion-split-pane > ion-nav,
  html.fararoom-chat ion-split-pane > .split-pane-side {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 var(--fr-list) !important;
    width: var(--fr-list) !important;
    min-width: 200px !important;
    max-width: 380px !important;
    height: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    border: 0 !important;
    border-left: 1px solid var(--fr-line) !important;
    background: var(--fr-list-bg) !important;
    z-index: 2 !important;
    overflow: hidden !important;
    direction: rtl;
  }
  html.fararoom-chat ion-split-pane ion-nav .ion-page,
  html.fararoom-chat ion-split-pane .split-pane-side .ion-page {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html.fararoom-chat ion-split-pane > #main,
  html.fararoom-chat ion-split-pane > .split-pane-main,
  html.fararoom-chat ion-split-pane > .ion-page.split-pane-main {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    background: var(--fr-chat-bg);
    direction: ltr;
  }
}

/* Compact conversation rows: avatar on the right */
html.fararoom-chat #convs-list,
html.fararoom-chat ion-nav ion-content {
  --background: var(--fr-list-bg);
  --padding-start: 0;
  --padding-end: 0;
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html.fararoom-chat ion-nav ion-header,
html.fararoom-chat ion-nav ion-toolbar {
  --background: var(--fr-list-bg);
  --color: var(--fr-text);
  --border-width: 0;
  --min-height: 44px;
  border: 0;
}
html.fararoom-chat ion-nav ion-title,
html.fararoom-chat header-conversations-list ion-title,
html.fararoom-chat header-conversations-list-unassigned ion-title,
html.fararoom-chat header-conversations-list-archived ion-title {
  display: none !important;
}
html.fararoom-chat header-conversations-list-unassigned ion-toolbar,
html.fararoom-chat header-conversations-list-archived ion-toolbar {
  --min-height: 36px;
}
html.fararoom-chat ion-nav > .ion-page > ion-header ion-toolbar {
  --min-height: 40px;
}
html.fararoom-chat #fararoom-chat-tabs {
  display: flex;
  flex: 0 0 auto;
  margin: 8px 8px 4px;
  padding: 3px;
  gap: 2px;
  background: #f1f5f9;
  border: 1px solid var(--fr-line);
  border-radius: 10px;
  direction: rtl;
  z-index: 6;
}
html.fararoom-chat #fararoom-chat-tabs button {
  position: relative;
  flex: 1 1 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 0 8px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  height: 30px;
  white-space: nowrap;
}
html.fararoom-chat #fararoom-chat-tabs button svg {
  display: none;
}
html.fararoom-chat #fararoom-chat-tabs button.is-active {
  background: #0f766e;
  color: #fff;
  box-shadow: none;
}
html.fararoom-chat .fr-tab-n {
  position: static;
  top: auto;
  left: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: none;
}
html.fararoom-chat #fararoom-chat-tabs button.is-active .fr-tab-n {
  background: #fff;
  color: #0f766e;
  box-shadow: none;
}
html.fararoom-chat .fr-tab-n[hidden] {
  display: none !important;
}
html.fararoom-chat ion-item.open-iframe-item,
html.fararoom-chat app-project-item,
html.fararoom-chat #no-convs-wpr,
html.fararoom-chat #no-convs {
  display: none !important;
}
html.fararoom-chat app-unassigned-conversations {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  background: var(--fr-list-bg);
}
html.fararoom-chat app-unassigned-conversations ion-header {
  display: none !important;
}
html.fararoom-chat app-unassigned-conversations ion-content,
html.fararoom-chat #iframe-ion-content {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  --background: #fff;
}
html.fararoom-chat app-unassigned-conversations .loader-spinner-wpr {
  display: none !important;
}
html.fararoom-chat #fr-unassigned-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
html.fararoom-chat[data-fr-tab="wait"] #convs-list,
html.fararoom-chat[data-fr-tab="mine"] #convs-list,
html.fararoom-chat[data-fr-tab="archive"] #convs-list,
html.fararoom-chat[data-fr-tab="wait"] app-unassigned-conversations,
html.fararoom-chat[data-fr-tab="mine"] app-unassigned-conversations,
html.fararoom-chat[data-fr-tab="archive"] header-conversations-list-archived,
html.fararoom-chat[data-fr-tab="wait"] ion-split-pane ion-nav .ion-page,
html.fararoom-chat[data-fr-tab="mine"] ion-split-pane ion-nav .ion-page,
html.fararoom-chat[data-fr-tab="archive"] ion-split-pane ion-nav .ion-page,
html.fararoom-chat[data-fr-tab="wait"] ion-split-pane .split-pane-side .ion-page,
html.fararoom-chat[data-fr-tab="mine"] ion-split-pane .split-pane-side .ion-page,
html.fararoom-chat[data-fr-tab="archive"] ion-split-pane .split-pane-side .ion-page {
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.fararoom-chat #fr-inbox {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--fr-list-bg);
  direction: rtl;
}
html.fararoom-chat[data-fr-tab="wait"] #fr-inbox,
html.fararoom-chat[data-fr-tab="mine"] #fr-inbox,
html.fararoom-chat[data-fr-tab="archive"] #fr-inbox {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
}
html.fararoom-chat .fr-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px 4px;
  color: #0f766e;
}
html.fararoom-chat .fr-inbox-head b {
  font-size: 11.5px;
  font-weight: 800;
}
html.fararoom-chat .fr-inbox-head span {
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
html.fararoom-chat .fr-inbox-msg {
  margin: 12px 10px;
  padding: 12px 10px;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.65;
  text-align: center;
}
html.fararoom-chat .fr-inbox-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 8px;
}
html.fararoom-chat .fr-inbox-row {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: start;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  color: var(--fr-text);
  min-height: 56px;
}
html.fararoom-chat .fr-inbox-row:hover {
  background: #f3faf8;
}
html.fararoom-chat .fr-inbox-row.is-on {
  background: #e7f6f3 !important;
  border-color: #e7f6f3 !important;
  box-shadow: inset -3px 0 0 #0f766e;
}
html.fararoom-chat .fr-inbox-av {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ccfbf1;
  color: #0f766e;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  unicode-bidi: isolate;
}
html.fararoom-chat .fr-inbox-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html.fararoom-chat .fr-inbox-meta b {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
}
html.fararoom-chat .fr-inbox-meta i {
  font-style: normal;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
}
html.fararoom-chat .fr-inbox-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  color: #0f766e;
  background: #ccfbf1;
  border-radius: 999px;
  padding: 2px 7px;
}
html.fararoom-chat .fr-inbox-time {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
  color: #94a3b8;
  align-self: flex-start;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
html.fararoom-chat #fr-thread-frame {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--fr-chat-bg);
  display: none;
}
html.fararoom-chat[data-fr-thread="on"] #fr-thread-frame {
  display: block !important;
}
html.fararoom-chat #fr-thread-loading {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--fr-chat-bg);
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-chat #fr-thread-loading.is-on {
  display: flex !important;
}
html.fararoom-chat #fr-thread-loading span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
html.fararoom-chat app-conversation-detail,
html.fararoom-chat #iframeConsole,
html.fararoom-chat app-message-text-area,
html.fararoom-chat .row_message_text_area {
  display: none !important;
}
html.fararoom-chat[data-fr-thread="on"] #fr-chat-empty {
  display: none !important;
}
html.fararoom-chat #fr-wait-fallback iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
html.fararoom-chat header-conversations-list ion-icon[name="file-tray-full-outline"],
html.fararoom-chat header-conversations-list ion-button:has(ion-icon[name="file-tray-full-outline"]) {
  display: none !important;
}
html.fararoom-chat #convs-list ion-item,
html.fararoom-chat ion-list-conversations ion-item {
  height: auto !important;
  min-height: 68px !important;
  max-height: 76px !important;
  --min-height: 68px !important;
  --background: #f3f6f8 !important;
  --background-hover: #e8f8f5 !important;
  --inner-border-width: 0;
  --padding-start: 6px;
  --inner-padding-end: 6px;
  margin: 4px 8px !important;
  border-radius: 12px !important;
  border: 1px solid var(--fr-line) !important;
  background: #f3f6f8 !important;
  overflow: hidden !important;
}
html.fararoom-chat #convs-list ion-item::part(native) {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-inline: 8px;
  min-height: 68px !important;
  height: 68px !important;
  overflow: hidden;
}
html.fararoom-chat ion-list-conversations ion-item .conv-container {
  height: auto !important;
  max-height: 56px !important;
  padding: 6px 0 !important;
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
html.fararoom-chat #convs-list ion-avatar,
html.fararoom-chat ion-list-conversations ion-item ion-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 8px !important;
  align-self: center !important;
  line-height: 32px !important;
}
html.fararoom-chat ion-list-conversations ion-item ion-note {
  position: static !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  font-size: 10px !important;
  line-height: 1.2;
  margin-inline-start: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}
html.fararoom-chat ion-list-conversations ion-item ion-buttons {
  position: absolute !important;
  left: 6px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%);
  opacity: 0;
  z-index: 2;
}
html.fararoom-chat ion-list-conversations ion-item:hover ion-buttons,
html.fararoom-chat ion-list-conversations ion-item.ion-selected ion-buttons,
html.fararoom-chat ion-list-conversations ion-item.fr-active ion-buttons {
  opacity: 1;
}
html.fararoom-chat ion-list-conversations ion-item ion-buttons ion-button,
html.fararoom-chat ion-list-conversations ion-item ion-buttons button {
  --background: #1abc9c;
  --color: #fff;
  --border-radius: 50%;
  --padding-start: 0;
  --padding-end: 0;
  width: 28px;
  height: 28px;
  margin: 0 2px;
  border-radius: 50%;
  background: #1abc9c !important;
  color: #fff !important;
}
html.fararoom-chat #convs-list ion-label,
html.fararoom-chat ion-list-conversations ion-label {
  margin: 0;
  text-align: right;
  direction: rtl;
}
html.fararoom-chat #convs-list ion-label .conversation_with,
html.fararoom-chat ion-list-conversations .conversation_with {
  font-size: 13px !important;
  font-weight: 700 !important;
  width: auto !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.fararoom-chat #convs-list ion-label .conversation_message,
html.fararoom-chat ion-list-conversations .conversation_message {
  font-size: 11.5px !important;
  margin: 2px 0 0 !important;
  max-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.fararoom-chat ion-list-conversations ion-item .conversation_project,
html.fararoom-chat ion-list-conversations ion-item .conversation_id,
html.fararoom-chat .fr-hide-id {
  display: none !important;
}
html.fararoom-chat ion-list-conversations ion-item .conversation_project.fr-keep-channel {
  display: block !important;
  font-size: 10px !important;
  color: var(--fr-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.fararoom-chat #convs-list ion-item.ion-selected,
html.fararoom-chat #convs-list ion-item.selected,
html.fararoom-chat #convs-list ion-item.fr-active,
html.fararoom-chat ion-list-conversations ion-item.ion-selected,
html.fararoom-chat ion-list-conversations ion-item.selected,
html.fararoom-chat ion-list-conversations ion-item.fr-active,
html.fararoom-chat ion-item.ion-selected,
html.fararoom-chat ion-item.selected,
html.fararoom-chat ion-item.fr-active,
html.fararoom-chat .conversation-selected {
  --background: #c8f1e6 !important;
  --background-hover: #b7eadc !important;
  background: #c8f1e6 !important;
  border-color: #1abc9c !important;
  box-shadow: inset -4px 0 0 #1abc9c, 0 0 0 1px rgba(26, 188, 156, 0.28) !important;
}
html.fararoom-chat #convs-list ion-item.ion-selected::part(native),
html.fararoom-chat #convs-list ion-item.fr-active::part(native),
html.fararoom-chat ion-list-conversations ion-item.ion-selected::part(native),
html.fararoom-chat ion-list-conversations ion-item.fr-active::part(native) {
  background: #c8f1e6 !important;
}
html.fararoom-chat #convs-list ion-item.ion-selected .conversation_with,
html.fararoom-chat #convs-list ion-item.fr-active .conversation_with,
html.fararoom-chat ion-list-conversations ion-item.ion-selected .conversation_with,
html.fararoom-chat ion-list-conversations ion-item.fr-active .conversation_with {
  color: #0f766e !important;
  font-weight: 800 !important;
}

/* Chat middle, details left */
html.fararoom-chat app-conversation-detail,
html.fararoom-chat #conv-details {
  min-width: 0;
  overflow: hidden;
  height: 100%;
  --background: var(--fr-chat-bg);
}
html.fararoom-chat #conv-details .grid_content,
html.fararoom-chat #conv-details .row_content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  direction: ltr !important;
  height: 100%;
  width: 100%;
}
html.fararoom-chat ion-content #chat21-info-conversation,
html.fararoom-chat ion-content #chat21-info-conversation.open,
html.fararoom-chat ion-content #chat21-info-conversation.open.mobile {
  display: block !important;
  order: 1;
  position: relative;
  flex: 0 0 var(--fr-info) !important;
  width: var(--fr-info) !important;
  min-width: 220px !important;
  max-width: 380px !important;
  height: 100% !important;
  background: var(--fr-info-bg) !important;
  border: 0 !important;
  border-right: 1px solid var(--fr-line) !important;
  animation: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  direction: rtl;
}
html.fararoom-chat ion-content #chatArea,
html.fararoom-chat ion-content #chatArea.open,
html.fararoom-chat ion-content #chatArea.open.mobile {
  order: 2;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  background: var(--fr-chat-bg) !important;
  direction: rtl;
}
html.fararoom-chat #iframeConsole {
  background: var(--fr-info-bg);
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  border: 0;
  isolation: isolate;
}
html.fararoom-chat .ionContentChatArea,
html.fararoom-chat ion-conversation-detail,
html.fararoom-chat #scroll-me {
  --background: var(--fr-chat-bg);
  background: var(--fr-chat-bg) !important;
}
html.fararoom-chat app-header-conversation-detail {
  position: relative;
  z-index: 8;
}
html.fararoom-chat #chat21-info-conversation .header,
html.fararoom-chat #chat21-info-conversation .toolbar,
html.fararoom-chat #chat21-info-conversation > .info-header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;
}
html.fararoom-chat #chat21-info-conversation ion-icon[name="close"],
html.fararoom-chat #chat21-info-conversation ion-icon[name="close-outline"],
html.fararoom-chat #chat21-info-conversation .close,
html.fararoom-chat #chat21-info-conversation button.close {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  z-index: 12;
}

/* Top conversation bar */
html.fararoom-chat app-header-conversation-detail ion-header,
html.fararoom-chat app-conversation-detail > ion-header {
  box-shadow: none;
}
html.fararoom-chat app-header-conversation-detail ion-toolbar,
html.fararoom-chat app-conversation-detail ion-header ion-toolbar {
  --background: #fff;
  --color: var(--fr-text);
  --min-height: 56px;
  --border-width: 0 0 1px 0;
  --border-color: var(--fr-line);
  --padding-start: 12px;
  --padding-end: 12px;
}
html.fararoom-chat[data-theme="dark"] app-header-conversation-detail ion-toolbar,
html.fararoom-chat.fararoom-night app-header-conversation-detail ion-toolbar {
  --background: #23272e;
}
html.fararoom-chat .tile-username,
html.fararoom-chat .tile-info-with {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--fr-text);
  text-align: start;
}
html.fararoom-chat app-header-conversation-detail {
  direction: rtl;
}
html.fararoom-chat app-header-conversation-detail .avatar-container {
  margin-inline-end: 8px;
}

/* Bubbles: manager (teal+logo), bot/agent, customer — compact width */
html.fararoom-chat .ionContentChatArea,
html.fararoom-chat ion-conversation-detail {
  direction: ltr;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0;
}
html.fararoom-chat chat-bubble-message,
html.fararoom-chat .message_innerhtml,
html.fararoom-chat .txt,
html.fararoom-chat chat-text {
  direction: rtl;
  text-align: start;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.5;
}
html.fararoom-chat .msg_container {
  display: flex !important;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  position: relative;
}
html.fararoom-chat .base_sent {
  justify-content: flex-start;
  padding: 2px 16px 6px 12px;
}
html.fararoom-chat .base_receive {
  justify-content: flex-end;
  padding: 2px 12px 6px 16px;
}
html.fararoom-chat .bubble-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: min(14rem, 72%) !important;
  max-width: min(72%, 28rem) !important;
}
html.fararoom-chat .base_receive .bubble-container {
  align-items: flex-end;
}
html.fararoom-chat chat-bubble-message.messages,
html.fararoom-chat .msg_sent,
html.fararoom-chat .msg_receive,
html.fararoom-chat chat-bubble-message {
  position: relative !important;
  display: inline-block !important;
  flex-shrink: 0;
  width: max-content !important;
  min-width: 8.5rem !important;
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}
html.fararoom-chat .base_sent .msg_sent,
html.fararoom-chat chat-bubble-message.msg_sent,
html.fararoom-chat .fr-msg-manager chat-bubble-message,
html.fararoom-chat .fr-msg-manager .message_innerhtml {
  background: var(--fr-bubble-agent) !important;
  color: #111827 !important;
  border-radius: 16px 16px 4px 16px !important;
  padding: 6px 12px 18px 10px !important;
  box-shadow: 0 1px 0.5px rgba(16, 24, 40, 0.08);
}
html.fararoom-chat .fr-msg-bot chat-bubble-message,
html.fararoom-chat .fr-msg-bot .msg_receive,
html.fararoom-chat .fr-msg-bot .message_innerhtml {
  background: var(--fr-bubble-bot) !important;
  color: #0f2744 !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 6px 12px 18px 10px !important;
}
html.fararoom-chat .base_receive chat-bubble-message,
html.fararoom-chat .base_receive .msg_receive,
html.fararoom-chat .base_receive .message_innerhtml,
html.fararoom-chat .fr-msg-customer chat-bubble-message,
html.fararoom-chat .fr-msg-customer .message_innerhtml {
  background: var(--fr-bubble-visitor) !important;
  color: #111827 !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 6px 12px 18px 10px !important;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.12) !important;
}
html.fararoom-chat .info,
html.fararoom-chat .message_info,
html.fararoom-chat .info-container,
html.fararoom-chat .info-container chat-bubble-message,
html.fararoom-chat .info-container .message_innerhtml {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--fr-muted) !important;
  padding: 4px 8px !important;
}
html.fararoom-chat .bubble-container {
  position: relative;
}
html.fararoom-chat chat-bubble-message .message-date-hover,
html.fararoom-chat .msg_sent .message-date-hover,
html.fararoom-chat .msg_receive .message-date-hover,
html.fararoom-chat chat-bubble-message .message_date,
html.fararoom-chat .msg_container > .message-date-hover {
  position: absolute !important;
  bottom: 3px !important;
  left: 8px !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0.45 !important;
  visibility: visible !important;
  display: inline !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  white-space: nowrap !important;
  pointer-events: auto;
  z-index: 3;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer;
  align-self: auto !important;
}
html.fararoom-chat .base_receive chat-bubble-message .message-date-hover,
html.fararoom-chat .base_receive .message-date-hover {
  left: 8px !important;
  right: auto !important;
}
#fr-time-pop {
  position: fixed;
  z-index: 240;
  display: none;
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #1f2933;
  color: #f8fafc;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.32);
  transform: translate(-8px, calc(-100% - 10px));
  pointer-events: none;
  direction: rtl;
  text-align: right;
}
#fr-time-pop.is-on {
  display: block;
}
html.fararoom-chat .fr-msg-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
html.fararoom-chat .fr-msg-avatar img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  display: block;
}
html.fararoom-chat .fr-msg-avatar-manager {
  background: #20c15a;
}
html.fararoom-chat .fr-msg-avatar-bot {
  background: #3b82f6;
}
html.fararoom-chat .fr-msg-avatar-customer {
  background: #c4b5fd;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-chat .fr-msg-tag {
  display: none;
}
html.fararoom-chat .message-date-hover,
html.fararoom-chat .message_date,
html.fararoom-chat .long-date-divider,
html.fararoom-chat ion-note,
html.fararoom-fa time,
html.fararoom-fa .date,
html.fararoom-fa .createdAt,
html.fararoom-fa .request-date {
  font-variant-numeric: tabular-nums;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  unicode-bidi: isolate;
  direction: rtl;
}
html.fararoom-chat .long-date-divider {
  display: inline-block;
  margin: 10px auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}
html.fararoom-chat .message_sender_fullname {
  font-size: 11px;
  color: var(--fr-muted);
  margin: 0 40px 2px;
}

html.fararoom-chat .row_message_text_area,
html.fararoom-chat app-message-text-area {
  background: #fff;
  border-top: 1px solid var(--fr-line);
}
html.fararoom-chat[data-theme="dark"] .row_message_text_area,
html.fararoom-chat.fararoom-night .row_message_text_area,
html.fararoom-chat[data-theme="dark"] app-message-text-area,
html.fararoom-chat.fararoom-night app-message-text-area {
  background: #23272e;
}
html.fararoom-chat app-message-text-area textarea,
html.fararoom-chat .visible-text-area textarea,
html.fararoom-chat ion-textarea {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  color: var(--fr-text);
  text-align: start;
}

html.fararoom-chat .presenceUser,
html.fararoom-chat .status-online {
  color: var(--fr-teal-2);
  font-weight: 600;
}

html.fararoom-chat ion-split-pane > #main,
html.fararoom-chat ion-split-pane > .split-pane-main,
html.fararoom-chat ion-split-pane > .ion-page.split-pane-main {
  position: relative !important;
}
html.fararoom-chat #fr-chat-empty {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  background: var(--fr-chat-bg);
  pointer-events: none;
}
html.fararoom-chat #fr-chat-empty.is-on {
  display: flex;
}
html.fararoom-chat .fr-empty-card {
  text-align: center;
  padding: 22px 20px;
  max-width: 300px;
  background: #fff;
  border: 1px solid var(--fr-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  direction: rtl;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-chat .fr-empty-card img {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
}
html.fararoom-chat .fr-empty-card h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
html.fararoom-chat .fr-empty-card p {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.7;
}

html.fararoom-chat app-header-conversation-detail {
  display: flex;
  flex-direction: column;
}
html.fararoom-chat #fr-chat-actions {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  order: -1;
  z-index: 16;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 12px 0;
  background: #fff;
  direction: ltr;
}
html.fararoom-chat app-header-conversation-detail ion-toolbar {
  position: relative;
  overflow: visible !important;
}
html.fararoom-chat #fr-chat-actions button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #1abc9c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(26, 188, 156, 0.28);
}
html.fararoom-chat #fr-chat-actions button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
html.fararoom-chat #fr-chat-actions button:hover {
  background: #12a58a;
}
html.fararoom-chat app-header-conversation-detail .tile-username {
  padding-inline-end: 8px;
}

html.fararoom-chat app-message-text-area,
html.fararoom-chat #message-text-area,
html.fararoom-chat .row_message_text_area {
  position: relative;
}
html.fararoom-chat app-canned-response {
  position: absolute !important;
  left: 8px;
  right: 8px;
  bottom: calc(100% - 2px);
  z-index: 40;
  display: block;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 32px rgba(15, 23, 42, 0.14);
  animation: frCannedIn 0.2s ease;
  background: #fff;
}
@keyframes frCannedIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
html.fararoom-chat .canned-list {
  max-height: 260px !important;
  margin: 0 !important;
  background: #fff !important;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  direction: rtl;
}
html.fararoom-chat .canned-item,
html.fararoom-chat .canned-list ion-item {
  --background: #fff;
  --inner-border-width: 0 0 1px 0;
  --border-color: #eef1f4;
  min-height: 48px;
  padding-inline: 8px;
}
html.fararoom-chat .canned-item .cannedContent,
html.fararoom-chat .canned-item .title,
html.fararoom-chat .canned-item .text {
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  text-align: right;
  direction: rtl;
}
html.fararoom-chat .canned-item .title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2933;
}
html.fararoom-chat .canned-item .text {
  font-size: 12px !important;
  font-style: normal !important;
  color: #64748b !important;
}
html.fararoom-chat .canned-item.is_active_item,
html.fararoom-chat .canned-item:hover {
  --background: #f3fbf9 !important;
  background: #f3fbf9 !important;
}
html.fararoom-chat .canned-responses-btn,
html.fararoom-chat .canned-responses-btn-wpr ion-button {
  --color: #64748b;
  width: 36px;
  height: 36px;
}
html.fararoom-chat .buttons-left,
html.fararoom-chat app-message-text-area ion-button {
  --color: #90a4ae;
}

html.fararoom-chat chat-audio,
html.fararoom-chat .audio-container {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-width: 0 !important;
  width: 100%;
  max-width: 280px;
  padding: 2px 0 4px;
  background: transparent !important;
  direction: ltr;
  overflow: hidden;
  box-sizing: border-box;
}
html.fararoom-chat chat-audio audio,
html.fararoom-chat .fararoom-native-audio {
  display: block !important;
  width: 100%;
  min-height: 36px;
}
html.fararoom-chat .fararoom-stt-text,
html.fararoom-chat .message_innertext .fararoom-stt-text {
  display: none !important;
}
html.fararoom-chat .fr-msg-manager .fararoom-stt-text,
html.fararoom-chat .msg_sent .fararoom-stt-text {
  color: inherit;
}
html.fararoom-chat .audio-track {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  flex: 0 0 auto;
}
html.fararoom-chat .audio-track .play-pause {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  border-radius: 50% !important;
  background: #fff !important;
  color: #1abc9c !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
}
html.fararoom-chat .audio-track .play-pause svg {
  fill: #1abc9c !important;
  width: 22px;
  height: 22px;
}
html.fararoom-chat .audio-track .duration,
html.fararoom-chat .audio-track .duration span {
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: inherit !important;
  padding: 0 !important;
  min-width: 42px;
  font-variant-numeric: tabular-nums;
}
html.fararoom-chat .audio-player-custom,
html.fararoom-chat .waveformCanvas {
  flex: 1 1 auto;
  min-width: 90px !important;
  height: 4px !important;
  max-height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18) !important;
  overflow: hidden;
}
html.fararoom-chat .fr-msg-manager chat-audio .play-pause,
html.fararoom-chat .msg_sent .audio-track .play-pause {
  background: #fff !important;
}
html.fararoom-chat .info-container,
html.fararoom-chat .msg_info_container {
  display: flex;
  justify-content: center;
}
html.fararoom-chat .info-container chat-bubble-message,
html.fararoom-chat chat-info-message {
  background: #e8edf2 !important;
  color: #64748b !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

html.fararoom-panel .right-sidebar-actions .dropdown-toggle,
html.fararoom-panel .right-sidebar-actions > div > a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1abc9c !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 4px 8px 0 auto;
}
html.fararoom-panel .right-sidebar-actions span.material-icons {
  color: #fff !important;
  font-size: 20px !important;
  margin: 0 !important;
}
html.fararoom-panel .sidebar-tabs,
html.fararoom-panel .more-options-dropdown-wpr::before {
  display: none !important;
}
html.fararoom-panel .more-options-dropdown-wpr {
  min-height: 0;
  border: 0;
}
html.fararoom-panel .ul-wpr,
html.fararoom-panel .ul-wpr-chat {
  box-shadow: none !important;
  padding: 4px 8px !important;
  margin: 4px 0 !important;
  background: transparent !important;
}
html.fararoom-panel .ul-wpr li,
html.fararoom-panel .ul-wpr-chat li {
  margin: 0 !important;
  padding: 0 !important;
}
html.fararoom-panel .contact-row {
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 22px !important;
  height: auto !important;
  padding: 1px 2px !important;
  color: #334155;
  font-size: 11px !important;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
html.fararoom-panel .contact-row svg,
html.fararoom-panel .contact-row .material-icons,
html.fararoom-panel .project-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  fill: #94a3b8 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}
html.fararoom-panel .contact-row input,
html.fararoom-panel .contact-row span,
html.fararoom-panel .viewed-pages-wpr {
  font-size: 11px !important;
  color: #334155;
  text-align: right;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
html.fararoom-panel .tab0-card2,
html.fararoom-panel .tab0-card3,
html.fararoom-panel .tab0-card2-content,
html.fararoom-panel .tab0-card3-chat {
  box-shadow: none !important;
  margin-top: 0 !important;
  padding: 2px 8px !important;
  background: transparent !important;
}
html.fararoom-panel .viewed-pages-wpr {
  max-height: 64px;
  overflow: auto;
  white-space: normal;
}
html.fararoom-panel .btn-get--feature-no-boxshadow,
html.fararoom-panel [class*="add-tag"],
html.fararoom-panel .tag-add,
html.fararoom-panel button.btn-add-tag {
  border: 1px dashed #cbd5e1 !important;
  background: #fff !important;
  color: #64748b !important;
  border-radius: 999px !important;
  min-height: 32px;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
}

@media (max-width: 767px) {
  html.fararoom-chat ion-split-pane {
    margin: 0 !important;
    inset: var(--fr-top) 0 var(--fr-footer) 0 !important;
    position: relative !important;
  }
  html.fararoom-chat ion-content #chat21-info-conversation.open.mobile {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Dates stay readable */
html.fararoom-fa time,
html.fararoom-fa .date,
html.fararoom-fa .createdAt,
html.fararoom-fa .request-date {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

html.fararoom-notif .card,
html.fararoom-notif .settings-card,
html[class*="fararoom"] app-project-edit .card {
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
}
html.fararoom-notif h1,
html.fararoom-notif h2,
html.fararoom-notif .card-title {
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  color: #0f766e !important;
}
.displayContactUsModalToUpgradePlan,
.modal-contact-us-to-upgrade-plan,
[class*="displayContactUsModalToUpgradePlan"] {
  display: none !important;
}