/* Indigo design system — dashboard (mirrors agora-call/src/styles/callview.css) */

:root {
  --hype-stage: linear-gradient(180deg, #1D1B40 0%, #1D1B40 30%, #16142f 100%);
  --hype-topbar: linear-gradient(90deg, rgba(67, 56, 202, 0.92), rgba(99, 102, 241, 0.92));
  --hype-tile-bg: #1c1a3a;
  --hype-modal: linear-gradient(180deg, #262357, #1a1838);
  --hype-modal-border: rgba(129, 140, 248, 0.22);
  --hype-input: rgba(255, 255, 255, 0.05);
  --hype-accent: #818cf8;
  --hype-accent-strong: #6366f1;
  --hype-accent-soft: rgba(129, 140, 248, 0.18);
  --hype-btn: linear-gradient(135deg, #4f46e5, #6366f1);
  --hype-text: #fff;
  --hype-muted: #9aa0c8;
  --hype-faint: #6f74a0;
  --hype-link: #a5b4fc;
  --hype-row: rgba(255, 255, 255, 0.045);
  --hype-row-hover: rgba(255, 255, 255, 0.1);
  --hype-glass: rgba(20, 18, 40, 0.72);
  --hype-ok: #34d399;
  --hype-offline: #6b7280;
  --hype-sidebar: rgba(12, 11, 28, 0.55);
  --hype-sidebar-width: 200px;
  --hype-font: 'Figtree', system-ui, sans-serif;
  --hype-header-logo-height: 48px;
  /* Shared scrollbar (modals, contacts, meetings, history, dropdowns) */
  --hype-scrollbar-size: 6px;
  --hype-scrollbar-thumb: rgba(129, 140, 248, 0.45);
  --hype-scrollbar-thumb-hover: rgba(129, 140, 248, 0.7);
  --hype-scrollbar-track: transparent;
}

html {
  background: #16142f !important;
}

body {
  font-family: var(--hype-font) !important;
  color: var(--hype-text);
}

/* ── Shared indigo scrollbar (overrides main.css dark inset shadows) ── */
*,
*::before,
*::after {
  scrollbar-width: thin;
  scrollbar-color: var(--hype-scrollbar-thumb) var(--hype-scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--hype-scrollbar-size) !important;
  height: var(--hype-scrollbar-size) !important;
}

*::-webkit-scrollbar-track {
  background: var(--hype-scrollbar-track) !important;
  border-radius: 999px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

*::-webkit-scrollbar-thumb {
  background: var(--hype-scrollbar-thumb) !important;
  border-radius: 999px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--hype-scrollbar-thumb-hover) !important;
}

*::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Language menus intentionally hide scrollbars (legacy footer language picker). */
.language-dropdown-menu,
.language-selct-div .language-dropdown-menu {
  scrollbar-width: none !important;
}

.language-dropdown-menu::-webkit-scrollbar,
.language-selct-div .language-dropdown-menu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Beat legacy panel.css / main.css id-specific scrollbar rules */
#notification-listDrop::-webkit-scrollbar,
ul.notifications-dropdown-menu::-webkit-scrollbar,
#activity-listDrop::-webkit-scrollbar {
  width: var(--hype-scrollbar-size) !important;
  height: var(--hype-scrollbar-size) !important;
  background-color: transparent !important;
}

#notification-listDrop::-webkit-scrollbar-track,
ul.notifications-dropdown-menu::-webkit-scrollbar-track,
#activity-listDrop::-webkit-scrollbar-track {
  background: var(--hype-scrollbar-track) !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

#notification-listDrop::-webkit-scrollbar-thumb,
ul.notifications-dropdown-menu::-webkit-scrollbar-thumb,
#activity-listDrop::-webkit-scrollbar-thumb {
  background: var(--hype-scrollbar-thumb) !important;
  border-radius: 999px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* Bootstrap sets a:focus { outline: 5px auto -webkit-focus-ring-color } — kill it app-wide
   (header brand, chat, nav links, etc.). */
a:focus,
a:active {
  outline: none !important;
  outline-offset: 0 !important;
}

/* ── Alertify (global) ── */
.alertify .ajs-dialog {
  background: var(--hype-modal) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55) !important;
  color: var(--hype-text) !important;
  overflow: hidden;
}

.alertify .ajs-header {
  background: #2a237dc9 !important;
  border-bottom: 1px solid rgba(129, 140, 248, 0.28) !important;
  color: var(--hype-text) !important;
  padding: 14px 18px !important;
  font-weight: 700;
}

.alertify .ajs-body .ajs-content {
  color: var(--hype-muted) !important;
  padding: 14px 18px 10px !important;
}

.alertify .ajs-body .ajs-content hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 10px 0 12px !important;
}

.alertify .ajs-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 18px 14px !important;
  overflow: hidden; /* contain floated RTL buttons so footer grows with them */
  box-sizing: border-box;
}

.alertify .ajs-footer .ajs-buttons .ajs-button {
  background: transparent !important;
  border: 1px solid rgba(129, 140, 248, 0.28) !important;
  border-radius: 10px !important;
  color: var(--hype-text) !important;
  font-weight: 700;
  padding: 9px 18px !important;
}

.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok,
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-primary,
.alertify .ajs-footer .ajs-buttons .ajs-button.btn-success,
.alertify .ajs-footer .ajs-buttons .btn.btn-success {
  background: var(--hype-btn) !important;
  border: 1px solid rgba(67, 56, 202, 0.85) !important;
  border-color: rgba(67, 56, 202, 0.85) !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

.alertify .ajs-footer .ajs-buttons .ajs-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

.alertify .ajs-commands button.ajs-close {
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}

.alertify .ajs-commands button.ajs-close:hover {
  color: #fff !important;
}

/* Content typography (reuses existing markup classes, but dark-theme) */
.alertify .deviceSourceHeader {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--hype-text) !important;
}

.alertify .deviceSourceSubHeader {
  margin: 0 0 4px 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--hype-font) !important;
}

.alertify .deviceSourceDesc {
  margin: 0 0 10px 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--hype-muted) !important;
}

.alertify .meetingHistoryInfo .container-fluid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
}

.alertify .meetingHistoryInfo .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.alertify .deviceInfoSpinner {
  color: var(--hype-muted) !important;
}

.alertify .valuelbl p,
.alertify .valuelbl {
  color: var(--hype-muted) !important;
}

.alertify .txtlbl {
  color: rgba(255, 255, 255, 0.85) !important;
}

.hype-dashboard-stage,
.hype-dashboard-stage.fill,
#image-div {
  background: var(--hype-stage) !important;
}

.hype-dashboard-stage.container,
.hype-dashboard-stage.fill {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Dashboard shell layout (sidebar + main) ── */
#image-div {
  margin-left: var(--hype-sidebar-width) !important;
  width: calc(100% - var(--hype-sidebar-width)) !important;
  max-width: none !important;
  box-sizing: border-box;
  height: calc(100vh - 52px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#top-menu .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
}

.navbar-hype .navbar-nav.navbar-right {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

#contactsDiv,
#scheduledMeetingsDiv,
#recentCallsDiv {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}

#contactsDiv {
  min-height: 0 !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  /* Do NOT set display here — ContactsTab toggles display:flex/none for tab visibility. */
  flex-direction: column !important;
}

#recentCallsDiv {
  min-height: 0 !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  /* Do NOT set display here — HistoryTab toggles display:flex/none for tab visibility.
     display:flex !important was overriding display:none and stacking History under Contacts/Meetings. */
  flex-direction: column !important;
}

#recentCallsDiv .historyTabContainer.hype-history {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#recentCallsDiv .hype-history-list-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-left: 0;
}

#contactsDiv .tab-main-div,
#scheduledMeetingsDiv .tab-main-div,
#recentCallsDiv .tab-main-div,
.tab-main-div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 20px 28px 24px !important;
  box-sizing: border-box;
}

#contactsDiv .container.tab-main-div {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#contactsDiv .hype-contacts-header {
  flex: 0 0 auto !important;
}

#contactsDiv .container.tab-main-div,
#scheduledMeetingsDiv .container.tab-main-div,
#recentCallsDiv .container.tab-main-div {
  width: 100% !important;
  max-width: 100% !important;
}

@media all and (min-width: 850px) and (max-width: 1100px) {
  #contactsDiv .tab-main-div,
  #recentCallsDiv .tab-main-div,
  #scheduledMeetingsDiv .tab-main-div,
  #recordedMeetingsDiv .tab-main-div {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ── Contacts header row ── */
#contactsDiv .tab-main-header,
#contactsDiv .hype-contacts-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  height: auto !important;
  min-height: 0;
  margin: 0 0 4px !important;
  width: 100% !important;
}

#contactsDiv .tab-main-header > [class*="col-"],
#contactsDiv .hype-contacts-header-left,
#contactsDiv .hype-contacts-header-right {
  width: auto !important;
  max-width: none !important;
  flex: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

#contactsDiv .tab-main-header.row-reverse {
  flex-direction: row !important;
}

html[dir="rtl"] #contactsDiv .tab-main-header.row-reverse,
.languageRTL #contactsDiv .tab-main-header.row-reverse {
  flex-direction: row !important;
  direction: rtl !important;
}

#contactsDiv .contactsTabHeadingRight,
#contactsDiv .hype-contacts-header-left {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#contactsDiv #contact-search-div,
#contactsDiv .hype-contacts-header-right {
  flex: 0 0 auto;
  margin-inline-start: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 0 !important;
  text-align: right !important;
  min-height: 40px;
}

html[dir="rtl"] #contactsDiv #contact-search-div,
html[dir="rtl"] #contactsDiv .hype-contacts-header-right,
.languageRTL #contactsDiv #contact-search-div,
.languageRTL #contactsDiv .hype-contacts-header-right {
  order: unset !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
  direction: ltr !important;
  text-align: left !important;
  float: none !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

html[dir="rtl"] #contactsDiv #contacts-search-input,
html[dir="rtl"] #contactsDiv .searchinputContact,
.languageRTL #contactsDiv #contacts-search-input,
.languageRTL #contactsDiv .searchinputContact {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  float: none !important;
}

html[dir="rtl"] #contactsDiv #searchinputContact,
.languageRTL #contactsDiv #searchinputContact {
  text-align: right !important;
  height: 40px !important;
  padding: 0 36px 0 16px !important;
}

html[dir="rtl"] #contactsDiv .searchinputContact::before,
.languageRTL #contactsDiv .searchinputContact::before {
  left: auto !important;
  right: 14px !important;
}

html[dir="rtl"] #contactsDiv #contacts-search-input #searchclear,
.languageRTL #contactsDiv #contacts-search-input #searchclear {
  right: auto !important;
  left: 12px !important;
}

html[dir="rtl"] #contactsDiv #contactTabAddContact,
html[dir="rtl"] #contactsDiv .contactTabAddContact,
.languageRTL #contactsDiv #contactTabAddContact,
.languageRTL #contactsDiv .contactTabAddContact {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

#contactsDiv #contacts-search-input,
#contactsDiv .searchinputContact {
  width: min(300px, 36vw) !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  height: 40px;
  margin: 0;
  flex: 0 1 auto;
}

#contactsDiv #searchinputContact {
  height: 40px !important;
  line-height: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  vertical-align: middle;
}

#contactsDiv .searchinputContact::before {
  top: 50%;
  transform: translateY(-50%);
}

#contactsDiv #contacts-search-input #searchclear {
  top: 50% !important;
  left: auto !important;
  right: 12px;
  transform: translateY(-50%);
  margin: 0;
  line-height: 1;
}

#contactsDiv #contactTabAddContact,
#contactsDiv .contactTabAddContact {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  flex-shrink: 0;
  align-self: center;
  line-height: 1 !important;
}

#contacts-search-input {
  width: min(300px, 36vw) !important;
  display: inline-block !important;
}

#contactsInnerDiv {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 20px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* Explicit cap so the list is always the scroll container (flex chain can fail with .container/.row). */
  max-height: calc(100vh - 220px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

#contactsTable {
  width: 100% !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#scheduledMeetingsDiv .tab-main-header,
#recentCallsDiv .tab-main-header {
  width: 100% !important;
  margin: 0 !important;
}

#scheduledMeetingsInnerDiv,
#recenCallsInnerDiv1 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Top navbar ── */
.navbar.navbar-hype,
.navbar-hype {
  background: var(--hype-topbar) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

/*
 * Pips live on nav <li> cells only — never on every <a>, and not on the
 * brand wrap (the old `.navbar-header` border stacked and looked thicker).
 */
.navbar-hype a {
  border-right: none !important;
}

.navbar-hype .hype-topbar-brand-wrap {
  float: left;
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
}

.navbar-hype .navbar-brand,
.navbar-hype .navbar-brand:hover,
.navbar-hype .navbar-brand:focus {
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  height: 50px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* Cancel nav-bar.css `.navbar-brand img { margin-top: -17px }` so the
   app mark sits on the same vertical center as the other header slots. */
.navbar-hype .hype-topbar-brand-wrap .navbar-brand img,
.navbar-hype .navbar-brand img {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: var(--hype-header-logo-height) !important;
  max-height: var(--hype-header-logo-height) !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/*
 * Topbar slots: each nav cell is a flex box; content is centered between
 * vertical “pip” borders. Borders live on the <li> so padding stays equal.
 */
.navbar.navbar-hype .navbar-nav > li,
.navbar-hype .navbar-nav > li,
.navbar-hype .hype-topbar-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: left;
  height: 50px;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  position: relative;
  border-right: 1px solid #16142f !important;
  border-left: none !important;
}

.navbar.navbar-hype .navbar-nav > li > a,
.navbar-hype .navbar-nav > li > a,
.navbar-hype .hype-topbar-slot-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  float: none !important;
  border-right: none !important;
  text-align: center !important;
}

/* Icon-only slots (notifications / settings / guru): equal square cells */
.navbar-hype .hype-topbar-slot--icon {
  width: 56px;
  min-width: 56px;
  flex: 0 0 56px;
}

.navbar-hype .hype-topbar-slot--icon > a,
.navbar-hype .hype-topbar-slot--icon .hype-topbar-slot-link {
  padding: 0 !important;
}

.navbar-hype .hype-topbar-slot--chat {
  min-width: 88px;
  padding: 0 16px !important;
}

.navbar-hype .hype-topbar-slot--chat > a,
.navbar-hype .hype-topbar-slot--chat .hype-topbar-slot-link {
  padding: 0 4px !important;
  gap: 7px;
  width: auto !important;
}

.navbar-hype .hype-topbar-slot--presence {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}

.navbar-hype #presence {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px;
}

.navbar-hype #presence > a,
.navbar-hype #presence .hype-presence-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  border-radius: 0 !important;
  border-right: none !important;
  width: 100% !important;
}

