@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 600;
  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-N — one final owner for phone communications layout.
 * This file intentionally loads after all historical HENDAR stylesheets.
 */

:root {
  --uallm-ink: #102d3e;
  --uallm-muted: #71858f;
  --uallm-brand: #07877d;
  --uallm-brand-strong: #05665f;
  --uallm-mine: #d9f7e9;
  --uallm-canvas: #eef6f4;
  --uallm-line: rgb(16 45 62 / 12%);
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
.project-chat-shell,
.hendar-chat-widget-v084,
.hendar-project-video-call-stage {
  font-family: Tajawal, "IBM Plex Sans Arabic", Cairo, sans-serif !important;
}

/* The new product mark is quiet branding, not the dominant login content. */
.login-card .mobile-brand .hendar-product-mark,
.login-visual .hendar-product-mark {
  width: 52px !important;
  height: 52px !important;
  flex-basis: 52px !important;
  border-radius: 17px !important;
  font-size: 26px !important;
  box-shadow: 0 9px 24px rgb(5 100 95 / 16%) !important;
}

.login-card .mobile-brand .brand-mark {
  gap: 10px !important;
  margin: 0 !important;
}

.login-screen img[src*="hendar-logo" i],
.login-screen img[alt*="هندار" i],
.startup-splash img[src*="logo" i] { display: none !important; }

select,
option,
input,
textarea {
  color: var(--uallm-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* One scroll owner for every normal application page. */
html[data-auth-surface="app"] .main-content,
body.hendar-authenticated .main-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

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 - 72px) !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Keep the metric area balanced as exactly six cards. */
.enterprise-metrics-grid,
#metricsGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
}

/*
 * Full project chat: the page itself never scrolls. The message list is the
 * only vertical scroll owner, so the header and composer cannot overlap it.
 */
html[data-auth-surface="app"] #projectWorkspaceView.project-chat-active,
body.hendar-authenticated #projectWorkspaceView.project-chat-active {
  height: calc(100dvh - 72px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 72px) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#projectWorkspaceView.project-chat-active .project-workspace-content,
#projectWorkspaceView.project-chat-active .project-detail-content,
#projectWorkspaceView.project-chat-active [data-project-workspace-content],
#projectWorkspaceView.project-chat-active > .project-workspace-layout,
#projectWorkspaceView.project-chat-active .project-workspace-main,
#projectWorkspaceView.project-chat-active #projectWorkspaceContent {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Chat owns the whole workspace viewport; the generic project chrome would
 * otherwise sit above it and collapse the message scroller on mobile. */
#projectWorkspaceView.project-chat-active > .project-workspace-head,
#projectWorkspaceView.project-chat-active #projectWorkspaceMenu {
  display: none !important;
}

#projectWorkspaceView.project-chat-active > .project-workspace-layout {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#projectWorkspaceView.project-chat-active .project-workspace-main,
#projectWorkspaceView.project-chat-active #projectWorkspaceContent {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.project-chat-shell {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid var(--uallm-line) !important;
  border-radius: 20px !important;
  background: var(--uallm-canvas) !important;
  color: var(--uallm-ink) !important;
  box-shadow: 0 16px 42px rgb(16 45 62 / 10%) !important;
  direction: rtl !important;
}

