@font-face {
  font-family: Tajawal;
  src: url('/fonts/Tajawal-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Tajawal;
  src: url('/fonts/Tajawal-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Tajawal;
  src: url('/fonts/Tajawal-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

/*
 * HENDAR UALL-J — Mobile acceptance recovery
 * Final, cache-busted overrides for identity, scrolling, portfolio cards,
 * compact project chat and the redesigned secure video-call surface.
 */

:root {
  --uallj-ink: #102d3e;
  --uallj-muted: #6f8590;
  --uallj-brand: #087f78;
  --uallj-brand-strong: #05645f;
  --uallj-mint: #dff8f3;
  --uallj-canvas: #f3f8f8;
  --uallj-line: rgb(16 45 62 / 12%);
  --uallj-call-bg: #03141c;
  --uallj-call-panel: #08252f;
  --uallj-danger: #e34858;
  --uallj-warning: #e6a23c;
}

*,
*::before,
*::after { box-sizing: border-box; }

.hendar-product-mark {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 21px;
  background:
    radial-gradient(circle at 72% 24%, #5ce0cc 0 4px, transparent 5px),
    linear-gradient(145deg, #0f9d90 0 48%, #05645f 49% 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgb(5 100 95 / 24%), inset 0 1px 0 rgb(255 255 255 / 28%);
  font-family: Cairo, "IBM Plex Sans Arabic", sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.hendar-product-mark::before,
.hendar-product-mark::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 50%;
}

.hendar-product-mark::before { width: 58px; height: 58px; inset: -27px auto auto -22px; }
.hendar-product-mark::after { width: 40px; height: 40px; inset: auto -18px -20px auto; }
.hendar-product-mark > i {
  position: absolute;
  width: 6px;
  height: 6px;
  inset: auto 11px 11px auto;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: -42px -42px 0 -1px #f0c85b;
}

.hendar-product-mark.compact {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 14px;
  font-size: 22px;
  box-shadow: 0 8px 22px rgb(5 100 95 / 18%);
}

.login-screen img[src*="hendar-logo"],
.install-help-panel img[src*="hendar-logo"],
.sidebar img[src*="hendar-logo"],
.startup-splash img[src*="hendar-logo"] { display: none !important; }

.brand-mark { align-items: center !important; gap: 13px !important; }
.brand-mark > div > span { letter-spacing: 0 !important; text-transform: none !important; }
.sidebar-brand-mark { display: grid !important; place-items: center !important; }

/* Authentication remains a document scroll surface on every phone browser. */
html:not([data-auth-surface="app"]),
html:not([data-auth-surface="app"]) body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y;
}

.login-screen {
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}

.login-card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.login-card .mobile-brand { margin-block-end: 16px !important; }
.login-card .mobile-brand .brand-mark { justify-content: flex-start !important; }
.login-card .mobile-brand .brand-mark > div { display: grid !important; gap: 1px !important; }
.login-card .mobile-brand .brand-mark strong { color: var(--uallj-ink) !important; font-size: 19px !important; }
.login-card .mobile-brand .brand-mark span { color: var(--uallj-muted) !important; font-size: 10px !important; }

/* The authenticated application has one deliberate scroll owner: main-content. */
html[data-auth-surface="app"],
html[data-auth-surface="app"] body,
body.hendar-authenticated {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-auth-surface="app"] .app-shell:not(.hidden),
body.hendar-authenticated .app-shell:not(.hidden) {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html[data-auth-surface="app"] .main-content,
body.hendar-authenticated .main-content {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

html[data-auth-surface="app"] .main-content > .view:not(.hidden),
body.hendar-authenticated .main-content > .view:not(.hidden) {
  height: auto !important;
  min-height: calc(100dvh - 74px) !important;
  max-height: none !important;
  overflow: visible !important;
}

html[data-auth-surface="app"] #projectWorkspaceView.project-chat-active,
body.hendar-authenticated #projectWorkspaceView.project-chat-active {
  height: calc(100dvh - 74px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Six KPI cards: no orphan card and no artificial blank cell. */
.enterprise-metrics-grid,
#metricsGrid {
  align-items: stretch !important;
  grid-auto-flow: row !important;
}

.enterprise-kpi-card {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Single-project portfolio card stays horizontal and compact. */
.portfolio-health-layout {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.single-project-health-card {
  --project-color: #2563eb;
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-template: "status" auto "copy" auto "metrics" auto "action" auto / minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--project-color) 18%, #dce7ec) !important;
  border-inline-start: 6px solid var(--project-color) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--project-color) 5%, #fff), #fff) !important;
  color: var(--uallj-ink) !important;
  text-align: start !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}

.single-project-health-card > * {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  transform: none !important;
}

.single-project-health-card > .single-project-status {
  grid-area: status !important;
  justify-self: start !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--project-color) 10%, #fff) !important;
  color: var(--project-color) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.single-project-health-card > div { grid-area: copy !important; }
.single-project-health-card > div small,
.single-project-health-card > div strong,
.single-project-health-card > div p { display: block !important; width: 100% !important; margin: 0 !important; }
.single-project-health-card > div small { color: var(--project-color) !important; font-size: 10px !important; font-weight: 900 !important; }
.single-project-health-card > div strong { margin-block: 4px !important; font-size: clamp(19px, 4vw, 27px) !important; line-height: 1.35 !important; }
.single-project-health-card > div p { color: var(--uallj-muted) !important; font-size: 10px !important; }

.single-project-health-card > section {
  grid-area: metrics !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.single-project-health-card > section > span {
  display: grid !important;
  min-width: 0 !important;
  min-height: 70px !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 9px !important;
  border: 1px solid var(--uallj-line) !important;
  border-radius: 13px !important;
  background: rgb(255 255 255 / 82%) !important;
  color: var(--uallj-muted) !important;
  font-size: 8px !important;
  text-align: start !important;
}

.single-project-health-card > section > span > b {
  color: var(--uallj-ink) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
}

.single-project-health-card > em {
  grid-area: action !important;
  display: flex !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 13px !important;
  background: var(--project-color) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

/* Compact chat: bubbles grow with content, images are real previews, one menu owns actions. */
.project-chat-messages {
  gap: 4px !important;
  scroll-behavior: smooth;
}

.project-chat-message { margin: 0 !important; padding-block: 1px !important; }
.project-chat-bubble {
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
  gap: 3px !important;
  padding: 7px 10px 5px !important;
}

.project-chat-bubble > p { min-height: 0 !important; margin: 0 !important; line-height: 1.45 !important; }
.project-chat-message-meta { min-height: 0 !important; margin: 0 !important; line-height: 1.15 !important; }
.project-chat-message-menu { z-index: 12 !important; }
.project-chat-bubble > [data-chat-edit]:not(.project-chat-message-menu *),
.project-chat-bubble > .project-chat-legacy-edit { display: none !important; }

.project-chat-image {
  display: block !important;
  width: min(360px, 72vw) !important;
  min-width: 160px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #dce9e7 !important;
}

.project-chat-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 120px !important;
  max-height: min(420px, 56dvh) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #132a32 !important;
}

.project-chat-header select,
.project-chat-header input,
.project-chat-search input,
.project-chat-conversation-select {
  min-width: 0 !important;
  color: var(--uallj-ink) !important;
  -webkit-text-fill-color: var(--uallj-ink) !important;
  direction: rtl !important;
  text-align: start !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
}

.project-chat-roster-rows > article[role="button"] {
  cursor: pointer !important;
  touch-action: manipulation;
}

/* Completely rebuilt secure video-call surface. */
.hendar-project-video-call-stage {
  position: fixed !important;
  z-index: 2147482000 !important;
  inset: 0 !important;
  display: grid !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 12% 12%, rgb(27 151 137 / 18%), transparent 34%),
    radial-gradient(circle at 86% 68%, rgb(43 109 146 / 17%), transparent 38%),
    linear-gradient(155deg, #061a23 0%, #020d13 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: "IBM Plex Sans Arabic", Cairo, sans-serif !important;
  direction: rtl !important;
}

.hendar-project-video-call-stage.hidden { display: none !important; }

.hendar-project-video-call-stage > header.hendar-video-call-head {
  display: flex !important;
  min-width: 0 !important;
  min-height: 78px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: max(13px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)) !important;
  border-block-end: 1px solid rgb(255 255 255 / 9%) !important;
  background: rgb(2 15 21 / 76%) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
}

.hendar-video-call-title {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 10px !important;
}

.hendar-video-call-mark {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  place-items: center !important;
  border: 1px solid rgb(111 232 212 / 22%) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgb(17 147 132 / 38%), rgb(255 255 255 / 7%)) !important;
  color: #9ef2e3 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%) !important;
}

.hendar-video-call-mark .project-chat-ui-icon { width: 22px !important; height: 22px !important; }
.hendar-video-call-title > div { min-width: 0 !important; }
.hendar-video-call-title small,
.hendar-video-call-title strong { display: block !important; min-width: 0 !important; }
.hendar-project-video-call-stage .hendar-video-call-title small { color: #77d9c9 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .08em !important; }
.hendar-video-call-title strong { margin-block-start: 2px !important; overflow: hidden !important; color: #fff !important; font-size: 15px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

.hendar-video-call-presence {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 2px 6px !important;
  direction: rtl !important;
}

.hendar-video-call-presence > i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #f1b14b !important;
  box-shadow: 0 0 0 4px rgb(241 177 75 / 13%) !important;
}

.hendar-project-video-call-stage.is-connected .hendar-video-call-presence > i {
  background: #35d18a !important;
  box-shadow: 0 0 0 4px rgb(53 209 138 / 13%), 0 0 16px rgb(53 209 138 / 35%) !important;
}

.hendar-video-call-presence > span { color: #d6e9eb !important; font-size: 9px !important; font-weight: 800 !important; }
.hendar-project-video-call-stage .hendar-video-call-presence > time {
  grid-column: 1 / -1 !important;
  min-width: 60px !important;
  color: #fff !important;
  direction: ltr !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
  text-align: end !important;
}

.hendar-video-view-actions {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
}

.hendar-video-view-actions > button {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgb(255 255 255 / 13%) !important;
  border-radius: 12px !important;
  background: rgb(255 255 255 / 8%) !important;
  color: #e9f8f8 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.hendar-video-view-actions > button[hidden] { display: none !important; }
.hendar-video-view-actions > button:active { transform: scale(.95) !important; }
.hendar-video-view-actions > button:focus-visible { outline: 3px solid #7ce9d8 !important; outline-offset: 2px !important; }
.hendar-video-view-actions .project-chat-ui-icon { width: 17px !important; height: 17px !important; }

.hendar-project-video-tracks {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 12px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

.hendar-project-video-tracks video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid rgb(255 255 255 / 14%) !important;
  border-radius: 22px !important;
  background: #0b2631 !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 25%) !important;
  object-fit: cover !important;
}

/* A two-person call uses the familiar remote-full / local-picture-in-picture layout.
 * The swap command exchanges the two DOM tiles, so either participant can be enlarged. */
.hendar-project-video-tracks:has(> video:nth-of-type(2)):not(:has(> video:nth-of-type(3))) {
  display: block !important;
  overflow: hidden !important;
}

.hendar-project-video-tracks:has(> video:nth-of-type(2)):not(:has(> video:nth-of-type(3))) > video:first-of-type {
  position: absolute !important;
  inset: 12px !important;
  width: calc(100% - 24px) !important;
  height: calc(100% - 24px) !important;
}

.hendar-project-video-tracks:has(> video:nth-of-type(2)):not(:has(> video:nth-of-type(3))) > video:nth-of-type(2) {
  position: absolute !important;
  z-index: 4 !important;
  width: clamp(112px, 27vw, 250px) !important;
  height: clamp(150px, 31dvh, 320px) !important;
  inset: auto auto 28px 28px !important;
  border: 2px solid rgb(255 255 255 / 70%) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 42%) !important;
}

.hendar-video-call-empty {
  display: grid !important;
  width: min(360px, 90%) !important;
  min-height: 250px !important;
  place-self: center !important;
  place-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 24px !important;
  border: 1px solid rgb(255 255 255 / 9%) !important;
  border-radius: 26px !important;
  background: linear-gradient(145deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 3%)) !important;
  color: #fff !important;
  text-align: center !important;
}

.hendar-project-video-tracks:has(video) .hendar-video-call-empty,
.hendar-project-video-call-stage.has-video .hendar-video-call-empty { display: none !important; }
.hendar-video-call-empty > span { display: grid !important; width: 62px !important; height: 62px !important; place-items: center !important; border-radius: 20px !important; background: rgb(18 153 138 / 18%) !important; color: #8cebdc !important; }
.hendar-video-call-empty .project-chat-ui-icon { width: 29px !important; height: 29px !important; }
.hendar-video-call-empty strong { font-size: 16px !important; }
.hendar-video-call-empty small { max-width: 260px !important; color: rgb(230 245 247 / 62%) !important; font-size: 10px !important; line-height: 1.7 !important; }

.hendar-project-video-call-stage > footer.hendar-video-call-dock {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
  overflow: visible !important;
  border-block-start: 1px solid rgb(255 255 255 / 9%) !important;
  background: rgb(2 15 21 / 84%) !important;
  backdrop-filter: blur(20px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
}

.hendar-video-call-dock > .hendar-video-action {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 58px !important;
  grid-template-columns: auto minmax(0, auto) !important;
  place-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border: 1px solid rgb(255 255 255 / 12%) !important;
  border-radius: 17px !important;
  background: rgb(255 255 255 / 8%) !important;
  color: #eef9fa !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%) !important;
  font: inherit !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.hendar-video-call-dock > .hendar-video-action[hidden] { display: none !important; }
.hendar-video-call-dock > .hendar-video-action:active { transform: scale(.97) !important; }
.hendar-video-call-dock > .hendar-video-action:focus-visible { outline: 3px solid #7ce9d8 !important; outline-offset: 2px !important; }
.hendar-video-call-dock > .hendar-video-action:disabled { cursor: wait !important; opacity: .55 !important; }
.hendar-video-call-dock > .hendar-video-action.is-active { border-color: rgb(240 176 73 / 42%) !important; background: rgb(188 116 19 / 25%) !important; color: #ffd994 !important; }
.hendar-video-call-dock > .hendar-video-action.is-leave { border-color: rgb(255 255 255 / 17%) !important; background: rgb(255 255 255 / 11%) !important; }
.hendar-video-call-dock > .hendar-video-action.is-end { border-color: transparent !important; background: linear-gradient(145deg, #ed5262, #cc3445) !important; box-shadow: 0 10px 26px rgb(227 72 88 / 22%) !important; }
.hendar-video-action-icon { display: grid !important; width: 27px !important; height: 27px !important; place-items: center !important; border-radius: 9px !important; background: rgb(255 255 255 / 8%) !important; }
.hendar-video-action-icon .project-chat-ui-icon { width: 17px !important; height: 17px !important; }
.hendar-video-action > b { min-width: 0 !important; overflow: hidden !important; font-size: 10px !important; line-height: 1.2 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* Floating mode keeps the live picture available while the user continues in HENDAR. */
.hendar-project-video-call-stage.is-minimized {
  inset: auto 12px calc(82px + env(safe-area-inset-bottom, 0px)) auto !important;
  width: min(310px, calc(100vw - 24px)) !important;
  height: 224px !important;
  min-height: 0 !important;
  grid-template-rows: 50px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgb(255 255 255 / 24%) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 64px rgb(0 0 0 / 46%) !important;
}

.hendar-project-video-call-stage.is-minimized > header.hendar-video-call-head {
  min-height: 50px !important;
  padding: 7px 8px !important;
  gap: 6px !important;
}

.hendar-project-video-call-stage.is-minimized .hendar-video-call-mark,
.hendar-project-video-call-stage.is-minimized .hendar-video-call-title small,
.hendar-project-video-call-stage.is-minimized .hendar-video-call-presence { display: none !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-call-title { flex: 1 1 auto !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-call-title strong { max-width: 132px !important; font-size: 11px !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-view-actions > button { width: 33px !important; height: 33px !important; min-width: 33px !important; min-height: 33px !important; }
.hendar-project-video-call-stage.is-minimized [data-video-view-action="SWAP"] { display: grid !important; }
.hendar-project-video-call-stage.is-minimized > .hendar-project-video-tracks { padding: 5px !important; overflow: hidden !important; }
.hendar-project-video-call-stage.is-minimized .hendar-project-video-tracks video {
  border-radius: 15px !important;
}
.hendar-project-video-call-stage.is-minimized > footer.hendar-video-call-dock { display: none !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-call-empty {
  width: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  border-radius: 15px !important;
}
.hendar-project-video-call-stage.is-minimized .hendar-video-call-empty small { display: none !important; }

@media (min-width: 761px) {
  .enterprise-metrics-grid,
  #metricsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hendar-project-video-call-stage {
    inset: 12px !important;
    width: auto !important;
    height: calc(100dvh - 24px) !important;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    border-radius: 28px !important;
    box-shadow: 0 34px 100px rgb(0 0 0 / 55%) !important;
  }
  .hendar-project-video-call-stage.is-minimized {
    inset: auto 20px 20px auto !important;
    width: 340px !important;
    height: 242px !important;
  }
}

@media (max-width: 760px) {
  .login-screen {
    display: block !important;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    background:
      radial-gradient(circle at 92% 5%, rgb(20 153 139 / 10%), transparent 34%),
      linear-gradient(180deg, #f5f9fa, #edf4f5) !important;
  }

  .login-visual { display: none !important; }
  .login-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 18px 14px !important;
    border: 1px solid rgb(16 45 62 / 10%) !important;
    border-radius: 24px !important;
    background: rgb(255 255 255 / 92%) !important;
    box-shadow: 0 20px 60px rgb(24 64 78 / 10%) !important;
  }

  .login-card > .eyebrow { font-size: 9px !important; }
  .login-card > h2 { margin: 5px 0 !important; font-size: 27px !important; }
  .login-card > .muted { margin-block-end: 15px !important; font-size: 11px !important; line-height: 1.65 !important; }
  .login-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .login-role-card { min-height: 86px !important; padding: 10px !important; }
  .login-role-card:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  .login-theme-section { margin-block: 14px !important; padding: 12px !important; }
  .theme-curated-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .theme-curated-grid .theme-choice { min-height: 70px !important; }

  .enterprise-metrics-grid,
  #metricsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .enterprise-kpi-card { min-height: 124px !important; padding: 10px !important; }

  .single-project-health-card { padding: 13px !important; border-radius: 17px !important; }
  .single-project-health-card > section { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  .enterprise-lifecycle-panel .lifecycle-flow > button {
    min-height: 74px !important;
    padding: 8px !important;
  }

  .enterprise-alerts-panel,
  .enterprise-alerts-panel .alerts-list,
  #alertsList {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .project-chat-header-actions {
    grid-template-columns: minmax(0, 1fr) repeat(4, 42px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .project-chat-bubble { max-width: min(82%, 620px) !important; }
  .project-chat-image { width: min(310px, 75vw) !important; }

  .hendar-project-video-call-stage > header.hendar-video-call-head {
    display: grid !important;
    min-height: 104px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px 10px !important;
    padding-block-end: 9px !important;
  }

  .hendar-video-call-title { gap: 8px !important; }
  .hendar-video-call-mark { width: 40px !important; height: 40px !important; flex-basis: 40px !important; border-radius: 13px !important; }
  .hendar-project-video-call-stage .hendar-video-call-title small { font-size: 8px !important; }
  .hendar-video-call-title strong { max-width: 165px !important; font-size: 13px !important; }
  .hendar-video-call-presence > span { font-size: 8px !important; }
  .hendar-project-video-call-stage .hendar-video-call-presence > time { font-size: 12px !important; }
  .hendar-video-view-actions {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .hendar-video-view-actions > button { width: 33px !important; height: 33px !important; min-width: 33px !important; min-height: 33px !important; border-radius: 11px !important; }
  .hendar-project-video-tracks { padding: 8px !important; }
  .hendar-project-video-tracks video { border-radius: 18px !important; }
  .hendar-video-call-empty { min-height: 210px !important; }

  .hendar-project-video-call-stage > footer.hendar-video-call-dock {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 9px 9px max(11px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  .hendar-video-call-dock > .hendar-video-action {
    grid-column: span 2 !important;
    min-height: 55px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 3px !important;
    padding: 6px 4px !important;
    border-radius: 15px !important;
  }

  .hendar-video-call-dock > .hendar-video-action.is-leave,
  .hendar-video-call-dock > .hendar-video-action.is-end { grid-column: span 3 !important; }
  .hendar-video-action-icon { width: 25px !important; height: 25px !important; }
  .hendar-video-action > b { width: 100% !important; font-size: 9px !important; text-align: center !important; }
  .hendar-project-video-tracks:has(> video:nth-of-type(2)):not(:has(> video:nth-of-type(3))) > video:nth-of-type(2) {
    width: 104px !important;
    height: 142px !important;
    inset: auto auto 15px 15px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 390px) {
  .hendar-video-call-title strong { max-width: 132px !important; }
  .hendar-video-call-presence > span { max-width: 76px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .hendar-video-view-actions > button { width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; }
  .theme-curated-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hendar-project-video-call-stage *,
  .hendar-product-mark { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* UALL-K — approved premium mobile call surface. */
.hendar-project-video-call-stage {
  position: fixed !important;
  z-index: 2147482000 !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #020b10 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: Tajawal, "IBM Plex Sans Arabic", Cairo, sans-serif !important;
  direction: rtl !important;
}

.hendar-project-video-call-stage.hidden { display: none !important; }

.hendar-project-video-call-stage > header.hendar-video-call-head {
  position: absolute !important;
  z-index: 30 !important;
  inset: 0 0 auto !important;
  display: block !important;
  height: max(92px, calc(68px + env(safe-area-inset-top, 0px))) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgb(0 8 12 / 82%) 0%, rgb(0 8 12 / 28%) 70%, transparent 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

.hendar-video-call-identity {
  position: absolute !important;
  top: max(14px, env(safe-area-inset-top, 0px)) !important;
  left: 50% !important;
  display: grid !important;
  width: min(58vw, 360px) !important;
  min-width: 0 !important;
  justify-items: center !important;
  gap: 3px !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

.hendar-video-call-identity > strong {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: clamp(14px, 4vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 14px rgb(0 0 0 / 50%) !important;
}

.hendar-video-call-identity > span {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  color: rgb(241 249 249 / 76%) !important;
  direction: rtl !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.hendar-video-call-identity > span > i {
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 50% !important;
  background: #e8b85f !important;
  box-shadow: 0 0 0 3px rgb(232 184 95 / 13%) !important;
}

.hendar-project-video-call-stage.is-connected .hendar-video-call-identity > span > i {
  background: #42d9a0 !important;
  box-shadow: 0 0 0 3px rgb(66 217 160 / 13%), 0 0 14px rgb(66 217 160 / 34%) !important;
}

.hendar-video-call-identity small { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.hendar-video-call-identity time {
  flex: 0 0 100% !important;
  width: max-content !important;
  max-width: max-content !important;
  margin-block-start: 2px !important;
  padding: 3px 11px !important;
  border: 1px solid rgb(255 255 255 / 24%) !important;
  border-radius: 999px !important;
  background: rgb(2 12 17 / 42%) !important;
  color: #fff !important;
  direction: ltr !important;
  font-size: 10px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
}

.hendar-video-head-control,
.hendar-video-participants {
  position: absolute !important;
  z-index: 2 !important;
  top: max(14px, env(safe-area-inset-top, 0px)) !important;
  display: grid !important;
  width: 43px !important;
  height: 43px !important;
  min-width: 43px !important;
  min-height: 43px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgb(255 255 255 / 17%) !important;
  border-radius: 50% !important;
  background: rgb(4 15 20 / 54%) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 8px 24px rgb(0 0 0 / 14%) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.hendar-video-head-control { left: max(14px, env(safe-area-inset-left, 0px)) !important; }
.hendar-video-participants { right: max(14px, env(safe-area-inset-right, 0px)) !important; }
.hendar-video-head-control[hidden] { display: none !important; }
.hendar-video-head-control .project-chat-ui-icon,
.hendar-video-participants .project-chat-ui-icon { width: 19px !important; height: 19px !important; }
.hendar-video-participants > b {
  position: absolute !important;
  inset: -4px -3px auto auto !important;
  display: grid !important;
  min-width: 18px !important;
  height: 18px !important;
  place-items: center !important;
  padding-inline: 4px !important;
  border: 2px solid #06141a !important;
  border-radius: 999px !important;
  background: #0fa88f !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.hendar-project-video-tracks {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #031219 !important;
}

.hendar-project-video-tracks > video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #061820 !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

.hendar-project-video-tracks:has(> video:nth-of-type(2)):not(:has(> video:nth-of-type(3))) > video:first-of-type {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hendar-project-video-tracks:has(> video:nth-of-type(2)):not(:has(> video:nth-of-type(3))) > video:nth-of-type(2) {
  position: absolute !important;
  z-index: 8 !important;
  inset: max(94px, calc(70px + env(safe-area-inset-top, 0px))) auto auto max(14px, env(safe-area-inset-left, 0px)) !important;
  width: clamp(106px, 27vw, 180px) !important;
  height: clamp(148px, 25dvh, 238px) !important;
  border: 2px solid rgb(255 255 255 / 90%) !important;
  border-radius: 19px !important;
  background: #0b2631 !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 42%) !important;
  object-fit: cover !important;
}

.hendar-video-pip-swap {
  position: absolute !important;
  z-index: 10 !important;
  top: calc(max(94px, calc(70px + env(safe-area-inset-top, 0px))) + 8px) !important;
  left: calc(max(14px, env(safe-area-inset-left, 0px)) + clamp(106px, 27vw, 180px) - 39px) !important;
  display: none !important;
  width: 31px !important;
  height: 31px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgb(255 255 255 / 32%) !important;
  border-radius: 50% !important;
  background: rgb(0 12 18 / 66%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgb(0 0 0 / 32%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
}

.hendar-project-video-tracks:has(> video:nth-of-type(2)):not(:has(> video:nth-of-type(3))) > .hendar-video-pip-swap { display: grid !important; }
.hendar-video-pip-swap .project-chat-ui-icon { width: 15px !important; height: 15px !important; }
.hendar-video-self-label {
  position: absolute !important;
  z-index: 9 !important;
  top: calc(max(94px, calc(70px + env(safe-area-inset-top, 0px))) + clamp(148px, 25dvh, 238px) - 38px) !important;
  left: max(22px, calc(env(safe-area-inset-left, 0px) + 8px)) !important;
  display: none !important;
  min-width: 48px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: rgb(0 12 18 / 66%) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-align: center !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.hendar-project-video-tracks:has(> video:nth-of-type(2)):not(:has(> video:nth-of-type(3))) > .hendar-video-self-label { display: block !important; }

.hendar-project-video-tracks:has(> video:nth-of-type(3)) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: max(86px, calc(68px + env(safe-area-inset-top, 0px))) 7px max(104px, calc(84px + env(safe-area-inset-bottom, 0px))) !important;
}
.hendar-project-video-tracks:has(> video:nth-of-type(3)) > video {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  border: 1px solid rgb(255 255 255 / 14%) !important;
  border-radius: 17px !important;
}

.hendar-video-call-empty {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  width: 100% !important;
  min-height: 100% !important;
  place-items: center !important;
  place-content: center !important;
  gap: 7px !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: radial-gradient(circle at 50% 38%, rgb(17 151 136 / 19%), transparent 32%), linear-gradient(160deg, #071c25, #020b10) !important;
  color: #fff !important;
  text-align: center !important;
}
.hendar-project-video-tracks:has(video) .hendar-video-call-empty,
.hendar-project-video-call-stage.has-video .hendar-video-call-empty { display: none !important; }
.hendar-video-call-empty > span { display: grid !important; width: 58px !important; height: 58px !important; place-items: center !important; border-radius: 50% !important; background: rgb(255 255 255 / 9%) !important; color: #a6eee2 !important; }
.hendar-video-call-empty .project-chat-ui-icon { width: 27px !important; height: 27px !important; }
.hendar-video-call-empty strong { font-size: 15px !important; }
.hendar-video-call-empty small { max-width: 250px !important; color: rgb(235 247 248 / 62%) !important; font-size: 10px !important; line-height: 1.7 !important; }

.hendar-project-video-call-stage > footer.hendar-video-call-dock {
  position: absolute !important;
  z-index: 40 !important;
  right: 50% !important;
  bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  width: min(430px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  min-height: 74px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  border: 1px solid rgb(255 255 255 / 16%) !important;
  border-radius: 999px !important;
  background: rgb(3 15 20 / 62%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 18px 50px rgb(0 0 0 / 28%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  direction: ltr !important;
  transform: translateX(50%) !important;
}

.hendar-video-call-dock > .hendar-video-action,
.hendar-video-call-dock > [data-video-view-action] {
  position: relative !important;
  display: grid !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  grid-column: auto !important;
  place-self: center !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid rgb(255 255 255 / 15%) !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 9%) !important;
  color: #f5fbfb !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%) !important;
  font: inherit !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
.hendar-video-call-dock > .hendar-video-action[hidden],
.hendar-video-call-dock > [data-video-view-action][hidden] { display: none !important; }
.hendar-video-call-dock > .hendar-video-action:active,
.hendar-video-call-dock > [data-video-view-action]:active { transform: scale(.93) !important; }
.hendar-video-call-dock > .hendar-video-action:focus-visible,
.hendar-video-call-dock > [data-video-view-action]:focus-visible,
.hendar-video-head-control:focus-visible,
.hendar-video-participants:focus-visible,
.hendar-video-pip-swap:focus-visible { outline: 3px solid #7ce9d8 !important; outline-offset: 3px !important; }
.hendar-video-call-dock > .hendar-video-action:disabled { cursor: wait !important; opacity: .55 !important; }
.hendar-video-call-dock > .hendar-video-action.is-active { border-color: rgb(232 184 95 / 52%) !important; background: rgb(165 107 25 / 38%) !important; color: #ffe3a8 !important; }
.hendar-video-call-dock > .hendar-video-action.is-output.is-active { box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 0 0 4px rgb(232 184 95 / 9%) !important; }
.hendar-video-call-dock > .hendar-video-action.is-end {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-color: transparent !important;
  background: linear-gradient(145deg, #ed5262, #cf3346) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 10px 28px rgb(227 72 88 / 34%) !important;
}
.hendar-video-action-icon { display: grid !important; width: auto !important; height: auto !important; place-items: center !important; border-radius: 0 !important; background: transparent !important; }
.hendar-video-action-icon .project-chat-ui-icon,
.hendar-video-call-dock > [data-video-view-action] .project-chat-ui-icon { width: 20px !important; height: 20px !important; }
.hendar-video-call-dock > [data-video-call-action="MUTE"] .project-chat-ui-icon { width: 15px !important; height: 15px !important; stroke-width: 2.25 !important; }
.hendar-video-call-dock > .is-end .project-chat-ui-icon { width: 25px !important; height: 25px !important; }
.hendar-video-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Floating video remains live while the user continues working in HENDAR. */
.hendar-project-video-call-stage.is-minimized {
  inset: auto 12px calc(78px + env(safe-area-inset-bottom, 0px)) auto !important;
  width: min(310px, calc(100vw - 24px)) !important;
  height: 206px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgb(255 255 255 / 30%) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 64px rgb(0 0 0 / 48%) !important;
}
.hendar-project-video-call-stage.is-minimized > header.hendar-video-call-head { height: 50px !important; min-height: 0 !important; background: linear-gradient(180deg, rgb(0 8 12 / 82%), transparent) !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-call-identity { top: 9px !important; width: 160px !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-call-identity > strong { font-size: 11px !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-call-identity > span,
.hendar-project-video-call-stage.is-minimized .hendar-video-participants,
.hendar-project-video-call-stage.is-minimized .hendar-video-head-control.is-minimize,
.hendar-project-video-call-stage.is-minimized .hendar-video-pip-swap,
.hendar-project-video-call-stage.is-minimized .hendar-video-self-label { display: none !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-head-control.is-expand { top: 8px !important; left: 8px !important; display: grid !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
.hendar-project-video-call-stage.is-minimized > .hendar-project-video-tracks { inset: 0 !important; padding: 0 !important; }
.hendar-project-video-call-stage.is-minimized .hendar-project-video-tracks > video:first-of-type { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; }
.hendar-project-video-call-stage.is-minimized .hendar-project-video-tracks > video:nth-of-type(n+2) { display: none !important; }
.hendar-project-video-call-stage.is-minimized > footer.hendar-video-call-dock { display: none !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-call-empty { width: 100% !important; min-height: 100% !important; }
.hendar-project-video-call-stage.is-minimized .hendar-video-call-empty small { display: none !important; }

@media (min-width: 761px) {
  .hendar-project-video-call-stage {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .hendar-project-video-call-stage.is-minimized { inset: auto 20px 20px auto !important; width: 340px !important; height: 224px !important; border: 1px solid rgb(255 255 255 / 30%) !important; border-radius: 24px !important; box-shadow: 0 26px 70px rgb(0 0 0 / 48%) !important; }
}

@media (max-width: 390px) {
  .hendar-video-call-identity { width: 54vw !important; }
  .hendar-video-head-control,
  .hendar-video-participants { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
  .hendar-project-video-call-stage > footer.hendar-video-call-dock { width: calc(100vw - 16px) !important; min-height: 68px !important; padding: 7px 8px !important; }
  .hendar-video-call-dock > .hendar-video-action,
  .hendar-video-call-dock > [data-video-view-action] { width: 47px !important; height: 47px !important; min-width: 47px !important; min-height: 47px !important; }
  .hendar-video-call-dock > .hendar-video-action.is-end { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hendar-project-video-call-stage * { animation: none !important; transition: none !important; }
}