/* Rightmost header item: no trailing pip; content centered to header edge */
.navbar-hype .hype-topbar-right-nav > li:last-child,
.navbar-hype #setting-li > li:last-child {
  border-right: none !important;
}

.navbar-hype #notifications #dLabel,
.navbar-hype #notifications .hype-topbar-notif-btn,
.navbar-hype #chat-option > a,
.navbar-hype #settingsBtnNew > a.hype-settings-trigger,
.navbar-hype #guruMainDiv > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 16px;
  padding: 0 !important;
  line-height: 1;
}

.navbar-hype #notifications .hype-topbar-notif-btn {
  width: 100%;
  position: relative;
}

.navbar-hype #guruMainDiv > a img,
.navbar-hype #settingsBtnNew > a img,
.navbar-hype #notifications #dLabel img {
  display: block;
  margin: 0 auto;
}

.navbar-hype #guruMainDiv > a,
.navbar-hype .screen-skill-guru-div > a.screen-skill-guru-btn {
  padding: 0 !important;
}

.navbar-hype #settingsBtnNew > a.hype-settings-trigger {
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Do not strip settings’ pip — only the final right-nav cell loses its border */
.navbar-hype #settingsBtnNew > a.hype-settings-trigger,
.navbar-hype #settingsBtnNew > a {
  border-right: none !important;
}

.navbar-hype .dropdown-menu a,
.navbar-hype #notification-listDrop a,
.navbar-hype .hype-settings-menu a {
  border-right: none !important;
}

.navbar-hype .dropdown-menu,
.navbar-hype #notification-listDrop {
  background: linear-gradient(180deg, #2a2860, #1e1c42) !important;
  color: var(--hype-text) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 12px !important;
}

.navbar-hype #notification-listDrop .list-group-item,
.navbar-hype .dropdown-menu li:not(.hype-settings-profile):not(.hype-presence-menu-header):not(.dropdown-header):not(.guru-list-heading) {
  color: var(--hype-muted) !important;
  background: transparent !important;
}

.navbar-hype .settingDropdownRightAlign,
.navbar-hype #settingsBtnNew .dropdown-menu {
  background: linear-gradient(180deg, #2a2860, #1e1c42) !important;
  border: 1px solid var(--hype-modal-border) !important;
}

.navbar-hype #settingsBtnNew .dropdown-menu:after {
  border-bottom-color: #2a2860 !important;
}

.navbar-hype #license-span,
.settingsHeaderSecRow .list-group-item {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--hype-muted) !important;
}

.navbar-hype .notificatonArrow {
  border-bottom-color: #2a2860 !important;
}

.navbar-hype .recentActivityArrow {
  border-bottom-color: #2a2860 !important;
}

/* ── Dropdown headings (shared indigo header bar) ── */
.guru-list-heading,
.hype-presence-menu-header,
.hype-settings-profile,
.callview-guru-heading,
.callview-dropdown-section,
.callview-joined-header,
#activity-listDrop li.dropdown-header,
.navbar-hype .dropdown-menu > .dropdown-header,
.dropdown-menu > li.dropdown-header,
.navbar-hype .dropdown-menu > li.hype-settings-profile,
.navbar-hype .dropdown-menu > li.hype-presence-menu-header,
.navbar-hype #settingsBtnNew .hype-settings-profile.list-group-item,
.navbar-hype .hype-presence-menu > .hype-presence-menu-header {
  background: #2d2c6f !important;
  background-color: #2d2c6f !important;
}

#activity-listDrop li.dropdown-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--hype-text, #fff);
}

#activity-listDrop li.dropdown-header h5 {
  color: var(--hype-text, #fff);
}

/* ── Notifications dropdown (Indigo) ── */
.navbar-hype #notification-listDrop.hype-notifications-menu,
.navbar-hype #notification-listDrop {
  width: 340px !important;
  max-width: calc(100vw - 24px);
  min-height: 42px;
  max-height: 80vh;
  margin-top: 10px !important;
  padding: 6px 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  color: var(--hype-text) !important;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--hype-font);
  list-style: none;
}

.navbar-hype #notifications .notificatonArrow {
  display: none !important;
}

.navbar-hype #notification-listDrop > li {
  list-style: none;
  float: none !important;
}

.navbar-hype #notification-listDrop li.notifications-dropdown {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px !important;
  margin: 0 !important;
  min-height: auto !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  color: var(--hype-text) !important;
  position: relative;
  cursor: pointer;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

.navbar-hype #notification-listDrop li.notifications-dropdown:last-child {
  border-bottom: none !important;
}

.navbar-hype #notification-listDrop li.notifications-dropdown:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.navbar-hype #notification-listDrop li.notifications-dropdown.hype-notification-unseen {
  background: var(--hype-accent-soft) !important;
}

.navbar-hype #notification-listDrop li.notifications-dropdown.hype-notification-unseen:hover {
  background: rgba(129, 140, 248, 0.24) !important;
}

.navbar-hype #notification-listDrop .notifications-dropdown-text-div {
  padding: 0 !important;
  margin: 0 0 4px !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
  color: var(--hype-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-family: var(--hype-font);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.navbar-hype #notification-listDrop .notifications-dropdown-text-div:last-child {
  margin-bottom: 0 !important;
}

.navbar-hype #notification-listDrop .notifications-dropdown-text-div.timeMeeting,
.navbar-hype #notification-listDrop .notifications-dropdown-text-div.timeMeeting.timeFuzzy,
.navbar-hype #notification-listDrop .timeMeeting.timeFuzzy {
  color: var(--hype-faint) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
}

.navbar-hype #notification-listDrop .notifications-dropdown-text-div.timeMeeting.timeScheduledMeeting,
.navbar-hype #notification-listDrop .timeScheduledMeeting {
  color: var(--hype-muted) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.navbar-hype #notification-listDrop .notifications-dropdown-text-div.participantMeeting {
  color: var(--hype-muted) !important;
}

.navbar-hype #notification-listDrop li.meeting-notification-li {
  min-height: auto !important;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.navbar-hype #notification-listDrop .noti-meeting-owner-div {
  float: none !important;
  flex: 0 0 36px;
  padding: 0 !important;
}

.navbar-hype #notification-listDrop .noti-meeting-owner-div .user-profile-picture,
.navbar-hype #notification-listDrop .noti-meeting-owner-div .usercontact-text-div {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(129, 140, 248, 0.3) !important;
  object-fit: cover;
}

.navbar-hype #notification-listDrop .meeting-notification-content-element {
  float: none !important;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
}

.navbar-hype #notification-listDrop .meeting-notification-content-element .notification-meeting-message {
  display: block;
}

.navbar-hype #notification-listDrop .imgContainer {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible !important;
  max-width: 100%;
  margin: 6px 0 4px !important;
  float: none !important;
  position: relative;
}

.navbar-hype #notification-listDrop .imgContainer .meeting-noti-image-div,
.navbar-hype #notification-listDrop .imgContainer .noti-participant-text-div,
.navbar-hype #notification-listDrop .imgContainer .notification-participant-phone,
.navbar-hype #notification-listDrop .imgContainer .notification-participant-sip {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0;
  position: relative;
}

.navbar-hype #notification-listDrop .imgContainer > :nth-child(1) { z-index: 1; }
.navbar-hype #notification-listDrop .imgContainer > :nth-child(2) { z-index: 2; }
.navbar-hype #notification-listDrop .imgContainer > :nth-child(3) { z-index: 3; }
.navbar-hype #notification-listDrop .imgContainer > :nth-child(4) { z-index: 4; }

.navbar-hype #notification-listDrop .imgContainer .dropdown-submenu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 0 0 -6px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  position: relative;
  z-index: 5 !important;
  overflow: visible !important;
  vertical-align: middle;
  cursor: pointer;
}

.navbar-hype #notification-listDrop .meeting-noti-image-div,
.navbar-hype #notification-listDrop .noti-participant-text-div,
.navbar-hype #notification-listDrop .notification-participant-phone,
.navbar-hype #notification-listDrop .notification-participant-sip {
  float: none !important;
  border-radius: 50%;
  border: 2px solid rgba(129, 140, 248, 0.25) !important;
  margin-right: -6px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(129, 140, 248, 0.2);
}

.navbar-hype #notification-listDrop .noti-participant-text-div .history-participant-username-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Meeting join button always visible (matches legacy schedule screenshots). */
.navbar-hype #notification-listDrop .meeting-notification-li .notifications-dropdown-actions-div.call {
  display: flex !important;
  position: static !important;
  transform: none !important;
  right: auto !important;
  top: auto !important;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  height: auto !important;
}

/* Contact / community accept-reject — always visible (legacy hover-show; keep discoverable). */
.navbar-hype #notification-listDrop li.community-invite-li,
.navbar-hype #notification-listDrop li.contact-invite-li {
  padding-right: 12px !important;
}

.navbar-hype #notification-listDrop li.community-invite-li .notifications-dropdown-actions-div,
.navbar-hype #notification-listDrop li.contact-invite-li .notifications-dropdown-actions-div,
.navbar-hype #notification-listDrop .hype-notif-invite-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  height: auto !important;
  width: auto !important;
  min-width: 40px;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  z-index: 2;
}

.navbar-hype #notification-listDrop .hype-notif-invite-actions .notifications-dropdown-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  padding: 6px !important;
  left: auto !important;
  top: auto !important;
  position: static !important;
}

.navbar-hype #notification-listDrop .li-content {
  float: none !important;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
}

.navbar-hype #notification-listDrop .meeting-noti-image-div .user-profile-picture,
.navbar-hype #notification-listDrop .noti-participant-text-div {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  border: none !important;
}

.navbar-hype #notification-listDrop .history-participant-username-letter,
.navbar-hype #notification-listDrop .notification-participant-phone-span,
.navbar-hype #notification-listDrop .notification-participant-sip-span {
  color: var(--hype-text) !important;
  font-size: 11px !important;
}

.navbar-hype #notification-listDrop .notification-participant-count,
.navbar-hype #notification-listDrop .recent-more-participants-count {
  color: var(--hype-link) !important;
  background: rgba(129, 140, 248, 0.16) !important;
  border: 2px solid rgba(129, 140, 248, 0.25) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  box-sizing: border-box;
  line-height: 1;
  white-space: nowrap;
}

.navbar-hype #notification-listDrop .noti-meeting-sub-dropdown {
  background: linear-gradient(180deg, #2a2860, #1e1c42) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  color: var(--hype-text) !important;
  padding: 6px 0 !important;
}

.navbar-hype #notification-listDrop .noti-meeting-sub-dropdown li,
.navbar-hype #notification-listDrop .more-participants-dropdown-list {
  color: var(--hype-muted) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  background: transparent !important;
}

.navbar-hype #notification-listDrop .noti-meeting-sub-dropdown li:hover,
.navbar-hype #notification-listDrop .more-participants-dropdown-list:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--hype-text) !important;
}

.navbar-hype #notification-listDrop .noti-meeting-dropdown-icon {
  color: var(--hype-muted) !important;
}

/* 5+ participant list — anchor to badge; main.css left:93px clips off the 340px panel */
.navbar-hype #notification-listDrop .noti-meeting-sub-dropdown {
  position: absolute !important;
  display: block !important;
  left: auto !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  width: min(168px, calc(100vw - 32px)) !important;
  max-width: min(168px, calc(100vw - 32px)) !important;
  z-index: 30 !important;
}

.navbar-hype #notification-listDrop .noti-meeting-sub-dropdown .noti-meeting-dropdown-icon {
  right: 10px !important;
  left: auto !important;
  float: none !important;
}

.navbar-hype #notification-listDrop .dropdown-submenu.dropup .noti-meeting-sub-dropdown {
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  left: auto !important;
  right: 0 !important;
  margin-left: 0 !important;
}

.navbar-hype #notification-listDrop .dropdown-submenu.dropup .noti-meeting-sub-dropdown .noti-meeting-dropdown-icon {
  top: auto !important;
  bottom: -11px !important;
  transform: rotate(180deg);
}

.navbar-hype #notification-listDrop .notification-more-participant-items {
  max-height: min(240px, 40vh);
  overflow-y: auto;
  overflow-x: hidden;
}

.navbar-hype #notification-listDrop li.notification-reminder-li {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  cursor: pointer;
}

.navbar-hype #notification-listDrop .reminder-notification-content {
  float: none !important;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
}

.navbar-hype #notification-listDrop .notification-reminder-meeting {
  color: var(--hype-text) !important;
  font-weight: 500 !important;
}

.navbar-hype #notification-listDrop .notificationRemiderFuzzytime {
  margin-top: 4px !important;
}

.navbar-hype #notification-listDrop .community-invite-li .li-content,
.navbar-hype #notification-listDrop .contact-invite-li .li-content,
.navbar-hype #notification-listDrop .missed-call-content {
  float: none !important;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
}

.navbar-hype #notification-listDrop .user-profile-contact-notification {
  float: none !important;
  flex: 0 0 36px;
  padding: 0 !important;
}

.navbar-hype #notification-listDrop .user-profile-contact-notification .usercontact-text-div,
.navbar-hype #notification-listDrop .user-profile-contact-notification .user-profile-picture {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(129, 140, 248, 0.3) !important;
  object-fit: cover;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(129, 140, 248, 0.2);
}

.navbar-hype #notification-listDrop .notifications-dropdown-actions-div {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

/* Invite accept/reject stay visible even if the generic rule above applies later. */
.navbar-hype #notification-listDrop .notifications-dropdown-actions-div.hype-notif-invite-actions {
  display: flex !important;
}

.navbar-hype #notification-listDrop .notifications-dropdown-actions-div.call {
  width: auto !important;
  right: 12px;
}

.navbar-hype #notification-listDrop .notifications-dropdown-action {
  position: static !important;
  padding: 6px !important;
  border: none !important;
  background: rgba(129, 140, 248, 0.16) !important;
  border-radius: 8px !important;
  transition: background 0.15s ease;
  left: auto !important;
  top: auto !important;
}

.navbar-hype #notification-listDrop .notifications-dropdown-action:hover {
  background: rgba(129, 140, 248, 0.28) !important;
}

.navbar-hype #notification-listDrop .notifications-dropdown-action > img {
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
  filter: brightness(1.2);
}

.navbar-hype #notification-listDrop .call .notifications-dropdown-action > img {
  width: 26px !important;
  height: 26px !important;
}

/* Meeting join dialer — flex box + optical vertical center (SVG handset reads high). */
.navbar-hype #notification-listDrop .meeting-notification-li .notifications-dropdown-action.hype-notif-join-call {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.navbar-hype #notification-listDrop .meeting-notification-li .notifications-dropdown-action.hype-notif-join-call svg {
  display: block;
  flex-shrink: 0;
  transform: translateY(1.5px);
}