.project-chat-header {
  position: relative !important;
  z-index: 8 !important;
  display: grid !important;
  min-width: 0 !important;
  grid-template:
    "avatar heading back" auto
    "actions actions actions" auto /
    46px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 7px 10px !important;
  padding: 10px 12px 9px !important;
  border-block-end: 1px solid var(--uallm-line) !important;
  background: rgb(255 255 255 / 96%) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

.project-chat-group-avatar { grid-area: avatar !important; }
.project-chat-heading { grid-area: heading !important; min-width: 0 !important; }
.project-chat-back { grid-area: back !important; }
.project-chat-header-actions { grid-area: actions !important; }

.project-chat-heading .eyebrow {
  margin: 0 !important;
  color: var(--uallm-brand) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
}

.project-chat-heading h3 {
  margin: 1px 0 0 !important;
  overflow: hidden !important;
  color: var(--uallm-ink) !important;
  font-size: clamp(15px, 2.9vw, 20px) !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.project-chat-heading p {
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: var(--uallm-muted) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.project-chat-group-avatar,
.project-chat-back,
.project-chat-header-actions button {
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
}

.project-chat-header-actions {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) repeat(3, 42px) !important;
  align-items: center !important;
  gap: 6px !important;
}

.project-chat-header-actions > * {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.project-chat-search {
  height: 42px !important;
  min-width: 0 !important;
}

.project-chat-search input {
  width: 100% !important;
  height: 42px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--uallm-line) !important;
  border-radius: 13px !important;
  background: #f8fbfb !important;
  color: var(--uallm-ink) !important;
  -webkit-text-fill-color: var(--uallm-ink) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
}

/* The full page already is the large chat surface; a second floating opener is noise. */
#openFloatingProjectChat { display: none !important; }

.project-chat-header-actions .project-chat-call-control,
.project-chat-header-actions .project-chat-tool-control {
  display: grid !important;
  width: 42px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgb(7 135 125 / 15%) !important;
  background: #eafaf7 !important;
  color: var(--uallm-brand-strong) !important;
  box-shadow: none !important;
}

.project-chat-header-actions .project-chat-call-control span,
.project-chat-header-actions .project-chat-tool-control span:not(:first-child) { display: none !important; }

.project-chat-header-actions .project-chat-ui-icon {
  width: 20px !important;
  height: 20px !important;
}

.project-chat-readonly { z-index: 7 !important; margin: 0 !important; }

.project-chat-layout {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 290px) !important;
  overflow: hidden !important;
}

.project-chat-main {
  display: grid !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto !important;
  overflow: hidden !important;
}

.project-chat-load-older { grid-row: 1 !important; }

.project-chat-messages {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-row: 2 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
  padding: 8px 9px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  background:
    radial-gradient(circle at 18px 18px, rgb(7 135 125 / 3%) 1px, transparent 1.5px),
    var(--uallm-canvas) !important;
  background-size: 58px 58px !important;
  scroll-behavior: smooth !important;
}

.project-chat-message {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 1px 0 !important;
  direction: ltr !important;
}

.project-chat-message.mine { justify-content: flex-end !important; }
.project-chat-message.theirs { justify-content: flex-start !important; }

.project-chat-sender-avatar {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  flex: 0 0 29px !important;
  margin: 0 !important;
}

.project-chat-bubble {
  position: relative !important;
  display: grid !important;
  width: fit-content !important;
  max-width: min(78%, 620px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 7px 10px 5px !important;
  overflow: visible !important;
  border: 1px solid rgb(16 45 62 / 8%) !important;
  border-radius: 16px 16px 16px 5px !important;
  background: #fff !important;
  color: var(--uallm-ink) !important;
  box-shadow: 0 2px 8px rgb(16 45 62 / 7%) !important;
  direction: rtl !important;
  text-align: start !important;
}

.project-chat-message.mine .project-chat-bubble {
  border-color: rgb(7 135 125 / 13%) !important;
  border-radius: 16px 16px 5px 16px !important;
  background: var(--uallm-mine) !important;
}

.project-chat-sender {
  margin: 0 0 1px !important;
  color: var(--uallm-brand-strong) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.project-chat-bubble > p,
.project-chat-deleted-copy {
  min-height: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  unicode-bidi: plaintext !important;
}

.project-chat-quoted {
  min-height: 0 !important;
  margin: 0 0 2px !important;
  padding: 5px 7px !important;
  border-radius: 8px !important;
}

.project-chat-message-meta {
  display: flex !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin: 1px 0 0 !important;
  color: var(--uallm-muted) !important;
  font-size: 7.5px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.project-chat-message-menu {
  position: absolute !important;
  z-index: 18 !important;
  top: 3px !important;
  inset-inline-end: 3px !important;
  margin: 0 !important;
}

.project-chat-message-menu summary {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  font-size: 18px !important;
  opacity: .44 !important;
}

.project-chat-message-menu[open] summary { opacity: 1 !important; }
.project-chat-message-menu > div {
  top: 29px !important;
  min-width: 126px !important;
  padding: 4px !important;
  border-radius: 12px !important;
}

/* Prevent every legacy per-message edit icon from returning. */
.project-chat-bubble > [data-chat-edit]:not(.project-chat-message-menu *),
.project-chat-bubble > .project-chat-legacy-edit,
.project-chat-bubble > .project-chat-edit,
.project-chat-bubble > .message-edit-action { display: none !important; }

.project-chat-attachments { display: grid !important; gap: 4px !important; }

.project-chat-image {
  position: relative !important;
  display: block !important;
  width: min(360px, 68vw) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 13px !important;
  background: #dce9e7 !important;
}

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

.project-chat-image span {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  left: 7px !important;
  min-height: 0 !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  background: rgb(3 28 34 / 68%) !important;
  color: #fff !important;
  font-size: 9px !important;
  text-align: center !important;
  backdrop-filter: blur(8px) !important;
}

.project-chat-voice-call,
.project-chat-group-audio { min-width: 0 !important; max-height: 28dvh !important; overflow-y: auto !important; }

.project-chat-composer {
  position: relative !important;
  z-index: 9 !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "reply reply reply"
    "camera camera camera"
    "send input media"
    "summary summary summary" !important;
  align-items: end !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 8px 9px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
  border-block-start: 1px solid var(--uallm-line) !important;
  background: rgb(255 255 255 / 97%) !important;
  box-shadow: 0 -6px 20px rgb(16 45 62 / 5%) !important;
  direction: ltr !important;
}

.project-chat-reply-preview { grid-area: reply !important; direction: rtl !important; }
.project-chat-camera-panel { grid-area: camera !important; direction: rtl !important; }
.project-chat-media-actions {
  grid-area: media !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  direction: rtl !important;
}

.project-chat-composer textarea {
  grid-area: input !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  max-height: 112px !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  overflow-y: auto !important;
  resize: none !important;
  border: 1px solid var(--uallm-line) !important;
  border-radius: 20px !important;
  background: #f8fbfb !important;
  color: var(--uallm-ink) !important;
  -webkit-text-fill-color: var(--uallm-ink) !important;
  direction: rtl !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-align: start !important;
}

.project-chat-send {
  grid-area: send !important;
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #0aa193, #06776f) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgb(7 135 125 / 22%) !important;
}

.project-chat-send > span { display: none !important; }
.project-chat-send .project-chat-ui-icon { width: 21px !important; height: 21px !important; }

.project-chat-attach,
.project-chat-camera-trigger {
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #54707c !important;
}

.project-chat-composer > small {
  grid-area: summary !important;
  margin: -2px 2px 0 !important;
  color: var(--uallm-muted) !important;
  font-size: 7.5px !important;
  line-height: 1.2 !important;
  direction: rtl !important;
}

.project-chat-roster {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.project-chat-roster-rows {
  height: calc(100% - 52px) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

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

/* The floating help/chat pair must never cover the full-page composer. */
body:has(#projectWorkspaceView.project-chat-active) .hendar-chat-widget-v084:not(.is-open) {
  display: none !important;
}

/* Floating chat follows the same compact bubble and image rules. */
.hendar-chat-widget-v084 .hcw-project-selector,
.hendar-chat-widget-v084 .hcw-message-search,
.hendar-chat-widget-v084 .hcw-message-input {
  color: var(--uallm-ink) !important;
  -webkit-text-fill-color: var(--uallm-ink) !important;
  opacity: 1 !important;
}

.hendar-chat-widget-v084 .hcw-messages {
  gap: 4px !important;
  padding: 9px 8px 11px !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

.hendar-chat-widget-v084 .hcw-message { gap: 4px !important; }
.hendar-chat-widget-v084 .hcw-bubble {
  width: fit-content !important;
  max-width: 86% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 2px !important;
  padding: 7px 9px 5px !important;
}

.hendar-chat-widget-v084 .hcw-message-body { margin: 0 !important; line-height: 1.42 !important; }
.hendar-chat-widget-v084 .hcw-message-time { margin: 1px 0 0 !important; line-height: 1 !important; }
.hendar-chat-widget-v084 .hcw-image-attachment { width: min(340px, 72vw) !important; max-width: 100% !important; }
.hendar-chat-widget-v084 .hcw-image-preview {
  width: 100% !important;
  height: auto !important;
  max-height: min(420px, 52dvh) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #122a32 !important;
}

/* Premium video call: one balanced control row and a draggable mini player. */
.hendar-project-video-call-stage {
  font-family: Tajawal, "IBM Plex Sans Arabic", Cairo, sans-serif !important;
}

.hendar-project-video-call-stage > footer.hendar-video-call-dock {
  position: absolute !important;
  z-index: 50 !important;
  right: 50% !important;
  bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  width: min(350px, calc(100vw - 18px)) !important;
  height: 66px !important;
  min-width: 0 !important;
  min-height: 66px !important;
  max-height: 66px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding: 6px 8px !important;
  overflow: visible !important;
  border: 1px solid rgb(255 255 255 / 15%) !important;
  border-radius: 24px !important;
  background: rgb(3 15 20 / 70%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 17px 44px rgb(0 0 0 / 30%) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) 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] {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgb(255 255 255 / 15%) !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / 9%) !important;
  color: #f7fbfb !important;
}

.hendar-video-call-dock > .hendar-video-action.is-end {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  flex-basis: 50px !important;
}

.hendar-video-call-dock .project-chat-ui-icon {
  width: 18px !important;
  height: 18px !important;
}

.hendar-video-call-dock > [data-video-call-action="MUTE"] .project-chat-ui-icon {
  width: 13px !important;
  height: 13px !important;
}

.hendar-video-call-dock > .is-end .project-chat-ui-icon {
  width: 23px !important;
  height: 23px !important;
}

.hendar-project-video-call-stage.is-minimized {
  --hendar-video-mini-x: 12px;
  --hendar-video-mini-y: 92px;
  inset: auto !important;
  top: var(--hendar-video-mini-y) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--hendar-video-mini-x) !important;
  width: min(300px, calc(100vw - 20px)) !important;
  height: 190px !important;
  min-height: 0 !important;
  max-height: 190px !important;
  overflow: hidden !important;
  border: 1px solid rgb(255 255 255 / 31%) !important;
  border-radius: 21px !important;
  box-shadow: 0 24px 62px rgb(0 0 0 / 46%) !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transform: none !important;
  transition: box-shadow .16s ease !important;
}

.hendar-project-video-call-stage.is-minimized.is-dragging {
  cursor: grabbing !important;
  box-shadow: 0 28px 72px rgb(0 0 0 / 56%) !important;
  transition: none !important;
}

.hendar-project-video-call-stage.is-minimized > header,
.hendar-project-video-call-stage.is-minimized > .hendar-project-video-tracks { touch-action: none !important; }

@media (min-width: 761px) {
  .hendar-project-video-call-stage.is-minimized {
    top: var(--hendar-video-mini-y) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--hendar-video-mini-x) !important;
    width: 340px !important;
    height: 216px !important;
    max-height: 216px !important;
  }
}

@media (max-width: 760px) {
  .login-card .mobile-brand .hendar-product-mark {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 15px !important;
    font-size: 23px !important;
  }

  .enterprise-metrics-grid,
  #metricsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

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

  .project-chat-shell {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .project-chat-header {
    grid-template:
      "avatar heading back" auto
      "actions actions actions" auto /
      40px minmax(0, 1fr) 38px !important;
    gap: 5px 7px !important;
    padding: 7px 7px 6px !important;
  }

  .project-chat-group-avatar,
  .project-chat-back,
  .project-chat-header-actions button {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  .project-chat-heading h3 { font-size: 14px !important; }
  .project-chat-heading p { font-size: 8px !important; }

  .project-chat-header-actions {
    grid-template-columns: minmax(0, 1fr) repeat(3, 38px) !important;
    gap: 5px !important;
  }

  .project-chat-search,
  .project-chat-search input { height: 38px !important; }
  .project-chat-search input { padding: 7px 10px !important; font-size: 11px !important; }

  .project-chat-layout { grid-template-columns: minmax(0, 1fr) !important; }

  .project-chat-roster {
    position: absolute !important;
    z-index: 40 !important;
    inset: 0 0 0 auto !important;
    display: none !important;
    width: min(330px, 88vw) !important;
    border-inline-start: 1px solid var(--uallm-line) !important;
    box-shadow: -18px 0 50px rgb(16 45 62 / 21%) !important;
  }

  .project-chat-roster.show { display: block !important; }

  .project-chat-messages { padding: 6px 7px 8px !important; }
  .project-chat-sender-avatar { display: none !important; }
  .project-chat-bubble { max-width: 87% !important; }
  .project-chat-bubble > p { font-size: 12.5px !important; }
  .project-chat-image { width: min(330px, 76vw) !important; }

  .project-chat-composer {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    gap: 4px !important;
    padding: 6px 7px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .project-chat-composer textarea { min-height: 42px !important; padding: 9px 11px !important; }
  .project-chat-send { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
  .project-chat-attach,
  .project-chat-camera-trigger { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }

  .hendar-chat-widget-v084 .hcw-avatar { display: none !important; }

  .hendar-project-video-call-stage > footer.hendar-video-call-dock {
    width: min(330px, calc(100vw - 14px)) !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    gap: 4px !important;
    padding: 6px 7px !important;
    border-radius: 22px !important;
  }

  .hendar-video-call-dock > .hendar-video-action,
  .hendar-video-call-dock > [data-video-view-action] {
    width: 41px !important;
    height: 41px !important;
    min-width: 41px !important;
    min-height: 41px !important;
    flex-basis: 41px !important;
  }

  .hendar-video-call-dock > .hendar-video-action.is-end {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-basis: 48px !important;
  }
}

@media (max-width: 370px) {
  .hendar-project-video-call-stage > footer.hendar-video-call-dock {
    width: calc(100vw - 10px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 5px 6px !important;
  }

  .hendar-video-call-dock > .hendar-video-action,
  .hendar-video-call-dock > [data-video-view-action] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
  }

  .hendar-video-call-dock > .hendar-video-action.is-end {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }
}

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