.navbar-hype #notification-listDrop li.hype-notification-empty,
.navbar-hype #notification-listDrop #notification-label {
  padding: 16px !important;
  text-align: center !important;
  background: transparent !important;
  border-bottom: none !important;
  cursor: default !important;
}

.navbar-hype #notification-listDrop li.hype-notification-empty:hover,
.navbar-hype #notification-listDrop #notification-label:hover {
  background: transparent !important;
}

.navbar-hype #notification-listDrop li.hype-notification-empty label,
.navbar-hype #notification-listDrop #notification-label label {
  color: var(--hype-faint) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  margin: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--hype-font);
}

.navbar-hype #notifications #dLabel:hover,
.navbar-hype #notifications.open #dLabel {
  background: rgba(129, 140, 248, 0.16) !important;
  border-radius: 0 !important;
}

.navbar-hype #notifications .badgeBubble {
  border: none;
  background: #f1282f;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  line-height: 18px;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  position: absolute;
  right: 6px;
  top: 6px;
  font-size: 10px;
  font-weight: 600;
}

.languageRTL .navbar-hype #notification-listDrop .notifications-dropdown-actions-div {
  background: transparent !important;
  left: 12px !important;
  right: unset !important;
}

.languageRTL .navbar-hype #notification-listDrop .notifications-dropdown-action {
  left: auto !important;
}

@media (max-width: 767px) {
  .navbar-hype #notification-listDrop.hype-notifications-menu,
  .navbar-hype #notification-listDrop {
    width: 100% !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #2a2860, #1e1c42) !important;
    box-shadow: none !important;
  }
}

#recent-activity-loader-div {
  background-color: transparent !important;
}

/* ── Top bar chat icon (matches agora-call CallTopBar IcChat) ── */
#chat-option,
#groupChat.group-chat-in-meeting {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.15s ease, color 0.15s ease;
}

#chat-option a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  color: inherit !important;
  text-decoration: none !important;
}

#groupChat.group-chat-in-meeting {
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.hype-topbar-chat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: inherit;
}

.hype-topbar-chat-icon svg {
  display: block;
}

#chat-option.hype-chat-nav-active,
#groupChat.hype-chat-nav-active {
  background: rgba(129, 140, 248, 0.16) !important;
  border-radius: 0;
  color: #fff !important;
}

#chat-option.hype-chat-nav-active .hype-topbar-chat-icon,
#groupChat.hype-chat-nav-active .hype-topbar-chat-icon {
  filter: drop-shadow(0 0 7px rgba(129, 140, 248, 0.95))
    drop-shadow(0 0 14px rgba(99, 102, 241, 0.6));
}

#groupChat.hype-chat-nav-active #callview_chat_span,
#groupChat.hype-chat-nav-active .callview-text-navbar {
  color: #fff !important;
}

/* Topbar chat / notification badges — perfect circles, no green ring */
#chat-option {
  position: relative;
}

#chat-option .badgeBubble,
#chat-option #chatBadge,
.navbar-hype #chat-option .badgeBubble {
  border: none !important;
  background: #f1282f !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  line-height: 18px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none !important;
  position: absolute !important;
  right: -6px;
  left: auto;
  top: -4px;
  font-size: 10px !important;
  font-weight: 600;
  text-align: center;
  z-index: 9;
}

html[dir='rtl'] #chat-option .badgeBubble,
html[dir='rtl'] #chat-option #chatBadge,
.languageRTL #chat-option .badgeBubble,
.languageRTL #chat-option #chatBadge {
  right: auto !important;
  left: -6px !important;
  top: -4px !important;
}

html[dir='rtl'] .navbar-hype #notifications .badgeBubble,
.languageRTL .navbar-hype #notifications .badgeBubble {
  right: auto !important;
  left: -4px !important;
}


/* Themed modal OK buttons (replaces legacy btn-success green ring) */
.hype-modal-ok-btn,
#releaseNotesOkBtn.hype-modal-ok-btn,
#releaseNotesOkBtn.btn,
#hypeReleasNotesModal .btn.hype-modal-ok-btn,
#hypeReleasNotesModal .modal-footer .btn {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  background-color: #6366f1 !important;
  border: 1px solid rgba(67, 56, 202, 0.95) !important;
  border-color: rgba(67, 56, 202, 0.95) !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 9px 22px !important;
}
.hype-modal-ok-btn:hover,
.hype-modal-ok-btn:focus,
.hype-modal-ok-btn:active,
#releaseNotesOkBtn:hover,
#releaseNotesOkBtn:focus,
#releaseNotesOkBtn:active,
#hypeReleasNotesModal .modal-footer .btn:hover,
#hypeReleasNotesModal .modal-footer .btn:focus {
  background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
  background-color: #4f46e5 !important;
  border: 1px solid rgba(67, 56, 202, 1) !important;
  border-color: rgba(67, 56, 202, 1) !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* ── Left sidebar ── */
#left-toDoIcons {
  background: var(--hype-sidebar) !important;
  border-right: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  top: 52px !important;
  height: calc(100vh - 52px) !important;
  bottom: auto !important;
  z-index: 10 !important;
}

#left-toDoIcons #main-control-panel {
  margin-top: 0 !important;
  padding-top: 12px !important;
  overflow: hidden !important;
}

#left-toDoIcons #main-control-panel:has(.hype-quick-actions) {
  overflow: visible !important;
}

#left-toDoIcons .one-icon {
  position: relative;
  overflow: hidden;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  color: var(--hype-muted) !important;
  font-family: var(--hype-font) !important;
  transition: background 0.2s ease, color 0.15s ease;
}

#left-toDoIcons .one-icon:hover:not(.tab-active) {
  background: var(--hype-row-hover) !important;
  color: var(--hype-text) !important;
}

#toDoIcons .tab-active {
  background: var(--hype-accent-soft) !important;
  color: var(--hype-text) !important;
  border-left: 3px solid var(--hype-accent-strong) !important;
  box-shadow: none !important;
}

/* Gradient merge — Contacts, Meetings, History only when selected */
#left-toDoIcons #contactsButton.one-icon.tab-active,
#left-toDoIcons #multipartyCallScheduleButton.one-icon.tab-active,
#left-toDoIcons #recentCallsButton.one-icon.tab-active {
  z-index: 2;
  color: var(--hype-text) !important;
  border-left: 3px solid var(--hype-accent-strong) !important;
  border-right: none !important;
  box-shadow: none !important;
  background: linear-gradient(
    270deg,
    rgb(29 27 64) 0%,
    rgba(79, 70, 229, 0.21) 32%,
    rgba(42, 40, 96, 0.08) 68%,
    transparent 100%
  ) !important;
}

#toDoIcons {
  background: var(--hype-sidebar) !important;
}

/* ── Tab headers ── */
.marginLeftTitle,
.tabs-text,
.tab-main-header h3,
.tab-main-header h4 {
  font-family: var(--hype-font) !important;
  font-weight: 700 !important;
  color: var(--hype-text) !important;
}

.tab-main-header .tabs-text,
#contactsDiv .tabs-text {
  font-size: 24px !important;
  margin: 0 !important;
  line-height: 1.2;
}

#contactsDiv,
#scheduledMeetingsDiv,
#recentCallsDiv {
  color: var(--hype-text) !important;
}

/* ── Search inputs ── */
.search,
#searchinputContact,
#searchinputMeeting,
#historySearchInput,
.community-search,
#meetings-search-input input,
#recordings-search-input input {
  background: var(--hype-input) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 999px !important;
  color: var(--hype-text) !important;
  font-family: var(--hype-font) !important;
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 16px 0 36px !important;
}

.search::-webkit-input-placeholder,
#searchinputContact::-webkit-input-placeholder,
#searchinputMeeting::-webkit-input-placeholder,
#historySearchInput::-webkit-input-placeholder {
  color: var(--hype-faint) !important;
}

.searchinputContact {
  position: relative;
}

.searchinputContact::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f74a0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* ── Filter chips ── */
.hype-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 0;
}

.hype-chip {
  appearance: none;
  border: 1px solid var(--hype-modal-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--hype-muted);
  font-family: var(--hype-font);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hype-chip:hover {
  background: var(--hype-row-hover);
  color: var(--hype-text);
}

.hype-chip--active,
.hype-chip.hype-chip--active {
  background: var(--hype-accent-strong) !important;
  border-color: var(--hype-accent-strong) !important;
  color: #fff !important;
}

/* ── Add contact button ── */
.contactTabAddContact,
#contactTabAddContact {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--hype-accent-strong) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 !important;
  line-height: 1 !important;
}

.contactTabAddContact .contact-icon img,
#contactTabAddContact .contact-icon img {
  display: none !important;
}

.contactTabAddContact::after,
#contactTabAddContact::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

#contact-search-div {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 10px;
}

.contactsTabHeadingRight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Contact section headers ── */
.hype-contact-section-header {
  list-style: none !important;
  padding: 18px 16px 6px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--hype-faint) !important;
  cursor: default !important;
  pointer-events: none;
  text-align: start;
}

.hype-contact-section-header:hover {
  background: transparent !important;
}

/* ── Contact list rows ── */
#contactsTable .list-group-itemCustom,
#contactsTable .card-Layout-Item {
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  margin-bottom: 2px !important;
  font-family: var(--hype-font) !important;
  position: relative;
  min-height: 64px;
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  width: 100% !important;
  box-sizing: border-box;
  padding-inline: 16px !important;
}

#contactsTable .list-group-itemCustom:hover,
#contactsTable .card-Layout-Item:hover,
body.hasHover #contactsTable .list-group-itemCustom:hover {
  background: var(--hype-row-hover) !important;
  box-shadow: none !important;
  border: none !important;
}

#contactsTable .contactNameSpan {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--hype-text) !important;
  display: block;
}

#contactsTable .contactListEmail {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 1px 0 !important;
  color: var(--hype-faint) !important;
  font-size: 13px !important;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  float: none !important;
  display: block;
}

#contactsTable .contactListPresence {
  font-size: 13px !important;
  color: var(--hype-muted) !important;
  padding-left: 0 !important;
  float: none !important;
  display: block;
  margin-top: 2px;
}

#contactsTable .list-group-itemCustom > p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  display: block !important;
}

#contactsTable .hype-contact-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#contactsTable .hype-contact-more-wrap {
  display: inline-flex;
  position: relative;
}

#contactsTable .hype-contact-more-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0 !important;
  box-shadow: none !important;
}

#contactsTable .hype-contact-more-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

#contactsTable .hype-contact-more-btn:hover,
#contactsTable .hype-contact-more-btn:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

#contactsTable .hype-contact-dropdown-menu {
  background: var(--hype-modal) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
  padding: 6px !important;
  min-width: 200px !important;
  margin-top: 6px !important;
  left: auto !important;
  right: 0 !important;
  z-index: 80 !important;
}

#contactsTable .hype-contact-more-wrap.dropup > .hype-contact-dropdown-menu {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

#contactsTable .hype-contact-dropdown-menu::before,
#contactsTable .hype-contact-dropdown-menu::after {
  display: none !important;
}

#contactsTable .hype-contact-dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: none !important;
  height: auto !important;
  min-height: 0 !important;
  font-family: var(--hype-font) !important;
  font-size: 14px !important;
  color: var(--hype-text) !important;
  cursor: pointer;
  transition: background 0.15s ease;
  list-style: none;
}

#contactsTable .contactsMoreActions li {
  height: auto !important;
  text-align: inherit;
}

#contactsTable .hype-contact-dropdown-item:hover {
  background: var(--hype-row-hover) !important;
  color: var(--hype-text) !important;
}

#contactsTable .hype-contact-dropdown-icon {
  flex-shrink: 0;
  color: var(--hype-muted);
  stroke: currentColor;
}

#contactsTable .hype-contact-dropdown-dial {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#contactsTable .hype-contact-dropdown-dial-label {
  font-size: 12px;
  color: var(--hype-muted);
}

#contactsTable .hype-contact-dropdown-dial-number {
  font-size: 13px;
  color: var(--hype-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

#contactsTable .hype-contact-dropdown-delete {
  color: #f87171 !important;
}

#contactsTable .hype-contact-dropdown-delete .hype-contact-dropdown-icon {
  color: #f87171;
}

#contactsTable .hype-contact-dropdown-delete:hover {
  background: rgba(248, 113, 113, 0.12) !important;
}

#contactsTable .list-group-itemCustom > p br {
  display: none !important;
}

/* Avatar */
#contactsTable .contactLetterDivParrent,
#contactsTable .contact-profile-div,
#contactsTable .userContactSpanParent {
  position: relative;
  float: none !important;
  flex: 0 0 auto;
  margin-right: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
}

#contactsTable .usercontact-text-div,
#contactsTable .contact-profile-div .user-profile-picture {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  overflow: hidden;
}

#contactsTable .username-contact-letter {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-top: 0 !important;
}

#contactsTable .user-profile-picture {
  object-fit: cover;
}

/* Status dot on avatar (li is position:relative; dot anchors to avatar area) */
#contactsTable .contact-available::before,
#contactsTable .contact-busy::before,
#contactsTable .contact-away::before,
#contactsTable .contact-donotdisturb::before,
#contactsTable .contact-in-meeting::before,
#contactsTable .contact-offline::before,
#contactsTable .notContact-hallow::before {
  left: 52px !important;
  right: auto !important;
  top: 48px !important;
  bottom: auto !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid #1a1838 !important;
  border-radius: 50% !important;
  z-index: 2;
}

#contactsTable .contact-available::before {
  background-color: var(--hype-ok) !important;
}

#contactsTable .contact-offline::before,
#contactsTable .notContact-hallow::before {
  background-color: var(--hype-offline) !important;
}

#contactsTable .contact-busy::before {
  background-color: var(--hype-danger) !important;
}

#contactsTable .contact-away::before {
  background-color: var(--hype-warn, #f59e0b) !important;
}

/* Action buttons */
#contactsTable .contactActionsDiv,
#contactsTable .hype-contact-actions,
#contactsTable .contact-offline .contactActionsDiv,
#contactsTable .contact-available .contactActionsDiv,
#contactsTable .contact-busy .contactActionsDiv,
#contactsTable .contact-away .contactActionsDiv,
#contactsTable .contact-in-meeting .contactActionsDiv {
  display: flex !important;
  gap: 8px;
  align-items: center;
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  opacity: 1 !important;
  margin: 0 !important;
  visibility: visible !important;
}

#contactsTable .contactResendRequestBtn,
#contactsTable .contactRequestBtns {
  position: static !important;
  right: auto !important;
  top: auto !important;
  display: flex !important;
  flex: 0 0 auto;
}

#contactsTable .hype-pending-actions {
  color: #a9a9a9;
  position: static !important;
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
}

#contactsTable .contactResendRequestBtn .btn-group,
#contactsTable .contactRequestBtns .btn-group {
  margin: 0 !important;
}

/* Action buttons always visible (including offline contacts) */

#contactsTable .contactListChatandVidwoIcon .btn,
#contactsTable .hype-contact-actions .btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0 !important;
}

#contactsTable .contactListChatandVidwoIcon .btn svg,
#contactsTable .hype-contact-actions .btn svg,
#contactsTable .hype-contact-more-btn svg {
  display: block;
  flex-shrink: 0;
}

#contactsTable .contactListChatandVidwoIcon .btn:hover,
#contactsTable .hype-contact-actions .btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

#contactsTable .contactListChatandVidwoIcon img {
  height: 20px !important;
  width: 20px !important;
  margin-top: 0 !important;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ── Meetings & History lists ── */
.list-group-itemCustomMeeting,
#scheduledMeetingsDiv tr,
#recentCallsDiv tr,
#historyTable .list-group-itemCustom {
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: var(--hype-font) !important;
  color: var(--hype-text) !important;
}

.list-group-itemCustomMeeting:hover,
#scheduledMeetingsDiv tr:hover,
#recentCallsDiv tr:hover,
#historyTable .list-group-itemCustom:hover {
  background: var(--hype-row-hover) !important;
  color: var(--hype-text) !important;
}

/* Legacy list hover overrides */
.card-Layout-Item:hover {
  background: var(--hype-row-hover) !important;
  box-shadow: none !important;
  border: transparent !important;
}

.list-group-itemCustom {
  font-family: var(--hype-font) !important;
}

/* ── Add Contact modal (Indigo) ── */
#add-contact-modal .modal-content {
  background: var(--hype-modal) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
  color: var(--hype-text) !important;
  overflow: hidden;
}

#add-contact-modal .modal-header {
  border-bottom: 1px solid rgba(129, 140, 248, 0.28) !important;
  padding: 17px 22px !important;
  background: #2a237dc9 !important;
}

#add-contact-modal .modal-header .close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--hype-muted);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  font-size: 18px;
  text-shadow: none;
}

#add-contact-modal .modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--hype-text) !important;
  font-family: var(--hype-font) !important;
}

#add-contact-modal .modal-body {
  padding: 20px 22px 8px !important;
}

#add-contact-modal .modal-footer {
  border: none !important;
  padding: 0 22px 24px !important;
  text-align: center !important;
}

#add-contact-modal .hype-field-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--hype-faint);
  margin-bottom: 7px;
}

#add-contact-modal .hype-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  background: var(--hype-input);
  border: 1px solid var(--hype-modal-border);
  border-radius: 11px;
  padding: 12px 14px;
  margin-bottom: 16px;
  overflow: visible;
}

/* Username/email row: absolute icon + left padding so the caret isn't clipped. */
#add-contact-modal #hypeContactInputDiv .hype-input-row {
  gap: 0;
  align-items: stretch;
  padding: 4px 14px 4px 42px;
  overflow: visible;
}

#add-contact-modal #hypeContactInputDiv .hype-input-row > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
  display: block;
  pointer-events: none;
}

#add-contact-modal .hype-input-row select,
#add-contact-modal .hype-input-row input.form-control,
#add-contact-modal #addContactName {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--hype-text) !important;
  font-family: var(--hype-font) !important;
  font-size: 14px !important;
}

/* Full caret when empty: Chromium clips caret if content box is too short. */
#add-contact-modal #hypeContactInputDiv input.form-control,
#add-contact-modal #addContactName {
  display: block !important;
  padding: 8px 2px !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 36px !important;
  line-height: normal !important;
  overflow: visible !important;
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
  box-sizing: border-box !important;
  caret-color: #fff;
  text-indent: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}

#add-contact-modal .hype-input-row select {
  padding: 0 !important;
  height: auto !important;
  flex: 1;
  appearance: none;
  cursor: default;
}

#add-contact-modal .hype-input-row--static {
  pointer-events: none;
}


#add-contact-modal #selectContactType:disabled {
  opacity: 1;
  -webkit-text-fill-color: var(--hype-text);
  color: var(--hype-text) !important;
}

#add-contact-modal .hype-input-row input::placeholder {
  color: var(--hype-faint);
}

#add-contact-modal #add-contact-btn {
  width: 100%;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--hype-btn) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 13px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important;
  font-family: var(--hype-font) !important;
}

#add-contact-modal #add-contact-btn:hover {
  filter: brightness(1.07);
}

/* ── Guru Call dropdown (Indigo) ── */
#guruDropDownDivInMeeting.dropdown-menu,
#guruDropDownDiv.dropdown-menu {
  width: 340px !important;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(40, 37, 82, 0.98), rgba(26, 24, 56, 0.99)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
  padding: 0 !important;
  overflow: hidden;
  color: var(--hype-text) !important;
}

/* Remove legacy right offset (prevents extra right gap) */
#guruDropDownDivInMeeting.dropdown-menu-right,
#guruDropDownDiv.dropdown-menu-right,
#guruDropDownDivInMeeting {
  right: 0 !important;
  left: auto !important;
  margin-right: 0 !important;
}

/* Hide legacy caret triangle — :after on #guru-list sat over the first guru row */
#guruDropDownDivInMeeting .guru-dropdown-top-icon,
#guruDropDownDiv .guru-dropdown-top-icon,
#guruDropDownDiv ul#guru-list:after,
#guruDropDownDiv ul#guru-list:before,
#guruDropDownDivInMeeting ul#guru-list-inmeeting:after,
#guruDropDownDivInMeeting ul#guru-list-inmeeting:before,
.navbar-hype .screen-skill-guru-div #guru-list:after,
.navbar-hype .screen-skill-guru-div #guru-list:before {
  display: none !important;
  content: none !important;
  border: none !important;
}

#guruListHeadingInMeeting.guru-list-heading,
#guruListHeading.guru-list-heading,
.guru-list-heading {
  background: #2d2c6f !important;
  padding: 16px 16px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#guruListHeadingInMeeting .guru-item-heading-1,
#guruListHeading .guru-item-heading-1 {
  font-family: var(--hype-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--hype-text) !important;
}

#guruListHeadingInMeeting .guru-item-heading-2,
#guruListHeading .guru-item-heading-2 {
  font-family: var(--hype-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--hype-muted) !important;
  margin-top: 4px !important;
}

/* List container */
#guru-list-inmeeting,
#guru-list {
  max-height: 280px !important;
  overflow: auto !important;
  padding: 6px 0 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  list-style: none;
}

/* Each row */
#guru-list-inmeeting > li.guru-item:first-child,
#guru-list > li.guru-item:first-child {
  display: flex !important;
}

#guru-list-inmeeting li.guru-item,
#guru-list li.guru-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  white-space: normal !important;
}

#guru-list-inmeeting li.guru-item:hover,
#guru-list li.guru-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Left side (icon + text) */
#guru-list-inmeeting li.guru-item .guru-name-div,
#guru-list li.guru-item .guru-name-div {
  display: flex !important;
  align-items: flex-start !important;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

#guru-list-inmeeting li.guru-item .guru-name-div::before,
#guru-list li.guru-item .guru-name-div::before {
  content: '';
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(129, 140, 248, 0.18);
  background-image: url('../img/callview-icon-guru.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  flex: 0 0 auto;
}

/* Place the avatar to the left of the text column */
#guru-list-inmeeting li.guru-item .guru-name-div,
#guru-list li.guru-item .guru-name-div {
  padding-left: 46px;
  position: relative;
}

#guru-list-inmeeting li.guru-item .guru-name-div::before,
#guru-list li.guru-item .guru-name-div::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

#guru-list-inmeeting .guru-name-count,
#guru-list .guru-name-count {
  font-family: var(--hype-font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  color: #fff !important;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  line-height: 1.15;
}

/* Language sits on its own line under the guru name */
#guru-list-inmeeting .guru-name-count > span,
#guru-list .guru-name-count > span {
  display: inline;
  padding: 0;
  margin: 0;
}

#guru-list-inmeeting .guru-lang-span,
#guru-list .guru-lang-span {
  display: block;
  margin-left: 0;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #fff !important;
  opacity: 1;
  line-height: 1.15;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#guru-list-inmeeting .guru-name-actual,
#guru-list .guru-name-actual {
  font-family: var(--hype-font) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--hype-text) !important;
  opacity: 1 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0;
}

/* Right side actions */
#guru-list-inmeeting li.guru-item .guru-communication-div,
#guru-list li.guru-item .guru-communication-div {
  float: none !important;
  display: flex !important;
  align-items: center;
  gap: 0px;
  flex: 0 0 auto;
  margin-left: auto;
}

#guru-list-inmeeting .guru-communication-btn,
#guru-list .guru-communication-btn,
.guru-communication-btn {
  margin: 0 !important;
  padding: 0 !important;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

#guru-list-inmeeting .guru-communication-btn:hover,
#guru-list .guru-communication-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

#guru-list-inmeeting .guru-communication-btn > img,
#guru-list .guru-communication-btn > img,
#guru-list-inmeeting .guru-communication-btn > svg,
#guru-list .guru-communication-btn > svg,
.guru-communication-btn > img,
.guru-communication-btn > svg {
  width: 22px !important;
  height: 22px !important;
}

#guruListFooterInMeeting.guru-list-footer,
#guruListFooter.guru-list-footer {
  padding: 12px 16px 14px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-align: center !important;
  opacity: 1 !important;
  background: transparent !important;
}

#guruListFooterInMeeting .guru-item-heading-1-footer,
#guruListFooter .guru-item-heading-1-footer {
  font-family: var(--hype-font) !important;
  font-size: 12.5px !important;
  color: var(--hype-muted) !important;
}

#add-contact-modal .modal-backdrop.in {
  opacity: 0.65;
}

#add-contact-modal #phoneNumberInputDiv input,
#add-contact-modal #sipNumberInputDiv input {
  background: var(--hype-input) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 11px !important;
  color: var(--hype-text) !important;
  margin-bottom: 8px;
}

#add-contact-modal #errorSpanAddConModal {
  color: #f87171 !important;
}

/* Meetings & History — Indigo list surfaces */
#scheduledMeetingsDiv .tab-main-div,
#recentCallsDiv .tab-main-div {
  font-family: var(--hype-font);
}

#scheduledMeetingsTable .list-group-itemCustomMeeting,
#historyTable .list-group-itemCustom,
#historyTable .list-group-itemCustomMeeting {
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 2px !important;
  color: var(--hype-text) !important;
  font-family: var(--hype-font) !important;
}

#scheduledMeetingsTable .list-group-itemCustomMeeting:hover,
#historyTable .list-group-itemCustom:hover,
#historyTable .list-group-itemCustomMeeting:hover {
  background: var(--hype-row-hover) !important;
}

#scheduledMeetingsDiv .participantMeeting,
#historyTable .participantMeeting {
  color: var(--hype-muted) !important;
}

#meetings-search-input input,
#recordings-search-input input {
  background: var(--hype-input) !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 999px !important;
  color: var(--hype-text) !important;
}

.no-history-div,
.no-meeting-div {
  color: var(--hype-muted) !important;
}

#communityButton,
#playRecordingsButton,
#playRecordingsButtonSmall,
#myCommunityDiv,
#recordedMeetingsDiv {
  display: none !important;
}

/* Empty states */
.no-contact-div-span,
.no-history-span,
.add-contact-span {
  color: var(--hype-muted) !important;
  font-family: var(--hype-font) !important;
}

/* ── History (HypeHistory.dc.html) visual refresh ── */
#recentCallsDiv .hype-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

#recentCallsDiv .hype-history-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

#recentCallsDiv .hype-history-title {
  margin: 0 !important;
  font-weight: 300 !important;
  letter-spacing: 0.3px;
}

#recentCallsDiv .hype-history-subtitle {
  font-size: 13px;
  color: var(--hype-muted);
  white-space: nowrap;
}

#recentCallsDiv .hype-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

#recentCallsDiv #history-search-input,
#recentCallsDiv .searchinputContact {
  width: min(300px, 36vw) !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  height: 40px;
  margin: 0;
  flex: 0 1 auto;
}

#recentCallsDiv #historySearchInput {
  height: 40px !important;
  line-height: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  vertical-align: middle;
}

#recentCallsDiv .searchinputContact::before {
  top: 50%;
  transform: translateY(-50%);
}

#recentCallsDiv #history-search-input #searchclearHistory {
  top: 50% !important;
  left: auto !important;
  right: 12px;
  transform: translateY(-50%);
  margin: 0;
  line-height: 1;
  position: absolute;
  cursor: pointer;
  color: var(--hype-muted);
  z-index: 1;
}

#recentCallsDiv .hype-history-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

#recentCallsDiv .hype-history-chip {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: #c7cae6;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

#recentCallsDiv .hype-history-chip.is-active {
  background: var(--hype-btn);
  border-color: transparent;
  color: #fff;
}

#recentCallsDiv .hh-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* Explicit cap so the list is always the scroll container (flex chain can fail with .container/.row). */
  max-height: calc(100vh - 220px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 0 20px;
  -webkit-overflow-scrolling: touch;
}

#recentCallsDiv .pagination {
  display: none !important;
}

#recentCallsDiv #historyTable {
  overflow: visible !important;
  height: auto !important;
}

/* Turn existing history items into “cards” like the prototype */
#historyTable .callHistoryListItem {
  position: relative;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  padding: 12px 16px !important;
  transition: background 0.12s;
  list-style: none;
}

#historyTable .callHistoryListItem:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

#historyTable .hh-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

#historyTable .hh-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

#historyTable .hh-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}

#historyTable .hh-avatar-img,
#historyTable .hh-avatar-wrap .user-profile-picture {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
}

#historyTable .hh-direction-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid #232048;
  display: grid;
  place-items: center;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
}

#historyTable .hh-direction-badge svg {
  display: block;
}

#historyTable .hh-main {
  min-width: 0;
  flex: 1;
}

#historyTable .hh-name {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}

#historyTable .hh-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#historyTable .hh-name-row .hh-name {
  min-width: 0;
  /* ClippedName block mode is width:100% — that would stretch the title and push
     the Scheduled / Recurring badge to the middle of the row. Shrink to the text. */
  width: auto;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#historyTable .hh-meeting-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1;
}

#historyTable .hh-meeting-kind--scheduled {
  background: rgba(129, 140, 248, 0.18);
  color: #c7d2fe;
  border: 1px solid rgba(129, 140, 248, 0.35);
}

#historyTable .hh-meeting-kind--recurring {
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

#historyTable .hh-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}

#historyTable .hh-status-label {
  font-size: 13px;
  font-weight: 500;
}

#historyTable .hh-status-sep,
#historyTable .hh-status-duration {
  font-size: 13px;
  color: #8b91be;
}

#historyTable .hh-meta {
  margin-top: 4px;
}

#historyTable .meeting-history-participants {
  display: none !important;
}

#historyTable .historyBtnsContainer {
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}

#historyTable .callHistoryListItem:hover .historyBtnsContainer {
  opacity: 1;
}

#historyTable .historyActionButtons {
  background: rgba(129, 140, 248, 0.18) !important;
  border: none !important;
  border-radius: 999px !important;
  height: 36px !important;
  width: 36px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  margin-left: 6px;
  cursor: pointer !important;
  opacity: 1 !important;
}

.languageRTL #historyTable .historyActionButtons {
  margin-left: 0;
  margin-right: 6px;
}

#historyTable .historyActionButtons img.fadeActionButtons {
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
  filter: none;
}

#historyTable .historyActionButtons:hover {
  background: rgba(129, 140, 248, 0.32) !important;
}

#historyTable .historyActionButtons:hover img.fadeActionButtons {
  opacity: 1 !important;
}

#historyTable .meeting-owner-div {
  margin: 0 !important;
  padding: 0 !important;
  width: 44px;
  height: 44px;
}

#historyTable .meeting-owner-div .owner-profile-div,
#historyTable .meeting-owner-div .owner-profile-picture-div,
#historyTable .meeting-owner-div .profie-owner-div-parent {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#historyTable .meeting-owner-div .owner-profile-div {
  background-color: transparent !important;
}

#historyTable .meeting-owner-div .owner-name-span {
  margin-top: 0 !important;
  line-height: 44px;
  font-size: 17px !important;
  font-weight: 600 !important;
}

#historyTable .hh-timestamp {
  text-align: right;
  flex-shrink: 0;
  width: 96px;
}

.languageRTL #historyTable .hh-timestamp {
  text-align: left;
}

#historyTable .hh-time {
  font-size: 13px;
  color: #c7cae6;
  font-weight: 500;
  line-height: 1.2;
}

#historyTable .hh-date {
  font-size: 11.5px;
  color: #8b91be;
  margin-top: 2px;
  line-height: 1.2;
}

#historyTable .historyMeetingTime {
  display: none !important;
}

/* ── Meetings tab (HypeMeetingsTab redesign) ── */
#scheduledMeetingsDiv.hype-meetings .tab-main-div {
  font-family: var(--hype-font);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

#scheduledMeetingsDiv .hype-meetings-list-wrap.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

#scheduledMeetingsDiv .hype-meetings-list-wrap:has(.hype-meetings-empty:not([style*='display: none'])) #scheduledMeetingsTable:empty,
#scheduledMeetingsDiv .hype-meetings-list-wrap:has(#noMeetingContainer:not([style*='display: none'])) #scheduledMeetingsTable {
  display: none;
}

#scheduledMeetingsDiv .hype-meetings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 20px 0 0;
}

#scheduledMeetingsDiv .hype-meetings-title {
  margin: 0 !important;
  margin-left: 0 !important;
  font-size: 23px !important;
  font-weight: 300 !important;
  letter-spacing: 0.3px;
  color: var(--hype-text) !important;
}

#scheduledMeetingsDiv .hype-meetings-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(168px, 1fr));
  align-items: stretch;
  gap: 10px;
  flex-wrap: nowrap;
}

#scheduledMeetingsDiv .hype-meetings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  min-height: 48px;
  min-width: 0;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--hype-font);
  cursor: pointer;
  transition: filter 0.12s;
  color: #e7e8ff;
  box-sizing: border-box;
  white-space: nowrap;
}

#scheduledMeetingsDiv .hype-meetings-btn:hover {
  filter: brightness(1.08);
}

#scheduledMeetingsDiv .hype-meetings-btn--primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  font-weight: 700;
  color: #fff;
  filter: drop-shadow(rgba(22, 163, 74, 0.35) 0 8px 20px);
}

#scheduledMeetingsDiv .hype-meetings-btn--secondary {
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #e7e8ff;
}

#scheduledMeetingsDiv .hype-meetings-btn--tertiary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e7e8ff;
}

#scheduledMeetingsDiv .hype-meetings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 18px 0 0;
}

#scheduledMeetingsDiv .hype-meetings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0 12px;
}

#scheduledMeetingsDiv #meetings-search-input,
#scheduledMeetingsDiv .searchinputContact {
  width: min(300px, 36vw) !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  height: 40px;
  margin: 0;
  flex: 0 1 auto;
}

#scheduledMeetingsDiv #searchinputMeeting {
  height: 40px !important;
  line-height: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  vertical-align: middle;
}

#scheduledMeetingsDiv .searchinputContact::before {
  top: 50%;
  transform: translateY(-50%);
}

#scheduledMeetingsDiv #meetings-search-input #searchclearMeeting {
  top: 50% !important;
  left: auto !important;
  right: 12px;
  transform: translateY(-50%);
  margin: 0;
  line-height: 1;
  position: absolute;
  cursor: pointer;
  color: var(--hype-muted);
  z-index: 1;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

#scheduledMeetingsDiv #editMeetingBtn,
#scheduledMeetingsDiv #deleteMeetingBtn {
  box-sizing: border-box;
  margin: 0 !important;
  float: none !important;
  vertical-align: middle;
}

#scheduledMeetingsDiv #deleteMeetingBtn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
}

#scheduledMeetingsDiv #editMeetingBtn.customEditClass {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #c7cae6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn svg {
  display: block;
  flex-shrink: 0;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn--edit {
  background: var(--hype-accent-strong) !important;
  color: #fff !important;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn--edit svg {
  stroke: #fff;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn--edit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn--danger {
  background: #ef4444 !important;
  color: #fff !important;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn--danger:hover {
  filter: brightness(1.08);
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn--danger #cancelIcon {
  color: #fff !important;
  font-size: 16px;
  line-height: 1;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  display: block;
}

#scheduledMeetingsDiv .hype-meetings-toolbar-btn.customEditClass {
  width: auto;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 12px;
  background: var(--hype-accent-strong) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

#scheduledMeetingsDiv .hype-meetings-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-family: var(--hype-font);
  white-space: nowrap;
  line-height: 1;
  margin: 0 !important;
  padding: 0;
}

#scheduledMeetingsDiv #globalBackButton {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#scheduledMeetingsDiv #globalBackButton .fa {
  margin: 0 !important;
  line-height: 1;
  font-size: 12px;
}

#scheduledMeetingsDiv #backBtn {
  line-height: 1;
  margin: 0;
  padding: 0;
}

#scheduledMeetingsDiv .hype-meetings-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#scheduledMeetingsDiv .hype-meetings-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 30px;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

#scheduledMeetingsDiv .hype-meetings-empty-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(129, 140, 248, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.28);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: #a5b4fc;
}

#scheduledMeetingsDiv .hype-meetings-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

#scheduledMeetingsDiv .hype-meetings-empty-hint {
  font-size: 14px;
  color: #9aa0c8;
  margin-top: 6px;
  max-width: 340px;
  line-height: 1.45;
}

#scheduledMeetingsDiv .hype-meetings-status-msg {
  display: block;
  text-align: center;
  color: var(--hype-muted);
  padding: 24px 26px;
  font-family: var(--hype-font);
}

#scheduledMeetingsDiv .hype-meetings-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 26px 20px !important;
  margin: 0 !important;
  list-style: none;
}

#scheduledMeetingsDiv .pagination {
  display: none !important;
}

#scheduledMeetingsTable .list-group-itemCustomMeeting {
  position: relative;
  background: rgba(255, 255, 255, 0.043) !important;
  border: none !important;
  border-radius: 9px !important;
  margin-bottom: 8px !important;
  padding: 13px 16px !important;
  transition: background 0.12s;
  list-style: none;
}

#scheduledMeetingsTable .list-group-itemCustomMeeting:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

#scheduledMeetingsTable .hype-meetings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
}

#scheduledMeetingsTable .hype-meetings-row-body {
  min-width: 0;
  flex: 1;
}

#scheduledMeetingsTable .hype-meetings-row-actions,
#scheduledMeetingsTable .meeting-action-div,
#scheduledMeetingsTable .meeting-action-buttons {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 9px;
  flex-shrink: 0;
  float: none !important;
  opacity: 1 !important;
  margin: 0 !important;
}

#scheduledMeetingsTable .hype-meetings-row-action {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

#scheduledMeetingsTable .hype-meetings-row-action--call {
  background: rgba(129, 140, 248, 0.18);
  color: #c7cae6;
}

#scheduledMeetingsTable .hype-meetings-row-action--info {
  background: rgba(255, 255, 255, 0.06);
  color: #9aa0c8;
  overflow: hidden;
  border-radius: 50% !important;
}

#scheduledMeetingsTable .hype-meetings-row-action img.fadeActionButtons {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain;
  margin: 0 !important;
}

#scheduledMeetingsTable .titleMeeting {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}

#scheduledMeetingsTable .timeMeeting {
  font-size: 12.5px !important;
  color: #8b91be !important;
  margin-top: 2px !important;
  padding-top: 0 !important;
}

#scheduledMeetingsTable .meeting-participants {
  font-size: 12.5px !important;
  color: #9aa0c8 !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
}

#scheduledMeetingsTable .meeting-owner-div,
#scheduledMeetingsTable .meeting-owner-div .profie-owner-div-parent,
#scheduledMeetingsTable .meeting-owner-div .owner-profile-picture-div {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex-shrink: 0;
}

#scheduledMeetingsTable .meeting-owner-div .owner-profile-div {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  margin: 0 !important;
  display: grid;
  place-items: center;
}

#scheduledMeetingsTable .meeting-owner-div .owner-name-span {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-top: 0 !important;
  line-height: 1 !important;
  text-transform: uppercase;
}

#scheduledMeetingsTable .meeting-owner-div .user-profile-picture {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

#scheduledMeetingsTable .meetingDataHolder {
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
  float: none !important;
  cursor: pointer;
}

#scheduledMeetingsTable .meetingDataHolder > .float-left {
  float: none !important;
  min-width: 0;
  flex: 1;
}

#scheduledMeetingsTable .callBtnClass,
#scheduledMeetingsTable .editIndividualMeeting,
#scheduledMeetingsTable button[data-toggle="popover"] {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(129, 140, 248, 0.18) !important;
  box-shadow: none !important;
  margin: 0 !important;
  vertical-align: middle;
}

#scheduledMeetingsTable .callBtnClass img,
#scheduledMeetingsTable .editIndividualMeeting img,
#scheduledMeetingsTable button[data-toggle="popover"] img {
  margin: 0 !important;
  display: block;
}

#scheduledMeetingsTable button[data-toggle="popover"] {
  background: rgba(255, 255, 255, 0.06) !important;
}

#scheduledMeetingsTable .checkboxParentDiv {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

#scheduledMeetingsDiv.hype-meetings.is-edit-mode .hype-meetings-actions {
  display: none;
}

#contactsTable .contactListChatandVidwoIcon {
  margin: 0 !important;
  float: none !important;
}

@media all and (max-width: 768px) {
  #image-div {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #contactsDiv .tab-main-header {
    flex-direction: column;
    align-items: stretch;
  }

  #contactsDiv #contact-search-div {
    width: 100% !important;
    justify-content: stretch;
  }

  #contacts-search-input {
    width: 100% !important;
    flex: 1;
  }

  .hype-filter-chips {
    margin-top: 10px;
  }

  #contactsTable .list-group-itemCustom {
    flex-wrap: wrap;
  }

  #contactsTable .contactListEmail {
    max-width: 100%;
    flex: 1 1 100%;
    text-align: left;
    order: 3;
  }

  #contactsTable .contactActionsDiv {
    margin-left: auto;
  }

  #contactsTable .contact-available::before,
  #contactsTable .contact-busy::before,
  #contactsTable .contact-away::before,
  #contactsTable .contact-donotdisturb::before,
  #contactsTable .contact-in-meeting::before,
  #contactsTable .contact-offline::before,
  #contactsTable .notContact-hallow::before {
    left: 52px !important;
    top: 48px !important;
  }
}

/* ── User presence dropdown (top bar) ── */
.navbar-hype #presence {
  display: flex;
  align-items: center;
}

.hype-presence-avatar-legacy {
  margin-left: 11px;
  margin-right: -5px;
}

.hype-presence-dropdown {
  position: relative;
}

.hype-presence-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.hype-presence-trigger:hover,
.hype-presence-dropdown.open > .hype-presence-trigger {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
}

.hype-presence-trigger-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-direction: row;
}

.hype-presence-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: visible;
  background: rgba(255, 255, 255, 0.12);
}

.hype-presence-avatar-wrap .hype-presence-avatar-fallback,
.hype-presence-avatar-wrap .opensips-user-text-div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(129, 140, 248, 0.35);
}

.hype-presence-avatar-wrap .opensips-username-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #fff !important;
  text-transform: uppercase;
}

.hype-presence-avatar-wrap .hype-presence-avatar-img,
.hype-presence-avatar-wrap .user-profile-pic {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  overflow: hidden;
}

.hype-presence-avatar-badge.hype-presence-dot,
.hype-presence-avatar-wrap > .hype-presence-avatar-badge {
  position: absolute !important;
  right: -1px;
  bottom: -1px;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid #4f46e5;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 2;
  flex-shrink: 0;
  display: block !important;
  pointer-events: none;
}

.hype-presence-trigger-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.hype-presence-name {
  color: #fff !important;
  font-family: var(--hype-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hype-presence-status-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hype-presence-status-label {
  color: var(--hype-muted) !important;
  font-family: var(--hype-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  opacity: 1 !important;
  margin: 0 !important;
}

.hype-presence-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--hype-faint);
  margin-left: 2px;
}

.hype-presence-dot,
.hype-presence-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.hype-presence-dot--available,
.hype-presence-option-dot.hype-presence-dot--available {
  background: #34d399;
}

.hype-presence-dot--away,
.hype-presence-option-dot.hype-presence-dot--away {
  background: #f59e0b;
}

.hype-presence-dot--busy,
.hype-presence-option-dot.hype-presence-dot--busy {
  background: #ef4444;
}

.hype-presence-dot--dnd,
.hype-presence-option-dot.hype-presence-dot--dnd {
  background: brown;
}

.hype-presence-dot--offline,
.hype-presence-option-dot.hype-presence-dot--offline {
  background: #6b7280;
}

.hype-presence-dot--pending,
.hype-presence-option-dot.hype-presence-dot--pending {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

.navbar-hype .hype-presence-menu.dropdown-menuPresence {
  min-width: 220px;
  padding: 8px !important;
  margin-top: 10px !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #2a2860, #1e1c42) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  color: var(--hype-text) !important;
}

.navbar-hype .hype-presence-menu .hype-presence-option {
  padding-left: 10px !important;
}

.navbar-hype .hype-presence-menu.dropdown-menuPresence::before,
.navbar-hype .hype-presence-menu.dropdown-menuPresence::after,
#presence-inner-li .hype-presence-menu.dropdown-menuPresence::after {
  display: none !important;
}

.navbar-hype .hype-presence-menu > .hype-presence-menu-header,
.hype-presence-menu-header {
  margin: -8px -8px 6px !important;
  padding: 10px 14px !important;
  border-radius: 14px 14px 0 0;
  background: #2d2c6f !important;
  background-color: #2d2c6f !important;
  font-family: var(--hype-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: var(--hype-text) !important;
  list-style: none;
  cursor: default;
  pointer-events: none;
}

.hype-presence-option {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 10px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  list-style: none;
  cursor: pointer;
  color: #fff !important;
  font-family: var(--hype-font) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  transition: background 0.15s ease;
}

.hype-presence-option::before {
  display: none !important;
}

.hype-presence-option:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.hype-presence-option.is-active {
  background: rgba(99, 102, 241, 0.28) !important;
}

.hype-presence-option-check {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  opacity: 0;
}

.hype-presence-option.is-active .hype-presence-option-check {
  opacity: 1;
}

.hype-presence-option-label {
  flex: 1 1 auto;
  min-width: 0;
}

#presence-inner-li .hype-presence-menu.dropdown-menuPresence {
  top: calc(100% + 4px);
  left: 0;
  right: auto;
}

.languageRTL .hype-presence-trigger-inner {
  direction: rtl;
  flex-direction: row;
}

.languageRTL .hype-presence-trigger-text {
  align-items: flex-end;
}

.languageRTL #presence-inner-li .hype-presence-menu.dropdown-menuPresence {
  left: auto;
  right: 0;
}

/* ── Settings dropdown (top bar) ── */
#settingsBtnNew {
  display: flex;
  align-items: center;
}

.hype-settings-trigger {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 0 !important;
  border-right: none !important;
  transition: background 0.15s ease;
}

#settingsBtnNew.open > .hype-settings-trigger,
.hype-settings-trigger:hover,
.hype-settings-trigger:focus {
  background: rgba(129, 140, 248, 0.16) !important;
  outline: none;
}

.navbar-hype #settingsBtnNew .hype-settings-menu.dropdown-menu {
  --hype-settings-pad: 14px;
  min-width: 340px;
  width: 340px;
  padding: 8px 0 !important;
  margin-top: 10px !important;
  border: 1px solid var(--hype-modal-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #2a2860, #1e1c42) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  color: var(--hype-text) !important;
  list-style: none;
  overflow: visible;
  box-sizing: border-box;
}

.navbar-hype #settingsBtnNew .hype-settings-menu.dropdown-menu::before,
.navbar-hype #settingsBtnNew .hype-settings-menu.dropdown-menu::after {
  display: none !important;
}

.hype-settings-menu > li {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  float: none !important;
}

.navbar-hype #settingsBtnNew .hype-settings-profile.list-group-item,
.hype-settings-profile {
  padding: var(--hype-settings-pad, 14px) var(--hype-settings-pad, 14px) 12px !important;
  margin: -8px 0 0 !important;
  background: #2d2c6f !important;
  background-color: #2d2c6f !important;
  border-radius: 14px 14px 0 0;
  cursor: default !important;
}

.hype-settings-profile-inner .user-profile-picture-settings[style*="display: none"],
.hype-settings-profile-inner .username-div-settings[style*="display: none"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

.hype-settings-profile-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-direction: row;
}

.hype-settings-avatar,
.hype-settings-avatar-fallback {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.hype-settings-avatar.user-profile-picture-settings {
  float: none !important;
  margin: 0 !important;
}

.navbar-hype #settingsBtnNew .user-profile-picture-settings {
  float: none !important;
  margin: 0 !important;
  margin-top: 0 !important;
}

.navbar-hype #settingsBtnNew .hype-settings-action-list > li.setting-item {
  padding: 0 10px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

.navbar-hype #settingsBtnNew .hype-settings-action-list .hype-settings-action-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.hype-settings-avatar img,
.user-profile-picture-settings.hype-settings-avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}

.hype-settings-avatar-fallback.username-div-settings {
  float: none;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hype-settings-avatar-fallback .username-text-span-settings {
  font-size: 16px;
  line-height: 1;
}

.hype-settings-user-info {
  flex: 1 1 auto;
  min-width: 0;
  float: none !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hype-settings-user-name,
.hype-settings-user-info .user-name-settings {
  display: block;
  width: 100%;
  font-family: var(--hype-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
}

.hype-settings-user-email,
.hype-settings-user-info .user-email-settings {
  display: block;
  width: 100%;
  font-family: var(--hype-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--hype-muted) !important;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 0;
  letter-spacing: 0;
  text-align: left !important;
}

.hype-settings-meta {
  padding: 0 var(--hype-settings-pad, 14px) 12px !important;
  cursor: default !important;
}

.hype-settings-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  width: 100%;
}

.hype-settings-meta-grid.settingsHeaderSecRow {
  height: auto;
  clear: none;
}

.hype-settings-version {
  grid-column: 1 / -1;
  grid-row: 1;
  font-family: var(--hype-font);
  font-size: 12px;
  font-weight: 600;
  color: #fff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  line-height: 1.3;
}

.hype-settings-license,
#license-span.hype-settings-license {
  grid-column: 1 / -1;
  grid-row: 2;
  /* padding: 0 !important; */
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--hype-font);
  font-size: 11px;
  font-weight: 500;
  color: var(--hype-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  line-height: 1.3;
}

.hype-settings-meta-grid .hype-settings-meta-btn:first-of-type {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
}

.hype-settings-meta-grid .hype-settings-meta-btn:last-of-type {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
}

.hype-settings-meta-btn,
.navbar-hype #settingsBtnNew .hypeReleseNotesBtn.hype-settings-meta-btn,
.navbar-hype #settingsBtnNew #hypeReleseNotesBtnId.dataRefreshBtn {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto !important;
  min-width: 0;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--hype-link) !important;
  font-family: var(--hype-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 6px 10px !important;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  float: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center !important;
  margin-right: 5px;
}

.hype-settings-meta-btn:hover,
.navbar-hype #settingsBtnNew .hypeReleseNotesBtn.hype-settings-meta-btn:hover {
  background: rgba(129, 140, 248, 0.2);
  color: #fff !important;
}

.hype-settings-meta-btn .releaseNotesIcon {
  width: 14px;
  height: 14px;
  margin: 0;
  filter: brightness(1.2);
}

.hype-settings-actions {
  padding: 4px var(--hype-settings-pad, 14px) var(--hype-settings-pad, 14px) !important;
  cursor: default !important;
}

.hype-settings-action-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hype-settings-action-list > li {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  min-height: 36px;
  padding: 0 10px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--hype-font) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  line-height: 1 !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.hype-settings-action-list > li + li {
  margin-top: 2px !important;
}

.hype-settings-action-list > li:hover,
.navbar-hype #settingsBtnNew .hype-settings-action-list > li.setting-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.hype-settings-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--hype-muted);
  margin: 0;
  padding: 0;
}

.hype-settings-action-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.hype-settings-action-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

.navbar-hype #settingsBtnNew .hype-settings-action-list .user-name-settings,
.navbar-hype #settingsBtnNew .hype-settings-action-list .user-email-settings {
  line-height: 1.3 !important;
}

.hype-settings-action-list > li:hover .hype-settings-action-icon {
  color: var(--hype-accent);
}

.hype-settings-signout {
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--hype-muted) !important;
}

.hype-settings-signout:hover,
.navbar-hype #settingsBtnNew .hype-settings-action-list > .hype-settings-signout.setting-item:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
}

.hype-settings-signout:hover .hype-settings-action-icon {
  color: #f87171;
}

#settingsBtnNew ul .list-group-item:first-of-type,
#settingsBtnNew .hype-settings-profile.list-group-item {
  cursor: default !important;
}

/* RTL: profile avatar on the right of username */
.languageRTL .hype-settings-profile-inner {
  padding-right: 10px;
  direction: rtl;
  flex-direction: row;
}

.languageRTL .hype-settings-action-list > li {
  direction: rtl;
  flex-direction: row;
}

.languageRTL .hype-settings-meta-grid {
  direction: rtl;
}

.languageRTL .hype-settings-version,
.languageRTL .hype-settings-license,
.languageRTL #license-span.hype-settings-license {
  padding-right: 10px;
}

.languageRTL #license-span.hype-settings-license.list-group-item {
  padding-right: 10px !important;
  padding-left: 0 !important;
}

.languageRTL .hype-settings-meta-grid .hype-settings-meta-btn {
  justify-self: start;
}

.languageRTL .hype-settings-action-list > li,
.languageRTL .hype-settings-menu > li {
  text-align: right;
}

.languageRTL .hype-settings-meta-btn {
  flex-direction: row;
  direction: rtl;
  margin-right: 0;
  margin-left: 5px;
}

/* ── RTL: dashboard shell & sidebar ── */
.languageRTL #image-div {
  margin-left: 0 !important;
  margin-right: var(--hype-sidebar-width) !important;
}

.languageRTL #top-menu .container-fluid {
  padding-right: 0 !important;
  padding-left: 20px !important;
}

.languageRTL #toDoIcons .tab-active {
  border-left: none !important;
  border-right: 3px solid var(--hype-accent-strong) !important;
}

.languageRTL #left-toDoIcons #contactsButton.one-icon.tab-active,
.languageRTL #left-toDoIcons #multipartyCallScheduleButton.one-icon.tab-active,
.languageRTL #left-toDoIcons #recentCallsButton.one-icon.tab-active {
  border-left: none !important;
  border-right: 3px solid var(--hype-accent-strong) !important;
  background: linear-gradient(
    90deg,
    rgb(29 27 64) 0%,
    rgba(79, 70, 229, 0.21) 32%,
    rgba(42, 40, 96, 0.08) 68%,
    transparent 100%
  ) !important;
}

.languageRTL .hype-presence-avatar-legacy {
  margin-left: -5px !important;
  margin-right: 11px !important;
}

/* ── RTL: contacts tab — DOM order is search then title; same LTR flex ── */
html[dir="rtl"] #contactsDiv .tab-main-header,
html[dir="rtl"] #contactsDiv .hype-contacts-header,
.languageRTL #contactsDiv .tab-main-header,
.languageRTL #contactsDiv .hype-contacts-header {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 20px !important;
}

html[dir="rtl"] #contactsDiv .contactsTabHeadingRight,
html[dir="rtl"] #contactsDiv .hype-contacts-header-left,
.languageRTL #contactsDiv .contactsTabHeadingRight,
.languageRTL #contactsDiv .hype-contacts-header-left {
  order: unset !important;
  flex-direction: column !important;
  direction: ltr !important;
  align-items: flex-end !important;
  text-align: right !important;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-left: 0 !important;
  float: none !important;
}

html[dir="rtl"] #contactsDiv .hype-filter-chips,
.languageRTL #contactsDiv .hype-filter-chips {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-self: flex-end !important;
  width: max-content;
  margin: 12px 0 0 !important;
}

html[dir="rtl"] #contactsDiv .tabs-text,
html[dir="rtl"] #contactsDiv .marginLeftTitle,
.languageRTL #contactsDiv .tabs-text,
.languageRTL #contactsDiv .marginLeftTitle {
  text-align: right !important;
  width: auto !important;
  align-self: flex-end !important;
}

html[dir="rtl"] #contactsDiv .hype-contact-section-header,
.languageRTL #contactsDiv .hype-contact-section-header {
  text-align: right !important;
  direction: rtl !important;
}

.languageRTL #contactsDiv #contacts-search-input #searchclear {
  right: auto !important;
  left: 12px;
}

.languageRTL #scheduledMeetingsDiv #meetings-search-input #searchclearMeeting {
  right: auto !important;
  left: 12px;
}

.languageRTL #recentCallsDiv #history-search-input #searchclearHistory {
  right: auto !important;
  left: 12px !important;
}

.languageRTL .search,
.languageRTL #searchinputContact,
.languageRTL #searchinputMeeting,
.languageRTL #historySearchInput,
.languageRTL .community-search,
.languageRTL #meetings-search-input input,
.languageRTL #recordings-search-input input {
  padding: 0 36px 0 16px !important;
}

.languageRTL .searchinputContact::before {
  left: auto;
  right: 14px;
}

html[dir="rtl"] #contactsTable .list-group-itemCustom,
html[dir="rtl"] #contactsTable .card-Layout-Item,
.languageRTL #contactsTable .list-group-itemCustom,
.languageRTL #contactsTable .card-Layout-Item {
  flex-direction: row !important;
  direction: rtl !important;
  padding-inline: 16px !important;
}

/* React only: avatars flush under first chip (legacy dashboard_licode unchanged) */
html[dir="rtl"] .hype-react-dashboard #contactsTable .list-group-itemCustom,
html[dir="rtl"] .hype-react-dashboard #contactsTable .card-Layout-Item,
.languageRTL .hype-react-dashboard #contactsTable .list-group-itemCustom,
.languageRTL .hype-react-dashboard #contactsTable .card-Layout-Item {
  padding-inline: 0 16px !important;
  padding-right: 0 !important;
  padding-left: 16px !important;
}

html[dir="rtl"] .hype-react-dashboard #contactsDiv .hype-contact-section-header,
.languageRTL .hype-react-dashboard #contactsDiv .hype-contact-section-header {
  padding-inline: 0 16px !important;
  padding-right: 0 !important;
  padding-left: 16px !important;
}

html[dir="rtl"] .hype-react-dashboard #contactsTable .contact-available::before,
html[dir="rtl"] .hype-react-dashboard #contactsTable .contact-busy::before,
html[dir="rtl"] .hype-react-dashboard #contactsTable .contact-away::before,
html[dir="rtl"] .hype-react-dashboard #contactsTable .contact-donotdisturb::before,
html[dir="rtl"] .hype-react-dashboard #contactsTable .contact-in-meeting::before,
html[dir="rtl"] .hype-react-dashboard #contactsTable .contact-offline::before,
html[dir="rtl"] .hype-react-dashboard #contactsTable .notContact-hallow::before,
.languageRTL .hype-react-dashboard #contactsTable .contact-available::before,
.languageRTL .hype-react-dashboard #contactsTable .contact-busy::before,
.languageRTL .hype-react-dashboard #contactsTable .contact-away::before,
.languageRTL .hype-react-dashboard #contactsTable .contact-donotdisturb::before,
.languageRTL .hype-react-dashboard #contactsTable .contact-in-meeting::before,
.languageRTL .hype-react-dashboard #contactsTable .contact-offline::before,
.languageRTL .hype-react-dashboard #contactsTable .notContact-hallow::before {
  right: 36px !important;
}

.languageRTL #contactsTable .contactLetterDivParrent,
.languageRTL #contactsTable .contact-profile-div,
.languageRTL #contactsTable .userContactSpanParent,
.languageRTL #contactsTable .contactProfileDiv {
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html[dir="rtl"] #contactsTable .contactNameSpan,
.languageRTL #contactsTable .contactNameSpan {
  text-align: right !important;
  padding-bottom: 0 !important;
  direction: rtl !important;
  width: 100% !important;
  display: block !important;
}

html[dir="rtl"] #contactsTable .contactListEmail,
.languageRTL #contactsTable .contactListEmail {
  text-align: right !important;
  direction: ltr;
  unicode-bidi: plaintext;
  position: static !important;
}

html[dir="rtl"] #contactsTable .contactListPresence,
.languageRTL #contactsTable .contactListPresence {
  position: static !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
  text-align: right !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  margin-top: 2px !important;
  direction: rtl;
}

html[dir="rtl"] #contactsTable .list-group-itemCustom > p,
.languageRTL #contactsTable .list-group-itemCustom > p {
  text-align: right !important;
  flex: 1 1 auto;
  min-width: 0;
  direction: rtl !important;
}

.languageRTL #contactsTable .contactActionsDiv,
.languageRTL #contactsTable .contactActionBtns {
  position: static !important;
  float: none !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
}

.languageRTL #contactsTable .contact-available::before,
.languageRTL #contactsTable .contact-busy::before,
.languageRTL #contactsTable .contact-away::before,
.languageRTL #contactsTable .contact-donotdisturb::before,
.languageRTL #contactsTable .contact-in-meeting::before,
.languageRTL #contactsTable .contact-offline::before,
.languageRTL #contactsTable .notContact-hallow::before {
  left: auto !important;
  right: 52px !important;
}

html[dir="rtl"] #contactsTable .hype-contact-dropdown-menu,
.languageRTL #contactsTable .hype-contact-dropdown-menu {
  left: 0 !important;
  right: auto !important;
}

html[dir="rtl"] #contactsTable .hype-contact-dropdown-item,
.languageRTL #contactsTable .hype-contact-dropdown-item {
  flex-direction: row;
  direction: rtl;
  text-align: right;
  justify-content: flex-start;
}

html[dir="rtl"] #contactsTable .hype-contact-dropdown-dial,
.languageRTL #contactsTable .hype-contact-dropdown-dial {
  align-items: flex-end;
  text-align: right;
}

html[dir="rtl"] #contactsTable .hype-contact-dropdown-dial-number,
.languageRTL #contactsTable .hype-contact-dropdown-dial-number {
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: right;
}

html[dir="rtl"] #contactsTable .hype-contact-actions-row,
.languageRTL #contactsTable .hype-contact-actions-row {
  flex-direction: row;
  direction: rtl;
}

html[dir="rtl"] #contactsTable .contactListCallModeDropdown,
html[dir="rtl"] #contactsTable .hype-contact-more-wrap,
.languageRTL #contactsTable .contactListCallModeDropdown,
.languageRTL #contactsTable .hype-contact-more-wrap {
  float: none !important;
  left: auto !important;
  top: auto !important;
  position: relative !important;
}

/* ── RTL: history tab ── */
html[dir="rtl"] #recentCallsDiv .hype-history-header,
.languageRTL #recentCallsDiv .hype-history-header {
  flex-direction: row !important;
  direction: rtl;
}

html[dir="rtl"] #recentCallsDiv .hype-history-title-wrap,
.languageRTL #recentCallsDiv .hype-history-title-wrap {
  flex-direction: row;
  direction: rtl;
  align-items: baseline;
  text-align: right;
}

html[dir="rtl"] #recentCallsDiv .hype-history-title,
html[dir="rtl"] #recentCallsDiv .hype-history-subtitle,
.languageRTL #recentCallsDiv .tabs-text,
.languageRTL #recentCallsDiv .marginLeftTitle,
.languageRTL #recentCallsDiv .hype-history-subtitle {
  text-align: right !important;
}

html[dir="rtl"] #recentCallsDiv .hype-history-actions,
.languageRTL #recentCallsDiv .hype-history-actions {
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
  float: none !important;
  flex: 0 0 auto !important;
  max-width: none;
  width: auto;
  position: static !important;
}

html[dir="rtl"] #recentCallsDiv #history-search-input,
html[dir="rtl"] #recentCallsDiv .searchinputContact,
.languageRTL #recentCallsDiv #history-search-input,
.languageRTL #recentCallsDiv .searchinputContact {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  float: none !important;
  width: min(300px, 36vw) !important;
  max-width: min(300px, 36vw) !important;
  flex: 0 0 auto !important;
}

.languageRTL #recentCallsDiv #history-search-input #searchclearHistory,
html[dir="rtl"] #recentCallsDiv #history-search-input #searchclearHistory {
  right: auto !important;
  left: 12px !important;
}

html[dir="rtl"] #recentCallsDiv .hype-history-chips,
.languageRTL #recentCallsDiv .hype-history-chips {
  direction: rtl;
  flex-direction: row !important;
  justify-content: flex-start !important;
}

html[dir="rtl"] #historyTable .hh-row,
.languageRTL #historyTable .hh-row {
  flex-direction: row !important;
  direction: rtl;
}

html[dir="rtl"] #historyTable .hh-direction-badge,
.languageRTL #historyTable .hh-direction-badge {
  right: auto;
  left: -3px;
}

html[dir="rtl"] #historyTable .hh-status-line,
.languageRTL #historyTable .hh-status-line {
  flex-direction: row;
  direction: rtl;
}

html[dir="rtl"] #historyTable .historyBtnsContainer,
.languageRTL #historyTable .historyBtnsContainer {
  display: flex;
  flex-direction: row;
  direction: rtl;
  float: none !important;
}

html[dir="rtl"] #historyTable .histortyMeetingTitleLbl,
html[dir="rtl"] #historyTable .hh-name,
html[dir="rtl"] #historyTable .hh-main,
.languageRTL #historyTable .histortyMeetingTitleLbl,
.languageRTL #historyTable .hh-name {
  text-align: right;
}

html[dir="rtl"] #historyTable .hh-name-row,
.languageRTL #historyTable .hh-name-row {
  flex-direction: row;
  direction: rtl;
}

/* Keep container LTR; scope direction to list area (matches contactsInnerDiv pattern) */
html[dir="rtl"] #recentCallsDiv .historyTabContainer.hype-history,
.languageRTL #recentCallsDiv .historyTabContainer.hype-history {
  direction: ltr;
}

html[dir="rtl"] #recentCallsDiv .hype-history-list-wrap,
html[dir="rtl"] #recentCallsDiv #recenCallsInnerDiv1,
.languageRTL #recentCallsDiv .hype-history-list-wrap,
.languageRTL #recentCallsDiv #recenCallsInnerDiv1 {
  direction: rtl;
  padding-right: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] #recentCallsDiv #historyTable.list,
.languageRTL #recentCallsDiv #historyTable.list {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] #historyTable .callHistoryListItem,
html[dir="rtl"] #historyTable .list-group-itemCustomMeeting,
.languageRTL #historyTable .callHistoryListItem,
.languageRTL #historyTable .list-group-itemCustomMeeting {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

html[dir="rtl"] #historyTable .histortyMeetingTitleLbl,
html[dir="rtl"] #historyTable .historyListSecndRow,
.languageRTL #historyTable .histortyMeetingTitleLbl,
.languageRTL #historyTable .historyListSecndRow {
  margin-right: 0 !important;
}

html[dir="rtl"] #historyTable .hh-avatar-wrap,
.languageRTL #historyTable .hh-avatar-wrap {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* ── RTL: guru dropdown — align left edge with guru icon */
.languageRTL #guruDropDownDiv,
.languageRTL #guruDropDownDivInMeeting,
.languageRTL .navbar-right #guruDropDownDiv,
.languageRTL #setting-li #guruDropDownDiv,
.languageRTL .navbar-hype #setting-li #guruDropDownDiv,
.languageRTL .screen-skill-guru-div #guruDropDownDiv,
.languageRTL .screen-skill-guru-div #guruDropDownDivInMeeting {
  left: 0 !important;
  right: auto !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.languageRTL #guruListHeading,
.languageRTL #guruListHeadingInMeeting {
  direction: rtl;
  text-align: right;
}

.languageRTL #guruListHeading .guru-item-heading-1,
.languageRTL #guruListHeading .guru-item-heading-2,
.languageRTL #guruListHeadingInMeeting .guru-item-heading-1,
.languageRTL #guruListHeadingInMeeting .guru-item-heading-2 {
  text-align: right;
}

.languageRTL #guru-list-inmeeting,
.languageRTL #guru-list {
  direction: rtl;
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

.languageRTL #guru-list-inmeeting li.guru-item,
.languageRTL #guru-list li.guru-item {
  direction: rtl;
  flex-direction: row;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box;
}

.languageRTL #guru-list-inmeeting li.guru-item .guru-name-div,
.languageRTL #guru-list li.guru-item .guru-name-div {
  float: none !important;
  align-items: flex-end !important;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 46px;
  text-align: right;
}

.languageRTL #guru-list-inmeeting li.guru-item .guru-name-div::before,
.languageRTL #guru-list li.guru-item .guru-name-div::before {
  left: auto;
  right: 0;
}

.languageRTL #guru-list-inmeeting .guru-name-count,
.languageRTL #guru-list .guru-name-count {
  align-items: flex-end !important;
  text-align: right;
  width: 100%;
}

.languageRTL #guru-list-inmeeting .guru-name-count > span,
.languageRTL #guru-list .guru-name-count > span {
  text-align: right;
  width: 100%;
}

.languageRTL #guru-list-inmeeting .guru-name-actual,
.languageRTL #guru-list .guru-name-actual,
.languageRTL #guru-list-inmeeting .guru-lang-span,
.languageRTL #guru-list .guru-lang-span {
  display: block;
  width: 100%;
  text-align: right !important;
  align-self: stretch;
}

.languageRTL #guru-list-inmeeting li.guru-item .guru-communication-div,
.languageRTL #guru-list li.guru-item .guru-communication-div {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.languageRTL #guruListFooterInMeeting.guru-list-footer,
.languageRTL #guruListFooter.guru-list-footer {
  direction: rtl;
  text-align: center !important;
}

/* ── RTL: presence dropdown (extensions) ── */
.languageRTL .hype-presence-trigger {
  padding: 6px 6px 6px 10px !important;
}

.languageRTL .hype-presence-chevron {
  margin-left: 0;
  margin-right: 2px;
}

.languageRTL .navbar-hype .hype-presence-menu.dropdown-menuPresence,
.languageRTL .myPresenceStatsDropdown.hype-presence-menu {
  direction: rtl;
  text-align: right;
}

.languageRTL .hype-presence-menu-header {
  text-align: right;
  padding: 4px 10px 8px !important;
}

.languageRTL .hype-presence-option {
  direction: ltr;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
}

.languageRTL .hype-presence-option-label {
  order: 1;
  flex: 0 1 auto;
  text-align: right;
}

.languageRTL .hype-presence-option-dot {
  order: 2;
  flex-shrink: 0;
}

.languageRTL .hype-presence-option-check {
  order: 3;
  flex-shrink: 0;
}

.languageRTL .navbar-hype .hype-presence-menu .hype-presence-option,
.languageRTL .myPresenceStatsDropdown li.hype-presence-option {
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: right !important;
}

/* ── RTL: scheduled meetings ── */
/* With html[dir=rtl], flex row + space-between already mirrors.
   Do NOT use row-reverse (double-flips title/actions back to LTR positions). */
.languageRTL #scheduledMeetingsDiv .hype-meetings-header,
html[dir="rtl"] #scheduledMeetingsDiv .hype-meetings-header {
  flex-direction: row;
}

.languageRTL #scheduledMeetingsDiv .hype-meetings-toolbar,
html[dir="rtl"] #scheduledMeetingsDiv .hype-meetings-toolbar {
  flex-direction: row;
}

.languageRTL #scheduledMeetingsDiv .hype-meetings-toolbar-actions,
html[dir="rtl"] #scheduledMeetingsDiv .hype-meetings-toolbar-actions {
  margin-left: 0;
  margin-right: 0;
  margin-inline-start: auto;
}

.languageRTL #scheduledMeetingsDiv .hype-meetings-actions,
html[dir="rtl"] #scheduledMeetingsDiv .hype-meetings-actions {
  flex-direction: row;
}

.languageRTL #scheduledMeetingsDiv .tab-main-header {
  flex-direction: row;
}

.languageRTL #scheduledMeetingsDiv .hype-meetings-btn,
html[dir="rtl"] #scheduledMeetingsDiv .hype-meetings-btn {
  /* html[dir=rtl] already mirrors icon/text — do not row-reverse */
  flex-direction: row;
}

@media all and (max-width: 768px) {
  .languageRTL #image-div {
    margin-right: 0 !important;
  }

  .languageRTL #contactsTable .contactListEmail {
    text-align: right;
  }

  .languageRTL #contactsTable .contactActionsDiv {
    margin-left: 0;
    margin-right: auto;
  }

  .languageRTL #contactsTable .contact-available::before,
  .languageRTL #contactsTable .contact-busy::before,
  .languageRTL #contactsTable .contact-away::before,
  .languageRTL #contactsTable .contact-donotdisturb::before,
  .languageRTL #contactsTable .contact-in-meeting::before,
  .languageRTL #contactsTable .contact-offline::before,
  .languageRTL #contactsTable .notContact-hallow::before {
    right: 52px !important;
    left: auto !important;
  }
}

/* ── Sidebar Quick Actions ── */
/* History/Contacts/Meetings use float:left — margin-top on the next sibling
   collapses and won't show. Use padding-top for the gap under History. */
#left-toDoIcons .hype-quick-actions {
  clear: both;
  display: block;
  width: auto;
  margin: 0 12px 8px;
  padding-top: 20px;
}

#left-toDoIcons .hype-quick-actions__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8b91be;
  padding: 0 6px;
  margin: 0 0 14px;
  font-family: var(--hype-font);
}

#left-toDoIcons .hype-quick-actions__glass {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 14px;
  background: #5655d96b;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

#left-toDoIcons .hype-quick-actions__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: transparent;
  color: #e7e8ff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--hype-font);
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

#left-toDoIcons .hype-quick-actions__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

#left-toDoIcons .hype-quick-actions__icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(129, 140, 248, 0.18);
  color: #c7cae6;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

#left-toDoIcons .hype-quick-actions__icon--start {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}

/* ── Meetings listing redesign (Upcoming/Past + rows) ── */
#scheduledMeetingsDiv .hype-meetings-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#scheduledMeetingsDiv .hype-meetings-subline {
  font-size: 13.5px;
  color: #9aa0c8;
  font-weight: 400;
  line-height: 1.3;
}

#scheduledMeetingsDiv .hype-meetings-toolbar.mp-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

#scheduledMeetingsDiv .mp-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
  min-width: 0;
}

#scheduledMeetingsDiv .mp-toolbar-right .hype-meetings-toolbar-actions {
  margin-left: 0;
}

#scheduledMeetingsDiv .mp-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  padding: 3px;
  flex-shrink: 0;
}

#scheduledMeetingsDiv .mp-seg__btn {
  border: none;
  background: transparent;
  color: #9aa0c8;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--hype-font);
  padding: 7px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

#scheduledMeetingsDiv .mp-seg__btn.is-active {
  background: rgba(129, 140, 248, 0.22);
  color: #fff;
}

#scheduledMeetingsDiv .mp-filter {
  position: relative;
  flex-shrink: 0;
}

#scheduledMeetingsDiv .mp-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  padding: 8px 13px;
  color: #c7cae6;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--hype-font);
  cursor: pointer;
  height: 40px;
  box-sizing: border-box;
}

#scheduledMeetingsDiv .mp-filter__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

#scheduledMeetingsDiv .mp-filter__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 148px;
  z-index: 20;
  background: rgba(28, 26, 58, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#scheduledMeetingsDiv .mp-filter__option {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: #c7cae6;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--hype-font);
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}

#scheduledMeetingsDiv .mp-filter__option:hover,
#scheduledMeetingsDiv .mp-filter__option.is-active {
  background: rgba(129, 140, 248, 0.18);
  color: #fff;
}

#scheduledMeetingsDiv .mp-list {
  padding: 2px 0 24px !important;
}

#scheduledMeetingsDiv .mp-group {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
}

#scheduledMeetingsDiv .mp-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
  padding: 0 2px;
}

#scheduledMeetingsDiv .mp-group-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: #9aa0c8;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--hype-font);
}

#scheduledMeetingsDiv .mp-group-rule {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

#scheduledMeetingsDiv .mp-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#scheduledMeetingsDiv .mp-row-item.list-group-itemCustomMeeting {
  background: transparent !important;
  border: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#scheduledMeetingsDiv .mp-row-item.list-group-itemCustomMeeting:hover {
  background: transparent !important;
}

#scheduledMeetingsDiv .mp-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 11px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.12s;
  cursor: default;
  position: relative;
  overflow: visible;
}

#scheduledMeetingsDiv .mp-row:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

#scheduledMeetingsDiv .mp-row:has(.mp-avatar-more.is-open) {
  z-index: 6;
}

#scheduledMeetingsDiv .mp-row-check {
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0;
  flex-shrink: 0;
}

#scheduledMeetingsDiv .mp-row-time {
  width: 60px;
  flex-shrink: 0;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  padding-right: 14px;
}

#scheduledMeetingsDiv .mp-row-time--dated {
  width: 72px;
}

#scheduledMeetingsDiv .mp-row-time__date {
  font-size: 11px;
  font-weight: 700;
  color: #c7cae6;
  line-height: 1.15;
  margin-bottom: 4px;
  font-family: var(--hype-font);
}

#scheduledMeetingsDiv .mp-row-time__year {
  font-size: 10.5px;
  font-weight: 600;
  color: #9aa0c8;
  line-height: 1.15;
  margin-top: -2px;
  margin-bottom: 4px;
  font-family: var(--hype-font);
}

#scheduledMeetingsDiv .mp-row-time__clock {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  font-family: var(--hype-font);
}

#scheduledMeetingsDiv .mp-row-time__meridiem {
  font-size: 11px;
  color: #9aa0c8;
  margin-top: 2px;
}

#scheduledMeetingsDiv .mp-row-body {
  min-width: 0;
  flex: 1;
}

#scheduledMeetingsDiv .mp-row-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: nowrap;
  min-width: 0;
}

#scheduledMeetingsDiv .mp-row-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  font-family: var(--hype-font);
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#scheduledMeetingsDiv .mp-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

#scheduledMeetingsDiv .mp-row-meta {
  font-size: 12.5px;
  color: #9aa0c8;
  margin-top: 3px;
}

#scheduledMeetingsDiv .mp-row-participants {
  font-size: 12.5px;
  color: #9aa0c8;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#scheduledMeetingsDiv .mp-badge--soon {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.32);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.18);
}

#scheduledMeetingsDiv .mp-badge--live {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.35);
}

#scheduledMeetingsDiv .mp-row-avatars {
  display: flex;
  align-items: center;
  margin-right: 4px;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

#scheduledMeetingsDiv .mp-row-avatars .mp-avatar:nth-child(1) { z-index: 1; }
#scheduledMeetingsDiv .mp-row-avatars .mp-avatar:nth-child(2) { z-index: 2; }
#scheduledMeetingsDiv .mp-row-avatars .mp-avatar:nth-child(3) { z-index: 3; }
#scheduledMeetingsDiv .mp-row-avatars .mp-avatar:nth-child(4) { z-index: 4; }

#scheduledMeetingsDiv .mp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #232048;
  margin-left: -8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}

#scheduledMeetingsDiv .mp-avatar:first-child {
  margin-left: 0;
}

#scheduledMeetingsDiv .mp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#scheduledMeetingsDiv .mp-avatar--email {
  letter-spacing: 0;
  text-transform: uppercase;
}

#scheduledMeetingsDiv .mp-avatar--more {
  margin: 0;
  margin-left: -8px;
  padding: 0 5px;
  min-width: 28px;
  width: auto;
  max-width: none;
  border-radius: 999px;
  border: 2px solid #232048;
  background: rgba(255, 255, 255, 0.12);
  color: #e7e8ff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--hype-font);
  cursor: pointer;
  line-height: 1;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 6;
  box-sizing: border-box;
}

#scheduledMeetingsDiv .mp-avatar--more:hover,
#scheduledMeetingsDiv .mp-avatar-more.is-open .mp-avatar--more {
  background: rgba(129, 140, 248, 0.35);
  color: #fff;
}

#scheduledMeetingsDiv .mp-avatar-more {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 5;
  flex-shrink: 0;
}

#scheduledMeetingsDiv .mp-avatar-more__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: min(320px, 70vw);
  max-height: 240px;
  overflow: hidden;
  border-radius: 10px;
  background: #2a2750;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 40;
}

#scheduledMeetingsDiv .mp-avatar-more__menu--up {
  top: auto;
  bottom: calc(100% + 8px);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.45);
}

#scheduledMeetingsDiv .mp-avatar-more__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
}

#scheduledMeetingsDiv .mp-avatar-more__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #e7e8ff;
  font-size: 13px;
  line-height: 1.3;
  min-width: 0;
}

#scheduledMeetingsDiv .mp-avatar-more__item:hover {
  background: rgba(129, 140, 248, 0.18);
}

#scheduledMeetingsDiv .mp-avatar-more__chip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}

#scheduledMeetingsDiv .mp-avatar-more__chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#scheduledMeetingsDiv .mp-avatar-more__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

#scheduledMeetingsDiv .mp-row-acts {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
  opacity: 1;
  position: relative;
}

#scheduledMeetingsDiv .mp-join-btn {
  padding: 8px 18px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--hype-font);
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(79, 70, 229, 0.35);
}

#scheduledMeetingsDiv .mp-join-btn:hover {
  filter: brightness(1.08);
}

#scheduledMeetingsDiv .mp-join-btn--past {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e7e8ff;
  box-shadow: none;
  font-weight: 600;
}

#scheduledMeetingsDiv .mp-more-wrap {
  position: relative;
}

#scheduledMeetingsDiv .mp-more-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  display: grid;
  place-items: center;
  color: #c7cae6;
  cursor: pointer;
}

#scheduledMeetingsDiv .mp-more-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

#scheduledMeetingsDiv .mp-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  z-index: 80;
  background: rgba(28, 26, 58, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

#scheduledMeetingsDiv .mp-menu--up {
  top: auto;
  bottom: calc(100% + 4px);
}

#scheduledMeetingsDiv .mp-menu__item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: #c7cae6;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--hype-font);
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}

#scheduledMeetingsDiv .mp-menu__item:hover {
  background: rgba(129, 140, 248, 0.18);
  color: #fff;
}

#scheduledMeetingsDiv.is-edit-mode .mp-row-avatars {
  opacity: 0.7;
}

@media all and (max-width: 900px) {
  #scheduledMeetingsDiv .mp-toolbar-right {
    width: 100%;
    margin-left: 0;
  }

  #scheduledMeetingsDiv .mp-toolbar-right #meetings-search-input,
  #scheduledMeetingsDiv .mp-toolbar-right .searchinputContact {
    width: min(250px, 100%) !important;
    flex: 1 1 auto;
  }

  #scheduledMeetingsDiv .mp-row {
    flex-wrap: wrap;
  }

  #scheduledMeetingsDiv .mp-row-acts {
    opacity: 1;
    margin-left: auto;
  }
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-toolbar-right,
.languageRTL #scheduledMeetingsDiv .mp-toolbar-right {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-filter__option,
.languageRTL #scheduledMeetingsDiv .mp-filter__option {
  text-align: right;
}

html[dir="rtl"] #scheduledMeetingsDiv .searchinputContact::before,
.languageRTL #scheduledMeetingsDiv .searchinputContact::before {
  left: auto !important;
  right: 14px !important;
}

html[dir="rtl"] #scheduledMeetingsDiv #searchinputMeeting,
.languageRTL #scheduledMeetingsDiv #searchinputMeeting {
  padding: 0 36px 0 32px !important;
  text-align: right;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-row-body,
.languageRTL #scheduledMeetingsDiv .mp-row-body {
  text-align: right;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-row-time,
.languageRTL #scheduledMeetingsDiv .mp-row-time {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  padding-right: 0;
  padding-left: 14px;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-avatar,
.languageRTL #scheduledMeetingsDiv .mp-avatar {
  margin-left: 0;
  margin-right: -8px;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-avatar:first-child,
.languageRTL #scheduledMeetingsDiv .mp-avatar:first-child {
  margin-right: 0;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-avatar--more,
.languageRTL #scheduledMeetingsDiv .mp-avatar--more {
  margin-left: 0;
  margin-right: -8px;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-avatar-more__menu,
.languageRTL #scheduledMeetingsDiv .mp-avatar-more__menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-filter__menu,
.languageRTL #scheduledMeetingsDiv .mp-filter__menu,
html[dir="rtl"] #scheduledMeetingsDiv .mp-menu,
.languageRTL #scheduledMeetingsDiv .mp-menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] #scheduledMeetingsDiv .mp-menu__item,
.languageRTL #scheduledMeetingsDiv .mp-menu__item {
  text-align: right;
}

/* Quick Actions: match sidebar nav (icon on the inline-start / right in RTL).
   Do NOT combine direction:rtl with flex-direction:row-reverse — that double-flips. */
html[dir="rtl"] #left-toDoIcons .hype-quick-actions__label,
.languageRTL #left-toDoIcons .hype-quick-actions__label {
  text-align: right;
}

html[dir="rtl"] #left-toDoIcons .hype-quick-actions__btn,
.languageRTL #left-toDoIcons .hype-quick-actions__btn {
  text-align: right;
  flex-direction: row;
  justify-content: flex-start;
}

/* ── Email verification toast (post-signup warning) ──
   Legacy uses blanchedalmond + inherited white text from indigo → unreadable.
   Restyle as a dark indigo card with clear contrast and spaced actions. */
#verificationDiv.verification-div,
#verificationDiv {
  position: fixed !important;
  right: 16px !important;
  bottom: 24px !important;
  left: auto !important;
  z-index: 1040 !important;
  width: min(360px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #2a2760, #1d1b40) !important;
  border: 1px solid rgba(129, 140, 248, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  color: #e8eaf6 !important;
  font-family: var(--hype-font) !important;
  overflow: hidden;
}

#verificationDiv .verification-div-email {
  display: block !important;
  position: relative !important;
  padding: 18px 40px 16px 18px !important;
  box-sizing: border-box;
}

#verificationDiv .close-verification-div {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 2;
  padding: 6px !important;
  color: #c7cae6 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

#verificationDiv .close-verification-div:hover,
#verificationDiv .close-verification-div:focus {
  color: #fff !important;
}

#verificationDiv .verification-desc,
#verificationDiv .verification-desc span,
#verificationDiv #emailVerificationEmail,
#verificationDiv #emailVerificationTime {
  color: #e8eaf6 !important;
  text-align: left !important;
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  word-break: break-word;
  padding-bottom: 0 !important;
}

#verificationDiv #emailVerificationEmail {
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

#verificationDiv #emailVerificationTime {
  color: #c7cae6 !important;
  font-weight: 500 !important;
  margin-bottom: 14px !important;
}

#verificationDiv .verification-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

#verificationDiv #resend-emailBtn1,
#verificationDiv #checkEmailVerificationStatus {
  margin: 0 !important;
  min-height: 34px;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  font-family: var(--hype-font) !important;
  line-height: 1.2 !important;
}

#verificationDiv #resend-emailBtn1 {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border: none !important;
  color: #fff !important;
}

#verificationDiv #checkEmailVerificationStatus {
  background: transparent !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
  color: #c7cae6 !important;
  box-shadow: none !important;
}

#verificationDiv #checkEmailVerificationStatus:hover,
#verificationDiv #checkEmailVerificationStatus:focus {
  color: #fff !important;
  border-color: rgba(165, 180, 252, 0.7) !important;
}

html[dir="rtl"] #verificationDiv,
.languageRTL #verificationDiv {
  right: auto !important;
  left: 16px !important;
}

html[dir="rtl"] #verificationDiv .close-verification-div,
.languageRTL #verificationDiv .close-verification-div {
  right: auto !important;
  left: 10px !important;
}

html[dir="rtl"] #verificationDiv .verification-div-email,
.languageRTL #verificationDiv .verification-div-email {
  padding: 18px 18px 16px 40px !important;
}

html[dir="rtl"] #verificationDiv .verification-desc,
.languageRTL #verificationDiv .verification-desc {
  text-align: right !important;
}