/* EJADTECH identity layer for Element Web.
   Keep this file independent from Element's compiled bundles so upstream
   upgrades remain replace-and-rebuild operations. */
@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html[lang^="ar"] body,
html[dir="rtl"] body,
html[lang^="ar"] .mx_MatrixChat,
html[dir="rtl"] .mx_MatrixChat,
html[lang^="ar"] .mx_Dialog,
html[dir="rtl"] .mx_Dialog {
  font-family: "Cairo", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1.65;
  letter-spacing: normal;
}

html[lang^="ar"],
html[lang^="ar"] body,
html[lang^="ar"] .mx_MatrixChat,
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] .mx_MatrixChat {
  direction: rtl;
}

html[lang^="ar"] .mx_EventTile_content,
html[lang^="ar"] .mx_EventTile_body,
html[lang^="ar"] .mx_SendMessageComposer,
html[dir="rtl"] .mx_EventTile_content,
html[dir="rtl"] .mx_EventTile_body,
html[dir="rtl"] .mx_SendMessageComposer {
  text-align: start;
  unicode-bidi: plaintext;
}

/* Conversation density. Element's native group layout is already a dense,
   scannable timeline; earlier revisions converted it into chat bubbles with a
   58% min-width, a border, a shadow and the timestamp forced onto its own row,
   which cost 71px per message against Element's 28px. A work room carries
   dozens of senders, so the reader scans a single column of names rather than
   following two alternating sides: keep the native row and spend the styling
   on hierarchy instead of on containers. data-self is still used, but only to
   tint the sender name, never to move the message to the other side. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] {
  position: relative;
  box-sizing: border-box;
  padding-block: 2px;
  padding-inline: 62px 12px;
  border-radius: 4px;
  transition: background-color .12s ease;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self]:hover,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self]:focus-within {
  background: rgba(8, 122, 94, .05);
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line {
  box-sizing: border-box;
  width: fit-content;
  min-width: 0;
  max-width: 72ch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_EventTile_line,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="false"] .mx_EventTile_line {
  margin-inline: 0;
}

/* The timestamp lives in the gutter and appears on hover, the way Element and
   every other work client present it. Keeping it out of the flow returns the
   21px per message that the previous dedicated metadata row consumed. It stays
   LTR and isolated so Arabic text can never reorder the digits. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MessageTimestamp {
  position: absolute;
  inset-inline-start: -46px;
  inset-block-start: 3px;
  width: 40px;
  margin: 0;
  color: #63777c !important;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  direction: ltr;
  unicode-bidi: isolate;
  opacity: 0;
  transition: opacity .12s ease;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self]:hover .mx_MessageTimestamp,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self]:focus-within .mx_MessageTimestamp {
  opacity: 1;
}
/* Element renders the timestamp inside .mx_EventTile_line, which is a block,
   so it can never share the sender's baseline however it is displayed. Keep it
   in the gutter for every message, revealed on hover, the way Element and
   other work clients do. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self]:not(.mx_EventTile_continuation) .mx_MessageTimestamp {
  inset-inline-start: -46px;
  inset-block-start: 26px;
  text-align: end;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MessageTimestamp,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MessageTimestamp {
  color: #a7bec2 !important;
}

/* Consecutive messages from the same sender repeat neither avatar nor name.
   Element marks these itself; the bubble layout had suppressed the class. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self].mx_EventTile_continuation {
  padding-block: 1px;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self].mx_EventTile_continuation > .mx_DisambiguatedProfile,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self].mx_EventTile_continuation > .mx_EventTile_avatar {
  display: none;
}

/* Sender identity: one column, one baseline. data-self only tints the name. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] > .mx_DisambiguatedProfile {
  display: block;
  box-sizing: border-box;
  width: auto;
  max-width: 72ch;
  margin: 0;
  line-height: 1.35;
}
/* Name and time share one baseline; the message body starts the next line. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self]:not(.mx_EventTile_continuation) .mx_EventTile_line {
  display: block;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_DisambiguatedProfile_displayName {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  font-size: 14px;
  font-weight: 600;
  opacity: 1;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_DisambiguatedProfile_displayName {
  color: #032E38 !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="false"] .mx_DisambiguatedProfile_displayName {
  color: #032E38 !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_avatar {
  display: block;
  inset-inline-start: 16px;
  inset-block-start: 2px;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MTextBody,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_body {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  color: #16282c;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_content {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReplyChain_wrapper {
  margin-block: 2px 5px;
  padding: 4px 10px;
  border-inline-start: 2px solid #13E8B0;
  border-radius: 0;
  background: none;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_TextualBody_urlPreviews,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MImageBody,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MFileBody {
  max-width: 100%;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReadReceiptGroup_container {
  inset-inline: auto;
  /* Bound to the same reading measure as the message, so a wide window cannot
     strand the avatars in the empty half of the row. */
  max-width: 72ch;
}

/* State changes, calls and membership events carry no message content, so they
   read as one quiet line rather than a card with the weight of a real message.
   Three of them previously occupied more height than the conversation. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_TextualEvent,
.mx_RoomView_MessageList .mx_EventTile_info .mx_EventTile_line {
  padding-block: 1px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #63777c;
  font-size: 12.5px;
  line-height: 1.5;
}
.mx_RoomView_MessageList .mx_EventTile_info {
  padding-block: 1px;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_TextualEvent,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_info .mx_EventTile_line,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_TextualEvent,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_info .mx_EventTile_line {
  color: #8ba1a5;
}

body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self]:hover,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self]:hover {
  background: rgba(19, 233, 177, .07);
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MTextBody,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_body,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MTextBody,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_body {
  color: #f1f8f6;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_DisambiguatedProfile_displayName,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_DisambiguatedProfile_displayName {
  color: #13e9b1 !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="false"] .mx_DisambiguatedProfile_displayName,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="false"] .mx_DisambiguatedProfile_displayName {
  color: #d3e6e1 !important;
}

/* EJAD SOC incident cards. Element preserves language-* classes on code
   elements, so the hidden marker survives sanitisation without weakening it. */
.mx_RoomView_MessageList .mx_EventTile[data-ejad-wazuh] {
  width: 100% !important;
  max-width: none !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-ejad-wazuh] .mx_EventTile_line {
  box-sizing: border-box;
  width: calc(100% - clamp(24px, 4vw, 64px)) !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-ejad-wazuh] > .mx_DisambiguatedProfile {
  width: min(calc(100% - clamp(28px, 5vw, 72px)), 920px);
  max-width: 920px;
  margin-inline: auto;
  text-align: start;
}
.mx_RoomView_MessageList .mx_EventTile[data-ejad-wazuh] .mx_MTextBody,
.mx_RoomView_MessageList .mx_EventTile[data-ejad-wazuh] .mx_EventTile_body,
.mx_RoomView_MessageList .mx_EventTile[data-ejad-wazuh] .mx_EventTile_content {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}

/* Incoming calls are actionable notifications, not decorative stacked cards.
   Element's default toast grid deliberately overlays queued toasts; for calls
   we expose every caller in a bounded, scrollable list instead. */
.mx_ToastContainer:has(.mx_IncomingCallToast),
.mx_ToastContainer.ejad-call-stack {
  position: fixed;
  z-index: 7700;
  inset-block-start: max(76px, calc(env(safe-area-inset-top) + 64px));
  inset-inline-start: auto;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100dvh - 104px);
  padding: 2px 4px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mx_ToastContainer.mx_ToastContainer_stacked:has(.mx_IncomingCallToast)::before,
.mx_ToastContainer.ejad-call-stack.mx_ToastContainer_stacked::before { display: none; }
.mx_ToastContainer:has(.mx_IncomingCallToast) > .mx_Toast_toast,
.mx_ToastContainer.ejad-call-stack > .mx_Toast_toast {
  position: relative;
  flex: 0 0 auto;
  grid-row: auto;
  grid-column: auto;
  width: 100%;
  box-sizing: border-box;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[dir="rtl"] .mx_IncomingCallToast,
html[dir="rtl"] .mx_IncomingCallToast_content,
html[dir="rtl"] .mx_IncomingCallToast_AvatarWithDetails { direction: rtl; text-align: right; }
html[dir="rtl"] .mx_IncomingCallToast_title { grid-template-columns: auto minmax(0, 1fr) auto; }
.mx_IncomingCallToast_buttons { flex-wrap: wrap; }
.mx_IncomingCallToast_actionButton { flex: 1 1 130px; }

@media (max-width: 620px) {
  .mx_ToastContainer:has(.mx_IncomingCallToast),
  .mx_ToastContainer.ejad-call-stack {
    inset-block-start: max(62px, calc(env(safe-area-inset-top) + 54px));
    inset-inline: 10px;
    width: auto;
    max-height: calc(100dvh - 78px);
  }
}
@container (max-width: 1100px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > a:first-child { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child { padding: 13px; border-radius: 12px; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) { grid-template-columns: 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > a:first-child { grid-column: auto; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:first-child > span { display: none; }
}

/* Sanitizer-safe overview: the outer div and links survive Element's managed
   home-page policy, so every card remains both styled and keyboard operable. */
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child {
  margin-bottom: 26px;
  padding: 18px;
  border: 1px solid rgba(19, 233, 177, .16);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(14, 48, 56, .92), rgba(7, 29, 35, .78));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:first-child h2 { margin: 0; font-size: 15px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:first-child p { margin: 3px 0 0; color: #9ab3b8; font-size: 10px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:first-child > span { color: #13e9b1; font-size: 10px; font-weight: 700; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 70px;
  padding: 11px;
  border: 1px solid rgba(19, 233, 177, .14);
  border-radius: 12px;
  background: rgba(6, 25, 30, .58);
  color: #f5fbf9 !important;
  box-shadow: none;
  text-decoration: none !important;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a:hover { transform: translateY(-2px); border-color: rgba(19, 233, 177, .5); background: rgba(16, 54, 63, .76); }
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(19, 233, 177, .12); border-radius: 12px; background: rgba(19, 233, 177, .1); color: #13e9b1; font-size: 17px; font-weight: 700; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a > span:nth-child(2) { min-width: 0; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a > span:nth-child(2) > span { display: block; margin-top: 3px; overflow: hidden; color: #9ab3b8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child { border-color: rgba(3, 46, 56, .16); background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(231, 245, 241, .92)); box-shadow: 0 18px 42px rgba(13, 46, 53, .09); }
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child h2,
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child strong { color: #0a242a; }
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child p,
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a > span:nth-child(2) > span { color: #567277; }
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a { border-color: rgba(3, 46, 56, .14); background: rgba(255, 255, 255, .82); color: #0a242a !important; }
@media (max-width: 900px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child { padding: 13px; border-radius: 12px; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) { grid-template-columns: 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:first-child > span { display: none; }
}
.mx_MTextBody > div[data-ejad-wazuh-direct] {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(18px, 2.2vw, 28px);
  overflow: hidden;
  direction: rtl;
  color: #152529 !important;
  border: 1px solid rgba(180, 35, 24, .17);
  border-inline-start: 5px solid #b42318;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f4faf8) !important;
  box-shadow: 0 18px 45px rgba(15, 53, 62, .1);
}
.mx_MTextBody code.language-ejad-wazuh-marker,
.mx_MTextBody code.language-ejad-operational-warning { display: none !important; }
.mx_MTextBody > div[data-ejad-wazuh-direct] > p:first-of-type { margin: 0 0 12px; }
.mx_MTextBody > div[data-ejad-wazuh-direct] > p:first-of-type font {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] h2 {
  margin: 0 0 4px;
  color: #0d2b32;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.45;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] h3 {
  margin: 22px 0 8px;
  color: #113b45;
  font-size: 16px;
  line-height: 1.5;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] p { margin: 7px 0; }
.mx_MTextBody > div[data-ejad-wazuh-direct] > blockquote:first-of-type {
  margin: 18px 0;
  padding: 14px 16px;
  border: 0;
  border-inline-start: 4px solid #13E8B0;
  border-radius: 12px;
  background: rgba(19, 232, 176, .08);
}
.mx_MTextBody > div[data-ejad-wazuh-direct] table {
  width: 100%;
  margin: 16px 0;
  border: 1px solid rgba(3, 46, 56, .14);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] th,
.mx_MTextBody > div[data-ejad-wazuh-direct] td {
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid rgba(3, 46, 56, .11);
  text-align: start;
  vertical-align: top;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] tr:last-child > * { border-bottom: 0; }
.mx_MTextBody > div[data-ejad-wazuh-direct] th {
  width: clamp(130px, 23%, 210px);
  color: #31575f;
  background: rgba(8, 122, 94, .055);
  font-weight: 700;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] code,
.mx_MTextBody > div[data-ejad-wazuh-direct] pre {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] pre {
  max-height: 250px;
  margin: 10px 0 0;
  padding: 13px;
  overflow: auto;
  border-radius: 8px;
  background: #0a2227;
  color: #e9f5f2;
  white-space: pre-wrap;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] ol {
  margin: 8px 0 0;
  padding-inline-start: 26px;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] li { margin: 8px 0; padding-inline-start: 5px; }
.mx_MTextBody > div[data-ejad-wazuh-direct] details {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(3, 46, 56, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
}
.mx_MTextBody > div[data-ejad-wazuh-direct] details summary { cursor: pointer; color: #032E38; }
.mx_MTextBody > div[data-ejad-wazuh-direct] blockquote[data-ejad-op-warning] {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 0;
  border-inline-start: 4px solid #d97706;
  border-radius: 8px;
}
.mx_MTextBody > div[data-ejad-wazuh-direct] > p:last-child a {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 15px;
  border-radius: 8px;
  color: #fff !important;
  background: #087A5E;
  text-decoration: none !important;
}
body.cpd-theme-dark .mx_MTextBody > div[data-ejad-wazuh-direct],
body.cpd-theme-dark-hc .mx_MTextBody > div[data-ejad-wazuh-direct] {
  color: #eaf6f3 !important;
  border-color: rgba(237, 95, 83, .28);
  background: linear-gradient(145deg, #0b252b, #081d21) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .3);
}
body.cpd-theme-dark .mx_MTextBody > div[data-ejad-wazuh-direct] h2,
body.cpd-theme-dark .mx_MTextBody > div[data-ejad-wazuh-direct] h3,
body.cpd-theme-dark-hc .mx_MTextBody > div[data-ejad-wazuh-direct] h2,
body.cpd-theme-dark-hc .mx_MTextBody > div[data-ejad-wazuh-direct] h3 { color: #f2fbf9; }
body.cpd-theme-dark .mx_MTextBody > div[data-ejad-wazuh-direct] th,
body.cpd-theme-dark-hc .mx_MTextBody > div[data-ejad-wazuh-direct] th {
  color: #13e9b1;
  background: rgba(19, 233, 177, .07);
}
body.cpd-theme-dark .mx_MTextBody > div[data-ejad-wazuh-direct] details,
body.cpd-theme-dark-hc .mx_MTextBody > div[data-ejad-wazuh-direct] details { background: rgba(3, 14, 17, .35); }
body.cpd-theme-dark .mx_MTextBody > div[data-ejad-wazuh-direct] details summary,
body.cpd-theme-dark-hc .mx_MTextBody > div[data-ejad-wazuh-direct] details summary { color: #13e9b1; }

@media (max-width: 620px) {
  .mx_RoomView_MessageList .mx_EventTile_line[data-ejad-wazuh] {
    width: calc(100% - 12px) !important;
    min-width: 0 !important;
  }
  .mx_MTextBody > div[data-ejad-wazuh-direct] { padding: 15px; border-radius: 12px; }
  .mx_MTextBody > div[data-ejad-wazuh-direct] table,
  .mx_MTextBody > div[data-ejad-wazuh-direct] tbody,
  .mx_MTextBody > div[data-ejad-wazuh-direct] tr,
  .mx_MTextBody > div[data-ejad-wazuh-direct] th,
  .mx_MTextBody > div[data-ejad-wazuh-direct] td { display: block; width: 100%; box-sizing: border-box; }
  .mx_MTextBody > div[data-ejad-wazuh-direct] th { padding-bottom: 4px; border-bottom: 0; }
  .mx_MTextBody > div[data-ejad-wazuh-direct] td { padding-top: 4px; }
}

/* Production Wazuh messages do not always keep the marker as the direct
   child of the formatted-body wrapper. Treat the MTextBody itself as the
   incident card so the layout remains stable for every sanitized shape. */
.mx_RoomView_MessageList .mx_EventTile[data-ejad-wazuh] .mx_EventTile_line {
  width: min(calc(100% - clamp(28px, 6vw, 96px)), 920px) !important;
  max-width: 920px !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}
.mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 920px !important;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px) !important;
  overflow: hidden;
  direction: rtl;
  text-align: start;
  color: #152529 !important;
  border: 1px solid rgba(180, 35, 24, .17) !important;
  border-inline-start: 5px solid #b42318 !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #fff, #f4faf8) !important;
  box-shadow: 0 18px 45px rgba(15, 53, 62, .1) !important;
}
.mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] > div[data-ejad-wazuh] {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] th { width: 34%; }
.mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] td,
.mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] th {
  overflow-wrap: anywhere;
  word-break: normal;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh],
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] {
  color: #eaf6f3 !important;
  border-color: rgba(237, 95, 83, .28) !important;
  background: linear-gradient(145deg, #0b252b, #081d21) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .3) !important;
}

@media (max-width: 620px) {
  .mx_RoomView_MessageList .mx_EventTile[data-ejad-wazuh] .mx_EventTile_line {
    width: calc(100% - 12px) !important;
  }
  .mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] {
    padding: 16px !important;
    border-radius: 16px !important;
  }
  .mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] table,
  .mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] tbody,
  .mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] tr,
  .mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] th,
  .mx_RoomView_MessageList .mx_MTextBody[data-ejad-wazuh] td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 760px) {
  .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] {
    padding-inline: 8px;
  }
  .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line {
    width: fit-content;
    min-width: min(132px, 48%);
    max-width: min(88%, 560px);
    padding: 9px 11px;
  }
}

/* v61 complete customer-facing terminology across all shipped locales ------- */

/* v62 native Element locale reuse for standard custom-surface actions -------- */

/* v63 compact native-language copy for every non-dedicated Element locale ----- */

/* v64 preserve reviewed copy for dedicated locales ---------------------------- */

/* v36 space-creation release guard.
   Element renders the icon and the two text lines as separate children. The
   earlier generic button padding left the upstream absolute icon on top of
   the label. Give the sheet and its choices an explicit, bidirectional layout
   and keep transient message notices behind modal work. */
body:has(.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu) .ejad-unread-center__toast,
body:has(.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu) .mx_ToastContainer {
    display: none !important;
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
    width: min(480px, calc(100vw - 68px)) !important;
    max-width: min(480px, calc(100vw - 68px)) !important;
    padding: clamp(28px, 3vw, 40px) !important;
    border-inline-end: 1px solid rgba(3, 46, 56, .2) !important;
    background:
        linear-gradient(145deg, rgba(19, 233, 177, .075), transparent 190px),
        #fbfdfc !important;
    box-shadow: 22px 0 64px rgba(7, 30, 36, .2) !important;
}
html[dir="rtl"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu,
html[lang^="ar"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
    border-inline-start: 1px solid rgba(3, 46, 56, .2) !important;
    border-inline-end: 0 !important;
    box-shadow: -22px 0 64px rgba(7, 30, 36, .2) !important;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div[data-focus-lock-disabled="false"] {
    width: 100%;
    max-width: 400px;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
    margin: 0 0 7px !important;
    font: 760 clamp(22px, 2vw, 27px)/1.35 "EJAD Cairo", "Cairo", Inter, sans-serif !important;
    letter-spacing: -.025em;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
    max-width: 390px;
    margin: 0 0 22px !important;
    color: #5f767b !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    width: 100%;
    min-height: 92px;
    margin: 0 0 12px !important;
    padding: 17px 18px !important;
    overflow: hidden;
    border: 1px solid rgba(3, 46, 56, .16) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #0e3139 !important;
    font: 720 15px/1.45 "EJAD Cairo", "Cairo", Inter, sans-serif !important;
    text-align: start !important;
    box-shadow: 0 5px 18px rgba(11, 49, 57, .045);
    transition: border-color .16s ease, background .16s ease,
        box-shadow .16s ease, transform .16s ease !important;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton:hover,
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton:focus-visible {
    border-color: rgba(8, 122, 94, .5) !important;
    background: #f2faf8 !important;
    box-shadow: 0 10px 28px rgba(17, 63, 73, .1);
    transform: translateY(-1px);
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton:focus-visible {
    outline: 3px solid rgba(19, 232, 176, .2) !important;
    outline-offset: 2px;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton > svg {
    position: static !important;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    box-sizing: content-box;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 11px;
    border-radius: 12px;
    background: #e8f6f2;
    color: #087A5E;
    transform: none !important;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton > div {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0 !important;
    color: #697e83 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div[data-focus-lock-disabled="false"] > .mx_AccessibleButton:not(.mx_SpacePillButton) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 42px;
    margin-block-start: 10px !important;
    padding: 8px 17px !important;
    border: 1px solid rgba(8, 122, 94, .24) !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #032E38 !important;
    font: 680 13px/1.4 "EJAD Cairo", "Cairo", Inter, sans-serif !important;
    box-shadow: 0 4px 14px rgba(12, 47, 55, .05);
}

body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu,
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
    background:
        linear-gradient(145deg, rgba(19, 233, 177, .08), transparent 200px),
        #0b262b !important;
}
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton,
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton {
    border-color: rgba(19, 233, 177, .18) !important;
    background: #0e3139 !important;
    color: #f1f9f7 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton:hover,
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton:hover {
    border-color: rgba(19, 233, 177, .48) !important;
    background: #113a43 !important;
}
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton > svg,
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton > svg {
    background: rgba(19, 233, 177, .11);
    color: #13e9b1;
}
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton > div,
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton > div {
    color: #afc0c4 !important;
}
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div[data-focus-lock-disabled="false"] > .mx_AccessibleButton:not(.mx_SpacePillButton),
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div[data-focus-lock-disabled="false"] > .mx_AccessibleButton:not(.mx_SpacePillButton) {
    border-color: rgba(19, 233, 177, .22) !important;
    background: #0e3139 !important;
    color: #13e9b1 !important;
}

@media (max-width: 760px) {
    .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu,
    html[dir="rtl"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu,
    html[lang^="ar"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div[data-focus-lock-disabled="false"] {
        max-width: 520px;
        margin-inline: auto;
    }
    .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 84px;
        padding: 14px !important;
        border-radius: 16px !important;
    }
    .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpacePillButton > svg {
        width: 20px !important;
        height: 20px !important;
        padding: 10px;
        border-radius: 12px;
    }
}

/* v89 — professional group-conversation hierarchy and a trustworthy unread
   projection. The native Element unread filter can be narrower than Matrix's
   notification counters, so the bridge is shown only when Element renders its
   own empty state while authoritative unread entries still exist. */
.ejad-room-header-context {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-block-start: 3px;
    color: var(--ejad-muted, #617579);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
.ejad-room-header-context > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.ejad-room-header-context > span + span::before {
    width: 3px;
    height: 3px;
    margin-inline-end: 3px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    opacity: .52;
}
.ejad-room-header-context svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ejad-room-header-context__audience {
    overflow: hidden;
    max-width: 160px;
    text-overflow: ellipsis;
}
.ejad-room-header-context__audience--external { color: #a15e18; }
.ejad-room-header-context__audience--internal { color: var(--ejad-accent-strong, #032E38); }

.mx_RoomTile[data-ejad-conversation-kind="group"] .mx_BaseAvatar,
.mx_RoomListItem[data-ejad-conversation-kind="group"] .mx_BaseAvatar,
.mx_RoomListItemView[data-ejad-conversation-kind="group"] .mx_BaseAvatar,
[role="treeitem"][data-ejad-conversation-kind="group"] .mx_BaseAvatar {
    border-radius: 13px !important;
}
.mx_RoomTile[data-ejad-conversation-audience="external"],
.mx_RoomListItem[data-ejad-conversation-audience="external"],
.mx_RoomListItemView[data-ejad-conversation-audience="external"],
[role="treeitem"][data-ejad-conversation-audience="external"] {
    border-inline-end-color: rgba(180, 111, 38, .22);
}

body[data-ejad-room-kind="group"] .mx_RoomView_MessageList .mx_EventTile_continuation {
    padding-block-start: 1px;
    padding-block-end: 1px;
}
body[data-ejad-room-kind="group"] .mx_RoomView_MessageList .mx_DisambiguatedProfile_displayName {
    letter-spacing: 0;
    unicode-bidi: plaintext;
}
body[data-ejad-room-kind="group"] .mx_RoomView_MessageList .mx_DateSeparator,
body[data-ejad-room-kind="group"] .mx_RoomView_MessageList [class*="DateSeparator"] {
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 18px auto 12px;
    padding: 5px 11px;
    border: 1px solid var(--ejad-line, rgba(3, 46, 56, .15));
    border-radius: 999px;
    background: color-mix(in srgb, var(--ejad-surface-raised, #fff) 88%, transparent);
    color: var(--ejad-muted, #617579);
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(8, 38, 45, .05);
}
body[data-ejad-room-kind="group"] .mx_ReactionsRow,
body[data-ejad-room-kind="group"] [class*="ReactionsRow"] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block-start: 6px;
}
body[data-ejad-room-kind="group"] .mx_Reaction,
body[data-ejad-room-kind="group"] [class*="ReactionButton"] {
    min-height: 25px;
    border: 1px solid var(--ejad-line, rgba(3, 46, 56, .15)) !important;
    border-radius: 999px !important;
    background: var(--ejad-surface-soft, #f4f8f7) !important;
}
body[data-ejad-room-kind="group"] .mx_EventTile_info,
body[data-ejad-room-kind="group"] .mx_EventTile_isStateEvent {
    max-width: min(90%, 760px);
    margin-inline: auto;
    color: var(--ejad-muted, #617579) !important;
    font-size: 11px;
    text-align: center;
}

.ejad-native-unread-bridge {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 12px 10px 16px;
    overflow: auto;
    color: var(--ejad-ink, #0b272d);
    scrollbar-gutter: stable;
}
.ejad-native-unread-bridge > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 5px 10px;
}
.ejad-native-unread-bridge > header > div { min-width: 0; }
.ejad-native-unread-bridge > header strong,
.ejad-native-unread-bridge > header span { display: block; }
.ejad-native-unread-bridge > header strong { font-size: 13px; font-weight: 700; }
.ejad-native-unread-bridge > header span { margin-block-start: 2px; color: var(--ejad-muted, #617579); font-size: 10px; }
.ejad-native-unread-bridge > header b {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--ejad-accent, #087A5E);
    color: #fff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.ejad-native-unread-bridge__list { display: grid; gap: 7px; }
.ejad-native-unread-bridge__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border: 1px solid var(--ejad-line, rgba(3, 46, 56, .15));
    border-radius: 12px;
    background: var(--ejad-surface-raised, #fff);
    box-shadow: 0 5px 18px rgba(8, 38, 45, .055);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ejad-native-unread-bridge__item:hover,
.ejad-native-unread-bridge__item:focus-within {
    border-color: var(--ejad-line-strong, rgba(8, 122, 94, .3));
    box-shadow: 0 9px 24px rgba(8, 38, 45, .09);
    transform: translateY(-1px);
}
.ejad-native-unread-bridge__open {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px;
    border: 0;
    border-radius: 14px 0 0 14px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: start;
}
[dir="rtl"].ejad-native-unread-bridge .ejad-native-unread-bridge__open { border-radius: 0 14px 14px 0; }
.ejad-native-unread-bridge__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--ejad-accent-soft, #e5f4f0);
    color: var(--ejad-accent-strong, #032E38);
}
.ejad-native-unread-bridge__avatar svg { width: 21px; height: 21px; }
.ejad-native-unread-bridge__content { display: block; min-width: 0; }
.ejad-native-unread-bridge__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.ejad-native-unread-bridge__top strong {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ejad-native-unread-bridge__top time { flex: 0 0 auto; color: var(--ejad-muted, #617579); font-size: 9px; direction: ltr; }
.ejad-native-unread-bridge__meta {
    display: block;
    margin-block-start: 3px;
    overflow: hidden;
    color: var(--ejad-muted, #617579);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ejad-native-unread-bridge__badge {
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--ejad-accent, #087A5E);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}
.ejad-native-unread-bridge__badge--mention { background: var(--ejad-danger, #c94751); }
.ejad-native-unread-bridge__mark {
    align-self: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin-inline-end: 7px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ejad-line, rgba(3, 46, 56, .15));
    border-radius: 8px;
    background: var(--ejad-surface-soft, #f4f8f7);
    color: var(--ejad-accent-strong, #032E38);
    font-size: 0;
    font-weight: 700;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ejad-native-unread-bridge__mark::before {
    content: "✓";
    font-size: 13px;
    font-weight: 700;
}
.ejad-native-unread-bridge button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ejad-accent, #087A5E) 28%, transparent);
    outline-offset: 2px;
}
body.cpd-theme-dark .ejad-native-unread-bridge__item,
body.cpd-theme-dark-hc .ejad-native-unread-bridge__item { background: var(--ejad-surface-raised, #0d2b32); }

@media (max-width: 760px) {
    .ejad-room-header-context__audience { max-width: 92px; }
    .ejad-room-header-context__members { display: none !important; }
}

/* Connected services are progressive: the whole surface remains hidden until
   the gateway reports at least one correctly configured OAuth provider. */
.ejp-connections {
    box-sizing: border-box;
    margin: 14px 0 18px;
    padding: 16px;
    border: 1px solid var(--ejp-line);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(15, 53, 62, .78), rgba(10, 36, 41, .66));
}
.ejp-connections[hidden], .ejp-provider[hidden], .ejp-agenda[hidden] { display: none !important; }
.ejp-connections .ejp-section-head { align-items: center; margin-bottom: 12px; }
.ejp-connections .ejp-section-head p { margin: 3px 0 0; color: var(--ejp-muted); font-size: 10px; }
.ejp-connections-refresh,
.ejp-provider button {
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid rgba(19, 233, 177, .34);
    border-radius: 8px;
    background: rgba(19, 233, 177, .12);
    color: var(--ejp-accent);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.ejp-connections-refresh:hover, .ejp-provider button:hover { background: rgba(19, 233, 177, .22); }
.ejp-connections-refresh:focus-visible, .ejp-provider button:focus-visible { outline: 3px solid rgba(19, 233, 177, .3); outline-offset: 2px; }
.ejp-connections-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ejp-provider {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--ejp-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}
.ejp-home[dir="rtl"] .ejp-provider { grid-template-columns: auto minmax(0, 1fr) 42px; }
.ejp-home[dir="rtl"] .ejp-provider-mark { grid-column: 3; grid-row: 1; }
.ejp-home[dir="rtl"] .ejp-provider-copy { grid-column: 2; grid-row: 1; }
.ejp-home[dir="rtl"] .ejp-provider button { grid-column: 1; grid-row: 1; }
.ejp-provider--connected { border-color: rgba(19, 233, 177, .38); }
.ejp-provider-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; font: 800 17px/1 "Segoe UI", sans-serif; }
.ejp-provider-mark--google { background: linear-gradient(135deg, #4285f4, #34a853); }
.ejp-provider-mark--microsoft { background: linear-gradient(135deg, #087A5E, #7fba00); }
.ejp-provider-copy { min-width: 0; }
.ejp-provider-copy strong, .ejp-provider-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejp-provider-copy strong { font-size: 12px; }
.ejp-provider-copy small { margin-top: 3px; color: var(--ejp-muted); font-size: 9px; }
.ejp-agenda { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ejp-line); }
.ejp-agenda h3 { margin: 0 0 9px; font-size: 12px; }
.ejp-agenda [data-ejp-agenda-items], .ejp-agenda [data-ejp-mail-items] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ejp-agenda-item { display: block; min-width: 0; padding: 10px; border: 1px solid var(--ejp-line); border-radius: 12px; color: var(--ejp-text); text-decoration: none; }
.ejp-agenda-item:hover { border-color: rgba(19, 233, 177, .45); background: rgba(19, 233, 177, .07); }
.ejp-agenda-item strong, .ejp-agenda-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejp-agenda-item strong { font-size: 10px; }
.ejp-agenda-item span { margin-top: 4px; color: var(--ejp-muted); font-size: 9px; }
.ejp-connections-status { min-height: 0; margin: 8px 0 0; color: var(--ejp-muted); font-size: 9px; }
.ejp-connections-status:empty { display: none; }
@media (max-width: 900px) {
    .ejp-connections-grid, .ejp-agenda [data-ejp-agenda-items], .ejp-agenda [data-ejp-mail-items] { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .ejp-provider, .ejp-home[dir="rtl"] .ejp-provider { grid-template-columns: 42px minmax(0, 1fr); }
    .ejp-provider button, .ejp-home[dir="rtl"] .ejp-provider button { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .ejp-home[dir="rtl"] .ejp-provider-mark { grid-column: 2; }
    .ejp-home[dir="rtl"] .ejp-provider-copy { grid-column: 1; }
}

/* v94 — unified Activity and Matrix-synchronised Later workspace. */
.ejad-work-hub {
    position: fixed;
    z-index: 2147482500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(10px, 3vw, 28px);
}
.ejad-work-hub[hidden] { display: none !important; }
.ejad-work-hub__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(6, 26, 31, .52);
    backdrop-filter: blur(8px);
}
.ejad-work-hub__dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    width: min(980px, 100%);
    height: min(780px, 92dvh);
    overflow: hidden;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 16px;
    background: var(--ejad-flow-canvas, #f8fbfa);
    color: var(--ejad-flow-ink, #0d2c33);
    box-shadow: 0 34px 110px rgba(4, 27, 32, .38);
}
.ejad-work-hub__dialog > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 78px;
    padding: 14px 18px;
    border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    background: linear-gradient(135deg, rgba(8, 122, 94, .12), var(--ejad-flow-card, #fff));
}
.ejad-work-hub__dialog > header > div { display: grid; gap: 3px; min-width: 0; }
.ejad-work-hub__dialog > header strong { font-size: clamp(16px, 2vw, 21px); font-weight: 700; }
.ejad-work-hub__subtitle { color: var(--ejad-flow-muted, #60767a); font-size: 11px; }
.ejad-work-hub__close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ejad-flow-muted, #60767a);
    font-size: 25px;
    cursor: pointer;
}
.ejad-work-hub__close:hover { border-color: var(--ejad-flow-line, rgba(18, 68, 79, .14)); background: var(--ejad-flow-card, #fff); }
.ejad-work-hub__modes,
.ejad-work-hub__filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 9px 16px;
    scrollbar-width: none;
}
.ejad-work-hub__modes { border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14)); background: var(--ejad-flow-card, #fff); }
.ejad-work-hub__filters { padding-block: 8px; }
.ejad-work-hub__modes::-webkit-scrollbar,
.ejad-work-hub__filters::-webkit-scrollbar { display: none; }
.ejad-work-hub__modes button,
.ejad-work-hub__filters button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 999px;
    background: var(--ejad-flow-card, #fff);
    color: var(--ejad-flow-muted, #60767a);
    font-weight: 700;
    cursor: pointer;
}
.ejad-work-hub__modes button[aria-selected="true"],
.ejad-work-hub__filters button[aria-selected="true"] {
    border-color: rgba(8, 122, 94, .34);
    background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
    color: var(--ejad-flow-accent-strong, #032E38);
}
.ejad-work-hub__status { min-height: 18px; padding-inline: 18px; color: var(--ejad-danger, #b9404b); font-size: 10px; }
.ejad-work-hub__list {
    display: grid;
    align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
    padding: 4px 16px 18px;
    overflow: auto;
}
.ejad-work-hub__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-content: start;
    padding: 12px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 12px;
    background: var(--ejad-flow-card, #fff);
    box-shadow: 0 6px 20px rgba(8, 39, 46, .055);
}
.ejad-work-hub__kind {
    align-self: start;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
    color: var(--ejad-flow-accent-strong, #032E38);
    font-size: 9px;
    font-weight: 700;
}
.ejad-work-hub__item > div:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.ejad-work-hub__item > div:nth-child(2) > div:first-child { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.ejad-work-hub__item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ejad-work-hub__item time,
.ejad-work-hub__item small { color: var(--ejad-flow-muted, #60767a); font-size: 9px; }
.ejad-work-hub__item p { display: -webkit-box; margin: 4px 0 0; overflow: hidden; font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.ejad-work-hub__due { width: fit-content; margin-block-start: 5px; padding: 4px 7px; border-radius: 8px; background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11)); color: var(--ejad-flow-accent-strong, #032E38); font-size: 9px; font-weight: 700; }
.ejad-work-hub__due--overdue { background: rgba(201, 71, 81, .11); color: var(--ejad-danger, #b9404b); }
.ejad-work-hub__item-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; padding-block-start: 4px; }
.ejad-work-hub__item-actions button {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 8px;
    background: var(--ejad-flow-card, #fff);
    color: var(--ejad-flow-accent-strong, #032E38);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}
.ejad-work-hub__item-actions button:hover:not(:disabled) { background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11)); }
.ejad-work-hub__item-actions button:disabled { color: var(--ejad-flow-muted, #60767a); cursor: default; opacity: .65; }
.ejad-work-hub__empty { grid-column: 1 / -1; margin: auto; padding: 44px 20px; color: var(--ejad-flow-muted, #60767a); text-align: center; }
.ejad-home-attention__actions .ejad-home-attention__later--due {
    border-color: rgba(201, 71, 81, .34) !important;
    background: rgba(201, 71, 81, .1) !important;
    color: var(--ejad-danger, #b9404b) !important;
}
body.ejad-work-hub-open { overflow: hidden; }
body.cpd-theme-dark .ejad-work-hub__dialog,
body.cpd-theme-dark-hc .ejad-work-hub__dialog { background: #0a2126; }
body.cpd-theme-dark .ejad-work-hub__dialog > header,
body.cpd-theme-dark-hc .ejad-work-hub__dialog > header { background: linear-gradient(135deg, rgba(19, 232, 176, .13), #0d2c33); }
@media (max-width: 720px) {
    .ejad-work-hub { align-items: end; padding: 0; }
    .ejad-work-hub__dialog { width: 100%; height: min(88dvh, 780px); border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
    .ejad-work-hub__dialog > header { min-height: 68px; padding: 11px 13px; }
    .ejad-work-hub__subtitle { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ejad-work-hub__modes, .ejad-work-hub__filters { padding-inline: 10px; }
    .ejad-work-hub__list { grid-template-columns: 1fr; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .ejad-work-hub__backdrop { backdrop-filter: none; }
}

/* v103 — persistent active-call dock. All media actions delegate to visible
   native Element controls and are disabled when the call surface cannot expose them. */
.ejad-active-call-dock {
    position: fixed; z-index: 2147482100; inset-inline: max(18px, env(safe-area-inset-left)); inset-block-end: max(18px, env(safe-area-inset-bottom));
    margin-inline-start: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; box-sizing: border-box;
    width: min(520px, calc(100vw - 36px)); min-height: 68px; padding: 10px 12px; border: 1px solid rgba(19, 233, 177, .32);
    border-radius: 12px; background: color-mix(in srgb, var(--ejad-surface-raised, #fff) 94%, #daf8f0) !important;
    color: var(--ejad-ink, #0c2a31); box-shadow: 0 22px 66px rgba(4, 27, 32, .24); backdrop-filter: blur(18px) saturate(130%);
}
.ejad-active-call-dock__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ejad-active-call-dock__identity > span { color: #087A5E; font-size: 19px; animation: ejad-active-call-pulse 1.8s ease-in-out infinite; }
.ejad-active-call-dock__identity div { min-width: 0; }
.ejad-active-call-dock__identity strong,
.ejad-active-call-dock__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-active-call-dock__identity strong { font-size: 14px; }
.ejad-active-call-dock__identity small { margin-block-start: 2px; color: var(--ejad-muted, #62767a); font-size: 11px; }
.ejad-active-call-dock__controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ejad-active-call-dock__controls button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--ejad-line, #d8e3e0) !important; border-radius: 12px; background: var(--ejad-surface-soft, #f3f8f7) !important; color: var(--ejad-ink, #0c2a31) !important; font: inherit; font-weight: 700; cursor: pointer; }
.ejad-active-call-dock__controls button:hover:not(:disabled) { border-color: var(--ejad-accent, #087A5E) !important; background: var(--ejad-accent-soft, #eaf6f3) !important; color: var(--ejad-accent-strong, #032E38) !important; }
.ejad-active-call-dock__controls button:focus-visible { outline: 3px solid color-mix(in srgb, var(--ejad-accent) 28%, transparent); outline-offset: 2px; }
.ejad-active-call-dock__controls button:disabled { opacity: .4; cursor: not-allowed; }
.ejad-active-call-dock--collapsed { inset-inline-start: auto; width: auto; min-height: 52px; }
.ejad-active-call-dock--collapsed .ejad-active-call-dock__identity div,
.ejad-active-call-dock--collapsed .ejad-active-call-dock__controls button:not([data-call-action="collapse"]) { display: none; }
body.cpd-theme-dark .ejad-active-call-dock,
body.cpd-theme-dark-hc .ejad-active-call-dock { background: color-mix(in srgb, var(--ejad-surface-raised, #0d2d34) 94%, #0c3e49) !important; }
@keyframes ejad-active-call-pulse { 50% { opacity: .48; transform: scale(.82); } }
@media (max-width: 600px) {
    .ejad-active-call-dock { inset-inline: 8px; inset-block-end: max(8px, env(safe-area-inset-bottom)); width: auto; min-height: 62px; padding: 8px 9px; }
    .ejad-active-call-dock__controls { gap: 4px; }
    .ejad-active-call-dock__controls button { width: 36px; height: 36px; }
    .ejad-active-call-dock__identity small { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .ejad-active-call-dock__identity > span { animation: none; } }
.ejad-message-undo { position: fixed; z-index: 10080; inset-inline: 18px; inset-block-end: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(520px, calc(100vw - 36px)); margin-inline: auto; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ejad-accent, #087A5E) 50%, var(--ejad-line, #d8e3e0)); border-radius: 12px; background: var(--ejad-ink, #0c2a31); color: #fff; box-shadow: 0 16px 46px rgb(2 20 24 / .3); }
.ejad-message-undo[hidden] { display: none !important; }
.ejad-message-undo button { min-height: 36px; padding-inline: 16px; border: 1px solid rgb(255 255 255 / .45); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ejad-clip-transcript { margin-block-start: 8px; padding: 8px 10px; border-inline-start: 3px solid var(--ejad-accent, #087A5E); border-radius: 8px; background: var(--ejad-surface-soft, #f3f8f7); }
.ejad-clip-transcript summary { color: var(--ejad-accent-strong, #032E38); font-size: 12px; font-weight: 700; cursor: pointer; }
.ejad-clip-transcript p { margin: 7px 0 0; white-space: pre-wrap; }

/* v106 — Matrix-state EJAD Pages with inherited permissions and audit history. */
.ejad-conversation-context[data-kind="pages"] { width: min(940px, calc(100vw - 36px)); }
.ejad-conversation-context[data-kind="pages"] .ejad-conversation-context__body { padding: 0; overflow: hidden; }
.ejad-conversation-context[data-kind="lists"] { width: min(1100px, calc(100vw - 28px)); }
.ejad-conversation-context[data-kind="lists"] .ejad-conversation-context__body { padding: 0; overflow: hidden; }
.ejad-conversation-context[data-kind="workflows"] { width: min(1100px, calc(100vw - 28px)); }
.ejad-conversation-context[data-kind="workflows"] .ejad-conversation-context__body { padding: 0; overflow: hidden; }
.ejad-conversation-context[data-kind="meetings"] { width: min(1120px, calc(100vw - 28px)); }
.ejad-conversation-context[data-kind="meetings"] .ejad-conversation-context__body { padding: 0; overflow: hidden; }
.ejad-conversation-context[data-kind="insights"] { width: min(1040px, calc(100vw - 28px)); }
.ejad-catch-up { display: grid; gap: 14px; padding: 16px; color: var(--ejad-flow-ink, #113b45); }
.ejad-catch-up > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ejad-catch-up > header div { display: grid; gap: 4px; }
.ejad-catch-up > header span, .ejad-catch-up article small { color: var(--ejad-flow-muted, #60767a); font-size: 10px; }
.ejad-catch-up nav { display: flex; flex-wrap: wrap; gap: 6px; }
.ejad-catch-up nav button[aria-pressed="true"] { background: var(--ejad-flow-accent, #087A5E); color: #fff; }
.ejad-catch-up__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ejad-catch-up__grid > section { display: grid; align-content: start; gap: 7px; padding: 12px; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 12px; background: var(--ejad-surface-soft, #f1f7f5); }
.ejad-catch-up__grid h3, .ejad-catch-up__grid p { margin: 0; }
.ejad-catch-up__grid article { display: grid; gap: 3px; padding-block: 7px; border-block-start: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
.ejad-catch-up__grid article:first-of-type { border-block-start: 0; }
.ejad-catch-up__grid a { color: var(--ejad-flow-accent-strong, #032E38); font-size: 10px; font-weight: 700; }
.ejad-catch-up > footer { display: flex; align-items: center; gap: 10px; }
.ejad-conversation-context[data-kind="apps"] { width: min(1040px, calc(100vw - 28px)); }
.ejad-room-apps { display: grid; gap: 14px; padding: 16px; color: var(--ejad-flow-ink,#113b45); }
.ejad-room-apps > header > div { display: grid; gap: 4px; }
.ejad-room-apps > header span,.ejad-room-apps small { color: var(--ejad-flow-muted,#60767a); font-size: 10px; }
.ejad-room-apps__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ejad-room-apps__grid > article { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.14)); border-radius: 12px; background: var(--ejad-flow-card,#fff); }
.ejad-room-apps__grid > article > header { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.ejad-room-apps__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--ejad-flow-accent,#087A5E); color: #fff; font-size: 11px; font-weight: 700; }
.ejad-room-apps__grid article header > div { display: grid; gap: 2px; min-width: 0; }
.ejad-room-apps__grid article header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-room-apps__grid article header em { padding: 4px 7px; border-radius: 999px; background: rgba(8, 122, 94,.1); color: var(--ejad-flow-accent-strong,#032E38); font-size: 8px; font-style: normal; font-weight: 700; }
.ejad-room-apps__grid article[data-security="external"] header em { background: rgba(180,111,38,.11); color: #985a17; }
.ejad-room-apps__grid article p,.ejad-room-apps__grid article dl { margin: 0; }
.ejad-room-apps__grid article p { min-height: 38px; line-height: 1.55; }
.ejad-room-apps__grid article dl { display: grid; gap: 5px; }
.ejad-room-apps__grid article dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 8px; padding-block-start: 5px; border-block-start: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.1)); }
.ejad-room-apps__grid article dt,.ejad-room-apps__grid article dd { margin: 0; font-size: 9px; }
.ejad-room-apps__grid article dt { color: var(--ejad-flow-muted,#60767a); font-weight: 700; }
.ejad-room-apps__grid article footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ejad-room-apps__grid article footer a { color: var(--ejad-flow-accent-strong,#032E38); font-size: 9px; font-weight: 700; }
.ejad-conversation-context[data-kind="qa"] { width: min(920px, calc(100vw - 28px)); }
.ejad-room-qa { display: grid; gap: 16px; max-width: 820px; margin-inline: auto; padding: clamp(16px,3vw,28px); color: var(--ejad-flow-ink,#113b45); }
.ejad-room-qa > header > div { display: grid; gap: 5px; }
.ejad-room-qa > header strong { font-size: clamp(18px,2.4vw,25px); }
.ejad-room-qa > header span,.ejad-room-qa__disclosure,.ejad-room-qa__submit span { color: var(--ejad-flow-muted,#60767a); font-size: 11px; line-height: 1.55; }
.ejad-room-qa form { display: grid; gap: 12px; padding: clamp(14px,2vw,20px); border: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.14)); border-radius: 12px; background: var(--ejad-flow-card,#fff); box-shadow: 0 12px 32px rgba(15, 59, 69,.07); }
.ejad-room-qa form > label { display: grid; gap: 7px; font-weight: 700; }
.ejad-room-qa textarea { box-sizing: border-box; width: 100%; min-height: 96px; resize: vertical; }
.ejad-room-qa fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.14)); border-radius: 12px; }
.ejad-room-qa fieldset legend { padding-inline: 5px; color: var(--ejad-flow-muted,#60767a); font-size: 10px; font-weight: 700; }
.ejad-room-qa fieldset label { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding-inline: 9px; border-radius: 8px; background: var(--ejad-surface-soft,#f1f7f5); font-size: 11px; font-weight: 700; }
.ejad-room-qa fieldset input { width: auto; }
.ejad-room-qa__disclosure,.ejad-room-qa__status { margin: 0; }
.ejad-room-qa__submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; }
.ejad-room-qa__submit button { min-height: 42px; padding: 9px 16px; border: 1px solid var(--ejad-flow-accent,#087A5E); border-radius: 8px; background: var(--ejad-flow-accent,#087A5E); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ejad-room-qa__submit button:disabled { opacity: .58; cursor: wait; }
.ejad-room-qa__status { min-height: 20px; color: var(--ejad-flow-accent-strong,#032E38); font-size: 11px; font-weight: 700; }
.ejad-room-qa__answer { display: grid; gap: 12px; padding: clamp(16px,2.5vw,24px); border: 1px solid color-mix(in srgb,var(--ejad-flow-accent,#087A5E) 34%,transparent); border-radius: 12px; background: color-mix(in srgb,var(--ejad-flow-accent-soft,#eaf6f3) 70%,var(--ejad-flow-card,#fff)); }
.ejad-room-qa__answer h3,.ejad-room-qa__answer p { margin: 0; }
.ejad-room-qa__answer p { white-space: pre-wrap; line-height: 1.7; }
.ejad-room-qa__answer section { display: grid; gap: 7px; padding-block-start: 10px; border-block-start: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.14)); }
.ejad-room-qa__answer ol { display: grid; gap: 6px; margin: 0; padding-inline-start: 24px; }
.ejad-room-qa__answer a { color: var(--ejad-flow-accent-strong,#032E38); font-weight: 700; overflow-wrap: anywhere; }
.ejad-room-qa :focus-visible { outline: 3px solid color-mix(in srgb,var(--ejad-flow-accent,#087A5E) 34%,transparent); outline-offset: 2px; }
.ejad-pages { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.6fr); min-height: 0; flex: 1; }
.ejad-pages > aside { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; border-inline-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); background: var(--ejad-surface-soft, #f4f9f8); }
.ejad-pages > aside > header { display: grid; gap: 7px; padding: 15px; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
.ejad-pages > aside > header div { display: grid; gap: 3px; }
.ejad-pages > aside > header strong { font-size: 14px; }
.ejad-pages > aside > header span { color: var(--ejad-flow-muted, #60767a); font-size: 10px; line-height: 1.45; }
.ejad-pages__template { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.ejad-pages__template select { min-width: 0; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 8px; background: var(--ejad-flow-card, #fff); color: inherit; }
.ejad-pages button { min-height: 38px; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 8px; background: var(--ejad-flow-card, #fff); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.ejad-pages button:hover:not(:disabled) { border-color: var(--ejad-flow-accent, #087A5E); background: var(--ejad-flow-accent-soft, #eaf6f3); }
.ejad-pages button:focus-visible,
.ejad-pages input:focus-visible,
.ejad-pages select:focus-visible,
.ejad-pages textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--ejad-flow-accent, #087A5E) 28%, transparent); outline-offset: 2px; }
.ejad-pages button:disabled { opacity: .45; cursor: not-allowed; }
.ejad-pages__list { display: grid; align-content: start; gap: 7px; min-height: 0; padding: 10px; overflow: auto; }
.ejad-pages__list > button { display: grid; min-height: 72px; align-content: start; gap: 3px; padding: 10px; text-align: start; }
.ejad-pages__list > button[aria-selected="true"] { border-color: var(--ejad-flow-accent, #087A5E); background: var(--ejad-flow-accent-soft, #eaf6f3); box-shadow: inset 3px 0 var(--ejad-flow-accent, #087A5E); }
[dir="rtl"] .ejad-pages__list > button[aria-selected="true"] { box-shadow: inset -3px 0 var(--ejad-flow-accent, #087A5E); }
.ejad-pages__list > button span,
.ejad-pages__list > button small { display: block; color: var(--ejad-flow-muted, #60767a); font-size: 10px; line-height: 1.35; }
.ejad-pages > main { min-width: 0; min-height: 0; padding: 17px; overflow: auto; background: var(--ejad-flow-canvas, #f8fbfa); }
.ejad-pages form { display: grid; gap: 13px; }
.ejad-pages__fields { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; }
.ejad-pages label > span { display: block; margin-block-end: 6px; font-size: 11px; font-weight: 700; }
.ejad-pages input,
.ejad-pages select,
.ejad-pages textarea { width: 100%; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 12px; background: var(--ejad-flow-card, #fff); color: inherit; font: inherit; }
.ejad-pages input,
.ejad-pages select { min-height: 42px; padding: 8px 10px; }
.ejad-pages textarea { min-height: 300px; padding: 13px; line-height: 1.65; resize: vertical; }
.ejad-pages__meta { color: var(--ejad-flow-muted, #60767a); font-size: 10px; }
.ejad-pages details { border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 12px; background: var(--ejad-flow-card, #fff); }
.ejad-pages summary { padding: 10px 12px; font-weight: 700; cursor: pointer; }
.ejad-pages__history { display: grid; gap: 6px; max-height: 180px; padding: 0 10px 10px; overflow: auto; }
.ejad-pages__history article { display: grid; gap: 2px; padding: 8px; border-radius: 8px; background: var(--ejad-surface-soft, #f4f9f8); }
.ejad-pages__history article span,
.ejad-pages__history article small { overflow: hidden; color: var(--ejad-flow-muted, #60767a); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ejad-pages__actions { display: flex; gap: 8px; justify-content: flex-end; }
.ejad-pages__actions button[type="submit"] { border-color: var(--ejad-flow-accent, #087A5E); background: var(--ejad-flow-accent, #087A5E); color: #fff; }
.ejad-pages__placeholder { margin: 25% auto; max-width: 340px; color: var(--ejad-flow-muted, #60767a); text-align: center; }
.ejad-pages__status { min-height: 20px; color: var(--ejad-flow-accent-strong, #032E38); font-weight: 700; }

.ejad-lists { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; min-height: 0; background: var(--ejad-flow-canvas, #f8fbfa); }
.ejad-lists > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
.ejad-lists > header > div:first-child { display: grid; gap: 3px; }
.ejad-lists > header span { color: var(--ejad-flow-muted, #60767a); font-size: 11px; }
.ejad-lists button { min-height: 36px; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 8px; background: var(--ejad-flow-card, #fff); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.ejad-lists button:hover:not(:disabled), .ejad-lists button[aria-pressed="true"] { border-color: var(--ejad-flow-accent, #087A5E); background: var(--ejad-flow-accent-soft, #eaf6f3); }
.ejad-lists button:focus-visible, .ejad-lists input:focus-visible, .ejad-lists select:focus-visible, .ejad-lists textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--ejad-flow-accent, #087A5E) 28%, transparent); outline-offset: 2px; }
.ejad-lists button:disabled { opacity: .45; cursor: not-allowed; }
.ejad-lists__view, .ejad-lists__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ejad-lists__view select { width: auto !important; min-width: 150px; max-width: 220px; }
.ejad-lists__view button, .ejad-lists__filters button { padding-inline: 12px; }
.ejad-lists__filters { padding: 9px 16px; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.12)); }
.ejad-lists__content { display: grid; align-content: start; gap: 8px; min-height: 0; padding: 14px 16px; overflow: auto; }
.ejad-lists__content[data-view="board"] { grid-template-columns: repeat(4, minmax(210px, 1fr)); align-items: start; overflow: auto; }
.ejad-lists__column { display: grid; align-content: start; gap: 8px; min-width: 0; }
.ejad-lists__column h3 { margin: 0 0 3px; color: var(--ejad-flow-muted, #60767a); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ejad-lists__card { display: grid; gap: 7px; min-width: 0; padding: 11px; text-align: start; border-inline-start: 4px solid var(--ejad-flow-accent, #087A5E) !important; }
.ejad-lists__card[data-priority="urgent"] { border-inline-start-color: #c43f51 !important; }
.ejad-lists__card[data-priority="high"] { border-inline-start-color: #cc7a24 !important; }
.ejad-lists__card strong, .ejad-lists__card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-lists__card small { color: var(--ejad-flow-muted, #60767a); font-weight: 500; }
.ejad-lists__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.ejad-lists__badges i { padding: 3px 7px; border-radius: 999px; background: var(--ejad-surface-soft, #f1f7f5); color: var(--ejad-flow-muted, #60767a); font-size: 10px; font-style: normal; }
.ejad-lists__editor { position: absolute; inset: 54px 0 0 auto; z-index: 3; width: min(620px, 100%); padding: 16px; overflow: auto; border-inline-start: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); background: var(--ejad-flow-canvas, #f8fbfa); box-shadow: -18px 0 36px rgba(11, 37, 42,.12); }
[dir="rtl"] .ejad-lists__editor { inset: 54px auto 0 0; box-shadow: 18px 0 36px rgba(11, 37, 42,.12); }
.ejad-lists__editor form { display: grid; gap: 12px; }
.ejad-lists__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ejad-lists__approval { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); gap: 10px; padding: 12px; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 12px; background: var(--ejad-surface-soft, #f1f7f5); }
.ejad-lists__approval > div { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 7px; }
.ejad-lists__approval strong { flex: 1 0 100%; color: var(--ejad-flow-ink, #113b45); }
.ejad-lists__approval button[data-list-action="approve"] { border-color: var(--ejad-flow-accent, #087A5E); background: var(--ejad-flow-accent, #087A5E); color: #fff; }
.ejad-lists__approval button[data-list-action="reject"] { border-color: #b43b4c; color: #a52d40; }
.ejad-lists__card[data-escalated="true"] { box-shadow: 0 0 0 2px rgba(196,63,81,.25); }
.ejad-lists label > span { display: block; margin-block-end: 5px; font-size: 10px; font-weight: 700; }
.ejad-lists input, .ejad-lists select, .ejad-lists textarea { width: 100%; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 8px; background: var(--ejad-flow-card, #fff); color: inherit; font: inherit; }
.ejad-lists input, .ejad-lists select { min-height: 40px; padding: 7px 9px; }
.ejad-lists textarea { padding: 10px; line-height: 1.5; resize: vertical; }
.ejad-lists label small, .ejad-lists__meta { color: var(--ejad-flow-muted, #60767a); font-size: 10px; }
.ejad-lists details { border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 8px; background: var(--ejad-flow-card, #fff); }
.ejad-lists summary { padding: 9px 11px; font-weight: 700; cursor: pointer; }
.ejad-lists__comments, .ejad-lists__history { display: grid; gap: 7px; max-height: 170px; padding: 0 10px 8px; overflow: auto; }
.ejad-lists__comments article, .ejad-lists__history article { padding: 8px; border-radius: 8px; background: var(--ejad-surface-soft, #f1f7f5); font-size: 11px; }
.ejad-lists__comments p { margin: 4px 0; white-space: pre-wrap; }
.ejad-lists__comments time { color: var(--ejad-flow-muted, #60767a); font-size: 9px; }
.ejad-lists__comment { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 8px 10px 10px; }
.ejad-lists__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.ejad-lists__actions button[type="submit"] { border-color: var(--ejad-flow-accent, #087A5E); background: var(--ejad-flow-accent, #087A5E); color: #fff; }
.ejad-lists__status { min-height: 22px; margin: 0; padding: 2px 16px; color: var(--ejad-flow-accent-strong, #032E38); font-size: 11px; font-weight: 700; }
.ejad-lists__empty { grid-column: 1 / -1; color: var(--ejad-flow-muted, #60767a); text-align: center; }
.ejad-lists__source { justify-self: start; color: var(--ejad-flow-accent-strong, #032E38); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ejad-workflows { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.7fr); min-height: 100%; color: var(--ejad-flow-ink, #113b45); }
.ejad-workflows > aside { border-inline-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); background: var(--ejad-flow-canvas, #f8fbfa); }
.ejad-workflows > aside > header, .ejad-workflows > main { padding: 16px; }
.ejad-workflows > aside > header { display: grid; gap: 9px; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
.ejad-workflows > aside > header div { display: grid; gap: 3px; }
.ejad-workflows > aside > header span { color: var(--ejad-flow-muted, #60767a); font-size: 11px; }
.ejad-workflows__list { display: grid; gap: 7px; padding: 12px; }
.ejad-workflows__list button { display: grid; gap: 5px; padding: 10px; text-align: start; }
.ejad-workflows__list span, .ejad-workflows__list small { color: var(--ejad-flow-muted, #60767a); }
.ejad-workflows > main, .ejad-workflows form { display: grid; align-content: start; gap: 14px; }
.ejad-workflows__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ejad-workflows label { display: grid; gap: 5px; font-size: 11px; font-weight: 700; }
.ejad-workflows input, .ejad-workflows select, .ejad-workflows textarea { width: 100%; box-sizing: border-box; }
.ejad-workflows__checks, .ejad-workflows__actions { display: flex; flex-wrap: wrap; gap: 9px; }
.ejad-workflows__checks label { display: flex; align-items: center; }
.ejad-workflows__checks input { width: auto; }
.ejad-workflows__actions button[type="submit"] { border-color: var(--ejad-flow-accent, #087A5E); background: var(--ejad-flow-accent, #087A5E); color: #fff; }
.ejad-workflows__runs { display: grid; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
.ejad-workflows__runs h3 { margin: 0; }
.ejad-workflows__runs > div { display: grid; gap: 7px; max-height: 280px; overflow: auto; }
.ejad-workflows__runs article { display: grid; grid-template-columns: minmax(100px,.6fr) minmax(180px,1.4fr) auto auto; align-items: center; gap: 8px; padding: 9px; border-radius: 8px; background: var(--ejad-surface-soft, #f1f7f5); }
.ejad-workflows__runs time, .ejad-workflows__runs span, .ejad-workflows__meta { color: var(--ejad-flow-muted, #60767a); font-size: 10px; }
.ejad-workflows__status { min-height: 22px; color: var(--ejad-flow-accent-strong, #032E38); font-size: 11px; font-weight: 700; }
.ejad-meetings { display: grid; grid-template-columns: minmax(240px,.72fr) minmax(0,1.8fr); min-height: 100%; color: var(--ejad-flow-ink, #113b45); }
.ejad-meetings > aside { border-inline-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); background: var(--ejad-flow-canvas, #f8fbfa); }
.ejad-meetings > aside > header, .ejad-meetings > main { padding: 16px; }
.ejad-meetings > aside > header { display: grid; gap: 9px; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
.ejad-meetings > aside > header div { display: grid; gap: 3px; }
.ejad-meetings > aside > header span { color: var(--ejad-flow-muted, #60767a); font-size: 11px; }
.ejad-meetings__calendar { display: grid; gap: 7px; padding: 12px; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
.ejad-meetings__calendar > div { display: grid; gap: 6px; }
.ejad-meetings__calendar button { display: grid; gap: 3px; padding: 9px; text-align: start; }
.ejad-meetings__calendar span, .ejad-meetings__calendar small, .ejad-meetings__calendar p { margin: 0; color: var(--ejad-flow-muted, #60767a); font-size: 10px; }
.ejad-meetings__list { display: grid; gap: 7px; padding: 12px; }
.ejad-meetings__list button { display: grid; gap: 5px; padding: 10px; text-align: start; }
.ejad-meetings__list span, .ejad-meetings__list small { color: var(--ejad-flow-muted, #60767a); }
.ejad-meetings > main { overflow: auto; }
.ejad-meetings form { display: grid; gap: 12px; }
.ejad-meetings__fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.ejad-meetings label { display: grid; gap: 5px; font-size: 11px; font-weight: 700; }
.ejad-meetings input, .ejad-meetings select, .ejad-meetings textarea { width: 100%; box-sizing: border-box; }
.ejad-meetings__recording { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); align-items: center; gap: 9px; padding: 10px; border-radius: 8px; background: var(--ejad-surface-soft, #f1f7f5); }
.ejad-meetings__recording label { display: flex; align-items: center; }
.ejad-meetings__recording input[type="checkbox"] { width: auto; }
.ejad-meetings__intelligence { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ejad-meetings__intelligence > div { min-height: 80px; padding: 9px; border-radius: 8px; background: var(--ejad-surface-soft, #f1f7f5); }
.ejad-meetings__intelligence ul { margin: 6px 0 0; padding-inline-start: 18px; color: var(--ejad-flow-muted, #60767a); font-size: 10px; }
.ejad-meetings__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ejad-meetings__actions button[type="submit"] { border-color: var(--ejad-flow-accent, #087A5E); background: var(--ejad-flow-accent, #087A5E); color: #fff; }
.ejad-meetings__status { min-height: 22px; color: var(--ejad-flow-accent-strong, #032E38); font-size: 11px; font-weight: 700; }
.ejad-meetings__meta { color: var(--ejad-flow-muted, #60767a); font-size: 10px; }
.ejad-message-task-action { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: currentColor; font: inherit; font-weight: 700; cursor: pointer; }
.ejad-message-task-action:hover, .ejad-message-task-action:focus-visible { background: var(--ejad-flow-accent-soft, #eaf6f3); color: var(--ejad-flow-accent-strong, #032E38); outline: 2px solid var(--ejad-flow-accent, #087A5E); outline-offset: 1px; }
.ejad-message-task-action[data-status="created"] { background: var(--ejad-flow-accent-soft, #eaf6f3); color: var(--ejad-flow-accent-strong, #032E38); }
.ejad-message-task-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
@media (max-width: 760px) {
    .ejad-conversation-context[data-kind="pages"] { width: 100vw; max-height: 86dvh; }
    .ejad-conversation-context[data-kind="lists"] { width: 100vw; max-height: 90dvh; }
    .ejad-conversation-context[data-kind="workflows"] { width: 100vw; max-height: 90dvh; }
    .ejad-conversation-context[data-kind="meetings"] { width: 100vw; max-height: 92dvh; }
    .ejad-conversation-context[data-kind="insights"] { width: 100vw; max-height: 92dvh; }
    .ejad-conversation-context[data-kind="apps"] { width: 100vw; max-height: 92dvh; }
    .ejad-conversation-context[data-kind="qa"] { width: 100vw; max-height: 92dvh; }
    .ejad-pages { grid-template-columns: 1fr; overflow: auto; }
    .ejad-pages > aside { max-height: 230px; border-inline-end: 0; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
    .ejad-pages > main { overflow: visible; }
    .ejad-pages__fields { grid-template-columns: 1fr; }
    .ejad-pages textarea { min-height: 230px; }
    .ejad-lists > header { align-items: stretch; flex-direction: column; }
    .ejad-lists__view select { flex: 1 1 150px; max-width: none; }
    .ejad-lists__content[data-view="board"] { grid-template-columns: repeat(4, minmax(78vw, 1fr)); scroll-snap-type: x mandatory; }
    .ejad-lists__column { scroll-snap-align: start; }
    .ejad-lists__editor { inset: 0; width: 100%; }
    .ejad-lists__fields { grid-template-columns: 1fr 1fr; }
    .ejad-lists__approval { grid-template-columns: 1fr; }
    .ejad-lists__comment { grid-template-columns: 1fr; }
    .ejad-workflows { grid-template-columns: 1fr; }
    .ejad-workflows > aside { border-inline-end: 0; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
    .ejad-workflows__fields { grid-template-columns: 1fr; }
    .ejad-workflows__runs article { grid-template-columns: 1fr auto; }
    .ejad-meetings { grid-template-columns: 1fr; }
    .ejad-meetings > aside { border-inline-end: 0; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); }
    .ejad-meetings__fields, .ejad-meetings__intelligence, .ejad-meetings__recording { grid-template-columns: 1fr; }
    .ejad-catch-up > header { display: grid; }
    .ejad-catch-up__grid { grid-template-columns: 1fr; }
    .ejad-room-apps__grid { grid-template-columns: 1fr; }
    .ejad-room-qa { padding: 12px; }
    .ejad-room-qa__submit { align-items: stretch; flex-direction: column; }
}

/* v102 — Matrix-backed conversation templates with a draft-only apply flow. */
.ejad-room-header-context__template {
    display: inline-flex; align-items: center; min-height: 28px; max-width: 180px; padding: 4px 9px;
    border: 1px solid var(--ejad-line, #d8e3e0); border-radius: 999px; background: var(--ejad-accent-soft, #eaf6f3);
    color: var(--ejad-accent-strong, #032E38); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.ejad-room-header-context__template:focus-visible { outline: 3px solid color-mix(in srgb, var(--ejad-accent) 28%, transparent); outline-offset: 2px; }
.ejad-conversation-templates { position: fixed; z-index: 2147482520; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(5, 25, 29, .58); backdrop-filter: blur(8px); }
.ejad-conversation-templates > section { position: relative; z-index: 1; box-sizing: border-box; width: min(820px, 100%); max-height: min(90dvh, 850px); overflow: auto; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--ejad-line-strong, #c4d5d9); border-radius: 16px; background: var(--ejad-surface-raised, #fff) !important; color: var(--ejad-ink, #0c2a31); box-shadow: 0 34px 100px rgba(0,0,0,.32); }
.ejad-conversation-templates header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ejad-conversation-templates header strong { display: block; font-size: clamp(20px, 3vw, 28px); }
.ejad-conversation-templates header p { margin: 6px 0 0; color: var(--ejad-muted, #62767a); }
.ejad-conversation-templates header button { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--ejad-line, #d8e3e0) !important; border-radius: 12px; background: var(--ejad-surface-soft, #f3f8f7) !important; color: inherit !important; font-size: 22px; cursor: pointer; }
.ejad-conversation-templates__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-block: 20px 14px; }
.ejad-conversation-templates__grid button { display: grid; gap: 5px; min-height: 88px; padding: 14px; border: 1px solid var(--ejad-line, #d8e3e0) !important; border-radius: 12px; background: var(--ejad-surface-soft, #f3f8f7) !important; color: inherit !important; text-align: start; cursor: pointer; }
.ejad-conversation-templates__grid button[aria-checked="true"] { border-color: var(--ejad-accent, #087A5E) !important; background: var(--ejad-accent-soft, #eaf6f3) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ejad-accent) 18%, transparent); }
.ejad-conversation-templates__grid button strong { font-size: 15px; }
.ejad-conversation-templates__grid button span { color: var(--ejad-muted, #62767a); font-size: 12px; }
.ejad-conversation-templates__preview { padding: 14px; border: 1px solid var(--ejad-line, #d8e3e0); border-radius: 12px; background: var(--ejad-surface-soft, #f3f8f7); }
.ejad-conversation-templates__preview pre { max-height: 230px; margin: 10px 0 0; overflow: auto; color: var(--ejad-ink, #0c2a31); font: 13px/1.6 ui-monospace, monospace; white-space: pre-wrap; }
.ejad-conversation-templates__readonly { color: var(--ejad-muted, #62767a); }
.ejad-conversation-templates__actions { display: flex; gap: 9px; margin-block-start: 16px; }
.ejad-conversation-templates__actions button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--ejad-line, #d8e3e0) !important; border-radius: 8px; background: var(--ejad-surface-soft, #f3f8f7) !important; color: inherit !important; font: inherit; font-weight: 700; cursor: pointer; }
.ejad-conversation-templates__actions [data-template-action="apply"] { border-color: var(--ejad-accent, #087A5E) !important; background: var(--ejad-accent-strong, #032E38) !important; color: #fff !important; }
.ejad-conversation-templates__actions button:disabled { opacity: .45; cursor: not-allowed; }
.ejad-conversation-templates__message { min-height: 20px; margin: 12px 0 0; color: var(--ejad-accent-strong, #032E38); font-weight: 700; }
@media (max-width: 640px) {
    .ejad-room-header-context__template { max-width: 125px; }
    .ejad-conversation-templates { place-items: end stretch; padding: 8px; }
    .ejad-conversation-templates > section { width: 100%; max-height: 92dvh; border-radius: 22px 22px 12px 12px; }
    .ejad-conversation-templates__grid { grid-template-columns: 1fr; }
}

/* v101 — governed external collaboration. Policy is stored as Matrix room
   state, remains visible to every member, and never removes access silently. */
.ejad-room-header-context__external-policy {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    max-width: 220px;
    padding: 4px 9px;
    border: 1px solid var(--ejad-line);
    border-radius: 999px;
    background: var(--ejad-surface-raised);
    color: var(--ejad-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ejad-room-header-context__external-policy[data-status="compliant"] { border-color: rgba(8, 122, 94, .35); color: var(--ejad-accent-strong); }
.ejad-room-header-context__external-policy[data-status="attention"],
.ejad-room-header-context__external-policy[data-status="notConfigured"] { border-color: rgba(183, 111, 25, .4); color: #9b5a16; }
.ejad-room-header-context__external-policy[data-status="expired"] { border-color: rgba(190, 61, 75, .4); color: var(--ejad-danger); }
.ejad-room-header-context__external-policy:focus-visible { outline: 3px solid color-mix(in srgb, var(--ejad-accent) 28%, transparent); outline-offset: 2px; }
.ejad-external-governance {
    position: fixed;
    z-index: 2147482500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(5, 25, 29, .56);
    backdrop-filter: blur(8px);
}
.ejad-external-governance > section {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(760px, 100%);
    max-height: min(88dvh, 820px);
    overflow: auto;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--ejad-line-strong);
    border-radius: 16px;
    background: var(--ejad-surface-raised, #fff) !important;
    color: var(--ejad-ink);
    box-shadow: 0 34px 100px rgba(0, 0, 0, .32);
}
.ejad-external-governance header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-block-end: 18px; }
.ejad-external-governance header strong { display: block; font-size: clamp(20px, 3vw, 28px); line-height: 1.2; }
.ejad-external-governance header p { margin: 7px 0 0; color: var(--ejad-muted); }
.ejad-external-governance header button {
    flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--ejad-line); border-radius: 12px;
    background: var(--ejad-surface-soft); color: var(--ejad-ink); font-size: 22px; cursor: pointer;
}
.ejad-external-governance__status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 18px; padding: 12px 14px; border: 1px solid var(--ejad-line, #d8e3e0) !important; border-radius: 12px; background: var(--ejad-surface-soft, #f3f8f7) !important; }
.ejad-external-governance__status strong { color: var(--ejad-accent-strong); }
.ejad-external-governance__status[data-status="attention"] strong,
.ejad-external-governance__status[data-status="notConfigured"] strong { color: #9b5a16; }
.ejad-external-governance__status[data-status="expired"] strong { color: var(--ejad-danger); }
.ejad-external-governance form > label,
.ejad-external-governance__fields label { display: grid; gap: 7px; min-width: 0; color: var(--ejad-ink); font-weight: 700; }
.ejad-external-governance textarea,
.ejad-external-governance input,
.ejad-external-governance select {
    box-sizing: border-box; width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--ejad-line, #d8e3e0) !important;
    border-radius: 8px; background: var(--ejad-surface-raised, #fff) !important; color: var(--ejad-ink, #0c2a31) !important; font: inherit;
}
.ejad-external-governance textarea:focus,
.ejad-external-governance input:focus,
.ejad-external-governance select:focus { outline: 3px solid color-mix(in srgb, var(--ejad-accent) 24%, transparent); border-color: var(--ejad-accent); }
.ejad-external-governance small,
.ejad-external-governance__readonly { color: var(--ejad-muted); font-size: 12px; }
.ejad-external-governance__fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin-block-start: 14px; }
.ejad-information-governance { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-block-start: 18px; padding: 14px; border: 1px solid var(--ejad-line,#d8e3e0); border-radius: 12px; }
.ejad-information-governance legend { padding-inline: 7px; font-weight: 700; }
.ejad-information-governance label { display: grid; gap: 7px; min-width: 0; font-weight: 700; }
.ejad-information-governance__hold { display: flex !important; grid-column: 1 / -1; align-items: center; }
.ejad-information-governance__hold input { width: 18px; min-height: 18px; }
.ejad-information-governance__test { grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) auto !important; align-items: end; }
.ejad-information-governance__test > span,.ejad-information-governance__test textarea,.ejad-information-governance__test small { grid-column: 1; }
.ejad-information-governance__test button { grid-column: 2; grid-row: 2; min-height: 42px; padding-inline: 13px; border: 1px solid var(--ejad-line,#d8e3e0); border-radius: 8px; background: var(--ejad-surface-soft,#f3f8f7); color: inherit; }
.ejad-external-governance__actions { display: flex; gap: 9px; margin-block: 16px 22px; }
.ejad-external-governance__actions button,
.ejad-external-governance__members article > button { min-height: 38px; padding: 8px 13px; border: 1px solid var(--ejad-line, #d8e3e0) !important; border-radius: 8px; background: var(--ejad-surface-soft, #f3f8f7) !important; color: var(--ejad-ink, #0c2a31) !important; font: inherit; font-weight: 700; cursor: pointer; }
.ejad-external-governance__actions button[type="submit"] { border-color: var(--ejad-accent, #087A5E) !important; background: var(--ejad-accent-strong, #032E38) !important; color: #fff !important; }
.ejad-external-governance__actions button:not([type="submit"]) { border: 1px solid var(--ejad-line, #d8e3e0) !important; background: var(--ejad-surface-soft, #f3f8f7) !important; color: var(--ejad-ink, #0c2a31) !important; }
.ejad-external-governance__members { border-block-start: 1px solid var(--ejad-line); padding-block-start: 16px; }
.ejad-external-governance__members h3 { margin: 0 0 10px; font-size: 15px; }
.ejad-external-governance__members article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 0; border-block-end: 1px solid var(--ejad-line); }
.ejad-external-governance__members article > div { min-width: 0; }
.ejad-external-governance__members article strong,
.ejad-external-governance__members article div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-external-governance__members article div span,
.ejad-external-governance__membership { color: var(--ejad-muted); font-size: 12px; }
.ejad-external-governance__members article[data-violation="true"] .ejad-external-governance__membership { color: var(--ejad-danger); font-weight: 700; }
.ejad-external-governance__members article > button { color: var(--ejad-danger, #b9404b) !important; }
.ejad-external-governance__members button:disabled { opacity: .45; cursor: not-allowed; }
.ejad-external-governance__message { min-height: 20px; margin: 14px 0 0; color: var(--ejad-danger); font-weight: 700; }
body.cpd-theme-dark .ejad-external-governance,
body.cpd-theme-dark-hc .ejad-external-governance { background: rgba(0, 8, 9, .72); }
@media (max-width: 760px) {
    .ejad-room-header-context__external-policy { max-width: 150px; }
    .ejad-external-governance { padding: 8px; place-items: end stretch; }
    .ejad-external-governance > section { width: 100%; max-height: 92dvh; border-radius: 22px 22px 12px 12px; }
    .ejad-external-governance__fields { grid-template-columns: 1fr; }
    .ejad-information-governance { grid-template-columns: 1fr; }
    .ejad-information-governance__test { grid-template-columns: 1fr !important; }
    .ejad-information-governance__test button { grid-column: 1; grid-row: auto; }
    .ejad-external-governance__members article { grid-template-columns: minmax(0, 1fr) auto; }
    .ejad-external-governance__membership { grid-column: 1 / -1; grid-row: 2; }
}

/* v95 — unified command centre, advanced Matrix search and saved views. */
.ejad-command-centre {
    position: fixed;
    z-index: 2147482600;
    inset: 0;
    display: grid;
    place-items: start center;
    padding: clamp(12px, 7vh, 76px) clamp(10px, 3vw, 28px);
}
.ejad-command-centre[hidden] { display: none !important; }
.ejad-command-centre__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(5, 22, 26, .58);
    backdrop-filter: blur(10px) saturate(.9);
}
.ejad-command-centre__dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    width: min(1040px, 100%);
    max-height: min(790px, 88dvh);
    overflow: hidden;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 16px;
    background: var(--ejad-flow-canvas, #f7fbfa);
    color: var(--ejad-flow-ink, #0d2c33);
    box-shadow: 0 34px 110px rgba(4, 27, 32, .44);
}
.ejad-command-centre__dialog > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 13px 17px;
    border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    background: linear-gradient(135deg, rgba(8, 122, 94, .13), var(--ejad-flow-card, #fff));
}
.ejad-command-centre__dialog > header > div { display: grid; gap: 3px; min-width: 0; }
.ejad-command-centre__dialog > header strong { font-size: clamp(17px, 2vw, 22px); font-weight: 700; }
.ejad-command-centre__subtitle { overflow: hidden; color: var(--ejad-flow-muted, #60767a); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ejad-command-centre__dialog kbd { padding: 5px 8px; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14)); border-radius: 8px; background: var(--ejad-flow-card, #fff); color: var(--ejad-flow-muted, #60767a); font-size: 9px; }
.ejad-command-centre__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ejad-flow-muted, #60767a);
    font-size: 25px;
    cursor: pointer;
}
.ejad-command-centre__close:hover { border-color: var(--ejad-flow-line, rgba(18, 68, 79, .14)); background: var(--ejad-flow-card, #fff); }
.ejad-command-centre__search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 14px 16px 8px;
    padding: 7px 8px 7px 13px;
    border: 2px solid rgba(8, 122, 94, .27);
    border-radius: 12px;
    background: var(--ejad-flow-card, #fff);
    box-shadow: 0 8px 24px rgba(8, 39, 46, .055);
}
.ejad-command-centre[dir="rtl"] .ejad-command-centre__search { padding: 7px 13px 7px 8px; }
.ejad-command-centre__search:focus-within { border-color: var(--ejad-flow-accent, #087A5E); box-shadow: 0 0 0 4px rgba(8, 122, 94, .12); }
.ejad-command-centre__search > span { color: var(--ejad-flow-accent-strong, #032E38); font-size: 23px; }
.ejad-command-centre__search input { min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: inherit; font-size: 16px; }
.ejad-command-centre__search button,
.ejad-command-centre__section-title button {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 8px;
    background: var(--ejad-flow-card, #fff);
    color: var(--ejad-flow-accent-strong, #032E38);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.ejad-command-centre__filters { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px 10px; scrollbar-width: none; }
.ejad-command-centre__filters::-webkit-scrollbar { display: none; }
.ejad-command-centre__filters button {
    flex: 0 0 auto;
    min-height: 32px;
    max-width: 250px;
    overflow: hidden;
    padding: 5px 10px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 999px;
    background: var(--ejad-flow-card, #fff);
    color: var(--ejad-flow-muted, #60767a);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.ejad-command-centre__filters button[aria-pressed="true"] { border-color: rgba(8, 122, 94, .4); background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11)); color: var(--ejad-flow-accent-strong, #032E38); }
.ejad-command-centre__layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; min-height: 0; border-block-start: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14)); }
.ejad-command-centre__layout > main,
.ejad-command-centre__layout > aside { min-width: 0; min-height: 0; overflow: auto; padding: 12px 14px 16px; }
.ejad-command-centre__layout > aside { border-inline-start: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14)); background: rgba(8, 122, 94, .035); }
.ejad-command-centre__section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-block-end: 6px; }
.ejad-command-centre__section-title strong,
.ejad-command-centre__saved-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ejad-command-centre__results { display: grid; gap: 4px; }
.ejad-command-centre__result {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.ejad-command-centre__result:hover,
.ejad-command-centre__result:focus-visible { border-color: rgba(8, 122, 94, .26); outline: 0; background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11)); }
.ejad-command-centre__result-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--ejad-flow-card, #fff); color: var(--ejad-flow-accent-strong, #032E38); font-size: 16px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--ejad-flow-line, rgba(18, 68, 79, .14)); }
.ejad-command-centre__result > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.ejad-command-centre__result strong,
.ejad-command-centre__result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-command-centre__result strong { font-size: 12px; }
.ejad-command-centre__result small { color: var(--ejad-flow-muted, #60767a); font-size: 9px; }
.ejad-command-centre__result em { padding: 4px 7px; border-radius: 999px; background: rgba(8, 122, 94, .08); color: var(--ejad-flow-muted, #60767a); font-size: 8px; font-style: normal; font-weight: 700; }
.ejad-command-centre__empty { padding: 46px 18px; color: var(--ejad-flow-muted, #60767a); text-align: center; }
.ejad-command-centre__saved { display: grid; gap: 6px; margin-block-start: 10px; }
.ejad-command-centre__saved > div { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 4px; }
.ejad-command-centre__saved button { min-width: 0; min-height: 34px; overflow: hidden; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14)); border-radius: 8px; background: var(--ejad-flow-card, #fff); color: inherit; font-size: 9px; text-align: start; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ejad-command-centre__saved button:last-child { text-align: center; }
.ejad-command-centre__saved p { color: var(--ejad-flow-muted, #60767a); font-size: 10px; line-height: 1.55; }
.ejad-command-centre__status { min-height: 22px; padding: 4px 16px 7px; color: var(--ejad-danger, #b9404b); font-size: 10px; }
body.ejad-command-centre-open { overflow: hidden; }
body.cpd-theme-dark .ejad-command-centre__dialog,
body.cpd-theme-dark-hc .ejad-command-centre__dialog { background: #0a2126; }
body.cpd-theme-dark .ejad-command-centre__dialog > header,
body.cpd-theme-dark-hc .ejad-command-centre__dialog > header { background: linear-gradient(135deg, rgba(19, 232, 176, .13), #0d2c33); }
@media (max-width: 720px) {
    .ejad-command-centre { align-items: end; padding: 0; }
    .ejad-command-centre__dialog { width: 100%; max-height: none; height: min(92dvh, 820px); border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
    .ejad-command-centre__dialog > header { min-height: 66px; padding: 10px 12px; }
    .ejad-command-centre__dialog kbd { display: none; }
    .ejad-command-centre__subtitle { white-space: normal; }
    .ejad-command-centre__search { margin-inline: 10px; }
    .ejad-command-centre__filters { flex-wrap: wrap; max-height: 78px; overflow-y: auto; padding-inline: 10px; }
    .ejad-command-centre__layout { grid-template-columns: 1fr; }
    .ejad-command-centre__layout > aside { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ejad-command-centre__backdrop { backdrop-filter: none; } }

/* v115 — governed application directory and integration health. */
.ejad-app-directory { position: fixed; inset: 0; z-index: 10055; display: grid; place-items: center; padding: 28px; color: var(--ejad-flow-ink, #113b45); }
.ejad-app-directory[hidden] { display: none !important; }
.ejad-app-directory__backdrop { position: absolute; inset: 0; border: 0; background: rgba(5, 29, 34, .54); backdrop-filter: blur(10px); }
.ejad-app-directory > section { position: relative; display: grid; grid-template-rows: auto auto auto auto minmax(0,1fr); width: min(1120px, 96vw); max-height: min(880px, 92dvh); overflow: hidden; border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); border-radius: 16px; background: var(--ejad-flow-surface, #f8fbfa); box-shadow: 0 30px 90px rgba(4, 33, 40,.28); }
.ejad-app-directory > section > header { display: grid; grid-template-columns: minmax(0,1fr) auto 40px; align-items: center; gap: 10px; padding: 16px 18px; border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79,.14)); background: linear-gradient(135deg,rgba(8, 122, 94,.12),rgba(255,255,255,.94)); }
.ejad-app-directory > section > header > div { display: grid; gap: 3px; min-width: 0; }
.ejad-app-directory > section > header strong { font-size: clamp(17px,2vw,23px); font-weight: 700; }
.ejad-app-directory__subtitle { color: var(--ejad-flow-muted,#60767a); font-size: 11px; }
.ejad-app-directory button { min-height: 36px; border: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.14)); border-radius: 8px; background: var(--ejad-flow-card,#fff); color: inherit; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.ejad-app-directory button:hover,.ejad-app-directory button:focus-visible { border-color: var(--ejad-flow-accent,#087A5E); outline: 0; box-shadow: 0 0 0 3px rgba(8, 122, 94,.13); }
.ejad-app-directory__close { width: 40px; font-size: 20px !important; }
.ejad-app-directory__filters { display: flex; gap: 6px; overflow-x: auto; padding: 11px 18px 5px; }
.ejad-app-directory__filters button { flex: 0 0 auto; padding-inline: 13px; border-radius: 999px; }
.ejad-app-directory__filters button[aria-pressed="true"] { border-color: transparent; background: var(--ejad-flow-accent,#087A5E); color: #fff; }
.ejad-app-directory__health { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 7px 18px 4px; padding: 9px 12px; border-radius: 8px; background: rgba(8, 122, 94,.09); color: var(--ejad-flow-accent-strong,#032E38); font-size: 10px; }
.ejad-app-directory__health[data-status="failed"] { background: rgba(185,64,75,.1); color: var(--ejad-danger,#b9404b); }
.ejad-app-directory__health time { color: var(--ejad-flow-muted,#60767a); }
.ejad-integration-health { display: grid; gap: 8px; margin: 4px 18px; padding: 11px 12px; border: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.12)); border-radius: 12px; background: var(--ejad-flow-card,#fff); }
.ejad-integration-health > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ejad-integration-health > header strong { font-size: 11px; }
.ejad-integration-health > header span { color: var(--ejad-flow-muted,#60767a); font-size: 8px; }
.ejad-integration-health__probes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.ejad-integration-health__probes article { display: grid; grid-template-columns: minmax(120px,1fr) repeat(3,auto); align-items: center; gap: 9px; min-width: 0; padding: 8px 9px; border-radius: 8px; background: rgba(8, 122, 94,.07); }
.ejad-integration-health__probes article[data-status="failed"],.ejad-integration-health__probes article[data-status="rateLimited"] { background: rgba(185,64,75,.09); }
.ejad-integration-health__probes article > div { display: grid; min-width: 0; }
.ejad-integration-health__probes strong { font-size: 9px; }
.ejad-integration-health__probes small { overflow: hidden; color: var(--ejad-flow-muted,#60767a); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ejad-integration-health__probes span { font-size: 8px; white-space: nowrap; }
.ejad-integration-health__providers { display: flex; flex-wrap: wrap; gap: 6px; }
.ejad-integration-health__providers span { padding: 4px 7px; border-radius: 999px; background: rgba(106, 121, 125,.1); color: var(--ejad-flow-muted,#60767a); font-size: 8px; font-weight: 700; }
.ejad-integration-health__providers span[data-status="configured"] { background: rgba(8, 122, 94,.11); color: var(--ejad-flow-accent-strong,#032E38); }
.ejad-app-directory__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 11px; min-height: 0; overflow: auto; padding: 12px 18px 20px; }
.ejad-app-directory__card { display: grid; gap: 13px; padding: 14px; border: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.14)); border-radius: 12px; background: var(--ejad-flow-card,#fff); box-shadow: 0 8px 26px rgba(16, 60, 70,.06); }
.ejad-app-directory__card > header { display: flex; align-items: center; gap: 11px; }
.ejad-app-directory__mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(145deg,var(--ejad-flow-accent,#087A5E),#13e9b1); color: #fff; font-size: 12px; font-weight: 700; }
.ejad-app-directory__card > header > div { display: grid; gap: 3px; min-width: 0; }
.ejad-app-directory__state { width: max-content; padding: 3px 7px; border-radius: 999px; background: rgba(106, 121, 125,.11); color: var(--ejad-flow-muted,#60767a); font-size: 8px; font-weight: 700; }
.ejad-app-directory__card[data-state="connected"] .ejad-app-directory__state,.ejad-app-directory__card[data-state="available"] .ejad-app-directory__state { background: rgba(8, 122, 94,.12); color: var(--ejad-flow-accent-strong,#032E38); }
.ejad-app-directory__card dl { display: grid; gap: 7px; margin: 0; }
.ejad-app-directory__card dl > div { display: grid; grid-template-columns: minmax(85px,.32fr) minmax(0,1fr); gap: 10px; padding-block-start: 7px; border-block-start: 1px solid var(--ejad-flow-line,rgba(18, 68, 79,.1)); }
.ejad-app-directory__card dt,.ejad-app-directory__card dd { margin: 0; font-size: 9px; line-height: 1.45; }
.ejad-app-directory__card dt { color: var(--ejad-flow-muted,#60767a); font-weight: 700; }
.ejad-app-directory__card a { color: var(--ejad-flow-accent-strong,#032E38); }
body.ejad-app-directory-open { overflow: hidden; }
body.cpd-theme-dark .ejad-app-directory > section,body.cpd-theme-dark-hc .ejad-app-directory > section { background: #0a2126; }
body.cpd-theme-dark .ejad-app-directory > section > header,body.cpd-theme-dark-hc .ejad-app-directory > section > header { background: linear-gradient(135deg,rgba(19, 232, 176,.13),#0d2c33); }
@media (max-width: 680px) { .ejad-app-directory { align-items: end; padding: 0; } .ejad-app-directory > section { width: 100%; height: min(94dvh,900px); max-height: none; border-width: 1px 0 0; border-radius: 22px 22px 0 0; } .ejad-app-directory > section > header { grid-template-columns: minmax(0,1fr) 38px; padding: 12px; } .ejad-app-directory > section > header [data-ejad-app-action="refresh"] { grid-column: 1 / -1; grid-row: 2; } .ejad-app-directory__close { grid-column: 2; grid-row: 1; } .ejad-app-directory__subtitle { white-space: normal; } .ejad-app-directory__filters { padding-inline: 12px; } .ejad-app-directory__health { align-items: flex-start; flex-direction: column; margin-inline: 12px; } .ejad-integration-health { margin-inline: 12px; } .ejad-integration-health > header { align-items: flex-start; flex-direction: column; } .ejad-integration-health__probes { grid-template-columns: 1fr; } .ejad-integration-health__probes article { grid-template-columns: 1fr 1fr; } .ejad-integration-health__probes article > div { grid-column: 1 / -1; } .ejad-integration-health__probes span { white-space: normal; } .ejad-app-directory__grid { grid-template-columns: 1fr; padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .ejad-app-directory__backdrop { backdrop-filter: none; } }

/* v96 — room purpose, ownership, guest posture and notification mode. */
.ejad-room-header-context { flex-wrap: wrap; }
.ejad-room-header-context > .ejad-room-header-context__governance {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    gap: 7px;
    max-width: min(72vw, 760px);
    overflow: hidden;
    color: var(--ejad-flow-muted, #60767a);
    /* 9px is not a reading size. The topic shares the supporting line's 12px
       and drops a weight, so it reads as context rather than as a fourth
       badge competing with the three beside it. */
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
}
.ejad-room-header-context > .ejad-room-header-context__governance::before { display: none; content: none; }
.ejad-room-header-context__governance > span { display: inline-flex; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-room-header-context__governance > span + span::before {
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    margin-inline: 2px 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    opacity: .48;
}
.ejad-room-header-context__topic { flex: 1 1 220px; }
.ejad-room-header-context__owner { flex: 0 1 180px; }
.ejad-room-header-context__guests,
.ejad-room-header-context__notification { flex: 0 1 auto; }
.ejad-room-header-context__guests[data-allowed="true"] {
    padding-inline: 6px;
    border: 1px solid rgba(180, 111, 38, .28);
    border-radius: 999px;
    background: rgba(180, 111, 38, .08);
    color: #9a5a16;
    font-weight: 700;
}
.ejad-room-header-context__notification[data-mode="muted"] { color: var(--ejad-muted, #587177); font-weight: 700; }
.ejad-room-header-context__notification[data-mode="mentions"] { color: var(--ejad-flow-accent-strong, #032E38); font-weight: 700; }
@media (max-width: 850px) {
    .ejad-room-header-context > .ejad-room-header-context__governance { max-width: 66vw; }
    .ejad-room-header-context > .ejad-room-header-context__governance > .ejad-room-header-context__owner,
    .ejad-room-header-context > .ejad-room-header-context__governance > .ejad-room-header-context__guests:not([data-allowed="true"]),
    .ejad-room-header-context > .ejad-room-header-context__governance > .ejad-room-header-context__notification { display: none; }
}
@media (max-width: 520px) {
    .ejad-room-header-context > .ejad-room-header-context__governance { max-width: 56vw; }
    .ejad-room-header-context__topic { max-width: 170px; }
}

/* v97 — focused thread context with participants, unread position and source. */
.ejad-thread-context {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    background: linear-gradient(135deg, var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11)), var(--ejad-flow-card, #fff));
    color: var(--ejad-flow-ink, #0d2c33);
}
.ejad-thread-context > div:first-child,
.ejad-thread-context > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ejad-thread-context > div:first-child strong { font-size: 12px; font-weight: 700; }
.ejad-thread-context > div:first-child span,
.ejad-thread-context__unread { color: var(--ejad-flow-muted, #60767a); font-size: 9px; }
.ejad-thread-context__participants { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.ejad-thread-context__participants::-webkit-scrollbar { display: none; }
.ejad-thread-context__participants > span {
    flex: 0 0 auto;
    max-width: 145px;
    overflow: hidden;
    padding: 4px 7px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 999px;
    background: var(--ejad-flow-card, #fff);
    color: var(--ejad-flow-muted, #60767a);
    font-size: 8px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ejad-thread-context > div:last-child a {
    color: var(--ejad-flow-accent-strong, #032E38);
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}
.ejad-thread-context > div:last-child a:hover { text-decoration: underline; }
.ejad-thread-context__unread:not(:empty) { padding-inline-start: 8px; border-inline-start: 3px solid var(--ejad-flow-accent, #087A5E); }
body.cpd-theme-dark .ejad-thread-context,
body.cpd-theme-dark-hc .ejad-thread-context { background: linear-gradient(135deg, rgba(19, 232, 176, .13), #0d2c33); }
@media (max-width: 520px) {
    .ejad-thread-context { padding: 8px 10px; }
    .ejad-thread-context > div:last-child { align-items: flex-start; flex-direction: column; }
}

/* Element sanitises class names in the managed home document. These structural
   selectors mirror the audited home.html topology and preserve the daily work
   centre without relaxing the upstream HTML sanitizer. */
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child {
  margin-bottom: 26px;
  padding: 18px;
  border: 1px solid rgba(19, 233, 177, .16);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(14, 48, 56, .92), rgba(7, 29, 35, .78));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
}
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child h2 { margin: 0; font-size: 15px; }
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child p { margin: 3px 0 0; color: #9ab3b8; font-size: 10px; }
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child time { color: #13e9b1; font-size: 11px; font-weight: 700; }
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) > button,
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) > a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 70px;
  padding: 11px;
  border: 1px solid rgba(19, 233, 177, .14);
  border-radius: 12px;
  background: rgba(6, 25, 30, .58);
  color: #f5fbf9 !important;
  box-shadow: none;
  font: inherit;
  text-align: start;
  text-decoration: none !important;
  cursor: pointer;
}
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) > button:hover,
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) > a:hover {
  transform: translateY(-2px);
  border-color: rgba(19, 233, 177, .5);
  background: rgba(16, 54, 63, .76);
}
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) > * > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(19, 233, 177, .12);
  border-radius: 12px;
  background: rgba(19, 233, 177, .1);
  color: #13e9b1;
  font-size: 17px;
  font-weight: 700;
}
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) > * > span:nth-child(2) { min-width: 0; }
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child small { display: block; margin-top: 3px; overflow: hidden; color: #9ab3b8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child b { display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 6px; border-radius: 999px; background: #c63e51; color: #fff; font-size: 11px; }
.mx_HomePage_body > div > div > div:nth-child(2) > section:first-child kbd { padding: 4px 6px; border: 1px solid rgba(19, 233, 177, .16); border-radius: 8px; color: #9ab3b8; font: 9px/1.2 "Segoe UI", sans-serif; }

/* Restore the original room/action grids after inserting the overview as the
   first child of the authenticated home content. */
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) { margin-top: 24px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child {
  border-color: rgba(3, 46, 56, .16);
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(231, 245, 241, .92));
  box-shadow: 0 18px 42px rgba(13, 46, 53, .09);
}
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child h2,
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child strong { color: #0a242a; }
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child p,
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child small { color: #567277; }
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) > button,
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2) > a { border-color: rgba(3, 46, 56, .14); background: rgba(255, 255, 255, .82); color: #0a242a !important; }

@media (max-width: 900px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > a:first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child { padding: 13px; border-radius: 12px; }
  .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child > div:nth-child(2),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) { grid-template-columns: 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > a:first-child { grid-column: auto; }
  .mx_HomePage_body > div > div > div:nth-child(2) > section:first-child time { display: none; }
}

/* v22: keep the room identity as one RTL group. The avatar and title start at
   the right edge while room actions remain grouped at the opposite edge. */
html[dir="rtl"] .mx_RoomHeader {
    gap: 8px;
}
html[dir="rtl"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
    padding: 0;
}

/* v22 Midnight palette: layered slate/navy surfaces, readable secondary text
   and restrained teal accents instead of a flat near-black canvas. */
body.cpd-theme-dark,
body.cpd-theme-dark-hc {
    --ejad-dark-canvas: #07191d;
    --ejad-dark-surface: #091f24;
    --ejad-dark-surface-raised: #0c2a31;
    --ejad-dark-surface-active: #0f343d;
    --ejad-dark-border: rgba(19, 233, 177, .2);
    --ejad-dark-text: #eef6f4;
    --ejad-dark-muted: #aebec1;
    background: var(--ejad-dark-canvas);
    color: var(--ejad-dark-text);
}
body.cpd-theme-dark .mx_MatrixChat,
body.cpd-theme-dark-hc .mx_MatrixChat,
body.cpd-theme-dark .mx_RoomView,
body.cpd-theme-dark-hc .mx_RoomView,
body.cpd-theme-dark .mx_RoomView_body,
body.cpd-theme-dark-hc .mx_RoomView_body,
body.cpd-theme-dark .mx_RoomView_MessageList,
body.cpd-theme-dark-hc .mx_RoomView_MessageList {
    background: radial-gradient(circle at 85% 8%, rgba(8, 122, 94, .1), transparent 30%),
                linear-gradient(145deg, #091e23, var(--ejad-dark-canvas));
}
body.cpd-theme-dark .mx_LeftPanel,
body.cpd-theme-dark-hc .mx_LeftPanel,
body.cpd-theme-dark .mx_SpacePanel,
body.cpd-theme-dark-hc .mx_SpacePanel,
body.cpd-theme-dark .mx_RightPanel,
body.cpd-theme-dark-hc .mx_RightPanel {
    border-color: var(--ejad-dark-border) !important;
    background: var(--ejad-dark-surface) !important;
}
body.cpd-theme-dark .mx_SpacePanel,
body.cpd-theme-dark-hc .mx_SpacePanel {
    background: #061519 !important;
}
body.cpd-theme-dark .mx_RoomHeader,
body.cpd-theme-dark-hc .mx_RoomHeader,
body.cpd-theme-dark .mx_MessageComposer,
body.cpd-theme-dark-hc .mx_MessageComposer,
body.cpd-theme-dark .mx_UserMenu,
body.cpd-theme-dark-hc .mx_UserMenu,
body.cpd-theme-dark .mx_ContextualMenu,
body.cpd-theme-dark-hc .mx_ContextualMenu,
body.cpd-theme-dark .mx_IconizedContextMenu,
body.cpd-theme-dark-hc .mx_IconizedContextMenu {
    border-color: var(--ejad-dark-border) !important;
    background: color-mix(in srgb, var(--ejad-dark-surface-raised) 96%, transparent) !important;
    color: var(--ejad-dark-text);
}
body.cpd-theme-dark .mx_RoomTile,
body.cpd-theme-dark-hc .mx_RoomTile {
    color: var(--ejad-dark-muted);
}
body.cpd-theme-dark .mx_RoomTile:hover,
body.cpd-theme-dark-hc .mx_RoomTile:hover {
    background: rgba(93, 154, 166, .09) !important;
}
body.cpd-theme-dark .mx_RoomTile_selected,
body.cpd-theme-dark-hc .mx_RoomTile_selected {
    background: linear-gradient(135deg, var(--ejad-dark-surface-active), #0e3038) !important;
    color: var(--ejad-dark-text) !important;
    box-shadow: inset 3px 0 0 #13e9b1, 0 8px 22px rgba(0, 0, 0, .18);
}
html[dir="rtl"] body.cpd-theme-dark .mx_RoomTile_selected,
html[dir="rtl"] body.cpd-theme-dark-hc .mx_RoomTile_selected {
    box-shadow: inset -3px 0 0 #13e9b1, 0 8px 22px rgba(0, 0, 0, .18);
}
body.cpd-theme-dark .mx_RoomTile_selected *,
body.cpd-theme-dark-hc .mx_RoomTile_selected * { color: inherit; }
body.cpd-theme-dark .mx_HomePage_body > div,
body.cpd-theme-dark-hc .mx_HomePage_body > div {
    color: var(--ejad-dark-text);
    background: radial-gradient(circle at 14% 10%, rgba(8, 122, 94, .18), transparent 34%),
                radial-gradient(circle at 88% 88%, rgba(56, 105, 145, .15), transparent 32%),
                linear-gradient(145deg, #0b252b, #081b1f);
}
body.cpd-theme-dark .mx_HomePage_body > div > div > div:nth-child(2) a,
body.cpd-theme-dark-hc .mx_HomePage_body > div > div > div:nth-child(2) a {
    border-color: rgba(19, 233, 177, .22);
    background: linear-gradient(145deg, rgba(15, 50, 58, .98), rgba(11, 39, 45, .98));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
}
body.cpd-theme-dark .mx_HomePage_body > div > div > div:nth-child(2) a:hover,
body.cpd-theme-dark-hc .mx_HomePage_body > div > div > div:nth-child(2) a:hover {
    border-color: rgba(19, 233, 177, .55);
    background: #203946;
}
body.cpd-theme-dark .mx_HomePage_body p,
body.cpd-theme-dark-hc .mx_HomePage_body p,
body.cpd-theme-dark .mx_HomePage_body > div > div > div:nth-child(2) a > span:nth-child(2) > span,
body.cpd-theme-dark-hc .mx_HomePage_body > div > div > div:nth-child(2) a > span:nth-child(2) > span {
    color: var(--ejad-dark-muted);
}
body.cpd-theme-dark .ejad-quick-controls,
body.cpd-theme-dark-hc .ejad-quick-controls,
body.cpd-theme-dark .ejad-unread-center__indicator,
body.cpd-theme-dark-hc .ejad-unread-center__indicator,
body.cpd-theme-dark .ejad-unread-center__panel,
body.cpd-theme-dark-hc .ejad-unread-center__panel,
body.cpd-theme-dark .ejad-unread-center__toast,
body.cpd-theme-dark-hc .ejad-unread-center__toast {
    border-color: rgba(19, 233, 177, .3);
    background: rgba(11, 39, 45, .97);
    color: var(--ejad-dark-text);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .035);
}

/* Was two html[dir="rtl"] rules forcing direction:rtl and text-align:right.
   Direction is inherited, and `start` is right in Arabic and left in English
   without anyone having to say so. */
.mx_RoomListItemView,
.mx_RoomListItemView > div:first-child {
    text-align: start;
}
.mx_RoomListItemView > div:first-child {
    flex-direction: row;
    align-items: center;
}

@media (max-width: 760px) {
    .ejad-quick-controls,
    html:not([dir="rtl"]):not([lang^="ar"]) .ejad-quick-controls {
        inset-block-start: 50%;
        inset-block-end: auto;
        left: max(5px, env(safe-area-inset-left));
        right: auto;
        flex-direction: column;
        width: 58px;
        padding: 4px;
        border-radius: 12px;
        transform: translateY(-50%);
    }
    html[dir="rtl"] .ejad-quick-controls,
    html[lang^="ar"] .ejad-quick-controls {
        right: max(5px, env(safe-area-inset-right));
        left: auto;
    }
    .ejad-quick-controls__button {
        grid-template-columns: 1fr;
        width: 50px;
        min-width: 50px;
        min-height: 48px;
        padding: 4px 2px;
    }

    /* Authentication uses a centred card which nearly fills narrow screens.
       Keep product controls in their own footer rail instead of covering
       username, password or action controls. */
    body:has(.mx_AuthPage_modal) .ejad-quick-controls,
    html[dir="rtl"] body:has(.mx_AuthPage_modal) .ejad-quick-controls,
    html[lang^="ar"] body:has(.mx_AuthPage_modal) .ejad-quick-controls,
    html:not([dir="rtl"]):not([lang^="ar"]) body:has(.mx_AuthPage_modal) .ejad-quick-controls {
        position: absolute;
        inset-block-start: max(620px, calc(100vh - 154px));
        inset-block-end: auto;
        left: 50%;
        right: auto;
        flex-direction: row;
        width: auto;
        max-width: calc(100vw - 24px);
        padding: 4px;
        border-radius: 12px;
        transform: translateX(-50%);
    }
    body:has(.mx_AuthPage_modal) .ejad-quick-controls__button {
        grid-template-columns: 20px auto;
        width: auto;
        min-width: 74px;
        min-height: 42px;
        padding: 5px 9px;
    }
    body:has(.mx_AuthPage_modal) .ejad-quick-controls__divider {
        width: 1px;
        height: 26px;
        margin: 8px 0;
    }
}

/* v32 sound centre -------------------------------------------------------
   The rail always exposes the current phone-style alert mode. The dialog is
   intentionally owned by this product layer so it remains stable when the
   upstream settings navigation changes. */
.ejad-quick-controls__button[data-ejad-action="sound"][data-mode="general"] {
    color: #087A5E;
    background: rgba(19, 232, 176, .1);
}
.ejad-sound-icon__mute { display: none; }
[data-mode="silent"] .ejad-sound-icon__mute { display: block; stroke: #c64d55; stroke-width: 2.2; }
.ejad-sound-settings__segments > button[data-ejad-sound-mode="silent"] .ejad-sound-icon__mute { display: block; }
.ejad-quick-controls__button[data-ejad-action="sound"][data-mode="silent"] { color: #9a3d45; }
.ejad-quick-controls {
    transition: width .2s ease, padding .2s ease, border-radius .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ejad-quick-controls__button > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ejad-quick-controls__toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.ejad-quick-controls__toggle { min-height: 38px; color: #60787d; }
.ejad-quick-controls--collapsed {
    width: 46px;
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(7, 28, 33, .16);
}
.ejad-quick-controls--collapsed > :not(.ejad-quick-controls__toggle):not(.ejad-quick-controls__status) { display: none !important; }
.ejad-quick-controls--collapsed .ejad-quick-controls__toggle { width: 36px; min-width: 36px; min-height: 38px; padding: 5px; color: #087A5E; }
.ejad-quick-controls--collapsed::after {
    content: "";
    position: absolute;
    inset-block-start: 5px;
    inset-inline-end: 5px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--cpd-color-bg-canvas-default, #fff);
    border-radius: 50%;
    background: #13E8B0;
    box-shadow: 0 1px 5px rgba(7, 28, 33, .22);
}
.ejad-quick-controls--collapsed[data-sound-mode="silent"]::after { background: #cf5a63; }

.ejad-sound-settings[hidden] { display: none !important; }
.ejad-sound-settings {
    position: fixed;
    z-index: 9800;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    font-family: "EJAD Cairo", "Cairo", system-ui, sans-serif;
}
.ejad-sound-settings__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(4, 20, 24, .48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: default;
}
.ejad-sound-settings__dialog {
    position: relative;
    width: min(590px, calc(100vw - 44px));
    max-height: min(780px, calc(100dvh - 44px));
    overflow: hidden auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(3, 46, 56, .2);
    border-radius: 16px;
    background: #fbfdfc;
    color: #0d2d34;
    box-shadow: 0 28px 90px rgba(5, 25, 30, .28), inset 0 1px rgba(255, 255, 255, .9);
}
.ejad-sound-settings__header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 13px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(3, 46, 56, .13);
    background: rgba(251, 253, 252, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.ejad-sound-settings__hero-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(19, 233, 177, .2), rgba(8, 122, 94, .08));
    color: #087A5E;
}
.ejad-sound-settings__hero-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ejad-sound-settings__header > div { display: grid; gap: 3px; min-width: 0; }
.ejad-sound-settings__header strong { font-size: 18px; line-height: 1.35; }
.ejad-sound-settings__subtitle { color: #637c81; font-size: 11px; line-height: 1.55; }
.ejad-sound-settings__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(53, 91, 99, .18);
    border-radius: 12px;
    background: #fff;
    color: #4b666b;
    font: 500 23px/1 system-ui, sans-serif;
    cursor: pointer;
}
.ejad-sound-settings__close:hover { background: #edf7f4; color: #032E38; }
.ejad-sound-settings__body { display: grid; gap: 14px; padding: 18px 22px 22px; }
.ejad-sound-settings__mode { display: grid; gap: 9px; }
.ejad-sound-settings__mode > strong { color: #425e63; font-size: 11px; }
.ejad-sound-settings__segments { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ejad-sound-settings__segments > button {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: "icon title" "icon description";
    align-items: center;
    gap: 2px 10px;
    min-height: 78px;
    padding: 12px;
    border: 1px solid rgba(8, 122, 94, .16);
    border-radius: 12px;
    background: #fff;
    color: #0f343c;
    text-align: start;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ejad-sound-settings__segments > button:hover { transform: translateY(-1px); border-color: rgba(8, 122, 94, .4); }
.ejad-sound-settings__segments > button[aria-pressed="true"] {
    border-color: #087A5E;
    background: linear-gradient(145deg, #effaf7, #e6f4f0);
    box-shadow: 0 7px 22px rgba(3, 46, 56, .1), inset 0 0 0 1px rgba(8, 122, 94, .08);
}
.ejad-sound-settings__segments > button[data-ejad-sound-mode="silent"][aria-pressed="true"] {
    border-color: rgba(185, 71, 81, .42);
    background: #fff4f4;
}
.ejad-sound-settings__segments > button > span { grid-area: icon; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #edf7f4; color: #087A5E; }
.ejad-sound-settings__segments > button[data-ejad-sound-mode="silent"] > span { color: #b94751; background: #fff0f0; }
.ejad-sound-settings__segments svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ejad-sound-settings__segments strong { grid-area: title; font: 700 13px/1.35 "EJAD Cairo", "Cairo", sans-serif; }
.ejad-sound-settings__segments small { grid-area: description; color: #697e83; font-size: 9px; line-height: 1.45; }

.ejad-sound-settings__channel {
    display: grid;
    gap: 15px;
    padding: 15px;
    border: 1px solid rgba(8, 122, 94, .14);
    border-radius: 12px;
    background: #fff;
    transition: opacity .16s ease, background .16s ease;
}
.ejad-sound-settings__channel--disabled { background: #f7f9f8; }
.ejad-sound-settings__channel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ejad-sound-settings__channel-heading > div { display: grid; gap: 3px; min-width: 0; }
.ejad-sound-settings__channel-heading > div strong { font-size: 13px; }
.ejad-sound-settings__channel-heading > div span { color: #657d82; font-size: 9px; line-height: 1.5; }
.ejad-sound-settings__switch { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; cursor: pointer; }
.ejad-sound-settings__switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ejad-sound-settings__switch > span { position: relative; width: 39px; height: 23px; border-radius: 999px; background: #cbd5d7; box-shadow: inset 0 0 0 1px rgba(40, 70, 76, .1); transition: background .16s ease; }
.ejad-sound-settings__switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(14, 49, 57, .22); transition: transform .16s ease; }
.ejad-sound-settings__switch input:checked + span { background: #087A5E; }
.ejad-sound-settings__switch input:checked + span::after { transform: translateX(16px); }
[dir="rtl"] .ejad-sound-settings__switch > span::after { left: auto; right: 3px; }
[dir="rtl"] .ejad-sound-settings__switch input:checked + span::after { transform: translateX(-16px); }
.ejad-sound-settings__switch input:focus-visible + span { outline: 3px solid rgba(8, 122, 94, .3); outline-offset: 2px; }
.ejad-sound-settings__switch em { color: #4f696f; font-size: 9px; font-style: normal; }
.ejad-sound-settings__tone {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 12px;
    background: #f3f8f7;
}
.ejad-sound-settings__tone label { color: #526c72; font-size: 10px; font-weight: 600; }
.ejad-sound-settings__tone select {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 34px 7px 11px;
    border: 1px solid rgba(8, 122, 94, .22);
    border-radius: 8px;
    background: #fff;
    color: #0f343c;
    font: 700 10px/1.4 "EJAD Cairo", "Cairo", system-ui, sans-serif;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
[dir="rtl"] .ejad-sound-settings__tone select { padding-right: 11px; padding-left: 34px; }
.ejad-sound-settings__tone select:hover { border-color: rgba(8, 122, 94, .48); }
.ejad-sound-settings__tone select:focus-visible { outline: 0; border-color: #087A5E; box-shadow: 0 0 0 3px rgba(8, 122, 94, .15); }
.ejad-sound-settings__level { display: grid; grid-template-columns: auto minmax(90px, 1fr) 40px auto; align-items: center; gap: 10px; }
.ejad-sound-settings__level label { color: #526c72; font-size: 10px; }
.ejad-sound-settings__level input[type="range"] { width: 100%; min-width: 0; accent-color: #087A5E; cursor: pointer; }
.ejad-sound-settings__level output { color: #3c5b61; font: 700 10px/1 system-ui, sans-serif; text-align: center; }
.ejad-sound-settings__level button {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(8, 122, 94, .22);
    border-radius: 8px;
    background: #edf7f4;
    color: #032E38;
    font: 700 10px/1.3 "EJAD Cairo", "Cairo", sans-serif;
    white-space: nowrap;
    cursor: pointer;
}
.ejad-sound-settings__level button:hover { border-color: #087A5E; background: #e3f3ef; }
.ejad-sound-settings__note { margin: 1px 0 0; padding: 11px 13px; border-radius: 12px; background: #f0f6f4; color: #5c7479; font-size: 9px; line-height: 1.6; }
.ejad-sound-settings__status { min-height: 16px; margin: -5px 1px 0; color: #087A5E; font-size: 9px; line-height: 1.5; }
.ejad-sound-settings__status[data-state="error"] { color: #b94751; }

body.cpd-theme-dark .ejad-sound-settings__dialog,
body.cpd-theme-dark-hc .ejad-sound-settings__dialog { border-color: rgba(19, 233, 177, .22); background: #0b262b; color: #eef8f5; box-shadow: 0 30px 100px rgba(0, 0, 0, .56); }
body.cpd-theme-dark .ejad-sound-settings__header,
body.cpd-theme-dark-hc .ejad-sound-settings__header { border-color: rgba(137, 184, 194, .13); background: rgba(11, 38, 43, .96); }
body.cpd-theme-dark .ejad-sound-settings__subtitle,
body.cpd-theme-dark-hc .ejad-sound-settings__subtitle,
body.cpd-theme-dark .ejad-sound-settings__channel-heading > div span,
body.cpd-theme-dark-hc .ejad-sound-settings__channel-heading > div span,
body.cpd-theme-dark .ejad-sound-settings__segments small,
body.cpd-theme-dark-hc .ejad-sound-settings__segments small { color: #a9bbbf; }
body.cpd-theme-dark .ejad-sound-settings__close,
body.cpd-theme-dark-hc .ejad-sound-settings__close,
body.cpd-theme-dark .ejad-sound-settings__segments > button,
body.cpd-theme-dark-hc .ejad-sound-settings__segments > button,
body.cpd-theme-dark .ejad-sound-settings__channel,
body.cpd-theme-dark-hc .ejad-sound-settings__channel { border-color: rgba(132, 184, 194, .17); background: #0e3037; color: #eef8f5; }
body.cpd-theme-dark .ejad-sound-settings__segments > button[aria-pressed="true"],
body.cpd-theme-dark-hc .ejad-sound-settings__segments > button[aria-pressed="true"] { border-color: #13e9b1; background: #113c46; }
body.cpd-theme-dark .ejad-sound-settings__segments > button[data-ejad-sound-mode="silent"][aria-pressed="true"],
body.cpd-theme-dark-hc .ejad-sound-settings__segments > button[data-ejad-sound-mode="silent"][aria-pressed="true"] { border-color: rgba(232, 128, 137, .52); background: #3a262c; }
body.cpd-theme-dark .ejad-sound-settings__mode > strong,
body.cpd-theme-dark-hc .ejad-sound-settings__mode > strong,
body.cpd-theme-dark .ejad-sound-settings__switch em,
body.cpd-theme-dark-hc .ejad-sound-settings__switch em,
body.cpd-theme-dark .ejad-sound-settings__level label,
body.cpd-theme-dark-hc .ejad-sound-settings__level label,
body.cpd-theme-dark .ejad-sound-settings__level output,
body.cpd-theme-dark-hc .ejad-sound-settings__level output,
body.cpd-theme-dark .ejad-sound-settings__tone label,
body.cpd-theme-dark-hc .ejad-sound-settings__tone label { color: #becdd0; }
body.cpd-theme-dark .ejad-sound-settings__tone,
body.cpd-theme-dark-hc .ejad-sound-settings__tone { background: rgba(19, 233, 177, .06); }
body.cpd-theme-dark .ejad-sound-settings__tone select,
body.cpd-theme-dark-hc .ejad-sound-settings__tone select { border-color: rgba(132, 184, 194, .2); background: #0b262b; color: #eef8f5; color-scheme: dark; }
body.cpd-theme-dark .ejad-sound-settings__note,
body.cpd-theme-dark-hc .ejad-sound-settings__note { background: rgba(19, 233, 177, .07); color: #aabdc1; }

/* Keep the product rail available on active screens, but never above modal
   work. On mobile it becomes a bottom dock, leaving timelines and forms clear. */
body[data-ejad-surface="room"] .ejad-quick-controls,
body[data-ejad-surface="home"] .ejad-quick-controls { display: flex !important; }
body:has(.mx_Dialog) .ejad-quick-controls,
body:has(.mx_SpaceCreateMenu_wrapper) .ejad-quick-controls,
body.ejad-sound-settings-open .ejad-quick-controls { display: none !important; }

/* Correct Element's LTR-only space creation sheet. In Arabic the SpacePanel
   lives on the right, so the sheet and its dimmed canvas must mirror as one
   opaque, bounded surface instead of floating above the message timeline. */
.mx_SpaceCreateMenu_wrapper { z-index: 7800 !important; }
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
    position: fixed !important;
    inset-block: 0 !important;
    left: 68px !important;
    right: 0 !important;
    width: auto !important;
    height: 100dvh !important;
    opacity: 1 !important;
    background: rgba(4, 20, 24, .48) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
    position: fixed !important;
    inset-block: 0 !important;
    left: 68px !important;
    right: auto !important;
    box-sizing: border-box !important;
    width: min(500px, calc(100vw - 68px)) !important;
    max-width: min(500px, calc(100vw - 68px)) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: clamp(22px, 3vw, 34px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-inline-end: 1px solid rgba(3, 46, 56, .18) !important;
    border-radius: 0 !important;
    background: #fbfdfc !important;
    color: #0d2d34 !important;
    box-shadow: 20px 0 70px rgba(5, 25, 30, .2) !important;
    opacity: 1 !important;
}
html[dir="rtl"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background,
html[lang^="ar"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
    left: 0 !important;
    right: 68px !important;
}
html[dir="rtl"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu,
html[lang^="ar"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
    left: auto !important;
    right: 68px !important;
    direction: rtl;
    border-inline-start: 1px solid rgba(3, 46, 56, .18) !important;
    border-inline-end: 0 !important;
    box-shadow: -20px 0 70px rgba(5, 25, 30, .2) !important;
    text-align: right;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 { margin: 2px 0 8px !important; color: #0d2d34 !important; font: 750 clamp(18px, 2vw, 23px)/1.4 "EJAD Cairo", "Cairo", sans-serif !important; }
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p { margin: 0 0 18px !important; color: #60797e !important; font-size: 11px !important; line-height: 1.7 !important; }
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary) {
    box-sizing: border-box;
    margin-block: 8px;
    padding: 15px !important;
    border: 1px solid rgba(3, 46, 56, .14);
    border-radius: 12px;
    background: #fff;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary):hover { border-color: rgba(8, 122, 94, .42); background: #f1f9f7; box-shadow: 0 7px 20px rgba(3, 46, 56, .08); transform: translateY(-1px); }
.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary { min-height: 38px; border-radius: 12px !important; font-family: "EJAD Cairo", "Cairo", sans-serif; }
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu,
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu { border-color: rgba(19, 233, 177, .2) !important; background: #0b262b !important; color: #eef8f5 !important; }
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2,
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 { color: #eef8f5 !important; }
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p,
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p { color: #aebfc2 !important; }
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary),
body.cpd-theme-dark-hc .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary) { border-color: rgba(19, 233, 177, .16); background: #0e323a; color: #eef8f5; }

@media (max-width: 760px) {
    body[data-ejad-surface="room"] .ejad-quick-controls,
    body[data-ejad-surface="home"] .ejad-quick-controls,
    .ejad-quick-controls,
    html[dir="rtl"] .ejad-quick-controls,
    html[lang^="ar"] .ejad-quick-controls,
    html:not([dir="rtl"]):not([lang^="ar"]) .ejad-quick-controls {
        inset-block-start: auto;
        inset-block-end: max(12px, env(safe-area-inset-bottom));
        left: 50%;
        right: auto;
        flex-direction: row;
        width: auto;
        max-width: calc(100vw - 20px);
        padding: 4px;
        border-radius: 12px;
        transform: translateX(-50%);
    }
    .ejad-quick-controls__button { grid-template-columns: 18px auto; width: auto; min-width: 52px; min-height: 42px; padding: 5px 7px; }
    .ejad-quick-controls__button svg { width: 18px; height: 18px; }
    .ejad-quick-controls__divider { width: 1px; height: 26px; margin: 8px 0; }
    .ejad-quick-controls--collapsed,
    html[dir="rtl"] .ejad-quick-controls--collapsed,
    html[lang^="ar"] .ejad-quick-controls--collapsed,
    html:not([dir="rtl"]):not([lang^="ar"]) .ejad-quick-controls--collapsed {
        width: 46px;
        min-width: 46px;
        padding: 4px;
    }
    .ejad-quick-controls--collapsed .ejad-quick-controls__toggle { width: 36px; min-width: 36px; }
    body:has(.mx_Dialog) .ejad-quick-controls,
    body:has(.mx_SpaceCreateMenu_wrapper) .ejad-quick-controls,
    body.ejad-sound-settings-open .ejad-quick-controls { display: none !important; }
    .ejad-sound-settings { align-items: end; padding: 10px; }
    .ejad-sound-settings__dialog { width: 100%; max-height: calc(100dvh - 20px); border-radius: 16px; }
    .ejad-sound-settings__header { grid-template-columns: 42px minmax(0, 1fr) 36px; padding: 15px; }
    .ejad-sound-settings__hero-icon { width: 40px; height: 40px; border-radius: 12px; }
    .ejad-sound-settings__body { padding: 14px; }
    .ejad-sound-settings__segments { grid-template-columns: 1fr; }
    .ejad-sound-settings__segments > button { min-height: 68px; }
    .ejad-sound-settings__channel-heading { align-items: flex-start; }
    .ejad-sound-settings__tone { grid-template-columns: 70px minmax(0, 1fr); }
    .ejad-sound-settings__level { grid-template-columns: auto minmax(80px, 1fr) 38px; }
    .ejad-sound-settings__level button { grid-column: 1 / -1; width: 100%; }
    .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu,
    html[dir="rtl"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu,
    html[lang^="ar"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu { inset-inline: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; padding: 20px 16px !important; }
    .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background,
    html[dir="rtl"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background,
    html[lang^="ar"] .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background { display: none !important; }
}

/* v24 home release guard. The home URL is versioned by configure_ejadtech.py,
   and these last-in-cascade rules target the sanitized, admin-owned topology.
   Keep the command centre top-aligned and reserve the floating quick-control
   rail so it can never cover workspace or action cards. */
.mx_HomePage_body > div {
    display: block !important;
    align-items: initial !important;
    min-height: 100% !important;
    padding: clamp(22px, 2.5vw, 38px) !important;
}
html[dir="rtl"] .mx_HomePage_body > div,
html[lang^="ar"] .mx_HomePage_body > div {
    padding-left: max(104px, 5vw) !important;
}
html:not([dir="rtl"]):not([lang^="ar"]) .mx_HomePage_body > div {
    padding-right: max(104px, 5vw) !important;
}
.mx_HomePage_body > div > div {
    width: min(1480px, 100%) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.mx_HomePage_body > div > div > div:first-child {
    margin: 0 0 22px !important;
    padding: 2px 0 22px !important;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child {
    margin: 0 0 24px !important;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) {
    width: 100% !important;
    margin-top: 26px !important;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) > a {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 84px !important;
    padding: 15px !important;
}
.mx_HomePage_body > div > div > div:nth-child(2) a strong,
.mx_HomePage_body > div > div > div:nth-child(2) a > span:nth-child(2) > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@container (max-width: 1120px) {
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3),
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > a:first-child {
        grid-column: 1 / -1 !important;
    }
}
@container (max-width: 680px) {
    .mx_HomePage_body > div { padding: 16px !important; }
    html[dir="rtl"] .mx_HomePage_body > div,
    html[lang^="ar"] .mx_HomePage_body > div,
    html:not([dir="rtl"]):not([lang^="ar"]) .mx_HomePage_body > div {
        padding-inline: 16px !important;
    }
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3),
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > a:first-child {
        grid-column: auto !important;
    }
}

/* v23 final home topology guards: keep these after Element's legacy fallback
   selectors so the sanitized bilingual document has deterministic columns. */
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child {
    margin: 0 0 26px;
    padding: 18px;
    border: 1px solid rgba(19, 233, 177, .16);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 48, 56, .92), rgba(7, 29, 35, .78));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 70px;
    padding: 11px;
    border-radius: 12px;
    background: rgba(6, 25, 30, .58);
    box-shadow: none;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a > span:first-child {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) { margin-top: 24px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:first-child {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child {
    border-color: rgba(3, 46, 56, .16);
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(231, 245, 241, .92));
    box-shadow: 0 18px 42px rgba(13, 46, 53, .09);
}
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2) > a {
    border-color: rgba(3, 46, 56, .14);
    background: rgba(255, 255, 255, .82);
    color: #0a242a !important;
}
@container (max-width: 1100px) {
    .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2),
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3),
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
        grid-template-columns: 1fr 1fr !important;
    }
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > a:first-child { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
    .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child { padding: 13px; border-radius: 12px; }
    .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:nth-child(2),
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3),
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
    .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > a:first-child { grid-column: auto; }
    .mx_HomePage_body > div > div > div:nth-child(2) > div:first-child > div:first-child > span { display: none; }
}

html[lang^="ar"] .mx_Dialog,
html[dir="rtl"] .mx_Dialog {
  text-align: right;
}

html[lang^="ar"] input,
html[lang^="ar"] textarea,
html[lang^="ar"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
  font-family: inherit;
  letter-spacing: normal;
}

/* Light, upgrade-safe polish around stable Element layout surfaces. */
.mx_MatrixChat button,
.mx_MatrixChat [role="button"],
.mx_Dialog button {
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
.mx_MatrixChat button:focus-visible,
.mx_MatrixChat [role="button"]:focus-visible,
.mx_Dialog button:focus-visible {
  outline: 2px solid #13E8B0;
  outline-offset: 2px;
}
.mx_Dialog {
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(2, 17, 20, .24);
}
.mx_LeftPanel,
.mx_RoomList,
.mx_RoomView,
.mx_RightPanel {
  min-width: 0;
}
.mx_AutoHideScrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(19, 232, 176, .38);
  background-clip: padding-box;
}

/* EJADTECH full-pane corporate home. Loaded by Element's own index so the
   embedded-page sanitizer cannot remove it. */
.mx_WelcomePage,
.mx_WelcomePage_loggedIn,
.mx_WelcomePage_body,
.mx_HomePage,
.mx_HomePage_loggedIn,
.mx_HomePage_body,
.mx_WelcomePage .mx_AutoHideScrollbar,
.mx_WelcomePage .mx_AutoHideScrollbar_view,
.mx_WelcomePage_loggedIn .mx_AutoHideScrollbar,
.mx_WelcomePage_loggedIn .mx_AutoHideScrollbar_view,
.mx_HomePage .mx_AutoHideScrollbar,
.mx_HomePage .mx_AutoHideScrollbar_view,
.mx_HomePage_loggedIn .mx_AutoHideScrollbar,
.mx_HomePage_loggedIn .mx_AutoHideScrollbar_view {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_WelcomePage_body,
.mx_HomePage_body {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  container-type: inline-size;
}

.mx_WelcomePage_body > div,
.mx_WelcomePage_body > main,
.mx_HomePage_body > div,
.mx_HomePage_body > main {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.mx_HomePage iframe,
.mx_WelcomePage iframe {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
}

.ejp-home, .ejp-home * { box-sizing: border-box; }

  .ejp-home {
    --ejp-bg: #051317;
    --ejp-panel: rgba(9, 31, 36, .88);
    --ejp-panel-strong: #0b272d;
    --ejp-line: rgba(19, 233, 177, .16);
    --ejp-accent: #13e9b1;
    --ejp-accent-strong: #13E8B0;
    --ejp-text: #f5fbf9;
    --ejp-muted: #9ab3b8;
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: clamp(18px, 3vw, 42px);
    overflow: auto;
    color: var(--ejp-text);
    font-family: "Cairo", "IBM Plex Sans Arabic", Inter, "Segoe UI", Tahoma, Arial, sans-serif;
    background:
      radial-gradient(circle at 12% 8%, rgba(19, 232, 176, .18), transparent 30%),
      radial-gradient(circle at 88% 92%, rgba(8, 122, 94, .15), transparent 28%),
      linear-gradient(145deg, #041013, var(--ejp-bg));
  }

  .ejp-shell { width: min(1320px, 100%); min-height: 100%; margin: 0 auto; }
  .ejp-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
  .ejp-brand { display: flex; align-items: center; gap: 20px; min-width: 0; }
  .ejp-logo { width: clamp(174px, 21vw, 245px); height: auto; flex: 0 0 auto; }
  .ejp-heading { padding-right: 20px; border-right: 1px solid var(--ejp-line); }
  .ejp-heading h1 { margin: 0; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -.02em; }
  .ejp-heading p { margin: 6px 0 0; color: var(--ejp-muted); font-size: 12px; }
  .ejp-secure { display: flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--ejp-muted); font-size: 11px; }
  .ejp-secure::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ejp-accent); box-shadow: 0 0 0 6px rgba(19, 233, 177, .1); }

  .ejp-overview {
    margin-bottom: 26px;
    padding: 18px;
    border: 1px solid var(--ejp-line);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 48, 56, .92), rgba(7, 29, 35, .78));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
  }
  .ejp-overview .ejp-section-head { align-items: center; margin-bottom: 14px; }
  .ejp-overview .ejp-section-head p { margin: 3px 0 0; color: var(--ejp-muted); font-size: 10px; }
  .ejp-today { color: var(--ejp-accent); font-size: 11px; font-weight: 700; }
  .ejp-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ejp-overview-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 70px;
    padding: 11px;
    border: 1px solid rgba(19, 233, 177, .14);
    border-radius: 12px;
    background: rgba(6, 25, 30, .58);
    color: var(--ejp-text) !important;
    font: inherit;
    text-align: start;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
  }
  .ejp-overview-card:hover { transform: translateY(-2px); border-color: rgba(19, 233, 177, .5); background: rgba(16, 54, 63, .76); }
  .ejp-overview-card:focus-visible { outline: 3px solid rgba(19, 233, 177, .32); outline-offset: 2px; }
  .ejp-overview-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(19, 233, 177, .1); color: var(--ejp-accent); font-size: 18px; font-weight: 700; }
  .ejp-overview-card > span:nth-child(2) { min-width: 0; }
  .ejp-overview-card strong { display: block; overflow: hidden; font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
  .ejp-overview-card small { display: block; margin-top: 3px; overflow: hidden; color: var(--ejp-muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
  .ejp-overview-metric { display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 6px; border-radius: 999px; background: #c63e51; color: #fff; font-size: 11px; }
  .ejp-overview-card kbd { padding: 4px 6px; border: 1px solid var(--ejp-line); border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--ejp-muted); font: 9px/1.2 "Segoe UI", sans-serif; white-space: nowrap; }

  .ejp-section { margin-top: 24px; }
  .ejp-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
  .ejp-section-head h2 { margin: 0; font-size: 15px; line-height: 1.4; }
  .ejp-section-head span { color: var(--ejp-muted); font-size: 11px; }
  .ejp-grid { display: grid; gap: 12px; }
  .ejp-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ejp-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ejp-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: var(--ejp-text) !important;
    text-decoration: none !important;
    border: 1px solid var(--ejp-line);
    background: linear-gradient(145deg, rgba(11, 39, 45, .94), rgba(8, 27, 32, .9));
    box-shadow: 0 16px 42px rgba(0, 0, 0, .16);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
  }
  .ejp-card:hover { transform: translateY(-2px); border-color: rgba(19, 233, 177, .55); background: var(--ejp-panel-strong); }
  .ejp-card:focus-visible, .ejp-guide summary:focus-visible { outline: 3px solid rgba(19, 233, 177, .35); outline-offset: 2px; }
  .ejp-group { min-height: 116px; padding: 18px; border-radius: 12px; }
  .ejp-action { min-height: 78px; padding: 14px; border-radius: 12px; }
  .ejp-icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--ejp-accent); background: rgba(19, 233, 177, .09); border: 1px solid rgba(19, 233, 177, .12); }
  .ejp-action .ejp-icon { width: 39px; height: 39px; border-radius: 12px; }
  .ejp-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ejp-home { direction: rtl; }
  .ejp-home[dir="ltr"] { direction: ltr; }
  .ejp-home[dir="ltr"] .ejp-heading { padding-right: 0; padding-left: 20px; border-right: 0; border-left: 1px solid var(--ejp-line); }
  .ejp-home[dir="ltr"] .ejp-guide summary::after { margin-right: 0; margin-left: auto; }
  .ejp-icon::before { font-size: 18px; font-weight: 700; line-height: 1; }
  .ejp-groups .ejp-card:nth-child(1) .ejp-icon::before { content: "#"; }
  .ejp-groups .ejp-card:nth-child(2) .ejp-icon::before { content: "@"; }
  .ejp-groups .ejp-card:nth-child(3) .ejp-icon::before { content: "</>"; font-size: 13px; }
  .ejp-actions .ejp-card:nth-child(1) .ejp-icon::before { content: "+"; }
  .ejp-actions .ejp-card:nth-child(2) .ejp-icon::before { content: "⌕"; }
  .ejp-actions .ejp-card:nth-child(3) .ejp-icon::before { content: "#"; }
  .ejp-actions .ejp-card:nth-child(4) .ejp-icon::before { content: "⚙"; }
  .ejp-copy { min-width: 0; flex: 1; }
  .ejp-copy strong { display: block; font-size: 13px; line-height: 1.55; }
  .ejp-copy small { display: block; margin-top: 4px; overflow: hidden; color: var(--ejp-muted); font-size: 9px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
  .ejp-arrow { flex: 0 0 auto; color: var(--ejp-accent); font-size: 18px; }

  .ejp-guide { margin-top: 14px; border: 1px solid var(--ejp-line); border-radius: 12px; background: rgba(8, 27, 32, .72); overflow: hidden; }
  .ejp-guide summary { display: flex; align-items: center; gap: 12px; padding: 15px 17px; cursor: pointer; list-style: none; color: var(--ejp-text); font-size: 13px; font-weight: 700; }
  .ejp-guide summary::-webkit-details-marker { display: none; }
  .ejp-guide summary::after { content: "+"; margin-right: auto; color: var(--ejp-accent); font-size: 20px; font-weight: 400; }
  .ejp-guide[open] summary::after { content: "−"; }
  .ejp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--ejp-line); background: var(--ejp-line); }
  .ejp-step { display: flex; gap: 11px; padding: 16px; background: #081b20; }
  .ejp-step b { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #04161a; background: var(--ejp-accent); font-size: 12px; }
  .ejp-step strong { display: block; font-size: 12px; }
  .ejp-step span { display: block; margin-top: 4px; color: var(--ejp-muted); font-size: 10px; line-height: 1.55; }
  .ejp-foot { margin-top: 18px; text-align: center; color: #6c878d; font-size: 9px; letter-spacing: .08em; }

  .ejp-logged-out { display: none; }
  .mx_WelcomePage .ejp-logged-in { display: none; }
  .mx_WelcomePage .ejp-logged-out { display: flex; }
  .mx_WelcomePage_loggedIn .ejp-logged-in { display: block; }
  .mx_WelcomePage_loggedIn .ejp-logged-out { display: none; }

  @media (max-width: 900px) {
    .ejp-overview-grid { grid-template-columns: 1fr 1fr; }
    .ejp-groups { grid-template-columns: 1fr 1fr; }
    .ejp-group:first-child { grid-column: 1 / -1; }
    .ejp-actions { grid-template-columns: 1fr 1fr; }
    .ejp-secure { display: none; }
  }
  @media (max-width: 620px) {
    .ejp-home { padding: 16px; }
    .ejp-header { margin-bottom: 20px; }
    .ejp-heading { display: none; }
    .ejp-logo { width: 190px; }
    .ejp-groups, .ejp-actions, .ejp-steps { grid-template-columns: 1fr; }
    .ejp-overview { padding: 13px; border-radius: 12px; }
    .ejp-overview-grid { grid-template-columns: 1fr; }
    .ejp-today { display: none; }
    .ejp-group:first-child { grid-column: auto; }
    .ejp-group { min-height: 88px; padding: 14px; }
  }

  .ejp-connections { margin: 18px 0 0; box-shadow: none; }

  /* Element can keep the browser viewport wide while the home pane itself is
     narrow beside the room list. Size the cards from the pane, not the window. */
  @container (max-width: 1100px) {
    .ejp-overview-grid { grid-template-columns: 1fr 1fr; }
    .ejp-groups { grid-template-columns: 1fr 1fr; }
    .ejp-group:first-child { grid-column: 1 / -1; }
    .ejp-actions { grid-template-columns: 1fr 1fr; }
    .ejp-secure { display: none; }
  }
  @container (max-width: 640px) {
    .ejp-home { padding: 16px; }
    .ejp-heading { display: none; }
    .ejp-groups, .ejp-actions, .ejp-steps { grid-template-columns: 1fr; }
    .ejp-overview { padding: 13px; border-radius: 12px; }
    .ejp-overview-grid { grid-template-columns: 1fr; }
    .ejp-today { display: none; }
    .ejp-group:first-child { grid-column: auto; }
  }

/* Element 1.12.26 intentionally strips class attributes from embedded HTML.
   These rules target only the fixed, admin-owned v7 document structure, so we
   keep the upstream sanitizer unchanged. */
.mx_HomePage_body > div {
  box-sizing: border-box !important; width: 100%; max-width: 100%; min-width: 0;
  min-height: 100%; padding: clamp(18px, 2.4vw, 36px);
  direction: rtl; overflow-x: hidden; overflow-y: auto; color: #f5fbf9;
  font-family: "Cairo", "IBM Plex Sans Arabic", Inter, "Segoe UI", Tahoma, Arial, sans-serif;
  background: radial-gradient(circle at 12% 8%, rgba(19, 232, 176,.18), transparent 30%),
              radial-gradient(circle at 88% 92%, rgba(8, 122, 94,.15), transparent 28%),
              linear-gradient(145deg, #041013, #051317);
}
html[dir="ltr"] .mx_HomePage_body > div { direction: ltr; }
html[dir="ltr"] .mx_HomePage_body > div > div > div:first-child > div:first-child > div:last-child {
  padding-right: 0; padding-left: 20px; border-right: 0; border-left: 1px solid rgba(19, 233, 177,.16);
}
.mx_HomePage_body > div *, .mx_HomePage_body > div *::before, .mx_HomePage_body > div *::after { box-sizing: border-box; }
.mx_HomePage_body > div > div { width: 100%; max-width: 1320px; min-width: 0; margin: 0 auto; }
.mx_HomePage_body > div > div > div:first-child {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; padding-bottom: 22px;
  border-bottom: 1px solid rgba(19, 233, 177,.16);
}
.mx_HomePage_body > div > div > div:first-child > div:first-child {
  display: flex; align-items: center; gap: 20px; min-width: 0;
}
.mx_HomePage_body > div > div > div:first-child img {
  width: clamp(174px, 21vw, 245px); height: auto;
}
.mx_HomePage_body > div > div > div:first-child > div:first-child > div {
  padding-right: 20px; border-right: 1px solid rgba(19, 233, 177,.16);
}
.mx_HomePage_body h1 { margin: 0; color: #f5fbf9; font-size: clamp(21px,2.2vw,30px); line-height: 1.25; }
.mx_HomePage_body p { margin: 6px 0 0; color: #9ab3b8; font-size: 12px; }
.mx_HomePage_body > div > div > div:first-child > div:last-child {
  display: flex; align-items: center; gap: 9px; color: #9ab3b8; font-size: 11px; white-space: nowrap;
}
.mx_HomePage_body > div > div > div:first-child > div:last-child::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #13e9b1;
  box-shadow: 0 0 0 6px rgba(19, 233, 177,.1);
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(1),
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:first-child {
  display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px;
}
.mx_HomePage_body h2 { margin: 0; color: #f5fbf9; font-size: 15px; line-height: 1.4; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(1) > span,
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:first-child > span {
  color: #9ab3b8; font-size: 11px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) { margin-top: 24px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px;
}
.mx_HomePage_body > div > div > div:nth-child(2) a {
  position: relative; display: flex; align-items: center; gap: 14px; min-width: 0;
  color: #f5fbf9 !important; text-decoration: none !important;
  border: 1px solid rgba(19, 233, 177,.16); border-radius: 12px;
  background: linear-gradient(145deg,rgba(11, 39, 45,.94),rgba(8, 27, 32,.9));
  box-shadow: 0 16px 42px rgba(0,0,0,.16); transition: .18s ease;
}
.mx_HomePage_body > div > div > div:nth-child(2) a:hover {
  transform: translateY(-2px); border-color: rgba(19, 233, 177,.55); background: #0b272d;
}
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) > a { min-height: 116px; padding: 18px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) a { min-height: 78px; padding: 14px; border-radius: 12px; }
.mx_HomePage_body > div > div > div:nth-child(2) a > span:first-child {
  flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; color: #13e9b1; background: rgba(19, 233, 177,.09);
  border: 1px solid rgba(19, 233, 177,.12);
}
.mx_HomePage_body > div > div > div:nth-child(2) a > span:nth-child(2) { min-width: 0; flex: 1; }
.mx_HomePage_body > div > div > div:nth-child(2) a strong { display: block; color: #f5fbf9; font-size: 13px; line-height: 1.55; }
.mx_HomePage_body > div > div > div:nth-child(2) a > span:nth-child(2) > span {
  display: block; max-width: 100%; margin-top: 4px; overflow: hidden;
  color: #8ca7ad; font-size: 9px; line-height: 1.35; letter-spacing: .035em;
  text-overflow: ellipsis; white-space: nowrap;
}
.mx_HomePage_body > div > div > div:nth-child(2) a > span:last-child { flex: 0 0 auto; color: #13e9b1; font-size: 18px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) > a:nth-child(1) > span:first-child::before { content: "#"; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) > a:nth-child(2) > span:first-child::before { content: "@"; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) > a:nth-child(3) > span:first-child::before { content: "</>"; font-size: 13px; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) a:nth-child(1) > span:first-child::before { content: "+"; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) a:nth-child(2) > span:first-child::before { content: "⌕"; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) a:nth-child(3) > span:first-child::before { content: "#"; }
.mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) a:nth-child(4) > span:first-child::before { content: "⚙"; }
.mx_HomePage_body details {
  margin-top: 14px; overflow: hidden; border: 1px solid rgba(19, 233, 177,.16);
  border-radius: 12px; background: rgba(8, 27, 32,.72);
}
.mx_HomePage_body details summary { padding: 15px 17px; cursor: pointer; color: #f5fbf9; font-size: 13px; font-weight: 700; }
.mx_HomePage_body details > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: rgba(19, 233, 177,.16); }
.mx_HomePage_body details > div > div { display: flex; gap: 11px; padding: 16px; background: #081b20; }
.mx_HomePage_body details b { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #04161a; background: #13e9b1; font-size: 12px; }
.mx_HomePage_body details span { display: block; margin-top: 4px; color: #9ab3b8; font-size: 10px; line-height: 1.55; }
.mx_HomePage_body > div > div > div:nth-child(3) { display: none; }
.mx_HomePage_body > div > div > div:last-child { margin-top: 18px; text-align: center; color: #6c878d; font-size: 9px; letter-spacing: .08em; }
@media (max-width:900px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) > a:first-child { grid-column: 1/-1; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
}
@media (min-width:901px) and (max-width:1200px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
}
@media (min-width:1100px) and (min-height:820px) {
  .mx_HomePage_body > div { display: flex; align-items: flex-start; }
  .mx_HomePage_body > div > div { padding-bottom: max(28px, 3vh); }
}
@media (max-width:620px) {
  .mx_HomePage_body > div { padding: 16px; }
  .mx_HomePage_body > div > div > div:first-child > div:first-child > div,
  .mx_HomePage_body > div > div > div:first-child > div:last-child { display: none; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:nth-child(2),
  .mx_HomePage_body details > div { grid-template-columns: 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) > a:first-child { grid-column: auto; }
  .mx_HomePage_body > div > div > div:nth-child(2) a { min-height: 78px; padding: 13px; }
  .mx_HomePage_body > div > div > div:nth-child(2) a > span:first-child { width: 40px; height: 40px; border-radius: 12px; }
}
@container (max-width:1100px) {
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) > a:first-child { grid-column: 1/-1; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
  .mx_HomePage_body > div > div > div:first-child > div:last-child { display: none; }
}
@container (max-width:640px) {
  .mx_HomePage_body > div { padding: 16px; }
  .mx_HomePage_body > div > div > div:first-child > div:first-child > div,
  .mx_HomePage_body > div > div > div:first-child > div:last-child { display: none; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2),
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:nth-child(2),
  .mx_HomePage_body details > div { grid-template-columns: 1fr; }
  .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(2) > a:first-child { grid-column: auto; }
}

/* Match the embedded home to Element's active light theme. */
.cpd-theme-light .mx_HomePage_body > div {
  color: #0a242a;
  background: radial-gradient(circle at 12% 8%, rgba(19, 232, 176,.13), transparent 31%),
              radial-gradient(circle at 88% 92%, rgba(3, 46, 56,.09), transparent 28%),
              linear-gradient(145deg,#f8fbfa,#edf5f3);
}
.cpd-theme-light .mx_HomePage_body > div > div > div:first-child { border-bottom-color: rgba(3, 46, 56,.16); }
.cpd-theme-light .mx_HomePage_body > div > div > div:first-child img { content: url('/element/assets/ejadtech-light-official.svg'); }
.cpd-theme-light .mx_HomePage_body h1,
.cpd-theme-light .mx_HomePage_body h2,
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) a strong { color: #0a242a; }
.cpd-theme-light .mx_HomePage_body p,
.cpd-theme-light .mx_HomePage_body > div > div > div:first-child > div:last-child,
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(1) > span,
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) > div:nth-child(3) > div:first-child > span { color: #567277; }
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) a {
  color: #0a242a !important; border-color: rgba(3, 46, 56,.16);
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(241, 248, 246,.98));
  box-shadow: 0 14px 35px rgba(13, 46, 53,.08);
}
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) a:hover {
  border-color: rgba(8, 122, 94,.5); background: #fff; box-shadow: 0 18px 38px rgba(13, 46, 53,.12);
}
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) a > span:first-child {
  color: #087A5E; background: rgba(19, 232, 176,.09); border-color: rgba(8, 122, 94,.15);
}
.cpd-theme-light .mx_HomePage_body > div > div > div:nth-child(2) a > span:nth-child(2) > span { color: #648086; }
.cpd-theme-light .mx_HomePage_body details { border-color: rgba(3, 46, 56,.16); background: rgba(255,255,255,.72); }
.cpd-theme-light .mx_HomePage_body details summary { color: #0a242a; }
.cpd-theme-light .mx_HomePage_body details > div { background: rgba(3, 46, 56,.14); }
.cpd-theme-light .mx_HomePage_body details > div > div { background: #f7fbfa; }
.cpd-theme-light .mx_HomePage_body details span { color: #567277; }

/* EJADTECH application polish. These selectors decorate stable surfaces and
   deliberately avoid changing Element's functional component structure. */
body,
.mx_MatrixChat {
  --ejad-radius-sm: 10px;
  --ejad-radius-md: 14px;
  --ejad-radius-lg: 20px;
  --ejad-ease: cubic-bezier(.2,.75,.25,1);
}
.mx_RoomHeader {
    min-height: 64px;
    border-bottom: 1px solid rgba(111, 172, 184, .16);
    box-shadow: 0 5px 20px rgba(2, 18, 21, .035);
}
.mx_LeftPanel,
.mx_RightPanel {
  border-color: rgba(111, 172, 184, .15) !important;
}
.mx_RoomTile {
  margin: 2px 7px;
  transition: background-color .16s var(--ejad-ease), transform .16s var(--ejad-ease);
}
.mx_RoomTile:hover { transform: translateX(-1px); }
.mx_RoomTile_selected {
  box-shadow: inset 3px 0 0 #13E8B0, 0 5px 15px rgba(10, 66, 78, .06);
}
html[dir="rtl"] .mx_RoomTile_selected { box-shadow: inset -3px 0 0 #13E8B0, 0 5px 15px rgba(10, 66, 78, .06); }
.mx_EventTile {
  border-radius: 8px;
  transition: background-color .14s ease;
}
.mx_EventTile:hover { background-color: rgba(19, 232, 176, .045); }
.mx_MessageComposer {
  margin: 7px 11px 11px;
  padding: 4px;
  border: 1px solid rgba(103, 160, 171, .22);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(4, 30, 35, .07);
}
.mx_SendMessageComposer { border-radius: 12px; }
.mx_UserMenu,
.mx_ContextualMenu,
.mx_IconizedContextMenu,
.mx_SpotlightDialog {
  border: 1px solid rgba(103, 160, 171, .2);
  border-radius: var(--ejad-radius-lg) !important;
  box-shadow: 0 22px 60px rgba(2, 20, 24, .18) !important;
}
.mx_Dialog {
  overflow: hidden;
  border: 1px solid rgba(103, 160, 171, .18);
}
.mx_Dialog_title { letter-spacing: -.025em; }
.mx_TabbedView_tabLabels {
  flex: 0 0 clamp(230px, 23vw, 292px);
  width: clamp(230px, 23vw, 292px);
  min-width: 230px;
}
.mx_TabbedView_tabLabel {
  margin: 2px 8px;
  border-radius: 8px;
}
.mx_TabbedView_tabPanel {
  min-width: 0;
  padding-inline: clamp(20px, 3vw, 44px);
}

/* Controlled RTL: retain Element's flex geometry while giving every textual
   surface a correct Arabic reading direction. */
html[lang^="ar"] .mx_TabbedView,
html[dir="rtl"] .mx_TabbedView { direction: rtl; }
html[lang^="ar"] .mx_TabbedView_tabLabels,
html[lang^="ar"] .mx_TabbedView_tabPanel,
html[lang^="ar"] .mx_SettingsTab,
html[dir="rtl"] .mx_TabbedView_tabLabels,
html[dir="rtl"] .mx_TabbedView_tabPanel,
html[dir="rtl"] .mx_SettingsTab {
  direction: rtl;
  text-align: right;
}
html[lang^="ar"] .mx_TabbedView_tabLabel,
html[dir="rtl"] .mx_TabbedView_tabLabel {
  min-height: 42px;
  padding-inline: 14px;
  white-space: normal;
}
html[lang^="ar"] .mx_SettingsTab input,
html[lang^="ar"] .mx_SettingsTab textarea,
html[dir="rtl"] .mx_SettingsTab input,
html[dir="rtl"] .mx_SettingsTab textarea { text-align: start; }

.cpd-theme-light .mx_RoomHeader,
.cpd-theme-light .mx_MessageComposer,
.cpd-theme-light .mx_UserMenu,
.cpd-theme-light .mx_ContextualMenu,
.cpd-theme-light .mx_IconizedContextMenu {
    background: rgba(255, 255, 255, .94);
}
.cpd-theme-dark .mx_RoomHeader,
.cpd-theme-dark .mx_MessageComposer,
.cpd-theme-dark .mx_UserMenu,
.cpd-theme-dark .mx_ContextualMenu,
.cpd-theme-dark .mx_IconizedContextMenu {
    background: rgba(7, 26, 31, .95);
}

@media (max-width: 760px) {
  .mx_TabbedView_tabLabels { flex-basis: 210px; width: 210px; min-width: 210px; }
  .mx_TabbedView_tabPanel { padding-inline: 16px; }
  .mx_MessageComposer { margin: 5px 6px 7px; border-radius: 12px; }
}

/* RTL coverage audit: authentication, navigation, timeline, composer, search,
   settings, profiles, notifications, calls, menus and modal flows. */
html[lang^="ar"] .mx_AuthPage,
html[lang^="ar"] .mx_AuthBody,
html[lang^="ar"] .mx_Login,
html[lang^="ar"] .mx_Registration,
html[dir="rtl"] .mx_AuthPage,
html[dir="rtl"] .mx_AuthBody,
html[dir="rtl"] .mx_Login,
html[dir="rtl"] .mx_Registration {
  direction: rtl;
  text-align: right;
}
html[lang^="ar"] .mx_LeftPanel,
html[lang^="ar"] .mx_RoomList,
html[lang^="ar"] .mx_RightPanel,
html[lang^="ar"] .mx_RoomHeader,
html[lang^="ar"] .mx_RoomView_body,
html[dir="rtl"] .mx_LeftPanel,
html[dir="rtl"] .mx_RoomList,
html[dir="rtl"] .mx_RightPanel,
html[dir="rtl"] .mx_RoomHeader,
html[dir="rtl"] .mx_RoomView_body {
    text-align: start;
}
html[lang^="ar"] .mx_MessageComposer,
html[lang^="ar"] .mx_SendMessageComposer,
html[lang^="ar"] .mx_MessageComposer_wrapper,
html[lang^="ar"] .mx_MessageComposer_row,
html[lang^="ar"] .mx_MessageComposer_actions,
html[lang^="ar"] .mx_ReplyPreview,
html[lang^="ar"] .mx_Stickers_content,
html[dir="rtl"] .mx_MessageComposer,
html[dir="rtl"] .mx_SendMessageComposer,
html[dir="rtl"] .mx_MessageComposer_wrapper,
html[dir="rtl"] .mx_MessageComposer_row,
html[dir="rtl"] .mx_ReplyPreview,
html[dir="rtl"] .mx_Stickers_content {
  direction: rtl;
  text-align: right;
}
html[lang^="ar"] .mx_MessageComposer_input,
html[lang^="ar"] .mx_MessageComposer_wysiwyg,
html[dir="rtl"] .mx_MessageComposer_input,
html[dir="rtl"] .mx_MessageComposer_wysiwyg {
  min-width: 0;
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}
html[lang^="ar"] .mx_ContextualMenu,
html[lang^="ar"] .mx_IconizedContextMenu,
html[lang^="ar"] .mx_UserMenu,
html[lang^="ar"] .mx_NotificationPanel,
html[lang^="ar"] .mx_SpotlightDialog,
html[lang^="ar"] .mx_Dialog,
html[dir="rtl"] .mx_ContextualMenu,
html[dir="rtl"] .mx_IconizedContextMenu,
html[dir="rtl"] .mx_UserMenu,
html[dir="rtl"] .mx_NotificationPanel,
html[dir="rtl"] .mx_SpotlightDialog,
html[dir="rtl"] .mx_Dialog {
  direction: rtl;
  text-align: right;
}
html[lang^="ar"] .mx_UserInfo,
html[lang^="ar"] .mx_MemberList,
html[lang^="ar"] .mx_RoomSettingsDialog,
html[lang^="ar"] .mx_SpaceSettingsDialog,
html[lang^="ar"] .mx_VoipUserMapper,
html[lang^="ar"] .mx_CallView,
html[dir="rtl"] .mx_UserInfo,
html[dir="rtl"] .mx_MemberList,
html[dir="rtl"] .mx_RoomSettingsDialog,
html[dir="rtl"] .mx_SpaceSettingsDialog,
html[dir="rtl"] .mx_VoipUserMapper,
html[dir="rtl"] .mx_CallView {
  direction: rtl;
  text-align: right;
}
html[lang^="ar"] code,
html[lang^="ar"] pre,
html[lang^="ar"] .mx_EventTile_pre_container,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .mx_EventTile_pre_container {
  direction: ltr;
  text-align: left;
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}
html[lang^="ar"] [type="email"],
html[lang^="ar"] [type="url"],
html[lang^="ar"] [type="tel"],
html[dir="rtl"] [type="email"],
html[dir="rtl"] [type="url"],
html[dir="rtl"] [type="tel"] {
  direction: ltr;
  text-align: left;
}

/* Arabic settings geometry. Element positions its settings navigation with
   fixed physical offsets. A real grid avoids overlap at every dialog width. */
html[lang^="ar"] .mx_TabbedView_tabsOnLeft,
html[dir="rtl"] .mx_TabbedView_tabsOnLeft {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 232px) !important;
  grid-template-areas: "panel tabs" !important;
  column-gap: clamp(20px, 3vw, 36px);
  box-sizing: border-box;
  width: 100%;
  padding: 0 clamp(20px, 3vw, 32px) !important;
  direction: ltr; /* geometry only; each grid child restores RTL */
}
html[lang^="ar"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels,
html[dir="rtl"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
  grid-area: tabs;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  direction: rtl;
}
html[lang^="ar"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel,
html[dir="rtl"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
  grid-area: panel;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  direction: rtl;
}
html[lang^="ar"] .mx_TabbedView_tabLabel svg,
html[dir="rtl"] .mx_TabbedView_tabLabel svg {
  margin-right: 0;
  margin-left: var(--cpd-space-3x);
}
html[lang^="ar"] .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
html[lang^="ar"] .mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab,
html[lang^="ar"] .mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
html[lang^="ar"] .mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab,
html[dir="rtl"] .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
html[dir="rtl"] .mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab,
html[dir="rtl"] .mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
html[dir="rtl"] .mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 0 96px !important;
}
html[lang^="ar"] .mx_RoomSettingsDialog .mx_Dialog_title,
html[dir="rtl"] .mx_RoomSettingsDialog .mx_Dialog_title {
  padding-right: 0;
  padding-left: 80px;
}

/* Direct-message and invite surfaces use legacy physical spacing. */
html[lang^="ar"] .mx_InviteDialog_addressBar,
html[dir="rtl"] .mx_InviteDialog_addressBar {
  margin-right: 0;
  margin-left: 45px;
}
html[lang^="ar"] .mx_InviteDialog_userSections,
html[dir="rtl"] .mx_InviteDialog_userSections {
  padding-right: 0;
  padding-left: 45px;
}
html[lang^="ar"] .mx_InviteDialog_tile,
html[dir="rtl"] .mx_InviteDialog_tile {
  grid-template-columns: max-content minmax(0, 1fr);
}
html[lang^="ar"] .mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack,
html[dir="rtl"] .mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack {
  grid-column: 1;
}
html[lang^="ar"] .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack,
html[dir="rtl"] .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack {
  grid-column: 2;
  align-items: flex-start;
  text-align: right;
}

/* Compact professional treatment for composer popovers and legacy call cards. */
.mx_Stickers_content,
.mx_Stickers_content_container,
.mx_LegacyCallEvent_wrapper {
  border-radius: 12px;
}
.mx_Stickers_content,
.mx_Stickers_content_container {
  overflow: hidden;
  border: 1px solid rgba(103, 160, 171, .2);
  box-shadow: 0 18px 52px rgba(2, 20, 24, .18);
}
.mx_LegacyCallEvent_wrapper {
  border: 1px solid rgba(103, 160, 171, .14);
  box-shadow: 0 8px 24px rgba(2, 20, 24, .05);
}
html[lang^="ar"] .mx_LegacyCallEvent,
html[lang^="ar"] .mx_LegacyCallEvent_wrapper,
html[lang^="ar"] .mx_LegacyCallEvent_content,
html[dir="rtl"] .mx_LegacyCallEvent,
html[dir="rtl"] .mx_LegacyCallEvent_wrapper,
html[dir="rtl"] .mx_LegacyCallEvent_content {
  direction: rtl;
  text-align: right;
}

/* Keep menus and pickers compact, readable and anchored inside the viewport. */
html[lang^="ar"] .mx_ContextualMenu,
html[lang^="ar"] .mx_IconizedContextMenu,
html[dir="rtl"] .mx_ContextualMenu,
html[dir="rtl"] .mx_IconizedContextMenu {
  box-sizing: border-box;
  max-width: min(360px, calc(100vw - 24px));
  padding: 8px;
}
html[lang^="ar"] .mx_IconizedContextMenu_item,
html[lang^="ar"] .mx_ContextualMenu_item,
html[dir="rtl"] .mx_IconizedContextMenu_item,
html[dir="rtl"] .mx_ContextualMenu_item {
  min-height: 42px;
  border-radius: 8px;
  text-align: right;
}
html[lang^="ar"] .mx_EmojiPicker,
html[lang^="ar"] .mx_Stickers_content,
html[dir="rtl"] .mx_EmojiPicker,
html[dir="rtl"] .mx_Stickers_content {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(620px, calc(100vh - 24px));
}

/* Authentication and registration retain upstream behaviour while receiving
   the same typography, spacing and responsive proportions as the main app. */
html[lang^="ar"] .mx_AuthPage_modal,
html[lang^="ar"] .mx_AuthBody,
html[dir="rtl"] .mx_AuthPage_modal,
html[dir="rtl"] .mx_AuthBody {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-width: 100%;
  margin-inline: auto;
  border: 1px solid rgba(103, 160, 171, .2);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(2, 20, 24, .16);
}
html[lang^="ar"] .mx_AuthBody_fieldRow,
html[lang^="ar"] .mx_Field,
html[dir="rtl"] .mx_AuthBody_fieldRow,
html[dir="rtl"] .mx_Field {
  min-width: 0;
  max-width: 100%;
}
html[lang^="ar"] .mx_AuthBody input,
html[lang^="ar"] .mx_AuthBody textarea,
html[dir="rtl"] .mx_AuthBody input,
html[dir="rtl"] .mx_AuthBody textarea {
  box-sizing: border-box;
  width: 100%;
  text-align: right;
}
html[lang^="ar"] .mx_AuthBody [type="email"],
html[lang^="ar"] .mx_AuthBody [name="username"],
html[dir="rtl"] .mx_AuthBody [type="email"],
html[dir="rtl"] .mx_AuthBody [name="username"] {
  direction: ltr;
  text-align: left;
}

/* Dialogs must never exceed the available screen, including translated labels
   and browser zoom. The inner Element scrollers remain authoritative. */
html[lang^="ar"] .mx_Dialog_wrapper .mx_Dialog,
html[dir="rtl"] .mx_Dialog_wrapper .mx_Dialog {
  box-sizing: border-box;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
}
html[lang^="ar"] .mx_Dialog_title,
html[dir="rtl"] .mx_Dialog_title {
  overflow-wrap: anywhere;
  line-height: 1.4;
}
html[lang^="ar"] .mx_LegacyCallEvent_wrapper,
html[dir="rtl"] .mx_LegacyCallEvent_wrapper {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}
html[lang^="ar"] .mx_LegacyCallEvent_content,
html[dir="rtl"] .mx_LegacyCallEvent_content {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  html[lang^="ar"] .mx_AuthPage_modal,
  html[lang^="ar"] .mx_AuthBody,
  html[dir="rtl"] .mx_AuthPage_modal,
  html[dir="rtl"] .mx_AuthBody {
    width: calc(100vw - 20px);
    padding-inline: 18px;
    border-radius: 12px;
  }
  html[lang^="ar"] .mx_Dialog_wrapper .mx_Dialog,
  html[dir="rtl"] .mx_Dialog_wrapper .mx_Dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 12px;
  }
  html[lang^="ar"] .mx_LegacyCallEvent_wrapper,
  html[dir="rtl"] .mx_LegacyCallEvent_wrapper {
    width: 100%;
  }
}

@media (max-width: 760px) {
  html[lang^="ar"] .mx_TabbedView_tabsOnLeft,
  html[dir="rtl"] .mx_TabbedView_tabsOnLeft {
    grid-template-columns: minmax(0, 1fr) 52px !important;
    column-gap: 12px;
    padding-inline: 12px !important;
  }
  html[lang^="ar"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel,
  html[dir="rtl"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel {
    justify-content: center;
    padding-inline: 10px !important;
  }
  html[lang^="ar"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_text,
  html[dir="rtl"] .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_text {
    display: none !important;
  }
}
html[lang^="ar"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabels,
html[dir="rtl"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabels {
  width: auto !important;
  max-width: none !important;
}
html[lang^="ar"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabPanel,
html[dir="rtl"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabPanel {
  margin: 0 !important;
}
html[lang^="ar"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive,
html[dir="rtl"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive {
  grid-template-columns: minmax(0, 1fr) 52px !important;
}
html[lang^="ar"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel_text,
html[dir="rtl"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel_text {
  display: none !important;
}
/* EJADTECH quick display controls: visible outside Settings, upgrade-safe. */
.ejad-quick-controls {
    position: fixed;
    z-index: 450;
    inset-block-start: 50%;
    left: max(12px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 58px;
    padding: 6px;
    border: 1px solid rgba(90, 113, 118, .25);
    border-color: color-mix(in srgb, var(--cpd-color-border-interactive-secondary, #788c90) 35%, transparent);
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    background: color-mix(in srgb, var(--cpd-color-bg-canvas-default, #fff) 88%, transparent);
    box-shadow: 0 14px 38px rgba(7, 28, 33, .18), inset 0 1px rgba(255, 255, 255, .22);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    transform: translateY(-50%);
    font-family: "EJAD Cairo", "Cairo", sans-serif;
    color: var(--cpd-color-text-primary, #0b262c);
}

html:not([dir="rtl"]):not([lang^="ar"]) .ejad-quick-controls {
    right: max(12px, env(safe-area-inset-right));
    left: auto;
}

.ejad-quick-controls__button {
    position: relative;
    display: grid;
    place-items: center;
    gap: 1px;
    min-width: 44px;
    min-height: 48px;
    padding: 6px 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.ejad-quick-controls__button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ejad-quick-controls__button:hover {
    color: var(--cpd-color-text-action-accent, #087A5E);
    background: rgba(8, 122, 94, .1);
    background: color-mix(in srgb, var(--cpd-color-bg-action-primary-rest, #087A5E) 11%, transparent);
    transform: translateY(-1px);
}

.ejad-quick-controls__button:focus-visible {
    outline: 3px solid rgba(8, 122, 94, .35);
    outline: 3px solid color-mix(in srgb, var(--cpd-color-border-interactive-primary, #087A5E) 42%, transparent);
    outline-offset: 1px;
}

.ejad-quick-controls__button:disabled { cursor: wait; opacity: .55; }
.ejad-quick-controls__divider { height: 1px; margin: 0 7px; background: currentColor; opacity: .12; }
.ejad-quick-controls__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ejad-quick-controls--busy::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid transparent;
    border-block-start-color: var(--cpd-color-border-interactive-primary, #087A5E);
    border-radius: 12px;
    animation: ejad-controls-spin .7s linear infinite;
    pointer-events: none;
}

body.cpd-theme-dark .ejad-quick-controls,
body.cpd-theme-dark-hc .ejad-quick-controls {
    border-color: rgba(19, 233, 177, .2);
    background: rgba(5, 22, 26, .9);
    color: #eefaf7;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .05);
}

@keyframes ejad-controls-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .ejad-quick-controls,
    html:not([dir="rtl"]):not([lang^="ar"]) .ejad-quick-controls {
        inset-block-start: auto;
        inset-block-end: max(82px, calc(env(safe-area-inset-bottom) + 70px));
        left: max(12px, env(safe-area-inset-left));
        right: auto;
        flex-direction: row;
        width: auto;
        padding: 4px;
        border-radius: 12px;
        transform: none;
    }

    .ejad-quick-controls__button {
        grid-template-columns: 20px auto;
        min-width: 62px;
        min-height: 42px;
        padding-inline: 9px;
    }

    .ejad-quick-controls__divider { width: 1px; height: 26px; margin: 8px 0; }

    /* Dialogs already expose their own settings/navigation and need every
       pixel on small screens. Do not float product controls over form fields. */
    body:has(.mx_Dialog) .ejad-quick-controls {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ejad-quick-controls__button { transition: none; }
    .ejad-quick-controls--busy::after { animation-duration: 1.4s; }
}

/* v92 — functional conversation tabs and Matrix-backed context drawer. */
.ejad-conversation-tabs {
    position: relative;
    z-index: 14;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    padding-inline: clamp(12px, 2vw, 24px);
    overflow-x: auto;
    border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    background: rgba(255, 255, 255, .9);
    scrollbar-width: none;
    backdrop-filter: blur(16px) saturate(130%);
}
.ejad-conversation-tabs::-webkit-scrollbar { display: none; }
.ejad-conversation-tabs button {
    position: relative;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ejad-flow-muted, #60767a);
    font: 600 13px/1.35 "EJAD Cairo", "Cairo", Inter, sans-serif;
    cursor: pointer;
}
.ejad-conversation-tabs button:hover {
    background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
    color: var(--ejad-flow-accent-strong, #032E38);
}
.ejad-conversation-tabs button[aria-selected="true"] {
    background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
    color: var(--ejad-flow-accent-strong, #032E38);
}
.ejad-conversation-tabs button[aria-selected="true"]::after {
    position: absolute;
    inset-inline: 10px;
    inset-block-end: 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: var(--ejad-flow-accent, #087A5E);
    content: "";
}
.ejad-conversation-context {
    position: fixed;
    z-index: 2147481200;
    inset-block: 76px 18px;
    inset-inline-end: 18px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(390px, calc(100vw - 36px));
    overflow: hidden;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 16px;
    background: rgba(255, 255, 255, .98);
    color: var(--ejad-flow-ink, #0d2c33);
    box-shadow: 0 26px 70px rgba(8, 39, 46, .22);
    opacity: 0;
    transform: translateX(18px) scale(.985);
    transition: opacity .18s ease, transform .18s ease;
    backdrop-filter: blur(20px) saturate(135%);
}
html[dir="rtl"] .ejad-conversation-context { transform: translateX(-18px) scale(.985); }
.ejad-conversation-context--visible,
html[dir="rtl"] .ejad-conversation-context--visible { opacity: 1; transform: none; }
.ejad-conversation-context > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 10px 14px;
    border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    background: linear-gradient(135deg, rgba(8, 122, 94, .1), rgba(255, 255, 255, .72));
}
.ejad-conversation-context > header strong { font-size: 15px; font-weight: 700; }
.ejad-conversation-context__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ejad-flow-muted, #60767a);
    font-size: 24px;
    cursor: pointer;
}
.ejad-conversation-context__close:hover {
    border-color: var(--ejad-flow-line, rgba(18, 68, 79, .14));
    background: #fff;
    color: var(--ejad-flow-ink, #0d2c33);
}
.ejad-conversation-context__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
    padding: 12px;
    overflow: auto;
    background: var(--ejad-flow-canvas, #f8fbfa);
}
.ejad-conversation-context__event,
.ejad-conversation-context__member {
    display: flex;
    min-width: 0;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 12px;
    background: var(--ejad-flow-card, #fff);
    color: var(--ejad-flow-ink, #0d2c33);
    box-shadow: 0 4px 14px rgba(12, 46, 54, .045);
}
.ejad-conversation-context__event {
    flex-direction: column;
    gap: 6px;
    padding: 10px 11px;
    text-decoration: none;
}
.ejad-conversation-context__event:hover {
    border-color: rgba(8, 122, 94, .34);
    background: color-mix(in srgb, var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11)) 45%, var(--ejad-flow-card, #fff));
}
.ejad-conversation-context__event > span:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ejad-conversation-context__event strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ejad-conversation-context__event time { flex: 0 0 auto; color: var(--ejad-flow-muted, #60767a); font-size: 9px; }
.ejad-conversation-context__event > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ejad-flow-ink, #0d2c33);
    font-size: 12px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.ejad-conversation-context__member {
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
}
.ejad-conversation-context__avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg, #13e9b1, #13E8B0);
    color: #0d404c;
    font-size: 14px;
    font-weight: 700;
}
.ejad-conversation-context__member > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.ejad-conversation-context__member strong,
.ejad-conversation-context__member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-conversation-context__member strong { font-size: 12px; font-weight: 700; }
.ejad-conversation-context__member small { margin-block-start: 2px; color: var(--ejad-flow-muted, #60767a); font-size: 9px; }
.ejad-conversation-context__empty {
    margin: auto;
    padding: 28px 18px;
    color: var(--ejad-flow-muted, #60767a);
    font-size: 12px;
    text-align: center;
}
body.cpd-theme-dark .ejad-conversation-tabs,
body.cpd-theme-dark-hc .ejad-conversation-tabs,
body.cpd-theme-dark .ejad-conversation-context,
body.cpd-theme-dark-hc .ejad-conversation-context {
    background: rgba(11, 39, 45, .97);
    color: var(--ejad-flow-ink, #eef8f5);
}
body.cpd-theme-dark .ejad-conversation-context > header,
body.cpd-theme-dark-hc .ejad-conversation-context > header {
    background: linear-gradient(135deg, rgba(19, 232, 176, .13), rgba(13, 44, 51, .82));
}
body.cpd-theme-dark .ejad-conversation-context__close:hover,
body.cpd-theme-dark-hc .ejad-conversation-context__close:hover { background: #0f333b; }
@media (max-width: 760px) {
    .ejad-conversation-tabs { min-height: 40px; padding-inline: 7px; }
    .ejad-conversation-tabs button { min-height: 32px; padding-inline: 8px; font-size: 12px; }
    .ejad-conversation-context {
        inset: auto 0 0;
        width: 100vw;
        max-height: min(72dvh, 680px);
        border-width: 1px 0 0;
        border-radius: 20px 20px 0 0;
        transform: translateY(22px);
    }
    html[dir="rtl"] .ejad-conversation-context { transform: translateY(22px); }
    .ejad-conversation-context--visible,
    html[dir="rtl"] .ejad-conversation-context--visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ejad-conversation-context { transition: none; }
}

/* v93 — searchable, filterable, source-aware room file browser. */
.ejad-conversation-file-tools {
    position: sticky;
    z-index: 2;
    inset-block-start: -12px;
    display: grid;
    gap: 8px;
    margin: -12px -12px 4px;
    padding: 12px;
    border-block-end: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    background: color-mix(in srgb, var(--ejad-flow-canvas, #f8fbfa) 94%, transparent);
    backdrop-filter: blur(14px);
}
.ejad-conversation-file-tools__search {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 12px;
    background: var(--ejad-flow-card, #fff);
    color: var(--ejad-flow-ink, #0d2c33);
    outline: 0;
}
.ejad-conversation-file-tools__search:focus {
    border-color: var(--ejad-flow-accent, #087A5E);
    box-shadow: 0 0 0 3px var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
}
.ejad-conversation-file-tools__filters {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ejad-conversation-file-tools__filters::-webkit-scrollbar { display: none; }
.ejad-conversation-file-tools__filters button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 999px;
    background: var(--ejad-flow-card, #fff);
    color: var(--ejad-flow-muted, #60767a);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.ejad-conversation-file-tools__filters button[aria-selected="true"] {
    border-color: rgba(8, 122, 94, .32);
    background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
    color: var(--ejad-flow-accent-strong, #032E38);
}
.ejad-conversation-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 12px;
    background: var(--ejad-flow-card, #fff);
    box-shadow: 0 4px 14px rgba(12, 46, 54, .045);
}
.ejad-conversation-file > figure {
    width: 64px;
    height: 64px;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
}
.ejad-conversation-file > figure img { width: 100%; height: 100%; object-fit: cover; }
.ejad-conversation-file > div { display: grid; min-width: 0; gap: 8px; }
.ejad-conversation-file > div > div:first-child { display: grid; min-width: 0; }
.ejad-conversation-file strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ejad-conversation-file strong + span { overflow: hidden; margin-block-start: 2px; color: var(--ejad-flow-muted, #60767a); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ejad-conversation-file > div > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
.ejad-conversation-file a {
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
    border-radius: 8px;
    color: var(--ejad-flow-accent-strong, #032E38);
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}
.ejad-conversation-file a:hover { background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11)); }
body.cpd-theme-dark .ejad-conversation-file-tools,
body.cpd-theme-dark-hc .ejad-conversation-file-tools { background: rgba(10, 33, 38, .94); }
@media (max-width: 520px) {
    .ejad-conversation-file { grid-template-columns: 52px minmax(0, 1fr); }
    .ejad-conversation-file > figure { width: 52px; height: 52px; }
}

/* In-product communication guide: separates global person/room search from
   message search and explains the call/meeting flow without leaving Element. */
.ejad-communication-hub {
  position: fixed;
  z-index: 7900;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: "EJAD Cairo", "Cairo", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}
.ejad-communication-hub[hidden] { display: none !important; }
.ejad-communication-hub__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(2, 17, 20, .56);
  backdrop-filter: blur(8px);
  cursor: default;
}
.ejad-communication-hub__dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid rgba(8, 122, 94, .28);
  border-radius: 16px;
  background: rgba(250, 253, 252, .985);
  color: #0c292f;
  box-shadow: 0 28px 90px rgba(4, 27, 32, .34);
}
.ejad-communication-hub__dialog > header {
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(3, 46, 56, .11);
  background: inherit;
}
.ejad-communication-hub__dialog > header > div { display: grid; min-width: 0; gap: 3px; }
#ejad-communication-title { font-size: 19px; font-weight: 700; }
.ejad-communication-hub__subtitle { color: #627376; font-size: 12px; }
.ejad-communication-hub__close {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(8, 122, 94, .08);
  color: inherit;
  font: inherit;
  font-size: 24px;
  cursor: pointer;
}
.ejad-communication-hub__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 20px 12px;
}
.ejad-communication-hub__grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(8, 122, 94, .15);
  border-radius: 12px;
  background: rgba(8, 122, 94, .045);
}
.ejad-communication-hub__number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #087A5E;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.ejad-communication-hub__grid article strong { display: block; font-size: 14px; font-weight: 700; }
.ejad-communication-hub__grid article p { margin: 6px 0 0; color: #526569; font-size: 12px; line-height: 1.75; }
.ejad-communication-hub__grid article button {
  min-height: 36px;
  margin-top: 12px;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: #087A5E;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ejad-communication-hub__note {
  margin: 2px 20px 20px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(181, 113, 23, .09);
  color: #74501a;
  font-size: 11px;
  line-height: 1.7;
}
.ejad-communication-hub__status { min-height: 1px; margin: -12px 20px 18px; color: #a52d40; font-size: 11px; }
body.cpd-theme-dark .ejad-communication-hub__dialog,
body.cpd-theme-dark-hc .ejad-communication-hub__dialog {
  border-color: rgba(19, 233, 177, .28);
  background: rgba(5, 22, 26, .985);
  color: #eefaf7;
}
body.cpd-theme-dark .ejad-communication-hub__subtitle,
body.cpd-theme-dark .ejad-communication-hub__grid article p,
body.cpd-theme-dark-hc .ejad-communication-hub__subtitle,
body.cpd-theme-dark-hc .ejad-communication-hub__grid article p { color: #a9bbbf; }
body.cpd-theme-dark .ejad-communication-hub__grid article,
body.cpd-theme-dark-hc .ejad-communication-hub__grid article { background: rgba(19, 233, 177, .06); }
body.cpd-theme-dark .ejad-communication-hub__note,
body.cpd-theme-dark-hc .ejad-communication-hub__note { background: rgba(239, 178, 83, .11); color: #e8c78f; }
@media (max-width: 620px) {
  .ejad-communication-hub { padding: 10px; }
  .ejad-communication-hub__dialog { max-height: calc(100vh - 20px); border-radius: 16px; }
  .ejad-communication-hub__dialog > header { padding: 16px; }
  .ejad-communication-hub__subtitle { display: none; }
  .ejad-communication-hub__grid { grid-template-columns: 1fr; padding: 12px; }
  .ejad-communication-hub__note { margin: 0 12px 14px; }
}

/* Persistent, in-app unread awareness. Element's own room badges remain the
   source of truth; this layer only surfaces them at the top of the current
   workspace so users do not need to scroll the room list or timeline. */
.ejad-unread-center {
  position: fixed;
  z-index: 7600;
  /* Clear the room's own chrome. --ejad-room-chrome-bottom is measured in
     ejad-controls.js because the header, the tab bar and the pinned banner are
     each optional; the fallback covers a room that shows all three. */
  inset-block-start: max(var(--ejad-room-chrome-bottom, 152px),
                         calc(env(safe-area-inset-top) + 62px));
  left: 50%;
  width: min(520px, calc(100vw - 32px));
  pointer-events: none;
  transform: translateX(-50%);
  font-family: "Cairo", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}
.ejad-unread-center[hidden] { display: none !important; }
.ejad-unread-center__indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-inline: auto;
  padding: 7px 12px;
  border: 1px solid rgba(8, 122, 94, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: #0d2e36;
  box-shadow: 0 10px 32px rgba(4, 27, 32, .2);
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(18px);
}
.ejad-unread-center__indicator svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #087A5E;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ejad-unread-center__label { font-size: 13px; font-weight: 700; }
.ejad-unread-center__badge {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 999px;
  background: #c9344a;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.ejad-unread-center--empty .ejad-unread-center__label,
.ejad-unread-center--empty .ejad-unread-center__badge { display: none; }
.ejad-unread-center--empty .ejad-unread-center__indicator {
  width: 42px;
  min-width: 42px;
  padding: 8px;
  justify-content: center;
  box-shadow: 0 7px 22px rgba(4, 27, 32, .14);
}
.ejad-unread-center__panel {
  width: min(420px, 100%);
  max-height: min(520px, calc(100vh - 150px));
  margin: 10px auto 0;
  overflow: hidden;
  border: 1px solid rgba(8, 122, 94, .26);
  border-radius: 16px;
  background: rgba(250, 253, 252, .985);
  color: #0c292f;
  box-shadow: 0 24px 70px rgba(4, 27, 32, .25);
  pointer-events: auto;
  backdrop-filter: blur(22px);
}
.ejad-unread-center__panel[hidden] { display: none !important; }
.ejad-unread-center__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid rgba(3, 46, 56, .1);
}
.ejad-unread-center__panel-header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.ejad-unread-center__panel-actions {
  display: flex !important;
  grid-auto-flow: initial;
  align-items: center;
  gap: 6px !important;
}
.ejad-unread-center__mark-all {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(8, 122, 94, .24);
  border-radius: 8px;
  background: rgba(8, 122, 94, .08);
  color: #032E38;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.ejad-unread-center--empty .ejad-unread-center__mark-all { display: none; }
#ejad-unread-panel-title { font-size: 15px; font-weight: 700; }
.ejad-unread-center__panel-summary { color: #627376; font-size: 11px; }
.ejad-unread-center__panel-close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: currentColor;
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}
.ejad-unread-center__panel-close:hover,
.ejad-unread-center__panel-close:focus-visible { background: rgba(8, 122, 94, .1); outline: none; }
.ejad-unread-center__list {
  display: grid;
  max-height: min(420px, calc(100vh - 245px));
  padding: 7px;
  overflow: auto;
  overscroll-behavior: contain;
}
.ejad-unread-center__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 58px;
  padding: 5px;
  border-radius: 12px;
  background: transparent;
  color: inherit;
}
.ejad-unread-center__item:hover,
.ejad-unread-center__item:focus-within {
  background: rgba(8, 122, 94, .09);
  outline: none;
}
.ejad-unread-center__item-open {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 52px;
  padding: 3px 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ejad-unread-center__item-open:focus-visible,
.ejad-unread-center__mark-read:focus-visible,
.ejad-unread-center__mark-all:focus-visible {
  outline: 2px solid rgba(8, 122, 94, .45);
  outline-offset: 1px;
}
.ejad-unread-center__mark-read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(8, 122, 94, .09);
  color: #032E38;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.ejad-unread-center__mark-read > span:first-child { font-size: 14px; }
.ejad-unread-center__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: #e0f2ed;
  color: #032E38;
  font-size: 15px;
  font-weight: 700;
}
.ejad-unread-center__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ejad-unread-center__item-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}
.ejad-unread-center__item-count {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding-inline: 7px;
  border-radius: 999px;
  background: #c9344a;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}
.ejad-unread-center__empty { margin: 0; padding: 18px 14px; color: #627376; font-size: 12px; text-align: center; }
.ejad-unread-center__toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(8, 122, 94, .3);
  border-radius: 12px;
  background: rgba(248, 253, 252, .98);
  color: #0c292f;
  box-shadow: 0 18px 50px rgba(4, 27, 32, .24);
  pointer-events: auto;
  direction: rtl;
  backdrop-filter: blur(20px);
}
.ejad-unread-center__toast[hidden] { display: none !important; }
.ejad-unread-center__toast-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.ejad-unread-center__toast button {
  min-height: 34px;
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  background: #087A5E;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ejad-unread-center__toast .ejad-unread-center__dismiss {
  width: 34px;
  padding: 0;
  background: transparent;
  color: currentColor;
  font-size: 22px;
}
body.cpd-theme-dark .ejad-unread-center__indicator,
body.cpd-theme-dark-hc .ejad-unread-center__indicator,
body.cpd-theme-dark .ejad-unread-center__panel,
body.cpd-theme-dark-hc .ejad-unread-center__panel,
body.cpd-theme-dark .ejad-unread-center__toast,
body.cpd-theme-dark-hc .ejad-unread-center__toast {
  border-color: rgba(19, 233, 177, .32);
  background: rgba(5, 22, 26, .96);
  color: #eefaf7;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .44);
}
body.cpd-theme-dark .ejad-unread-center__panel-header,
body.cpd-theme-dark-hc .ejad-unread-center__panel-header { border-color: rgba(19, 233, 177, .12); }
body.cpd-theme-dark .ejad-unread-center__panel-summary,
body.cpd-theme-dark-hc .ejad-unread-center__panel-summary,
body.cpd-theme-dark .ejad-unread-center__empty,
body.cpd-theme-dark-hc .ejad-unread-center__empty { color: #a9bbbf; }
body.cpd-theme-dark .ejad-unread-center__item:hover,
body.cpd-theme-dark .ejad-unread-center__item:focus-visible,
body.cpd-theme-dark-hc .ejad-unread-center__item:hover,
body.cpd-theme-dark-hc .ejad-unread-center__item:focus-visible { background: rgba(19, 233, 177, .11); }
body.cpd-theme-dark .ejad-unread-center__avatar,
body.cpd-theme-dark-hc .ejad-unread-center__avatar { background: #103942; color: #13e9b1; }
body.cpd-theme-dark .ejad-unread-center__mark-read,
body.cpd-theme-dark-hc .ejad-unread-center__mark-read,
body.cpd-theme-dark .ejad-unread-center__mark-all,
body.cpd-theme-dark-hc .ejad-unread-center__mark-all {
  border-color: rgba(19, 233, 177, .24);
  background: rgba(19, 233, 177, .1);
  color: #13e9b1;
}

@media (max-width: 760px) {
  .ejad-unread-center {
    inset-block-start: max(62px, calc(env(safe-area-inset-top) + 54px));
    width: calc(100vw - 20px);
  }
  .ejad-unread-center__label { display: none; }
  .ejad-unread-center__panel { width: 100%; border-radius: 12px; }
  .ejad-unread-center__toast { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ejad-unread-center__mark-read > span:last-child { display: none; }
  .ejad-unread-center__mark-read { width: 36px; justify-content: center; padding: 5px; }
  .ejad-unread-center__mark-all { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }
}

/* EJADTECH RTL acceptance fixes for Element 1.12.26 components. These rules
   deliberately target current upstream component names rather than applying a
   blanket direction to every flex container. */
html[dir="rtl"] .mx_RoomHeader {
    padding-inline: var(--cpd-space-3x);
}
html[dir="rtl"] .mx_RoomHeader_infoWrapper {
    text-align: right;
}
html[dir="rtl"] .mx_RoomHeader_info {
    padding-right: 0;
    padding-left: var(--cpd-space-13x);
    text-align: right;
}

/* v31 — Home attention centre. This surface is inserted by the signed product
   controller after Element's Matrix client is ready, so counts, mentions and
   previews reflect live room state rather than decorative placeholders. */
.ejad-home-attention {
  position: relative;
  margin: 2px 0 16px;
  padding: clamp(14px, 2vw, 20px);
  overflow: hidden;
  border: 1px solid rgba(19, 233, 177, .2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 6%, rgba(19, 233, 177, .13), transparent 30%),
    linear-gradient(145deg, rgba(4, 22, 26, .86), rgba(11, 38, 44, .72));
  color: var(--ejp-text, #f5fbf9);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.ejad-home-attention::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(#13e9b1, rgba(19, 233, 177, .05));
}
.ejad-home-attention__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.ejad-home-attention__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ejad-home-attention__heading > div { min-width: 0; }
.ejad-home-attention__symbol {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(19, 233, 177, .26);
  border-radius: 12px;
  background: rgba(19, 233, 177, .1);
  color: #13e9b1;
}
.ejad-home-attention__symbol svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ejad-home-attention__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #13e9b1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ejad-home-attention__title {
  margin: 0 !important;
  color: inherit !important;
  font-size: clamp(15px, 1.6vw, 19px) !important;
  line-height: 1.45 !important;
}
.ejad-home-attention__subtitle {
  margin: 3px 0 0 !important;
  color: var(--ejp-muted, #9ab3b8) !important;
  font-size: 10px !important;
  line-height: 1.6;
}
.ejad-home-attention__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.ejad-home-attention__actions button,
.ejad-home-attention__item-actions button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(19, 233, 177, .26);
  border-radius: 8px;
  background: rgba(19, 233, 177, .09);
  color: #13e9b1;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.ejad-home-attention__actions button:hover,
.ejad-home-attention__item-actions button:hover {
  border-color: rgba(19, 233, 177, .5);
  background: rgba(19, 233, 177, .16);
  transform: translateY(-1px);
}
.ejad-home-attention__actions button:focus-visible,
.ejad-home-attention__item-actions button:focus-visible,
.ejad-home-attention__stat:focus-visible {
  outline: 3px solid rgba(19, 233, 177, .3);
  outline-offset: 2px;
}
.ejad-home-attention__actions button[hidden] { display: none; }
.ejad-home-attention__search {
  position: relative;
  z-index: 12;
  display: block;
  min-height: 46px;
  height: 46px;
  max-height: 46px;
  margin-bottom: 3px;
  padding: 0;
  border: 1px solid rgba(19, 233, 177, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ejad-home-attention__search:focus-within {
  border-color: rgba(19, 233, 177, .62);
  background: rgba(19, 233, 177, .08);
  box-shadow: 0 0 0 3px rgba(19, 233, 177, .11), inset 0 1px rgba(255,255,255,.05);
}
.ejad-home-attention__search > span { position: absolute; z-index: 2; inset-inline-start: 13px; top: 50%; display: grid; place-items: center; color: #13e9b1; transform: translateY(-50%); pointer-events: none; }
.ejad-home-attention__search > span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ejad-home-attention__search-input {
  min-width: 0;
  width: 100%;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box;
  padding: 0 40px !important;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}
.ejad-home-attention__search-input::placeholder { color: #8ca2a7; opacity: 1; }
.ejad-home-attention__search-input::-webkit-search-cancel-button { display: none; }
.ejad-home-attention__search-clear {
  position: absolute;
  z-index: 3;
  inset-inline-end: 8px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(19, 233, 177,.11);
  color: #13e9b1;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  transform: translateY(-50%);
}
.ejad-home-attention__search-clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ejad-home-attention .ejad-home-attention__search-clear[hidden] { display: none !important; }
.ejad-home-attention__search-hint { margin: 0 4px 10px !important; color: var(--ejp-muted, #9ab3b8) !important; font-size: 8.5px !important; }
.ejad-home-attention__kind-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ejad-home-attention__kind-filters button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(19, 233, 177,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #a9bfc4;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.ejad-home-attention__kind-filters button:hover { background: rgba(19, 233, 177,.08); }
.ejad-home-attention__kind-filters button[aria-selected="true"] { border-color: rgba(19, 233, 177,.52); background: rgba(19, 233, 177,.14); color: #13e9b1; }
.ejad-home-attention__kind-filters button:focus-visible { outline: 3px solid rgba(19, 233, 177,.22); outline-offset: 2px; }
.ejad-home-attention__kind-filters button > span:first-child { display: grid; place-items: center; }
.ejad-home-attention__kind-filters svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ejad-home-attention__search-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  inset-inline: 0;
  max-height: min(430px, 55vh);
  padding: 7px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(19, 233, 177,.25);
  border-radius: 12px;
  background: rgba(7, 29, 34, .985);
  box-shadow: 0 24px 60px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(22px) saturate(140%);
}
.ejad-home-attention__search-results[hidden] { display: none; }
.ejad-home-attention__search-results-heading { padding: 7px 9px 9px; color: #91a6aa; font-size: 9px; font-weight: 700; }
.ejad-home-attention__search-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f3faf8;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ejad-home-attention__search-result:hover,
.ejad-home-attention__search-result:focus-visible { background: rgba(19, 233, 177,.12); outline: none; }
.ejad-home-attention__search-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg,#13e9b1,#569eac); color: #09262d; font-size: 13px; font-weight: 700; }
.ejad-home-attention__search-details { display: grid; min-width: 0; gap: 2px; }
.ejad-home-attention__search-details strong,
.ejad-home-attention__search-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-home-attention__search-details strong { color: inherit !important; font-size: 11px !important; }
.ejad-home-attention__search-details small { color: #9fb1b5; font-size: 9px; }
.ejad-home-attention__search-details em { width: max-content; padding: 1px 5px; border-radius: 999px; background: rgba(19, 233, 177,.1); color: #13e9b1; font-size: 7.5px; font-style: normal; font-weight: 700; }
.ejad-home-attention__search-result > b { display: grid; place-items: center; min-width: 25px; height: 25px; padding-inline: 6px; border-radius: 999px; background: #087A5E; color: #fff; font-size: 9px; }
.ejad-conversation-kind-icon svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ejad-conversation-kind-icon--direct { border-radius: 50% !important; }
.ejad-conversation-kind-icon--group { border-radius: 13px !important; }
.ejad-home-attention__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.ejad-home-attention__stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 11px;
  border: 1px solid rgba(19, 233, 177, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.ejad-home-attention__stat:hover { background: rgba(19, 233, 177, .06); }
.ejad-home-attention__stat[aria-selected="true"] {
  border-color: rgba(19, 233, 177, .45);
  background: rgba(19, 233, 177, .11);
  box-shadow: inset 0 0 0 1px rgba(19, 233, 177, .08);
}
.ejad-home-attention__stat strong {
  display: grid !important;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding-inline: 6px;
  border-radius: 8px;
  background: rgba(19, 233, 177, .12);
  color: #13e9b1 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
.ejad-home-attention__stat--mentions strong { background: rgba(225, 94, 113, .14); color: #ffadbb !important; }
.ejad-home-attention__stat span {
  min-width: 0;
  overflow: hidden;
  color: var(--ejp-muted, #9ab3b8);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ejad-home-attention__status:empty { display: none; }
.ejad-home-attention__status {
  padding: 14px;
  color: var(--ejp-muted, #9ab3b8);
  font-size: 11px;
  text-align: center;
}
.ejad-home-attention--loading .ejad-home-attention__stats,
.ejad-home-attention--loading .ejad-home-attention__list,
.ejad-home-attention--loading .ejad-home-attention__footer { opacity: .46; }
.ejad-home-attention--refreshing .ejad-home-attention__symbol svg { animation: ejad-attention-pulse .42s ease; }
@keyframes ejad-attention-pulse { 50% { transform: scale(.84); opacity: .55; } }
.ejad-home-attention__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ejad-home-attention__item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas: "avatar content" "footer footer";
  align-items: center;
  gap: 7px 10px;
  min-width: 0;
  min-height: 126px;
  padding: 12px;
  border: 1px solid rgba(19, 233, 177, .12);
  border-radius: 12px;
  background: rgba(1, 17, 20, .32);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.ejad-home-attention__item:hover {
  border-color: rgba(19, 233, 177, .34);
  background: rgba(14, 49, 56, .6);
  transform: translateY(-1px);
}
.ejad-home-attention__item--mention { border-color: rgba(225, 94, 113, .28); }
.ejad-home-attention__avatar {
  grid-area: avatar;
  display: grid;
  place-items: center;
  align-self: start;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, #13e9b1, #13E8B0);
  color: #061e23;
  font-size: 14px;
  font-weight: 700;
}
.ejad-home-attention__item-content { grid-area: content; min-width: 0; }
.ejad-home-attention__item-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}
.ejad-home-attention__item-top strong {
  min-width: 0;
  overflow: hidden;
  color: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ejad-home-attention__item-top time { color: #7e999e; font-size: 9px; font-weight: 700; white-space: nowrap; }
.ejad-home-attention__item-context {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
}
.ejad-home-attention__meta {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 14px;
  overflow: hidden;
  color: #13e9b1;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ejad-home-attention__item-content p {
  display: -webkit-box;
  margin: 3px 0 0 !important;
  overflow: hidden;
  color: var(--ejp-muted, #9ab3b8) !important;
  font-size: 9px !important;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ejad-home-attention__item-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-top: 2px;
}
.ejad-home-attention__badges { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ejad-home-attention__badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(19, 233, 177, .1);
  color: #13e9b1;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.ejad-home-attention__badge--mention { background: rgba(225, 94, 113, .15); color: #ffb4c0; }
.ejad-home-attention__item-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.ejad-home-attention__item-actions button { min-height: 29px; padding: 5px 9px; font-size: 9px; }
.ejad-home-attention__item-actions button:first-child { border-color: transparent; background: #13E8B0; color: #04181d; }
.ejad-home-attention__empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 88px;
  padding: 16px;
  border: 1px dashed rgba(19, 233, 177, .24);
  border-radius: 12px;
  background: rgba(19, 233, 177, .035);
  text-align: start;
}
.ejad-home-attention__empty > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(19, 233, 177, .13);
  color: #13e9b1;
  font-weight: 700;
}
.ejad-home-attention__empty strong { color: inherit !important; font-size: 11px !important; }
.ejad-home-attention__empty p { margin: 2px 0 0 !important; color: var(--ejp-muted, #9ab3b8) !important; font-size: 9px !important; }
.ejad-home-attention__footer { display: flex; justify-content: flex-end; margin-top: 8px; color: #718b90; font-size: 8px; }

/* v37 — Element sanitises classes from the embedded home document. The
   controller restores its fixed semantic classes after insertion; keep the
   live attention centre as a full-width sibling instead of squeezing it into
   the overview header's flex row. */
.mx_HomePage_body .ejp-home {
  min-height: 100%;
  padding: clamp(18px, 2.4vw, 36px);
  overflow-x: hidden;
  overflow-y: visible;
}
.mx_HomePage_body .ejp-shell { width: min(1440px, 100%); }
.mx_HomePage_body .ejp-logged-in { display: block; min-width: 0; }
.mx_HomePage_body .ejp-header { padding-bottom: 20px; border-bottom: 1px solid var(--ejp-line); }
.mx_HomePage_body .ejp-overview {
  display: block !important;
  min-width: 0;
  min-height: 0;
  margin: 18px 0 24px;
  padding: clamp(15px, 1.8vw, 20px);
}
.mx_HomePage_body .ejp-overview > .ejp-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 12px;
}
.mx_HomePage_body .ejp-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}
.mx_HomePage_body .ejp-overview-card {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 70px;
  padding: 11px;
}
.mx_HomePage_body .ejp-overview-card > span:nth-child(2) > span,
.mx_HomePage_body .ejp-copy > span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ejp-muted);
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx_HomePage_body .ejp-section-head,
.mx_HomePage_body .ejp-section > .ejp-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.mx_HomePage_body .ejp-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx_HomePage_body .ejp-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx_HomePage_body .ejp-group { min-height: 104px; padding: 17px; }
.mx_HomePage_body .ejp-action { min-height: 76px; padding: 13px; }
.mx_HomePage_body .ejp-guide { display: block; }
.mx_HomePage_body > div > div > .ejp-logged-out { display: none; }
.mx_HomePage_body #ejad-home-attention {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 2vw, 22px);
  background:
    radial-gradient(circle at 92% 6%, rgba(19, 233, 177, .13), transparent 30%),
    linear-gradient(145deg, #051a1e, #0f333b) !important;
  color: #f5fbf9 !important;
}
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__title { color: #f5fbf9 !important; }
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__stat {
  border-color: rgba(19, 233, 177, .15) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #f5fbf9 !important;
}
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__stat[aria-selected="true"] {
  border-color: rgba(19, 233, 177, .45) !important;
  background: rgba(19, 233, 177, .11) !important;
}
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__item {
  background: rgba(1, 17, 20, .48) !important;
  color: #f5fbf9 !important;
}
.cpd-theme-light .mx_HomePage_body .ejp-overview {
  border-color: rgba(3, 46, 56, .16);
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(241, 248, 246, .94));
  box-shadow: 0 16px 40px rgba(13, 46, 53, .08);
}
.cpd-theme-light .mx_HomePage_body .ejp-overview h2,
.cpd-theme-light .mx_HomePage_body .ejp-overview-card strong { color: #0a242a !important; }
.cpd-theme-light .mx_HomePage_body .ejp-overview-card {
  border-color: rgba(3, 46, 56, .14);
  background: rgba(255, 255, 255, .82);
  color: #0a242a !important;
}
.cpd-theme-light .mx_HomePage_body .ejp-overview-card:hover {
  border-color: rgba(8, 122, 94, .48);
  background: #fff;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention {
  border-color: rgba(3, 46, 56, .18);
  background:
    radial-gradient(circle at 92% 6%, rgba(19, 232, 176, .12), transparent 31%),
    linear-gradient(145deg, #ffffff, #edf6f4) !important;
  color: #0a242a !important;
  box-shadow: 0 18px 45px rgba(13, 46, 53, .09), inset 0 1px rgba(255, 255, 255, .8);
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__title {
  color: #0a242a !important;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__subtitle,
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__stat span,
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__item-content p {
  color: #567277 !important;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__symbol,
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__actions button,
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__item-actions button:last-child {
  border-color: rgba(8, 122, 94, .2);
  background: rgba(19, 232, 176, .08);
  color: #087A5E;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search {
  border-color: rgba(8, 122, 94,.2);
  background: rgba(255,255,255,.78);
  color: #0d2f36;
  box-shadow: 0 5px 18px rgba(13, 46, 53,.045), inset 0 1px #fff;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search:focus-within { border-color: rgba(8, 122, 94,.52); background: #fff; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-results { border-color: rgba(8, 122, 94,.22); background: rgba(255,255,255,.985); color: #0d2f36; box-shadow: 0 24px 60px rgba(10, 44, 52,.2); }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-result { color: #0d2f36; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-result:hover,
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-result:focus-visible { background: rgba(19, 232, 176,.1); }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-details small { color: #657d82; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-details em { background: rgba(19, 232, 176,.1); color: #087A5E; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__kind-filters button { border-color: rgba(8, 122, 94,.16); background: rgba(255,255,255,.68); color: #567277; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__kind-filters button[aria-selected="true"] { border-color: rgba(8, 122, 94,.42); background: rgba(19, 232, 176,.11); color: #087A5E; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__stat {
  border-color: rgba(3, 46, 56, .14) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #0a242a !important;
  box-shadow: 0 5px 16px rgba(13, 46, 53, .04);
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__stat[aria-selected="true"] {
  border-color: rgba(8, 122, 94, .42) !important;
  background: rgba(19, 232, 176, .1) !important;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__stat strong {
  background: rgba(19, 232, 176, .11);
  color: #087A5E !important;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__stat--mentions strong {
  background: rgba(198, 62, 81, .1);
  color: #b54759 !important;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__item {
  border-color: rgba(3, 46, 56, .14);
  background: rgba(255, 255, 255, .86) !important;
  color: #0a242a !important;
  box-shadow: 0 6px 18px rgba(13, 46, 53, .045);
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__item:hover {
  border-color: rgba(8, 122, 94, .38);
  background: #fff !important;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__item--mention {
  border-color: rgba(198, 62, 81, .24);
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__item-top time,
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__footer { color: #6f888d; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__meta { color: #087A5E; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__badge {
  background: rgba(19, 232, 176, .1);
  color: #087A5E;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__badge--mention {
  background: rgba(198, 62, 81, .1);
  color: #b54759;
}
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__item-actions button:first-child {
  border-color: transparent;
  background: #13E8B0;
  color: #08252b;
}

@container (max-width: 1100px) {
  .mx_HomePage_body .ejp-overview-grid,
  .mx_HomePage_body .ejp-groups,
  .mx_HomePage_body .ejp-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx_HomePage_body .ejp-group:first-child { grid-column: 1 / -1; }
  .mx_HomePage_body #ejad-home-attention .ejad-home-attention__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .mx_HomePage_body .ejp-home { padding: 14px; }
  .mx_HomePage_body .ejp-overview-grid,
  .mx_HomePage_body .ejp-groups,
  .mx_HomePage_body .ejp-actions { grid-template-columns: 1fr; }
  .mx_HomePage_body .ejp-group:first-child { grid-column: auto; }
  .mx_HomePage_body #ejad-home-attention { padding: 13px; }
  .mx_HomePage_body #ejad-home-attention .ejad-home-attention__list { grid-template-columns: 1fr; }
}

/* The Home summary replaces the persistent floating unread pill. Inside a
   room, only the short-lived new-message toast remains, leaving the timeline,
   thread panel and composer unobstructed. */
.ejad-unread-center--home .ejad-unread-center__indicator,
.ejad-unread-center--home .ejad-unread-center__panel,
.ejad-unread-center--room .ejad-unread-center__indicator,
.ejad-unread-center--room .ejad-unread-center__panel { display: none !important; }
body[data-ejad-surface="room"] .ejad-quick-controls { display: none !important; }

/* Room and thread panels: measured width, full-width message cards, and no
   artificial horizontal squeeze when Arabic or long names are displayed. */
body[data-ejad-surface="room"] .mx_RightPanel {
  flex: 0 1 clamp(340px, 25vw, 420px);
  width: clamp(340px, 25vw, 420px);
  min-width: 310px;
  max-width: 42vw;
  border-inline-start: 1px solid rgba(103, 160, 171, .18) !important;
  box-shadow: -10px 0 30px rgba(4, 30, 35, .035);
}
body[data-ejad-surface="room"] .mx_ThreadView,
body[data-ejad-surface="room"] .mx_RightPanel .mx_RoomView_MessageList { width: 100%; min-width: 0; }
body[data-ejad-surface="room"] .mx_ThreadView .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-inline: 10px;
}
body[data-ejad-surface="room"] .mx_ThreadView .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

@container (max-width: 900px) {
  .ejad-home-attention__list { grid-template-columns: 1fr; }
}
@container (max-width: 620px) {
  .ejad-home-attention { padding: 13px; border-radius: 12px; }
  .ejad-home-attention__header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ejad-home-attention__actions { width: 100%; }
  .ejad-home-attention__actions button { flex: 1 1 0; }
  .ejad-home-attention__stats { grid-template-columns: 1fr; }
  .ejad-home-attention__stat { min-height: 46px; }
  .ejad-home-attention__item { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "avatar content" "footer footer"; }
  .ejad-home-attention__item-footer { align-items: stretch; flex-direction: column; }
  .ejad-home-attention__badges { justify-content: flex-start; }
  .ejad-home-attention__item-actions { width: 100%; margin-inline-start: 0; }
  .ejad-home-attention__item-actions button { flex: 1 1 0; }
}
@media (max-width: 1100px) {
  .mx_HomePage_body *:has(> #ejad-home-attention) {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  .mx_HomePage_body .ejp-overview > .ejad-home-attention,
  .mx_HomePage_body #ejad-home-attention {
    grid-column: 1 / -1 !important;
    flex: 1 0 100% !important;
    order: -1;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
@media (max-width: 900px) {
  body[data-ejad-surface="room"] .mx_RightPanel {
    width: min(390px, 44vw);
    min-width: min(310px, 44vw);
    max-width: 44vw;
  }
}
@media (max-width: 760px) {
  body[data-ejad-surface="home"] .ejad-quick-controls { display: none !important; }
  .mx_HomePage_body *:has(> #ejad-home-attention) {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  .mx_HomePage_body .ejp-overview > .ejad-home-attention,
  .mx_HomePage_body #ejad-home-attention {
    grid-column: 1 / -1 !important;
    flex: 1 0 100% !important;
    order: -1;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0;
    padding: 13px;
    border-radius: 12px;
  }
  .ejad-home-attention *,
  .ejad-home-attention *::before,
  .ejad-home-attention *::after { box-sizing: border-box; min-width: 0; }
  .ejad-home-attention__header { align-items: stretch; flex-direction: column; gap: 10px; }
  .ejad-home-attention__heading { align-items: flex-start; }
  .ejad-home-attention__title { font-size: 15px !important; }
  .ejad-home-attention__subtitle { font-size: 9px !important; }
  .ejad-home-attention__actions { width: 100%; }
  .ejad-home-attention__actions button { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; }
  .ejad-home-attention__stats { grid-template-columns: 1fr; }
  .ejad-home-attention__stat { min-height: 46px; }
  .ejad-home-attention__stat span { overflow: visible; text-overflow: clip; white-space: normal; }
  .ejad-home-attention__list { grid-template-columns: 1fr; }
  .ejad-home-attention__item {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "avatar content" "footer footer";
    width: 100%;
  }
  .ejad-home-attention__item-footer { align-items: stretch; flex-direction: column; }
  .ejad-home-attention__badges { justify-content: flex-start; }
  .ejad-home-attention__item-actions { width: 100%; }
  .ejad-home-attention__item-actions button { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; }
  body[data-ejad-surface="room"] .mx_RightPanel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ejad-home-attention *, .ejad-home-attention *::before, .ejad-home-attention *::after { animation: none !important; transition: none !important; }
}

html[dir="rtl"] .mx_CallEvent_wrapper {
    direction: rtl;
    justify-content: flex-start;
    padding-inline: clamp(8px, 2vw, 24px);
}
html[dir="rtl"] .mx_CallEvent {
    direction: rtl;
    flex: 0 1 680px;
    width: auto;
    max-width: min(680px, 100%);
    border: 1px solid color-mix(in srgb, var(--cpd-color-border-interactive-secondary, #788c90) 22%, transparent);
    border-radius: 12px;
}
html[dir="rtl"] .mx_CallEvent_columns {
    direction: rtl;
    flex-direction: row;
    min-width: 0;
}
html[dir="rtl"] .mx_CallEvent_details,
html[dir="rtl"] .mx_CallEvent_title {
    direction: rtl;
    min-width: 0;
    text-align: right;
}
html[dir="rtl"] .mx_CallEvent_inactive .mx_CallEvent_title svg {
    margin-right: 0;
    margin-left: var(--cpd-space-2x);
}
html[dir="rtl"] .mx_CallEvent_button {
    margin-right: auto;
    margin-left: 0;
}

html[dir="rtl"] .mx_MessageComposer_wrapper {
    padding-right: 16px;
    padding-left: 16px;
}
html[dir="rtl"] .mx_MessageComposer {
    box-sizing: border-box;
    width: auto !important;
    max-width: calc(100% - 22px);
}
html[dir="rtl"] .mx_MessageComposer_row {
    direction: rtl;
    flex-direction: row;
}
/* Keep the composer affordances beside the RTL writing edge. Element's DOM
   order is optimised for LTR, so use flex order instead of mirroring icons. */
html[dir="rtl"] .mx_MessageComposer_e2eIconWrapper {
    order: -1;
}
html[dir="rtl"] .mx_MessageComposer_input,
html[dir="rtl"] .mx_BasicMessageComposer,
html[dir="rtl"] .mx_BasicMessageComposer_input {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .mx_MessageComposer_button:last-child {
    margin-right: 0;
    margin-left: 0;
}

html[dir="rtl"] [role="menu"],
html[dir="rtl"] [role="menuitem"],
html[dir="rtl"] .mx_MessageComposer_buttonMenu {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .mx_MessageComposer_buttonMenu .mx_IconizedContextMenu_item,
html[dir="rtl"] .mx_MessageComposer_buttonMenu .mx_ContextualMenu_item {
    justify-content: flex-start;
    gap: 10px;
}

/* Element marks the settings view as responsive based on its own container,
   including on wide desktop dialogs. Keep the complete Arabic navigation
   visible on desktop; collapse to the icon rail only on genuinely narrow
   viewports in the mobile rule below. */
@media (min-width: 761px) {
    html[lang^="ar"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive,
    html[dir="rtl"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 232px) !important;
    }
    html[lang^="ar"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel_text,
    html[dir="rtl"] .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel_text {
        display: inline !important;
    }
}

/* v90 — final room-header identity contract. Keep the avatar and information
   button as the first two intrinsic flex items, and put the flexible spacer
   after the information button. The row direction alone mirrors the identity
   for RTL; reversing both direction and order separated the two controls. */
html body[data-ejad-surface="room"] .mx_RoomHeader {
    display: flex !important;
    align-items: center !important;
    gap: var(--cpd-space-3x, 12px) !important;
}
html body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
    margin: 0 auto 0 0 !important;
    text-align: start !important;
}
html body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper .mx_RoomHeader_info {
    padding: 0 !important;
    text-align: start !important;
}
html[dir="rtl"] body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
    margin: 0 0 0 auto !important;
}

@media (max-width: 760px) {
    html body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
    overflow: hidden !important;
}
}

/* v91 — EJAD Flow. A calm, information-dense collaboration surface inspired
   by the strongest enterprise patterns without copying another product's
   colour, geometry, or navigation. These rules only restyle existing Matrix
   controls; they do not change encryption, permissions, receipts, or events. */
:root {
    --ejad-flow-rail: #0b2e36;
    --ejad-flow-rail-deep: #08252c;
    --ejad-flow-sidebar: #f2f8f6;
    --ejad-flow-sidebar-hover: #e5f2ef;
    --ejad-flow-sidebar-selected: #d5ece6;
    --ejad-flow-canvas: #f8fbfa;
    --ejad-flow-card: #ffffff;
    --ejad-flow-ink: #0d2c33;
    --ejad-flow-muted: #60767a;
    --ejad-flow-line: rgba(18, 68, 79, .14);
    --ejad-flow-accent: #087A5E;
    --ejad-flow-accent-strong: #032E38;
    --ejad-flow-accent-soft: rgba(8, 122, 94, .11);
    --ejad-flow-warn: #a5641c;
    --ejad-flow-danger: #bd4651;
    --ejad-flow-shadow: 0 12px 34px rgba(12, 46, 54, .09);
    --ejad-flow-shadow-sm: 0 5px 16px rgba(12, 46, 54, .07);
    --ejad-flow-radius: 16px;
}

/* Workspace rail and conversation navigation */
.mx_SpacePanel,
.mx_SpacePanel .mx_SpacePanel_spaces {
    border-inline-end-color: rgba(255, 255, 255, .09) !important;
    background: linear-gradient(180deg, var(--ejad-flow-rail), var(--ejad-flow-rail-deep)) !important;
}
.mx_SpacePanel {
    --cpd-color-text-primary: #f3fbf9;
    --cpd-color-text-secondary: #c5d9dd;
    --cpd-color-alpha-gray-300: rgba(19, 233, 177, .16);
    --activeBackground-color: rgba(19, 233, 177, .18);
    --activeBorder-color: #f3fbf9;
}
.mx_SpacePanel .mx_SpaceButton_icon svg,
.mx_SpacePanel .mx_SpaceButton_menuButton svg,
.mx_SpacePanel .mx_SpaceButton_toggleCollapse svg,
.mx_SpacePanel > button svg,
.mx_SpacePanel > .mx_AccessibleButton svg { color: #d9eee8 !important; }
.mx_SpacePanel .mx_SpaceButton,
.mx_SpacePanel .mx_SpacePanel_homeButton,
.mx_SpacePanel .mx_SpacePanel_videoButton {
    border-radius: 13px !important;
}
.mx_SpacePanel .mx_SpaceButton:hover,
.mx_SpacePanel .mx_SpacePanel_homeButton:hover,
.mx_SpacePanel .mx_SpacePanel_videoButton:hover,
.mx_SpacePanel [aria-selected="true"] {
    background: rgba(19, 233, 177, .15) !important;
    box-shadow: inset 0 0 0 1px rgba(19, 233, 177, .16);
}
.mx_LeftPanel,
.mx_LeftPanel_wrapper,
.mx_LeftPanel_panel,
.mx_RoomListPanel {
    color: var(--ejad-flow-ink) !important;
    background: var(--ejad-flow-sidebar) !important;
}
.mx_LeftPanel {
    border-inline-end: 1px solid var(--ejad-flow-line) !important;
    box-shadow: 10px 0 32px rgba(11, 48, 56, .035);
}
.mx_LeftPanel .mx_SearchBox,
.mx_LeftPanel [data-testid="search-input"],
.mx_LeftPanel input[type="search"] {
    border: 1px solid var(--ejad-flow-line) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .82) !important;
    color: var(--ejad-flow-ink) !important;
    box-shadow: 0 3px 12px rgba(11, 48, 56, .04);
}
.mx_RoomSublist_labelContainer,
.mx_RoomSublist_header,
.mx_LeftPanel .mx_Heading_h4 {
    color: #506b70 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .045em;
    text-transform: uppercase;
}
html[dir="rtl"] .mx_RoomSublist_labelContainer,
html[dir="rtl"] .mx_RoomSublist_header,
html[dir="rtl"] .mx_LeftPanel .mx_Heading_h4 {
    letter-spacing: 0;
    text-transform: none;
}
.mx_RoomTile,
.mx_RoomListItem,
.mx_RoomListItemView,
.mx_RoomList [role="treeitem"] {
    box-sizing: border-box;
    min-height: 48px;
    margin-block: 2px !important;
    border: 1px solid transparent !important;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.mx_RoomTile:hover,
.mx_RoomListItem:hover,
html[dir="rtl"] .mx_RoomTile:hover,
html[dir="rtl"] .mx_RoomListItem:hover,
.mx_RoomTile_selected,
.mx_RoomListItem_selected,
html[dir="rtl"] .mx_RoomTile_selected,
html[dir="rtl"] .mx_RoomListItem_selected,
.mx_RoomTile_title,
.mx_RoomListItemView .mx_Ellipsis { color: var(--ejad-flow-ink) !important; font-weight: 700 !important; }
.mx_RoomTile_unread .mx_RoomTile_title,
.mx_RoomListItemView[data-is-unread="true"] { font-weight: 700 !important; }
.mx_RoomTile_badge,
.mx_RoomTile_badgeContainer,
.mx_RoomListItemView [class*="Badge"] {
    border: 2px solid var(--ejad-flow-sidebar) !important;
    border-radius: 999px !important;
    background: var(--ejad-flow-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(3, 46, 56, .2);
}

/* Conversation header: identity, context, and action separation */
body[data-ejad-surface="room"] .mx_RoomHeader {
    min-height: 70px !important;
    border-block-end: 1px solid var(--ejad-flow-line) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 8px 26px rgba(14, 48, 55, .055) !important;
    backdrop-filter: blur(18px) saturate(135%);
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_BaseAvatar {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(8, 122, 94, .18), 0 6px 15px rgba(13, 55, 65, .12) !important;
}
body[data-ejad-room-kind="group"] .mx_RoomHeader > .mx_BaseAvatar {
    border-radius: 13px !important;
}
body[data-ejad-room-kind="direct"] .mx_RoomHeader > .mx_BaseAvatar {
    border-radius: 999px !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader_heading {
    color: var(--ejad-flow-ink) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader button:not(.mx_RoomHeader_infoWrapper):not(.mx_BaseAvatar) {
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: #52696e !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader button:not(.mx_RoomHeader_infoWrapper):not(.mx_BaseAvatar):hover {
    border-color: rgba(8, 122, 94, .14) !important;
    background: var(--ejad-flow-accent-soft) !important;
    color: var(--ejad-flow-accent-strong) !important;
}
.ejad-room-header-context {
    margin-block-start: 4px;
    color: var(--ejad-flow-muted);
    font-size: 10px;
}
.ejad-room-header-context__kind,
.ejad-room-header-context__members,
.ejad-room-header-context__audience {
    min-height: 19px;
}
.ejad-room-header-context__audience {
    padding-inline: 6px;
    border: 1px solid rgba(8, 122, 94, .14);
    border-radius: 999px;
    background: var(--ejad-flow-accent-soft);
}

/* Message stream: readable like a work log, warmer than a transcript */
body[data-ejad-surface="room"] .mx_RoomView_body,
body[data-ejad-surface="room"] .mx_RoomView_MessageList {
    background:
        radial-gradient(circle at 12% -4%, rgba(19, 232, 176, .075), transparent 30%),
        var(--ejad-flow-canvas) !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] {
    box-sizing: border-box;
    width: min(100%, 980px);
    margin-inline: auto !important;
    padding-block: 4px !important;
    border-radius: 12px;
    transition: background-color .14s ease, box-shadow .14s ease;
}
/* Hover marks the row, it does not draw a card on it. A 72%-white fill plus a
   shadow, stretched across the full 1196px row while the message itself is
   648px, read as a floating white box around every message. The faint accent
   tint below is the same one own-messages already use, so one hover treatment
   covers the timeline. The flag is dropped: this selector (0,4,0) already beats
   the .mx_EventTile:hover rule it was fighting (0,2,0). */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:hover,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:focus-within {
    background: rgba(8, 122, 94, .05);
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line {
    max-width: 72ch !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--ejad-flow-ink) !important;
    box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_EventTile_line {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile_displayName,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_senderDetails {
    color: #42636a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_MTextBody,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_body {
    color: var(--ejad-flow-ink) !important;
    line-height: 1.62 !important;
}
.mx_MessageActionBar,
.mx_EventTile_actionBar,
.mx_EventTile_contextMenu {
    border: 1px solid var(--ejad-flow-line) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: var(--ejad-flow-shadow-sm) !important;
    backdrop-filter: blur(12px);
}
.mx_MessageActionBar button,
.mx_EventTile_actionBar button,
.mx_EventTile_contextMenu button { border-radius: 9px !important; }
.mx_MessageActionBar button:hover,
.mx_EventTile_actionBar button:hover,
.mx_EventTile_contextMenu button:hover {
    background: var(--ejad-flow-accent-soft) !important;
    color: var(--ejad-flow-accent-strong) !important;
}
.mx_ReactionsRow .mx_Reaction,
.mx_ReactionsRow [class*="ReactionButton"] {
    min-height: 27px !important;
    border: 1px solid var(--ejad-flow-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 2px 7px rgba(14, 52, 61, .04);
}
.mx_ReactionsRow .mx_Reaction:hover,
.mx_ReactionsRow [class*="ReactionButton"]:hover {
    border-color: rgba(8, 122, 94, .34) !important;
    background: var(--ejad-flow-accent-soft) !important;
}

/* Composer: compact until needed, spacious while writing */
.mx_MessageComposer_wrapper {
    box-sizing: border-box;
    padding: 8px clamp(10px, 2vw, 22px) 12px !important;
    background: linear-gradient(180deg, transparent, rgba(248, 251, 250, .98) 24%) !important;
}
.mx_MessageComposer,
.mx_SendMessageComposer {
    box-sizing: border-box;
    max-width: 980px;
    margin-inline: auto !important;
    border: 1px solid rgba(3, 46, 56, .2) !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 10px 28px rgba(13, 50, 58, .09) !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mx_MessageComposer:focus-within,
.mx_SendMessageComposer:focus-within {
    border-color: rgba(8, 122, 94, .52) !important;
    box-shadow: 0 0 0 3px rgba(8, 122, 94, .1), 0 16px 34px rgba(13, 50, 58, .11) !important;
    transform: translateY(-1px);
}
.mx_MessageComposer_input,
.mx_BasicMessageComposer,
.mx_BasicMessageComposer_input {
    min-height: 42px !important;
    color: var(--ejad-flow-ink) !important;
    line-height: 1.55 !important;
}
.mx_MessageComposer_actions {
    align-items: center;
    gap: 2px !important;
}
.mx_MessageComposer_button,
.mx_MessageComposer_actions button {
    border-radius: 10px !important;
    color: #587075 !important;
}
.mx_MessageComposer_button:hover,
.mx_MessageComposer_actions button:hover {
    background: var(--ejad-flow-accent-soft) !important;
    color: var(--ejad-flow-accent-strong) !important;
}
.mx_MessageComposer_sendMessage,
.mx_MessageComposer_actions button[type="submit"] {
    border-radius: 11px !important;
    background: linear-gradient(135deg, #087A5E, #032E38) !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(3, 46, 56, .2) !important;
}
.mx_MessageComposerFormatBar {
    border-block-end: 1px solid rgba(18, 68, 79, .09) !important;
    background: #f8fbfa !important;
}

/* Right-side work context, threads, files, and members */
.mx_RightPanel,
.mx_ThreadPanel,
.mx_FilePanel {
    border-inline-start: 1px solid var(--ejad-flow-line) !important;
    background: #f5faf9 !important;
    box-shadow: -12px 0 34px rgba(13, 49, 57, .045);
}
html[dir="rtl"] .mx_RightPanel,
html[dir="rtl"] .mx_ThreadPanel,
html[dir="rtl"] .mx_FilePanel { box-shadow: 12px 0 34px rgba(13, 49, 57, .045); }
.mx_RightPanel_header,
.mx_ThreadPanel_header,
.mx_FilePanel .mx_RoomHeader {
    border-block-end: 1px solid var(--ejad-flow-line) !important;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(14px);
}
.mx_EntityTile,
.mx_MemberList .mx_EntityTile,
.mx_PinnedEventTile {
    border: 1px solid transparent !important;
    border-radius: 13px !important;
}
.mx_EntityTile:hover,
.mx_MemberList .mx_EntityTile:hover,
.mx_PinnedEventTile:hover {
    border-color: var(--ejad-flow-line) !important;
    background: #fff !important;
    box-shadow: var(--ejad-flow-shadow-sm);
}
.mx_MFileBody,
.mx_MediaBody,
.mx_FilePanel .mx_EventTile {
    border: 1px solid var(--ejad-flow-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(13, 51, 59, .05) !important;
}

/* Popovers and dialogs share one visual grammar */
.mx_ContextualMenu,
.mx_Dialog,
[role="menu"] {
    border: 1px solid var(--ejad-flow-line) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .98) !important;
    color: var(--ejad-flow-ink) !important;
    box-shadow: 0 22px 60px rgba(10, 41, 48, .18) !important;
    backdrop-filter: blur(18px) saturate(135%);
}
.mx_ContextualMenu_item,
.mx_IconizedContextMenu_item,
[role="menuitem"] { border-radius: 10px !important; }
.mx_ContextualMenu_item:hover,
.mx_IconizedContextMenu_item:hover,
[role="menuitem"]:hover { background: var(--ejad-flow-accent-soft) !important; }

/* Keyboard, touch, and reduced-motion quality */
:where(.mx_MatrixChat) button:focus-visible,
:where(.mx_MatrixChat) [role="button"]:focus-visible,
:where(.mx_MatrixChat) [role="treeitem"]:focus-visible,
:where(.mx_MatrixChat) input:focus-visible,
:where(.mx_MatrixChat) textarea:focus-visible {
    outline: 3px solid rgba(8, 122, 94, .36) !important;
    outline-offset: 2px !important;
}

/* Dark mode keeps hierarchy without turning every surface black. */
body.cpd-theme-dark,
body.cpd-theme-dark-hc {
    --ejad-flow-sidebar: #0b272d;
    --ejad-flow-sidebar-hover: #0f343d;
    --ejad-flow-sidebar-selected: #123f49;
    --ejad-flow-canvas: #092026;
    --ejad-flow-card: #0d2c33;
    --ejad-flow-ink: #eef8f5;
    --ejad-flow-muted: #a8bbbf;
    --ejad-flow-line: rgba(19, 233, 177, .16);
    --ejad-flow-accent-soft: rgba(19, 233, 177, .13);
}
body.cpd-theme-dark .mx_LeftPanel,
body.cpd-theme-dark-hc .mx_LeftPanel,
body.cpd-theme-dark .mx_LeftPanel_wrapper,
body.cpd-theme-dark-hc .mx_LeftPanel_wrapper,
body.cpd-theme-dark .mx_RoomListPanel,
body.cpd-theme-dark-hc .mx_RoomListPanel { background: var(--ejad-flow-sidebar) !important; }
body.cpd-theme-dark .mx_RoomTile_selected,
body.cpd-theme-dark-hc .mx_RoomTile_selected,
body.cpd-theme-dark .mx_RoomListItemView[aria-selected="true"],
body.cpd-theme-dark-hc .mx_RoomListItemView[aria-selected="true"] {
    background: linear-gradient(100deg, #14444f, #0f343d) !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_RoomHeader,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_RoomHeader,
body.cpd-theme-dark .mx_RightPanel_header,
body.cpd-theme-dark-hc .mx_RightPanel_header {
    background: rgba(11, 39, 45, .93) !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_RoomHeader > .mx_BaseAvatar,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_RoomHeader > .mx_BaseAvatar {
    box-shadow: 0 0 0 3px #0b272d, 0 0 0 4px rgba(19, 233, 177, .22), 0 7px 18px rgba(0, 0, 0, .2) !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:hover,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:hover {
    background: rgba(10, 75, 79, .46) !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_EventTile_line,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_EventTile_line {
    background: none !important;
}
body.cpd-theme-dark .mx_MessageComposer,
body.cpd-theme-dark-hc .mx_MessageComposer,
body.cpd-theme-dark .mx_SendMessageComposer,
body.cpd-theme-dark-hc .mx_SendMessageComposer,
body.cpd-theme-dark .mx_MessageActionBar,
body.cpd-theme-dark-hc .mx_MessageActionBar,
body.cpd-theme-dark .mx_ContextualMenu,
body.cpd-theme-dark-hc .mx_ContextualMenu,
body.cpd-theme-dark .mx_Dialog,
body.cpd-theme-dark-hc .mx_Dialog {
    background: #0d2c33 !important;
    color: var(--ejad-flow-ink) !important;
}

@media (max-width: 760px) {
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { width: 100%; border-radius: 0; }
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line { max-width: 72ch !important; }
    .mx_MessageComposer_wrapper { padding: 6px 7px max(7px, env(safe-area-inset-bottom)) !important; }
    .mx_MessageComposer,
    .mx_SendMessageComposer { border-radius: 15px !important; }
    body[data-ejad-surface="room"] .mx_RoomHeader {
    min-height: 60px !important;
}
    .ejad-room-header-context__members { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mx_RoomTile,
    .mx_RoomListItem,
    .mx_RoomListItemView,
    .mx_RoomView_MessageList .mx_EventTile,
    .mx_MessageComposer,
    .mx_SendMessageComposer { transition: none !important; transform: none !important; }
}

/* v88 — language-safe room identity. Element renders the avatar and the room
   information as separate flex items. Keep those two items intrinsically
   sized and use a physical spacer before the action buttons; allowing the
   information button to grow made RTL/auto-direction names drift to the
   opposite side of the header. */
body[data-ejad-surface="room"] .mx_RoomHeader {
    display: flex !important;
    align-items: center !important;
    gap: var(--cpd-space-3x, 12px) !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
    margin: 0 auto 0 0 !important;
    text-align: start !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper .mx_RoomHeader_info {
    padding: 0 !important;
    text-align: start !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper .mx_RoomHeader_heading {
    /* The box fills its grid column so it cannot be pulled to either edge by
       the length of the name;
    isolate keeps a Latin name ordered correctly
       inside an Arabic shell without changing where the box sits. */
    width: 100% !important;
    text-align: start !important;
    unicode-bidi: isolate;
}
html[dir="rtl"] body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
    margin: 0 0 0 auto !important;
}

@media (max-width: 760px) {
    body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
    overflow: hidden;
}
    body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper .mx_RoomHeader_truncated {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
}

@media (max-width: 760px) {
    html[dir="rtl"] .mx_CallEvent {
        flex-basis: 100%;
        padding: 10px;
    }
    html[dir="rtl"] .mx_CallEvent_columns {
        flex-direction: column;
        align-items: stretch;
    }
    html[dir="rtl"] .mx_CallEvent_button {
        width: 100%;
        margin: 0;
    }

    html[dir="rtl"] .mx_CreateRoomDialog.mx_Dialog_fixedWidth {
        box-sizing: border-box;
        width: calc(100% - 24px) !important;
        max-width: 450px;
        max-height: calc(100dvh - 24px);
        overflow-x: hidden;
    }
    html[dir="rtl"] .mx_CreateRoomDialog .mx_Dialog_content,
    html[dir="rtl"] .mx_CreateRoomDialog form,
    html[dir="rtl"] .mx_CreateRoomDialog .mx_Field,
    html[dir="rtl"] .mx_CreateRoomDialog .mx_SettingsFlag {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }
    html[dir="rtl"] .mx_CreateRoomDialog p {
        margin-inline: 0 !important;
    }
    html[dir="rtl"] .mx_CreateRoomDialog .mx_Dialog_buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    html[dir="rtl"] .mx_RoomHeader {
    box-sizing: border-box;
    overflow: hidden;
}
    html[dir="rtl"] .mx_RoomHeader .mx_FacePile,
    html[dir="rtl"] .mx_RoomHeader button[aria-label="الخيوط"],
    html[dir="rtl"] .mx_RoomHeader button[aria-label="Threads"] {
    display: none !important;
}
    html[dir="rtl"] .mx_RoomSettingsDialog .mx_Dialog_title {
        box-sizing: border-box;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 22px;
        line-height: 1.35;
    }
}

/* Final cascade guards for rules that Element's responsive section also
   touches later in this stylesheet. */
html[dir="rtl"] .mx_RoomHeader {
    gap: 8px;
}
html[dir="rtl"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
    padding: 0;
}
body.cpd-theme-dark .ejad-quick-controls,
body.cpd-theme-dark-hc .ejad-quick-controls,
body.cpd-theme-dark .ejad-unread-center__indicator,
body.cpd-theme-dark-hc .ejad-unread-center__indicator,
body.cpd-theme-dark .ejad-unread-center__panel,
body.cpd-theme-dark-hc .ejad-unread-center__panel,
body.cpd-theme-dark .ejad-unread-center__toast,
body.cpd-theme-dark-hc .ejad-unread-center__toast {
    border-color: rgba(19, 233, 177, .3);
    background: rgba(11, 39, 45, .97);
    color: #eef6f4;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .035);
}

@media (max-width: 760px) {
    .ejad-quick-controls,
    html:not([dir="rtl"]):not([lang^="ar"]) .ejad-quick-controls {
        inset-block-start: 50%;
        inset-block-end: auto;
        left: max(5px, env(safe-area-inset-left));
        right: auto;
        flex-direction: column;
        width: 58px;
        padding: 4px;
        border-radius: 12px;
        transform: translateY(-50%);
    }
    html[dir="rtl"] .ejad-quick-controls,
    html[lang^="ar"] .ejad-quick-controls {
        right: max(5px, env(safe-area-inset-right));
        left: auto;
    }
    .ejad-quick-controls__button {
        grid-template-columns: 1fr;
        width: 50px;
        min-width: 50px;
        min-height: 48px;
        padding: 4px 2px;
    }
}

/* v32 final cascade guard: keep the conversation tools reachable without
   allowing the expanded rail to permanently cover timeline content. These
   rules intentionally live last because older responsive release guards also
   touch this component. */
body[data-ejad-surface="room"] .ejad-quick-controls,
body[data-ejad-surface="home"] .ejad-quick-controls,
.ejad-quick-controls {
    inset-block-start: 50%;
    inset-block-end: auto;
    inset-inline-start: auto;
    inset-inline-end: max(12px, env(safe-area-inset-right));
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    display: flex !important;
    flex-direction: column;
    width: 62px;
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 5px;
    border-radius: 12px;
    transform: translateY(-50%);
    transition: width .2s ease, padding .2s ease, border-radius .2s ease,
        box-shadow .2s ease, opacity .2s ease;
}
.ejad-quick-controls::-webkit-scrollbar { display: none; }
html[dir="rtl"] .ejad-quick-controls,
html[lang^="ar"] .ejad-quick-controls {
    inset-inline-start: auto;
    inset-inline-end: max(12px, env(safe-area-inset-left));
    left: max(12px, env(safe-area-inset-left));
    right: auto;
}
.ejad-quick-controls__button {
    grid-template-columns: 1fr;
    width: 50px;
    min-width: 50px;
    min-height: 48px;
    padding: 5px 3px;
}
.ejad-quick-controls__button > span {
    display: block;
    max-width: 46px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ejad-quick-controls__toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.ejad-quick-controls--collapsed,
html[dir="rtl"] .ejad-quick-controls--collapsed,
html[lang^="ar"] .ejad-quick-controls--collapsed {
    width: 46px;
    min-width: 46px;
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(7, 28, 33, .16);
}
.ejad-quick-controls--collapsed > :not(.ejad-quick-controls__toggle):not(.ejad-quick-controls__status) {
    display: none !important;
}
.ejad-quick-controls--collapsed .ejad-quick-controls__toggle {
    width: 36px;
    min-width: 36px;
    min-height: 38px;
    padding: 5px;
    color: #087A5E;
}
.ejad-quick-controls--collapsed::after {
    content: "";
    position: absolute;
    inset-block-start: 5px;
    inset-inline-end: 5px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--cpd-color-bg-canvas-default, #fff);
    border-radius: 50%;
    background: #13E8B0;
    box-shadow: 0 1px 5px rgba(7, 28, 33, .22);
}
.ejad-quick-controls--collapsed[data-sound-mode="silent"]::after { background: #cf5a63; }
body:has(.mx_Dialog) .ejad-quick-controls,
body:has(.mx_SpaceCreateMenu_wrapper) .ejad-quick-controls,
body.ejad-sound-settings-open .ejad-quick-controls,
body.ejad-communication-hub-open .ejad-quick-controls {
    display: none !important;
}

@media (max-width: 760px) {
    body[data-ejad-surface="room"] .ejad-quick-controls,
    body[data-ejad-surface="home"] .ejad-quick-controls,
    .ejad-quick-controls,
    html[dir="rtl"] .ejad-quick-controls,
    html[lang^="ar"] .ejad-quick-controls {
        inset-block-start: auto;
        inset-block-end: max(12px, env(safe-area-inset-bottom));
        inset-inline: auto;
        left: 50%;
        right: auto;
        flex-direction: row;
        width: auto;
        max-width: calc(100vw - 20px);
        max-height: none;
        padding: 4px;
        border-radius: 12px;
        transform: translateX(-50%);
    }
    .ejad-quick-controls__button {
        grid-template-columns: 18px auto;
        width: auto;
        min-width: 52px;
        min-height: 42px;
        padding: 5px 7px;
    }
    .ejad-quick-controls__button > span { max-width: 58px; }
    .ejad-quick-controls__button svg { width: 18px; height: 18px; }
    .ejad-quick-controls__divider { width: 1px; height: 26px; margin: 8px 0; }
    body[data-ejad-surface="room"] .ejad-quick-controls--collapsed,
    body[data-ejad-surface="home"] .ejad-quick-controls--collapsed,
    .ejad-quick-controls--collapsed {
        inset-block-start: 50%;
        inset-block-end: auto;
        left: max(10px, env(safe-area-inset-left));
        right: auto;
        width: 46px;
        min-width: 46px;
        padding: 4px;
        transform: translateY(-50%);
    }
    html[dir="rtl"] body[data-ejad-surface="room"] .ejad-quick-controls--collapsed,
    html[dir="rtl"] body[data-ejad-surface="home"] .ejad-quick-controls--collapsed,
    html[lang^="ar"] body[data-ejad-surface="room"] .ejad-quick-controls--collapsed,
    html[lang^="ar"] body[data-ejad-surface="home"] .ejad-quick-controls--collapsed,
    html[dir="rtl"] .ejad-quick-controls--collapsed,
    html[lang^="ar"] .ejad-quick-controls--collapsed {
        left: auto;
        right: max(10px, env(safe-area-inset-right));
    }
    .ejad-quick-controls--collapsed .ejad-quick-controls__toggle { width: 36px; min-width: 36px; }
    body:has(.mx_Dialog) .ejad-quick-controls,
    body:has(.mx_SpaceCreateMenu_wrapper) .ejad-quick-controls,
    body.ejad-sound-settings-open .ejad-quick-controls,
    body.ejad-communication-hub-open .ejad-quick-controls { display: none !important; }
}

/* v42 one-click Home access ---------------------------------------------
   Home remains visible beside the rail toggle even when conversation tools
   are collapsed. This gives every authenticated screen a stable edge target
   without occupying timeline or composer space. */
.ejad-quick-controls__home {
    color: #032E38;
    background: linear-gradient(145deg, rgba(19, 233, 177, .18), rgba(8, 122, 94, .09));
    box-shadow: inset 0 0 0 1px rgba(8, 122, 94, .14);
}
.ejad-quick-controls__home:hover {
    color: #032E38;
    background: linear-gradient(145deg, rgba(19, 233, 177, .3), rgba(8, 122, 94, .16));
}
.ejad-quick-controls__home[aria-current="page"] {
    color: #fff;
    background: linear-gradient(145deg, #13E8B0, #087A5E);
    box-shadow: 0 7px 16px rgba(3, 46, 56, .24), inset 0 1px rgba(255, 255, 255, .24);
    cursor: default;
}
body.cpd-theme-dark .ejad-quick-controls__home,
body.cpd-theme-dark-hc .ejad-quick-controls__home {
    color: #13e9b1;
    background: linear-gradient(145deg, rgba(19, 233, 177, .17), rgba(8, 122, 94, .08));
    box-shadow: inset 0 0 0 1px rgba(19, 233, 177, .18);
}
body.cpd-theme-dark .ejad-quick-controls__home[aria-current="page"],
body.cpd-theme-dark-hc .ejad-quick-controls__home[aria-current="page"] {
    color: #082025;
    background: linear-gradient(145deg, #13e9b1, #13E8B0);
}
.ejad-quick-controls--collapsed > .ejad-quick-controls__button[data-ejad-action="home"] {
    display: grid !important;
    width: 36px;
    min-width: 36px;
    min-height: 38px;
    padding: 5px;
}
.ejad-quick-controls--collapsed > .ejad-quick-controls__button[data-ejad-action="home"] > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .ejad-quick-controls:not(.ejad-quick-controls--collapsed) {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }
    .ejad-quick-controls:not(.ejad-quick-controls--collapsed)::-webkit-scrollbar { display: none; }
}

/* v43 conversation hover preview ---------------------------------------
   A contained, edge-anchored workspace for reading the latest messages and
   replying without navigating away from Home. */
.ejad-room-preview[hidden] { display: none !important; }
.ejad-room-dock[hidden] { display: none !important; }
.ejad-room-dock {
    position: fixed;
    z-index: 7350;
    inset-inline-start: 14px;
    inset-inline-end: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column-reverse;
    gap: 9px;
    padding: 5px;
    border-radius: 16px;
    background: rgba(246, 252, 250, .82);
    box-shadow: 0 14px 38px rgba(11, 43, 50, .16), inset 0 1px rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    font-family: "EJAD Cairo", "Cairo", Inter, system-ui, sans-serif;
    max-height: min(286px, calc(100dvh - 28px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.ejad-room-dock::-webkit-scrollbar { display: none; }
body.ejad-controls-collapsed .ejad-room-dock { inset-inline-start: auto; inset-inline-end: 14px; }
.ejad-room-dock__item {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 3px;
}
.ejad-room-dock__chat {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    outline: 0;
    background: linear-gradient(145deg, #13e9b1, #13E8B0);
    color: #0d3a44;
    box-shadow: 0 7px 17px rgba(3, 46, 56, .2);
    font: 800 15px/1 inherit;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ejad-room-dock__remove {
    position: absolute;
    z-index: 2;
    inset-block-start: -2px;
    inset-inline-start: -2px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    padding: 0 0 1px;
    border: 2px solid rgba(255, 255, 255, .96);
    border-radius: 50%;
    background: #526b70;
    color: #fff;
    box-shadow: 0 3px 9px rgba(7, 28, 33, .2);
    font: 800 13px/1 system-ui, sans-serif;
    cursor: pointer;
}
.ejad-room-dock__remove:hover,
.ejad-room-dock__remove:focus-visible { background: #a23e49; outline: 3px solid rgba(162, 62, 73, .2); }
.ejad-room-dock__chat:hover,
.ejad-room-dock__chat:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 22px rgba(3, 46, 56, .28); }
.ejad-room-dock__chat--active { border-color: #087A5E; box-shadow: 0 0 0 3px rgba(8, 122, 94, .15), 0 8px 20px rgba(3, 46, 56, .23); }
.ejad-room-dock__chat > b {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -6px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #b54852;
    color: #fff;
    font-size: 8px;
    line-height: 1;
}
.ejad-room-preview {
    position: fixed;
    z-index: 7400;
    display: grid;
    grid-template-rows: auto minmax(120px, 1fr) auto auto;
    width: min(440px, calc(100vw - 24px));
    max-height: min(610px, calc(100dvh - 24px));
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(8, 122, 94, .22);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(19, 233, 177, .16), transparent 36%),
        rgba(252, 255, 254, .985);
    color: #0d2d34;
    box-shadow: 0 28px 74px rgba(10, 39, 45, .24), inset 0 1px rgba(255, 255, 255, .8);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    font-family: "EJAD Cairo", "Cairo", Inter, system-ui, sans-serif;
    animation: ejad-room-preview-enter .16s ease-out both;
}
@keyframes ejad-room-preview-enter {
    from { opacity: 0; transform: translateY(5px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ejad-room-preview__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 15px 16px 13px;
    border-block-end: 1px solid rgba(8, 122, 94, .13);
}
.ejad-room-preview__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, #13e9b1, #13E8B0);
    color: #10373f;
    box-shadow: inset 0 1px rgba(255, 255, 255, .42);
    font-size: 17px;
    font-weight: 700;
}
.ejad-room-preview__header > div { display: grid; gap: 2px; min-width: 0; }
.ejad-room-preview__header-actions {
    display: flex !important;
    align-items: center;
    gap: 3px !important;
}
.ejad-room-preview__header-actions button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #4b6a70;
    cursor: pointer;
}
.ejad-room-preview__header-actions button:hover { background: rgba(8, 122, 94, .11); color: #032E38; }
.ejad-room-preview__header-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ejad-room-preview__name {
    overflow: hidden;
    color: #0d2b32;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ejad-room-preview__recent { color: #6a8085; font-size: 10px; font-weight: 600; }
.ejad-room-preview__close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(8, 122, 94, .07);
    color: #567076;
    font: 500 22px/1 system-ui, sans-serif;
    cursor: pointer;
}
.ejad-room-preview__close:hover { background: rgba(8, 122, 94, .14); color: #032E38; }
.ejad-room-preview__minimize { font: 700 20px/1 system-ui, sans-serif; }
.ejad-room-preview--pinned { box-shadow: 0 30px 82px rgba(9, 38, 44, .29), 0 0 0 1px rgba(8, 122, 94, .06), inset 0 1px rgba(255, 255, 255, .8); }
/* v45 rich conversation timeline and interactive media */
.ejad-room-preview__timeline {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 170px;
    max-height: 390px;
    overflow: hidden;
}
.ejad-room-preview__earlier {
    justify-self: center;
    margin: 9px 12px 0;
    padding: 5px 11px;
    border: 1px solid rgba(8, 122, 94, .16);
    border-radius: 999px;
    background: rgba(225, 245, 240, .76);
    color: #087A5E;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}
.ejad-room-preview__earlier:hover { border-color: rgba(8, 122, 94, .28); background: #d9f2eb; }
.ejad-room-preview__earlier:disabled { cursor: wait; opacity: .62; }
.ejad-room-preview__earlier[hidden] { display: none; }
.ejad-room-preview__messages {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 130px;
    max-height: 330px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px 16px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(8, 122, 94, .3) transparent;
}
.ejad-room-preview__message {
    align-self: flex-start;
    width: fit-content;
    max-width: 88%;
    padding: 9px 11px 10px;
    border: 1px solid rgba(8, 122, 94, .14);
    border-radius: 5px 15px 15px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(13, 46, 54, .055);
}
.ejad-room-preview__message--own {
    align-self: flex-end;
    border-color: rgba(8, 122, 94, .2);
    border-radius: 15px 5px 15px 15px;
    background: linear-gradient(145deg, #e1f6f0, #d8f0ea);
}
.ejad-room-preview__message > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-block-end: 3px; }
.ejad-room-preview__message strong { overflow: hidden; color: #087A5E; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ejad-room-preview__message time { flex: 0 0 auto; color: #809296; font-size: 8px; }
.ejad-room-preview__message p { margin: 0; color: #253d41; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.ejad-room-preview__message p a { color: #032E38; text-decoration: underline; text-decoration-color: rgba(3, 46, 56, .3); text-underline-offset: 2px; }
.ejad-room-preview__media { box-sizing: border-box; margin-block-start: 6px; }
.ejad-room-preview__media--image { display: grid; gap: 6px; margin: 6px 0 0; }
.ejad-room-preview__media--image a { display: block; overflow: hidden; border-radius: 8px; background: rgba(3, 46, 56, .06); }
.ejad-room-preview__media--image img {
    display: block;
    width: min(270px, 100%);
    max-width: 100%;
    max-height: 220px;
    object-fit: cover;
}
.ejad-room-preview__media--image figcaption,
.ejad-room-preview__media--video > span { color: #5f777c; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.ejad-room-preview__media--video { display: grid; gap: 6px; }
.ejad-room-preview__media--video video { display: block; width: min(270px, 100%); max-height: 220px; border-radius: 8px; background: #0a242a; }
.ejad-room-preview__media--audio {
    display: grid;
    gap: 7px;
    width: min(270px, 68vw);
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(19, 232, 176, .09);
}
.ejad-room-preview__media--audio > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ejad-room-preview__media--audio strong { color: #032E38; font-size: 10px; }
.ejad-room-preview__media--audio span { color: #788c90; font-size: 8px; }
.ejad-room-preview__media--audio audio { display: block; width: 100%; height: 32px; accent-color: #087A5E; }
.ejad-room-preview__media--file {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 190px;
    padding: 9px 10px;
    border: 1px solid rgba(8, 122, 94, .16);
    border-radius: 8px;
    background: rgba(19, 232, 176, .075);
    color: #087A5E;
    text-decoration: none;
}
.ejad-room-preview__media--file > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(8, 122, 94, .13); }
.ejad-room-preview__media--file > strong { max-width: 220px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ejad-room-preview__empty { margin: auto; padding: 24px; color: #70858a; font-size: 11px; line-height: 1.7; text-align: center; }
.ejad-room-preview__composer {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 11px 13px;
    border-block: 1px solid rgba(8, 122, 94, .13);
    background: rgba(238, 248, 245, .72);
}
.ejad-room-preview__composer-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px;
}
.ejad-room-preview__composer-tools { display: flex; align-items: center; gap: 3px; padding-block-end: 3px; }
.ejad-room-preview__composer-tools button,
.ejad-room-preview__emojis button {
    display: grid;
    place-items: center;
    min-width: 30px !important;
    width: 30px;
    min-height: 30px !important;
    height: 30px;
    padding: 0 !important;
    border: 1px solid rgba(8, 122, 94, .13) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .72) !important;
    color: #087A5E !important;
    box-shadow: none !important;
    font: 800 15px/1 system-ui, sans-serif !important;
}
.ejad-room-preview__composer-tools button:hover,
.ejad-room-preview__emojis button:hover { background: #ddf3ed !important; transform: none !important; }
.ejad-room-preview__composer-tools .ejad-room-preview__record--active {
    border-color: rgba(181, 72, 82, .3) !important;
    background: #fff0f1 !important;
    color: #b54852 !important;
    animation: ejad-recording-pulse 1.15s ease-in-out infinite;
}
@keyframes ejad-recording-pulse { 50% { box-shadow: 0 0 0 5px rgba(181, 72, 82, .1) !important; } }
.ejad-room-preview__composer-tools svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ejad-room-preview__mentions {
    position: absolute;
    z-index: 4;
    right: 13px;
    bottom: calc(100% + 5px);
    left: 13px;
    display: grid;
    gap: 3px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(8, 122, 94, .18);
    border-radius: 12px;
    background: rgba(252, 255, 254, .985);
    box-shadow: 0 18px 42px rgba(15, 50, 58, .2);
}
.ejad-room-preview__mentions[hidden], .ejad-room-preview__emojis[hidden] { display: none !important; }
.ejad-room-preview__mentions button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 42px;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #113a43;
    box-shadow: none;
    text-align: start;
}
.ejad-room-preview__mentions button:hover { background: #e5f5f1; transform: none; }
.ejad-room-preview__mentions button > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #ccece3; color: #032E38; font-size: 12px; }
.ejad-room-preview__mentions button > span:last-child { display: grid; min-width: 0; }
.ejad-room-preview__mentions strong, .ejad-room-preview__mentions small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-room-preview__mentions strong { color: inherit; font-size: 10px; }
.ejad-room-preview__mentions small { color: #708489; font-size: 8px; direction: ltr; }
.ejad-room-preview__mentions-empty { padding: 12px; color: #708489; font-size: 9px; text-align: center; }
.ejad-room-preview__emojis {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    overflow-x: auto;
    padding-block-start: 2px;
}
.ejad-room-preview__composer textarea {
    min-width: 0;
    min-height: 39px;
    max-height: 110px;
    resize: vertical;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid rgba(8, 122, 94, .2);
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: #0f333b;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
}
.ejad-room-preview__composer textarea:focus { border-color: #13E8B0; box-shadow: 0 0 0 3px rgba(19, 232, 176, .14); }
.ejad-room-preview__composer button[type="submit"] {
    min-width: 66px;
    min-height: 39px;
    padding: 7px 13px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(145deg, #13E8B0, #087A5E);
    color: #fff;
    box-shadow: 0 7px 16px rgba(8, 122, 94, .2);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}
.ejad-room-preview__composer button[type="submit"]:hover { filter: brightness(1.04); transform: translateY(-1px); }
.ejad-room-preview__composer button[type="submit"]:disabled,
.ejad-room-preview__composer textarea:disabled { cursor: wait; opacity: .58; }
.ejad-room-preview > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 8px 14px;
}
.ejad-room-preview__footer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.ejad-room-preview__status { min-width: 0; color: #4d6e75; font-size: 8px; line-height: 1.45; }
.ejad-room-preview > footer button {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #087A5E;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}
.ejad-room-preview > footer button:hover { background: rgba(8, 122, 94, .09); }
.ejad-room-preview > footer .ejad-room-preview__mark-read {
    padding-inline: 11px;
    border: 1px solid rgba(8, 122, 94, .22);
    background: rgba(8, 122, 94, .09);
}
.ejad-room-preview > footer .ejad-room-preview__mark-read:not(:disabled):hover {
    border-color: rgba(8, 122, 94, .36);
    background: rgba(8, 122, 94, .15);
}
.ejad-room-preview > footer button:disabled,
.ejad-room-companion__actions button:disabled { cursor: default; opacity: .5; }
.ejad-room-preview[dir="rtl"] { text-align: right; }
.ejad-room-preview[dir="rtl"] .ejad-room-preview__message { align-self: flex-end; border-radius: 15px 5px 15px 15px; }
.ejad-room-preview[dir="rtl"] .ejad-room-preview__message--own { align-self: flex-start; border-radius: 5px 15px 15px; }
body.cpd-theme-dark .ejad-room-preview,
body.cpd-theme-dark-hc .ejad-room-preview {
    border-color: rgba(19, 233, 177, .26);
    background: radial-gradient(circle at 100% 0, rgba(19, 232, 176, .17), transparent 36%), #0a2429;
    color: #eef7f5;
    box-shadow: 0 30px 78px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .035);
}
body.cpd-theme-dark .ejad-room-dock,
body.cpd-theme-dark-hc .ejad-room-dock { background: rgba(9, 31, 36, .88); box-shadow: 0 16px 42px rgba(0, 0, 0, .42); }
body.cpd-theme-dark .ejad-room-dock__chat,
body.cpd-theme-dark-hc .ejad-room-dock__chat { border-color: #113a43; color: #09282f; }
body.cpd-theme-dark .ejad-room-dock__remove,
body.cpd-theme-dark-hc .ejad-room-dock__remove { border-color: #0c2a30; background: #789095; }
body.cpd-theme-dark .ejad-room-dock__chat > b,
body.cpd-theme-dark-hc .ejad-room-dock__chat > b { border-color: #0c2a30; }
body.cpd-theme-dark .ejad-room-preview__header,
body.cpd-theme-dark-hc .ejad-room-preview__header,
body.cpd-theme-dark .ejad-room-preview__composer,
body.cpd-theme-dark-hc .ejad-room-preview__composer { border-color: rgba(19, 233, 177, .16); background-color: rgba(14, 48, 55, .72); }
body.cpd-theme-dark .ejad-room-preview__name,
body.cpd-theme-dark-hc .ejad-room-preview__name { color: #f0f8f6; }
body.cpd-theme-dark .ejad-room-preview__recent,
body.cpd-theme-dark-hc .ejad-room-preview__recent,
body.cpd-theme-dark .ejad-room-preview__message time,
body.cpd-theme-dark-hc .ejad-room-preview__message time { color: #9fb3b7; }
body.cpd-theme-dark .ejad-room-preview__message,
body.cpd-theme-dark-hc .ejad-room-preview__message { border-color: rgba(19, 233, 177, .14); background: #0e2f37; }
body.cpd-theme-dark .ejad-room-preview__message--own,
body.cpd-theme-dark-hc .ejad-room-preview__message--own { border-color: rgba(19, 233, 177, .22); background: #113c46; }
body.cpd-theme-dark .ejad-room-preview__message p,
body.cpd-theme-dark-hc .ejad-room-preview__message p { color: #e3eeeb; }
body.cpd-theme-dark .ejad-room-preview__earlier,
body.cpd-theme-dark-hc .ejad-room-preview__earlier { border-color: rgba(19, 233, 177, .18); background: rgba(19, 232, 176, .1); color: #13e9b1; }
body.cpd-theme-dark .ejad-room-preview__media--audio,
body.cpd-theme-dark-hc .ejad-room-preview__media--audio,
body.cpd-theme-dark .ejad-room-preview__media--file,
body.cpd-theme-dark-hc .ejad-room-preview__media--file { border-color: rgba(19, 233, 177, .16); background: rgba(19, 232, 176, .1); color: #13e9b1; }
body.cpd-theme-dark .ejad-room-preview__media--audio strong,
body.cpd-theme-dark-hc .ejad-room-preview__media--audio strong { color: #13e9b1; }
body.cpd-theme-dark .ejad-room-preview__media--audio audio,
body.cpd-theme-dark-hc .ejad-room-preview__media--audio audio { color-scheme: dark; }
body.cpd-theme-dark .ejad-room-preview__composer textarea,
body.cpd-theme-dark-hc .ejad-room-preview__composer textarea { border-color: rgba(19, 233, 177, .2); background: #0a2227; color: #eef7f5; color-scheme: dark; }
body.cpd-theme-dark .ejad-room-preview__header-actions button,
body.cpd-theme-dark-hc .ejad-room-preview__header-actions button { color: #13e9b1; }
body.cpd-theme-dark .ejad-room-preview__mentions,
body.cpd-theme-dark-hc .ejad-room-preview__mentions { border-color: rgba(19, 233, 177, .2); background: #0d2d34; }
body.cpd-theme-dark .ejad-room-preview__mentions button,
body.cpd-theme-dark-hc .ejad-room-preview__mentions button { color: #eef7f5; }
body.cpd-theme-dark .ejad-room-preview__mentions button:hover,
body.cpd-theme-dark-hc .ejad-room-preview__mentions button:hover { background: rgba(19, 233, 177, .12); }
body.cpd-theme-dark .ejad-room-preview__composer-tools button,
body.cpd-theme-dark-hc .ejad-room-preview__composer-tools button,
body.cpd-theme-dark .ejad-room-preview__emojis button,
body.cpd-theme-dark-hc .ejad-room-preview__emojis button { border-color: rgba(19, 233, 177, .16) !important; background: #0f353e !important; color: #13e9b1 !important; }
body:has(.mx_Dialog) .ejad-room-preview,
body:has(.mx_SpaceCreateMenu_wrapper) .ejad-room-preview,
body.ejad-sound-settings-open .ejad-room-preview,
body.ejad-communication-hub-open .ejad-room-preview,
body:has(.ejad-unread-center--open) .ejad-room-preview,
body:has(.mx_Dialog) .ejad-room-dock,
body:has(.mx_SpaceCreateMenu_wrapper) .ejad-room-dock,
body.ejad-sound-settings-open .ejad-room-dock,
body.ejad-communication-hub-open .ejad-room-dock,
body:has(.ejad-unread-center--open) .ejad-room-dock { display: none !important; }

@media (max-width: 760px), (hover: none) {
    .ejad-room-preview {
        top: auto !important;
        right: 10px !important;
        bottom: max(66px, calc(env(safe-area-inset-bottom) + 58px)) !important;
        left: 10px !important;
        width: auto;
        max-height: min(70dvh, 560px);
        border-radius: 16px;
    }
    .ejad-room-preview__messages { max-height: 260px; }
    .ejad-room-dock {
        inset-inline-start: auto;
        inset-inline-end: auto;
        right: auto !important;
        left: 50% !important;
        bottom: max(66px, calc(env(safe-area-inset-bottom) + 58px));
        flex-direction: row-reverse;
        max-width: calc(100vw - 20px);
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        transform: translateX(-50%);
    }
    body.ejad-controls-collapsed .ejad-room-dock {
        inset-inline-start: auto;
        inset-inline-end: auto;
        right: auto !important;
        left: 50% !important;
        bottom: max(8px, env(safe-area-inset-bottom));
    }
    body:has(.ejad-room-preview:not([hidden])) .ejad-room-dock { display: none !important; }
    body.ejad-controls-collapsed .ejad-room-preview { bottom: max(10px, env(safe-area-inset-bottom)) !important; }
    .ejad-room-dock__chat { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .ejad-room-preview { animation: none; }
    .ejad-room-preview__composer button[type="submit"]:hover { transform: none; }
}

/* v52 modern conversation workspace -----------------------------------
   Compact chat stays lightweight; the expand control turns the same fully
   functional conversation into a natural, focused messaging workspace. */
.ejad-room-preview {
    width: min(480px, calc(100vw - 24px));
    max-height: min(680px, calc(100dvh - 24px));
    border-color: rgba(3, 46, 56, .18);
    border-radius: 16px;
    background:
        radial-gradient(circle at 95% -8%, rgba(19, 233, 177, .2), transparent 34%),
        linear-gradient(165deg, rgba(255, 255, 255, .99), rgba(245, 252, 250, .985));
    box-shadow: 0 32px 90px rgba(7, 36, 43, .25), 0 3px 12px rgba(3, 46, 56, .08), inset 0 1px #fff;
}
.ejad-room-preview__header { min-height: 56px; padding: 13px 15px; background: rgba(250, 255, 254, .72); }
.ejad-room-preview__avatar { width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 7px 18px rgba(8, 122, 94, .18), inset 0 1px rgba(255,255,255,.55); }
.ejad-room-preview__header-actions button { border-radius: 8px; transition: background .15s ease, color .15s ease, transform .15s ease; }
.ejad-room-preview__header-actions button:hover { transform: translateY(-1px); }
.ejad-room-preview__maximize[aria-pressed="true"] { background: rgba(8, 122, 94, .14); color: #032E38; }
.ejad-room-preview__timeline {
    background:
        radial-gradient(circle at 8% 12%, rgba(19, 233, 177, .055), transparent 26%),
        linear-gradient(rgba(246, 252, 250, .72), rgba(252, 255, 254, .9));
}
.ejad-room-preview__messages { gap: 11px; padding: 17px 18px 20px; }
.ejad-room-preview__message { padding: 10px 12px 11px; border-radius: 7px 18px 18px; box-shadow: 0 6px 18px rgba(12, 44, 51, .065); }
.ejad-room-preview__message--own { border-radius: 18px 7px 18px 18px; background: linear-gradient(145deg, #ddf5ef, #d0eee6); }
.ejad-room-preview__message p { font-size: 11.5px; line-height: 1.7; }
.ejad-room-preview__composer { padding: 12px 14px; background: rgba(244, 251, 249, .94); }
.ejad-room-preview__composer textarea { min-height: 42px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.98); }
.ejad-room-preview__composer button[type="submit"] { min-height: 42px; min-width: 72px; border-radius: 12px; box-shadow: 0 9px 22px rgba(8, 122, 94, .22); }
.ejad-room-preview > footer { min-height: 44px; padding-inline: 16px; background: rgba(251, 255, 254, .82); }

.ejad-room-preview--expanded {
    z-index: 9700;
    left: 50% !important;
    top: 50% !important;
    width: min(980px, calc(100vw - 40px));
    height: min(860px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
    border-radius: 16px;
    transform: translate(-50%, -50%) !important;
    animation: none;
    box-shadow: 0 0 0 100vmax rgba(8, 27, 31, .34), 0 38px 110px rgba(4, 28, 34, .34), inset 0 1px #fff;
    clip-path: inset(-100vmax);
}
.ejad-room-preview--expanded .ejad-room-preview__header { padding: 16px 20px; }
.ejad-room-preview--expanded .ejad-room-preview__avatar { width: 50px; height: 50px; }
.ejad-room-preview--expanded .ejad-room-preview__name { font-size: 16px; }
.ejad-room-preview--expanded .ejad-room-preview__recent { font-size: 11px; }
.ejad-room-preview--expanded .ejad-room-preview__timeline { min-height: 0; max-height: none; }
.ejad-room-preview--expanded .ejad-room-preview__messages { min-height: 0; max-height: none; padding: 22px clamp(22px, 5vw, 68px) 28px; }
.ejad-room-preview--expanded .ejad-room-preview__message { max-width: min(72%, 660px); padding: 12px 15px 13px; }
.ejad-room-preview--expanded .ejad-room-preview__message p { font-size: 13px; }
.ejad-room-preview--expanded .ejad-room-preview__media--image img,
.ejad-room-preview--expanded .ejad-room-preview__media--video video { width: min(520px, 100%); max-height: 380px; }
.ejad-room-preview--expanded .ejad-room-preview__media--audio { width: min(430px, 68vw); }
.ejad-room-preview--expanded .ejad-room-preview__composer { padding: 14px clamp(18px, 4vw, 52px); }
.ejad-room-preview--expanded > footer { padding-inline: clamp(18px, 4vw, 52px); }
body.ejad-room-preview-expanded .ejad-quick-controls,
body.ejad-room-preview-expanded .ejad-room-dock { display: none !important; }

body.cpd-theme-dark .ejad-room-preview--expanded,
body.cpd-theme-dark-hc .ejad-room-preview--expanded { box-shadow: 0 0 0 100vmax rgba(1, 10, 11, .68), 0 38px 110px rgba(0,0,0,.62); }

/* Incoming messages use a calm visual rhythm: a soft brand rail identifies
   the other participant while the newest arrival is noticeable, not noisy. */
.ejad-room-preview__message:not(.ejad-room-preview__message--own) {
    position: relative;
    border-inline-start: 3px solid rgba(8, 122, 94, .62);
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(245, 251, 249,.98));
}
.ejad-room-preview__message:not(.ejad-room-preview__message--own)::before,
.ejad-room-companion__message:not(.ejad-room-companion__message--own)::before {
    content: "";
    position: absolute;
    inset-inline-start: -6px;
    top: 18px;
    width: 9px;
    height: 9px;
    border-radius: 4px;
    background: inherit;
    transform: rotate(45deg);
}
.ejad-room-preview__message--latest-incoming,
.ejad-room-companion__message--latest-incoming {
    animation: ejad-incoming-message .42s cubic-bezier(.2,.82,.22,1) both;
    box-shadow: 0 9px 24px rgba(3, 46, 56, .12), 0 0 0 1px rgba(19, 232, 176, .12);
}
@keyframes ejad-incoming-message {
    from { opacity: .25; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Facebook-style parallel conversations. The deck grows toward the page
   centre and deliberately stays clear of Element's rail and EJAD controls. */
.ejad-room-companions {
    position: fixed;
    z-index: 7380;
    inset-inline-end: 96px;
    bottom: 12px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 12px;
    max-width: calc(100vw - 190px);
    pointer-events: none;
    font-family: "EJAD Cairo", "Cairo", Inter, system-ui, sans-serif;
}
.ejad-room-companions[hidden] { display: none !important; }
.ejad-room-companion {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 338px;
    height: min(472px, calc(100dvh - 84px));
    overflow: hidden;
    border: 1px solid rgba(8, 122, 94, .2);
    border-radius: 22px 22px 10px 10px;
    background: linear-gradient(165deg, rgba(255,255,255,.995), rgba(245, 252, 250,.99));
    color: #0e3139;
    box-shadow: 0 24px 68px rgba(7, 36, 43, .23), 0 3px 12px rgba(3, 46, 56, .08), inset 0 1px #fff;
    pointer-events: auto;
    animation: ejad-companion-enter .24s cubic-bezier(.2,.82,.22,1) both;
}
@keyframes ejad-companion-enter {
    from { opacity: 0; transform: translateY(18px) scale(.975); }
    to { opacity: 1; transform: none; }
}
.ejad-room-companion > header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(8, 122, 94, .13);
    background: radial-gradient(circle at 100% 0, rgba(19, 233, 177,.18), transparent 50%), rgba(250, 255, 254,.94);
}
.ejad-room-companion__avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(145deg, #13e9b1, #13e9b1);
    color: #10363e;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(8, 122, 94,.16);
}
.ejad-room-companion > header > span:nth-child(2) { display: grid; min-width: 0; }
.ejad-room-companion > header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ejad-room-companion > header small { color: #687c80; font-size: 9px; font-weight: 600; }
.ejad-room-companion__actions { display: flex; gap: 2px; }
.ejad-room-companion__actions button {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #37636c;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}
.ejad-room-companion__actions button:hover,
.ejad-room-companion__actions button:focus-visible { background: rgba(8, 122, 94,.11); color: #032E38; outline: none; }
.ejad-room-companion__actions button:disabled:hover { background: transparent; color: #37636c; }
.ejad-room-companion__messages {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 0;
    padding: 14px 12px 18px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: radial-gradient(circle at 5% 5%, rgba(19, 233, 177,.065), transparent 35%);
}
.ejad-room-companion__message {
    position: relative;
    align-self: flex-start;
    max-width: 84%;
    padding: 9px 11px 10px;
    border: 1px solid rgba(3, 46, 56,.13);
    border-inline-start: 3px solid rgba(8, 122, 94,.58);
    border-radius: 6px 16px 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 5px 15px rgba(10, 41, 48,.06);
}
.ejad-room-companion__message--own {
    align-self: flex-end;
    border-inline-start-width: 1px;
    border-radius: 16px 6px 16px 16px;
    background: linear-gradient(145deg, #ddf5ef, #cfede5);
}
.ejad-room-companion__message strong { display: block; margin-bottom: 3px; color: #087A5E; font-size: 9px; }
.ejad-room-companion__message p { margin: 0; overflow-wrap: anywhere; color: #233b40; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.ejad-room-companion__empty { margin: auto; color: #71847f; font-size: 11px; text-align: center; }
.ejad-room-companion > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid rgba(8, 122, 94,.13);
    background: rgba(244, 251, 249,.96);
}
.ejad-room-companion textarea {
    min-width: 0;
    min-height: 38px;
    max-height: 90px;
    resize: none;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid rgba(8, 122, 94,.2);
    border-radius: 12px;
    background: #fff;
    color: #0e3139;
    font: inherit;
    font-size: 11px;
}
.ejad-room-companion textarea:focus { border-color: #13E8B0; outline: 3px solid rgba(19, 232, 176,.11); }
.ejad-room-companion > form button {
    min-width: 58px;
    padding: 0 11px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(145deg, #13e9b1, #087A5E);
    color: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
body.cpd-theme-dark .ejad-room-companion,
body.cpd-theme-dark-hc .ejad-room-companion { border-color: rgba(19, 233, 177,.2); background: linear-gradient(165deg,#0c282f,#092026); color: #edf8f5; box-shadow: 0 24px 68px rgba(0,0,0,.55); }
body.cpd-theme-dark .ejad-room-companion > header,
body.cpd-theme-dark-hc .ejad-room-companion > header { background: rgba(11, 40, 46,.96); }
body.cpd-theme-dark .ejad-room-companion__messages,
body.cpd-theme-dark-hc .ejad-room-companion__messages { background: #0a2228; }
body.cpd-theme-dark .ejad-room-companion__message:not(.ejad-room-companion__message--own),
body.cpd-theme-dark-hc .ejad-room-companion__message:not(.ejad-room-companion__message--own),
body.cpd-theme-dark .ejad-room-preview__message:not(.ejad-room-preview__message--own),
body.cpd-theme-dark-hc .ejad-room-preview__message:not(.ejad-room-preview__message--own) { background: #0e2f37; color: #eef8f5; }
body.cpd-theme-dark .ejad-room-companion__message p,
body.cpd-theme-dark-hc .ejad-room-companion__message p { color: #eef8f5; }
body.cpd-theme-dark .ejad-room-companion textarea,
body.cpd-theme-dark-hc .ejad-room-companion textarea { border-color: rgba(19, 233, 177,.2); background: #0a2227; color: #eef7f5; color-scheme: dark; }

body.ejad-room-preview-expanded .ejad-room-companions,
body:has(.mx_Dialog) .ejad-room-companions,
body:has(.mx_SpaceCreateMenu_wrapper) .ejad-room-companions,
body.ejad-sound-settings-open .ejad-room-companions,
body.ejad-communication-hub-open .ejad-room-companions,
body:has(.ejad-unread-center--open) .ejad-room-companions { display: none !important; }

@media (max-width: 760px), (hover: none) {
    .ejad-room-preview--expanded {
        inset: 0 !important;
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        transform: none !important;
        clip-path: none;
    }
    .ejad-room-preview--expanded .ejad-room-preview__header { padding: max(10px, env(safe-area-inset-top)) 10px 10px; }
    .ejad-room-preview--expanded .ejad-room-preview__messages { max-height: none; padding: 15px 12px 20px; }
    .ejad-room-preview--expanded .ejad-room-preview__message { max-width: 88%; }
    .ejad-room-preview--expanded .ejad-room-preview__composer { padding: 9px 10px max(9px, env(safe-area-inset-bottom)); }
    .ejad-room-preview--expanded > footer { display: none; }
    .ejad-room-companions { display: none !important; }
}

@media (min-width: 761px) and (max-width: 1240px) {
    .ejad-room-companions { inset-inline-end: 78px; max-width: calc(100vw - 148px); }
    .ejad-room-companion { width: min(318px, calc(100vw - 170px)); }
}

@media (prefers-reduced-motion: reduce) {
    .ejad-room-companion,
    .ejad-room-preview__message--latest-incoming,
    .ejad-room-companion__message--latest-incoming { animation: none; }
}

/* v44 live product-update notice --------------------------------------
   A calm, non-modal release notification which remains readable over every
   Element surface without forcing users away from their current task. */
.ejad-update-notice {
    position: fixed;
    z-index: 9800;
    top: max(16px, env(safe-area-inset-top));
    left: 50%;
    display: grid;
    grid-template-columns: 48px minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    width: min(900px, calc(100vw - 32px));
    min-height: 82px;
    padding: 13px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(8, 122, 94, .2);
    border-radius: 16px;
    background:
        radial-gradient(circle at 0 0, rgba(19, 233, 177, .17), transparent 31%),
        rgba(252, 255, 254, .975);
    color: #0e323a;
    box-shadow: 0 22px 60px rgba(12, 46, 54, .2), inset 0 1px rgba(255, 255, 255, .88);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    font-family: "EJAD Cairo", "Cairo", Inter, system-ui, sans-serif;
    transform: translateX(-50%);
    animation: ejad-update-notice-enter .28s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ejad-update-notice-enter {
    from { opacity: 0; transform: translate(-50%, -12px) scale(.985); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.ejad-update-notice__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(145deg, #ddf7f0, #c6ece2);
    color: #087A5E;
    box-shadow: inset 0 0 0 1px rgba(8, 122, 94, .12);
}
.ejad-update-notice__icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ejad-update-notice__copy { display: grid; min-width: 0; gap: 2px; }
.ejad-update-notice__eyebrow {
    color: #087A5E;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.4;
    text-transform: uppercase;
}
.ejad-update-notice__title { color: #0e3138; font-size: 14px; font-weight: 700; line-height: 1.45; }
.ejad-update-notice__message { color: #657d82; font-size: 10px; font-weight: 500; line-height: 1.55; }
.ejad-update-notice__version {
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(8, 122, 94, .075);
    color: #526e73;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}
.ejad-update-notice__actions { display: flex; align-items: center; gap: 8px; }
.ejad-update-notice__actions button {
    min-height: 38px;
    padding: 8px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #45656b;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}
.ejad-update-notice__actions button:hover { background: rgba(8, 122, 94, .08); color: #032E38; }
.ejad-update-notice__actions .ejad-update-notice__reload {
    min-width: 100px;
    background: linear-gradient(145deg, #13E8B0, #087A5E);
    color: #fff;
    box-shadow: 0 8px 18px rgba(3, 46, 56, .22);
}
.ejad-update-notice__actions .ejad-update-notice__reload:hover { background: linear-gradient(145deg, #13E8B0, #087A5E); color: #fff; }
.ejad-update-notice__actions button:focus-visible { outline: 3px solid rgba(8, 122, 94, .26); outline-offset: 2px; }
.ejad-update-notice__actions button:disabled { cursor: wait; opacity: .62; }
.ejad-update-notice[dir="rtl"] { text-align: right; }
body.cpd-theme-dark .ejad-update-notice,
body.cpd-theme-dark-hc .ejad-update-notice {
    border-color: rgba(19, 233, 177, .25);
    background: radial-gradient(circle at 0 0, rgba(19, 232, 176, .17), transparent 33%), rgba(11, 37, 43, .98);
    color: #eef8f5;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .04);
}
body.cpd-theme-dark .ejad-update-notice__icon,
body.cpd-theme-dark-hc .ejad-update-notice__icon { background: linear-gradient(145deg, #0A4B4F, #113a43); color: #13e9b1; }
body.cpd-theme-dark .ejad-update-notice__title,
body.cpd-theme-dark-hc .ejad-update-notice__title { color: #f1f9f7; }
body.cpd-theme-dark .ejad-update-notice__message,
body.cpd-theme-dark-hc .ejad-update-notice__message { color: #abbdc1; }
body.cpd-theme-dark .ejad-update-notice__version,
body.cpd-theme-dark-hc .ejad-update-notice__version { background: rgba(19, 233, 177, .1); color: #b6d0d5; }
body.cpd-theme-dark .ejad-update-notice__actions button,
body.cpd-theme-dark-hc .ejad-update-notice__actions button { color: #b8cdd1; }
body.cpd-theme-dark .ejad-update-notice__actions .ejad-update-notice__reload,
body.cpd-theme-dark-hc .ejad-update-notice__actions .ejad-update-notice__reload { color: #fff; }
body:has(.mx_Dialog) .ejad-update-notice { visibility: hidden; }

@media (max-width: 760px) {
    .ejad-update-notice {
        top: max(10px, env(safe-area-inset-top));
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 9px 11px;
        width: calc(100vw - 20px);
        min-height: 0;
        padding: 12px;
        border-radius: 12px;
    }
    .ejad-update-notice__icon { width: 42px; height: 42px; border-radius: 12px; }
    .ejad-update-notice__version { grid-column: 2; justify-self: start; }
    .ejad-update-notice__actions { grid-column: 1 / -1; justify-content: flex-end; }
    .ejad-update-notice__actions button { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .ejad-update-notice { animation: none; }
}

/* v54 cross-theme and international responsive polish -----------------
   Keep the quick-conversation workspace visually continuous in dark mode,
   and protect compact controls from Element's generic icon/button rules. */
.ejad-home-attention__search-clear svg {
    display: none !important;
}
.ejad-home-attention__search-clear::before,
.ejad-home-attention__search-clear::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.7px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}
.ejad-home-attention__search-clear::before { transform: translate(-50%, -50%) rotate(45deg); }
.ejad-home-attention__search-clear::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ejad-home-attention__search-hint { font-size: 9.5px !important; line-height: 1.5; }
.ejad-home-attention__kind-filters button { font-size: 10px; }
.ejad-home-attention__search-details strong { font-size: 11.5px !important; }
.ejad-home-attention__search-details small { font-size: 9.5px; }
.ejad-home-attention__stat span { font-size: 10.5px; }
.ejad-home-attention__item-top strong { font-size: 12.5px !important; }
.ejad-home-attention__meta,
.ejad-home-attention__item-top time,
.ejad-home-attention__badge,
.ejad-home-attention__footer { font-size: 9px; }
.ejad-home-attention__item-content p { font-size: 10px !important; }

body.cpd-theme-dark .ejad-room-preview__timeline,
body.cpd-theme-dark-hc .ejad-room-preview__timeline {
    background:
        radial-gradient(circle at 8% 10%, rgba(19, 233, 177, .09), transparent 31%),
        linear-gradient(165deg, #0a2228, #0c292f 58%, #0b252b);
}
body.cpd-theme-dark .ejad-room-preview > footer,
body.cpd-theme-dark-hc .ejad-room-preview > footer {
    border-color: rgba(19, 233, 177, .12);
    background: rgba(10, 34, 40, .96);
}
body.cpd-theme-dark .ejad-room-preview__status,
body.cpd-theme-dark-hc .ejad-room-preview__status { color: #9fbdc3; }
body.cpd-theme-dark .ejad-room-preview__media--image a,
body.cpd-theme-dark-hc .ejad-room-preview__media--image a { background: #071b20; }
body.cpd-theme-dark .ejad-room-preview__media--image figcaption,
body.cpd-theme-dark-hc .ejad-room-preview__media--image figcaption,
body.cpd-theme-dark .ejad-room-preview__media--video > span,
body.cpd-theme-dark-hc .ejad-room-preview__media--video > span,
body.cpd-theme-dark .ejad-room-preview__media--audio span,
body.cpd-theme-dark-hc .ejad-room-preview__media--audio span { color: #a4babf; }
body.cpd-theme-dark .ejad-room-preview__empty,
body.cpd-theme-dark-hc .ejad-room-preview__empty { color: #aac0c4; }
body.cpd-theme-dark .ejad-room-preview__maximize[aria-pressed="true"],
body.cpd-theme-dark-hc .ejad-room-preview__maximize[aria-pressed="true"] {
    background: rgba(19, 233, 177, .14);
    color: #13e9b1;
}

@media (max-width: 480px) {
    .ejad-home-attention__search-input { font-size: 12px; }
    .ejad-home-attention__search-results { max-height: min(390px, 50dvh); padding: 5px; }
    .ejad-home-attention__search-result {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 58px;
        padding: 8px 7px;
    }
    .ejad-home-attention__search-avatar { width: 36px; height: 36px; }
    .ejad-home-attention__kind-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ejad-home-attention__kind-filters::-webkit-scrollbar { display: none; }
    .ejad-home-attention__kind-filters button { flex: 0 0 auto; min-height: 34px; }
    .ejad-room-preview__message p { font-size: 12px; }
}

/* v57 collision-safe conversation dock and coordinated windows --------
   The secondary windows share the primary workspace's visual proportions;
   their DOM is kept stable by the controller between refresh cycles. */
.ejad-room-companions {
    bottom: 14px;
    gap: 14px;
}
.ejad-room-companion {
    width: 380px;
    height: min(540px, calc(100dvh - 72px));
    border-radius: 24px 24px 12px 12px;
    box-shadow: 0 30px 82px rgba(7, 36, 43, .24), 0 4px 14px rgba(3, 46, 56, .09), inset 0 1px #fff;
}
.ejad-room-companion > header {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 62px;
    padding: 10px 12px;
}
.ejad-room-companion__avatar { width: 42px; height: 42px; border-radius: 12px; }
.ejad-room-companion > header strong { font-size: 12.5px; }
.ejad-room-companion > header small { margin-top: 2px; font-size: 9.5px; }
.ejad-room-companion__messages { gap: 10px; padding: 16px 14px 20px; }
.ejad-room-companion__message { padding: 10px 12px 11px; }
.ejad-room-companion__message p { font-size: 11.5px; line-height: 1.62; }
.ejad-room-companion > form { gap: 9px; padding: 11px 12px 12px; }
.ejad-room-companion textarea { min-height: 42px; padding: 10px 12px; }
.ejad-room-companion > form button { min-width: 64px; }

@media (min-width: 761px) and (max-width: 1240px) {
    .ejad-room-companion { width: min(360px, calc(100vw - 170px)); }
}

/* v58 trusted internal and customer collaboration --------------------- */
.ejad-conversation-audience {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    padding: 2px 7px;
    border: 1px solid rgba(8, 122, 94, .14);
    border-radius: 999px;
    background: rgba(8, 122, 94, .075);
    color: #087A5E;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

/* v59 actionable, context-rich incoming message notification ---------- */
/* v60 verified external participant and customer-domain context ------- */
.ejad-unread-center__toast {
  position: relative;
  box-sizing: border-box;
  grid-template-columns: 46px minmax(0, 1fr) auto 32px;
  gap: 12px;
  min-height: 96px;
  padding: 13px;
  border-color: rgba(8, 122, 94, .26);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(19, 233, 177, .17), transparent 38%),
    rgba(252, 254, 253, .985);
  box-shadow: 0 22px 60px rgba(8, 36, 42, .22), 0 2px 10px rgba(8, 36, 42, .08);
  direction: inherit;
}
.ejad-unread-center__toast::before {
  content: "";
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #13E8B0;
}
html[dir="rtl"] .ejad-unread-center__toast::before { border-radius: 4px 0 0 4px; }
.ejad-unread-center__toast[data-ejad-audience="external"]::before { background: #d5963e; }
.ejad-unread-center__toast-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(8, 122, 94, .16);
  border-radius: 12px;
  background: linear-gradient(145deg, #13e9b1, #13e9b1);
  color: #0c343d;
  font-size: 18px;
  font-weight: 700;
  box-shadow: inset 0 1px rgba(255, 255, 255, .5);
}
.ejad-unread-center__toast-content {
  display: grid;
  align-self: stretch;
  align-content: center;
  min-width: 0;
  gap: 2px;
  text-align: start;
}
.ejad-unread-center__toast-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.ejad-unread-center__toast-room {
  overflow: hidden;
  color: #0d2b32;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ejad-unread-center__toast-time { flex: 0 0 auto; color: #81938f; font-size: 10px; }
.ejad-unread-center__toast-sender {
  overflow: hidden;
  color: #3d727d;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ejad-unread-center__toast-text {
  margin: 1px 0 2px;
  color: #405154;
  font-size: 12px;
  font-weight: 500;
}
.ejad-unread-center__toast-audience {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(8, 122, 94, .09);
  color: #087A5E;
  font-size: 9px;
  font-weight: 700;
}
.ejad-unread-center__toast-audience--external { background: rgba(213, 150, 62, .13); color: #94601c; }
.ejad-unread-center__toast-actions { display: grid; align-content: center; gap: 6px; }
.ejad-unread-center__toast-actions .ejad-unread-center__open,
.ejad-unread-center__toast-actions .ejad-unread-center__toast-mark,
.ejad-unread-center__toast-actions .ejad-unread-center__toast-conversation {
  min-width: 92px;
  min-height: 34px;
  padding: 5px 10px;
  white-space: nowrap;
}
.ejad-unread-center__toast-actions .ejad-unread-center__toast-mark {
  border: 1px solid rgba(8, 122, 94, .2);
  background: rgba(8, 122, 94, .07);
  color: #087A5E;
}
.ejad-unread-center__toast-actions .ejad-unread-center__toast-conversation {
  border: 1px solid rgba(8, 122, 94, .2);
  background: transparent;
  color: #032E38;
}
.ejad-unread-center__toast .ejad-unread-center__dismiss {
  align-self: start;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 8px;
}
.ejad-unread-center__toast button:focus-visible { outline: 2px solid rgba(8, 122, 94, .45); outline-offset: 2px; }
body.cpd-theme-dark .ejad-unread-center__toast,
body.cpd-theme-dark-hc .ejad-unread-center__toast {
  background:
    radial-gradient(circle at 8% 0%, rgba(19, 233, 177, .13), transparent 38%),
    rgba(11, 36, 42, .985);
}
body.cpd-theme-dark .ejad-unread-center__toast-room,
body.cpd-theme-dark-hc .ejad-unread-center__toast-room { color: #f1fbf8; }
body.cpd-theme-dark .ejad-unread-center__toast-text,
body.cpd-theme-dark-hc .ejad-unread-center__toast-text { color: #c5d4d7; }
body.cpd-theme-dark .ejad-unread-center__toast-time,
body.cpd-theme-dark-hc .ejad-unread-center__toast-time { color: #8fa4a8; }
body.cpd-theme-dark .ejad-unread-center__toast-actions .ejad-unread-center__toast-mark,
body.cpd-theme-dark-hc .ejad-unread-center__toast-actions .ejad-unread-center__toast-mark,
body.cpd-theme-dark .ejad-unread-center__toast-actions .ejad-unread-center__toast-conversation,
body.cpd-theme-dark-hc .ejad-unread-center__toast-actions .ejad-unread-center__toast-conversation { color: #13e9b1; }

@media (max-width: 600px) {
  .ejad-unread-center__toast {
    grid-template-columns: 40px minmax(0, 1fr) 32px;
    gap: 9px;
    min-height: 0;
    padding: 11px;
    border-radius: 12px;
  }
  .ejad-unread-center__toast-avatar { width: 40px; height: 40px; border-radius: 12px; }
  .ejad-unread-center__toast-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ejad-unread-center__toast-actions .ejad-unread-center__open,
  .ejad-unread-center__toast-actions .ejad-unread-center__toast-mark,
  .ejad-unread-center__toast-actions .ejad-unread-center__toast-conversation { width: 100%; min-width: 0; }
  .ejad-unread-center__toast .ejad-unread-center__dismiss { grid-column: 3; grid-row: 1; }
  .ejad-unread-center__toast-content { grid-column: 2; grid-row: 1; }
  .ejad-unread-center__toast-avatar { grid-column: 1; grid-row: 1; }
}
.ejad-conversation-audience svg { width: 11px; height: 11px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ejad-conversation-audience--external { border-color: rgba(183, 115, 32, .24); background: rgba(231, 161, 62, .11); color: #9a5a0b; }
.ejad-home-attention__item-context > .ejad-conversation-audience { flex: 0 0 auto; }
.ejad-home-attention__search-details > .ejad-conversation-audience { padding: 1px 5px; font-size: 7.5px; }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-details > .ejad-conversation-audience--external { border-color: rgba(183, 115, 32, .24); background: rgba(231, 161, 62, .11); color: #9a5a0b; }
.ejad-room-preview__audience { margin-top: 2px; }
.ejad-room-preview__external-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 15px;
    border-block-end: 1px solid rgba(183, 115, 32, .16);
    background: linear-gradient(90deg, rgba(255, 244, 222, .92), rgba(255, 250, 240, .72));
    color: #784707;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.55;
}
.ejad-room-preview__external-notice[hidden] { display: none !important; }
.ejad-room-preview__external-notice svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ejad-room-preview__external-notice > div { display: grid; min-width: 0; gap: 2px; }
.ejad-room-preview__external-notice small {
    direction: ltr;
    unicode-bidi: isolate;
    color: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: .78;
    overflow-wrap: anywhere;
}
.ejad-room-dock__chat--external { border-color: #e0a24b; box-shadow: 0 0 0 3px rgba(224, 162, 75, .14), 0 8px 20px rgba(3, 46, 56, .2); }
.ejad-room-dock__chat--external::after { content: "↗"; position: absolute; inset-block-end: -4px; inset-inline-start: -4px; display: grid; place-items: center; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: #d28a28; color: #fff; font: 800 8px/1 system-ui,sans-serif; }
body.cpd-theme-dark .ejad-conversation-audience,
body.cpd-theme-dark-hc .ejad-conversation-audience { border-color: rgba(19, 233, 177, .2); background: rgba(19, 232, 176, .1); color: #13e9b1; }
body.cpd-theme-dark .ejad-conversation-audience--external,
body.cpd-theme-dark-hc .ejad-conversation-audience--external { border-color: rgba(242, 183, 91, .3); background: rgba(242, 183, 91, .12); color: #f1c77d; }
body.cpd-theme-dark .ejad-room-preview__external-notice,
body.cpd-theme-dark-hc .ejad-room-preview__external-notice { border-color: rgba(242, 183, 91, .22); background: rgba(101, 67, 22, .34); color: #f2d39a; }
body.cpd-theme-dark .ejad-room-dock__chat--external::after,
body.cpd-theme-dark-hc .ejad-room-dock__chat--external::after { border-color: #0c2a30; }

@media (max-width: 760px) {
    .ejad-home-attention__kind-filters { padding-bottom: 3px; }
    .ejad-home-attention__item-top strong { -webkit-line-clamp: 3; }
    .ejad-room-preview__external-notice { padding: 7px 11px; font-size: 8.5px; }
}

/* v65 keep every mobile quick-control inside the physical viewport. Long
   translated labels ellipsize inside equal flexible cells; no RTL scroll
   offset can leave the first or last action partially off-screen. */
@media (max-width: 760px) {
    body[data-ejad-surface="home"] .ejad-quick-controls:not(.ejad-quick-controls--collapsed),
    .ejad-quick-controls:not(.ejad-quick-controls--collapsed) {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        gap: 2px;
        padding: 4px;
        overflow-x: hidden;
        justify-content: center;
    }
    .ejad-quick-controls:not(.ejad-quick-controls--collapsed) .ejad-quick-controls__button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 52px;
        padding-inline: 3px;
    }
    .ejad-quick-controls:not(.ejad-quick-controls--collapsed) .ejad-quick-controls__button > span {
        min-width: 0;
        max-width: 100%;
    }
    .ejad-quick-controls:not(.ejad-quick-controls--collapsed) .ejad-quick-controls__divider { margin-inline: 0; }
}

/* v65 coordinate simultaneous release and message notifications. The
   controller measures the translated release notice and publishes its real
   lower edge, so incoming-message actions remain visible and clickable at
   every viewport size instead of competing for the same fixed top slot. */
body:has(.ejad-update-notice) .ejad-unread-center {
    inset-block-start: var(--ejad-update-notice-clearance, 190px);
}

/* v79 single-surface full conversation composer -------------------------
   Keep the writing controls near the conversation instead of stretching
   them to opposite edges on ultrawide displays. The wrapper is deliberately
   transparent so the composer reads as one surface, not two stacked bars. */
body[data-ejad-surface="room"] .mx_MessageComposer_wrapper {
    box-sizing: border-box;
    padding: 0 clamp(8px, 1.4vw, 22px) max(10px, env(safe-area-inset-bottom)) !important;
    border-block-start: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer {
    box-sizing: border-box;
    width: min(1240px, 100%) !important;
    max-width: min(1240px, 100%) !important;
    min-height: 58px;
    margin: 8px auto 0 !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(8, 122, 94, .22) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 10px 30px rgba(5, 40, 48, .08), inset 0 1px rgba(255, 255, 255, .82) !important;
}
body[data-ejad-surface="room"] .mx_SendMessageComposer,
body[data-ejad-surface="room"] .mx_BasicMessageComposer,
body[data-ejad-surface="room"] .mx_BasicMessageComposer_input,
body[data-ejad-surface="room"] .mx_MessageComposer_input,
body[data-ejad-surface="room"] .mx_MessageComposer_wysiwyg {
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_row {
    box-sizing: border-box;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    padding-inline: 2px;
}
body[data-ejad-surface="room"] .mx_MessageComposer_button,
body[data-ejad-surface="room"] .mx_MessageComposer_actions button {
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0 !important;
    border-radius: 11px !important;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
body[data-ejad-surface="room"] .mx_MessageComposer_button:hover,
body[data-ejad-surface="room"] .mx_MessageComposer_actions button:hover {
    background: rgba(8, 122, 94, .1) !important;
    color: #087A5E !important;
    transform: translateY(-1px);
}
body[data-ejad-surface="room"] .mx_MessageComposer_button:focus-visible,
body[data-ejad-surface="room"] .mx_MessageComposer_actions button:focus-visible {
    outline: 3px solid rgba(8, 122, 94, .2);
    outline-offset: 1px;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer {
    border-color: rgba(19, 233, 177, .2) !important;
    background: rgba(10, 34, 40, .96) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .035) !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer_button:hover,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer_button:hover,
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer_actions button:hover,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer_actions button:hover {
    background: rgba(19, 233, 177, .12) !important;
    color: #13e9b1 !important;
}

/* Popovers own the interaction layer. Hide the floating product rail while
   any composer picker or contextual menu is open, then restore it unchanged
   when that overlay closes. This avoids z-index races in every language. */
body:has(.mx_EmojiPicker) .ejad-quick-controls,
body:has(.mx_EmojiButton_highlight) .ejad-quick-controls,
body:has(.mx_Stickers_content) .ejad-quick-controls,
body:has(.mx_GifPicker) .ejad-quick-controls,
body:has(.mx_MessageComposer button[aria-expanded="true"]) .ejad-quick-controls {
    display: none !important;
}

@media (max-width: 760px) {
    body[data-ejad-surface="room"] .mx_MessageComposer_wrapper {
        padding-inline: 6px !important;
        padding-block-end: max(7px, env(safe-area-inset-bottom)) !important;
    }
    body[data-ejad-surface="room"] .mx_MessageComposer {
        min-height: 52px;
        margin-top: 5px !important;
        padding: 4px 5px !important;
        border-radius: 15px !important;
    }
    body[data-ejad-surface="room"] .mx_MessageComposer_button,
    body[data-ejad-surface="room"] .mx_MessageComposer_actions button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-ejad-surface="room"] .mx_MessageComposer_button,
    body[data-ejad-surface="room"] .mx_MessageComposer_actions button { transition: none; }
}

/* v80 expose the full incoming-message workflow: acknowledge, reply in the
   compact preview, or navigate to the complete conversation. */
.ejad-unread-center__toast-actions .ejad-unread-center__toast-conversation[hidden] {
    display: none !important;
}

/* v81 unified conversation workspace ------------------------------------
   One restrained visual language across navigation, people, timeline,
   composer, message alerts and calls. All alignment uses logical properties
   so native Element translations remain authoritative in RTL and LTR. */
.mx_MatrixChat {
    --ejad-surface: rgba(255, 255, 255, .96);
    --ejad-surface-soft: rgba(246, 250, 249, .94);
    --ejad-surface-raised: #fff;
    --ejad-line: rgba(3, 46, 56, .14);
    --ejad-line-strong: rgba(8, 122, 94, .28);
    --ejad-ink: #0c2a31;
    --ejad-muted: #62767a;
    --ejad-accent: #087A5E;
    --ejad-accent-strong: #032E38;
    --ejad-accent-soft: rgba(8, 122, 94, .1);
    --ejad-danger: #c94751;
    --ejad-shadow-sm: 0 8px 24px rgba(12, 41, 47, .07);
    --ejad-shadow-md: 0 18px 52px rgba(8, 36, 42, .14);
}
body.cpd-theme-dark,
body.cpd-theme-dark-hc,
body.cpd-theme-dark .mx_MatrixChat,
body.cpd-theme-dark-hc .mx_MatrixChat {
    --ejad-surface: rgba(9, 32, 37, .97);
    --ejad-surface-soft: rgba(7, 25, 29, .96);
    --ejad-surface-raised: #0d2d34;
    --ejad-line: rgba(133, 186, 196, .16);
    --ejad-line-strong: rgba(19, 233, 177, .3);
    --ejad-ink: #edf8f5;
    --ejad-muted: #9bb1b5;
    --ejad-accent: #13e9b1;
    --ejad-accent-strong: #13e9b1;
    --ejad-accent-soft: rgba(19, 233, 177, .12);
    --ejad-danger: #ff8790;
    --ejad-shadow-sm: 0 10px 26px rgba(0, 0, 0, .2);
    --ejad-shadow-md: 0 24px 64px rgba(0, 0, 0, .34);
}

/* Conversation and people navigation */
.mx_LeftPanel {
    border-inline-end: 1px solid var(--ejad-line) !important;
    background:
        radial-gradient(circle at 12% 0%, var(--ejad-accent-soft), transparent 34%),
        var(--ejad-surface-soft) !important;
}
.mx_LeftPanel .mx_SearchBox,
.mx_LeftPanel [class*="search"] input,
.mx_LeftPanel input[type="search"] {
    min-height: 42px;
    border: 1px solid var(--ejad-line) !important;
    border-radius: 14px !important;
    background: var(--ejad-surface-raised) !important;
    color: var(--ejad-ink) !important;
    box-shadow: 0 3px 12px rgba(10, 46, 54, .035);
}
.mx_RoomList {
    box-sizing: border-box;
    padding-inline: 6px !important;
    scrollbar-gutter: stable;
}
.mx_RoomSublist_labelContainer,
.mx_RoomListHeader,
[class*="RoomList"] [class*="SectionHeader"] {
    min-height: 38px;
    color: var(--ejad-muted) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}
.mx_RoomTile,
.mx_RoomListItemView,
.mx_RoomList [role="treeitem"] {
    position: relative;
    box-sizing: border-box;
    min-height: 54px;
    margin-block: 3px;
    padding-block: 7px !important;
    padding-inline: 9px !important;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ejad-ink);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mx_RoomTile:hover,
.mx_RoomTile_selected,
html[dir="rtl"] .mx_RoomTile_selected,
.mx_RoomTile_title,
.mx_RoomTile_name,
.mx_RoomListItemView [class*="name"] {
    min-width: 0;
    overflow: hidden;
    color: var(--ejad-ink) !important;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mx_RoomTile_subtitle,
.mx_RoomListItemView [class*="subtitle"] {
    overflow: hidden;
    color: var(--ejad-muted) !important;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mx_RoomList .mx_NotificationBadge,
.mx_RoomList [class*="NotificationBadge"],
.mx_RoomTile_badge {
    min-width: 20px;
    height: 20px;
    border: 2px solid var(--ejad-surface-soft);
    border-radius: 999px !important;
    background: var(--ejad-accent) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(8, 122, 94, .24);
}
.mx_RoomList .mx_BaseAvatar,
.mx_MemberList .mx_BaseAvatar,
.mx_EntityTile .mx_BaseAvatar { box-shadow: 0 0 0 2px var(--ejad-surface-raised), 0 4px 12px rgba(8, 40, 47, .12); }

/* Member and user lists */
.mx_RightPanel,
.mx_MemberList,
.mx_UserInfo { background: var(--ejad-surface-soft) !important; }
.mx_MemberList { box-sizing: border-box; padding: 8px !important; }
.mx_EntityTile,
.mx_MemberList .mx_EntityTile,
.mx_UserInfo_container {
    box-sizing: border-box;
    margin-block: 3px;
    padding: 9px !important;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.mx_EntityTile:hover,
.mx_MemberList .mx_EntityTile:hover {
    border-color: var(--ejad-line);
    background: var(--ejad-surface-raised) !important;
    transform: translateY(-1px);
}
.mx_EntityTile_name,
.mx_EntityTile_name * { color: var(--ejad-ink) !important; font-weight: 700; }
.mx_EntityTile_details,
.mx_EntityTile_details * { color: var(--ejad-muted) !important; }

/* Room header and timeline */
body[data-ejad-surface="room"] .mx_RoomHeader {
    min-height: 68px;
    padding-inline: clamp(12px, 2vw, 24px) !important;
    border-block-end: 1px solid var(--ejad-line) !important;
    background: color-mix(in srgb, var(--ejad-surface) 91%, transparent) !important;
    box-shadow: 0 8px 30px rgba(8, 38, 45, .055) !important;
    backdrop-filter: blur(16px) saturate(130%);
}
body[data-ejad-surface="room"] .mx_RoomHeader_heading {
    color: var(--ejad-ink) !important;
    font-weight: 700 !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader_topic {
    color: var(--ejad-muted) !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader button {
    border-radius: 12px !important;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
body[data-ejad-surface="room"] .mx_RoomHeader button:hover {
    background: var(--ejad-accent-soft) !important;
    color: var(--ejad-accent-strong) !important;
    transform: translateY(-1px);
}
body[data-ejad-surface="room"] .mx_RoomView_body,
body[data-ejad-surface="room"] .mx_RoomView_MessageList {
    background:
        radial-gradient(circle at 15% 0%, var(--ejad-accent-soft), transparent 30%),
        var(--ejad-surface-soft) !important;
}
body[data-ejad-surface="room"] .mx_RoomView_MessageList { scroll-behavior: smooth; scrollbar-gutter: stable; }
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line {
    border: 0 !important;
    background: none !important;
    color: var(--ejad-ink) !important;
    box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_EventTile_line {
    border: 0 !important;
    background: none !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MTextBody,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_body { color: var(--ejad-ink) !important; }
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MessageTimestamp { color: var(--ejad-muted) !important; }
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReplyChain_wrapper {
    border-inline-start-color: var(--ejad-accent) !important;
    background: var(--ejad-accent-soft) !important;
}
.mx_MessagePanel_myReadMarker,
[class*="UnreadMarker"] {
    color: var(--ejad-accent-strong) !important;
    font-size: 10px;
    font-weight: 700;
}
.mx_MessagePanel_myReadMarker::before,
.mx_MessagePanel_myReadMarker::after,
[class*="UnreadMarker"]::before,
[class*="UnreadMarker"]::after { border-color: var(--ejad-line-strong) !important; }
.mx_EventTile_e2eIcon,
.mx_EventTile_line .mx_AccessibleButton,
.mx_MessageActionBar {
    border-color: var(--ejad-line) !important;
    border-radius: 12px !important;
    background: var(--ejad-surface-raised) !important;
    box-shadow: var(--ejad-shadow-sm) !important;
}

/* v99 — personal Matrix-synchronised sidebar sections. */
.ejad-sidebar-sections {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 2px 6px 8px;
    padding: 8px;
    border: 1px solid var(--ejad-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ejad-surface-raised) 88%, transparent);
}
.ejad-sidebar-sections > header,
.ejad-sidebar-section > header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ejad-sidebar-sections > header { justify-content: space-between; }
.ejad-sidebar-sections > header strong { color: var(--ejad-ink); font-size: 12px; font-weight: 700; }
.ejad-sidebar-sections button,
.ejad-sidebar-sections select {
    min-height: 28px;
    border: 1px solid var(--ejad-line);
    border-radius: 8px;
    background: var(--ejad-surface-raised);
    color: var(--ejad-muted);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
}
.ejad-sidebar-sections button { cursor: pointer; }
.ejad-sidebar-sections button:hover:not(:disabled) { border-color: var(--ejad-line-strong); background: var(--ejad-accent-soft); color: var(--ejad-accent-strong); }
.ejad-sidebar-sections button:focus-visible,
.ejad-sidebar-sections select:focus-visible { outline: 3px solid color-mix(in srgb, var(--ejad-accent) 28%, transparent); outline-offset: 1px; }
.ejad-sidebar-sections__list { display: grid; gap: 6px; max-height: min(38vh, 360px); overflow: auto; scrollbar-width: thin; }
.ejad-sidebar-sections__empty { margin: 2px; color: var(--ejad-muted); font-size: 10px; line-height: 1.45; }
.ejad-sidebar-section {
    display: grid;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--ejad-line);
    border-radius: 12px;
    background: var(--ejad-surface-raised);
}
.ejad-sidebar-section[draggable="true"] > header { cursor: grab; }
.ejad-sidebar-section > header {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto 27px;
    gap: 4px;
}
.ejad-sidebar-section > header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ejad-ink); font-size: 11px; }
.ejad-sidebar-section > header button { min-width: 27px; padding-inline: 6px; }
.ejad-sidebar-section > header > [data-ejad-section-action="toggle"] { grid-area: 1 / 1; }
.ejad-sidebar-section > header > strong { grid-area: 1 / 2; }
.ejad-sidebar-section > header > .ejad-sidebar-section__badge { grid-area: 1 / 3; }
.ejad-sidebar-section > header > [data-ejad-section-action="delete"] { grid-area: 1 / 4; }
.ejad-sidebar-section > header > [data-ejad-section-action="policy"] { grid-area: 2 / 1 / 3 / 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ejad-sidebar-section__order { grid-area: 2 / 3 / 3 / 5; justify-self: end; }
.ejad-sidebar-section__badge { min-width: 19px; padding: 1px 5px; border-radius: 999px; background: var(--ejad-accent); color: #fff; font-size: 9px; font-weight: 700; text-align: center; }
.ejad-sidebar-section__order { display: inline-flex; gap: 2px; }
.ejad-sidebar-section__body { display: grid; gap: 3px; }
.ejad-sidebar-section--collapsed .ejad-sidebar-section__body { display: none; }
.ejad-sidebar-section__room { display: grid; grid-template-columns: minmax(0, 1fr) 27px; gap: 3px; align-items: center; }
.ejad-sidebar-section__room > button:first-child { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 6px; align-items: center; min-width: 0; padding: 3px 5px; text-align: start; }
.ejad-sidebar-section__room > button:first-child span[dir="auto"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ejad-ink); }
.ejad-sidebar-section__room b { color: var(--ejad-accent-strong); font-size: 9px; }
.ejad-sidebar-section__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ejad-accent-soft); color: var(--ejad-accent-strong); }
.ejad-sidebar-section__picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; margin-block-start: 3px; }
.ejad-sidebar-section__picker select { min-width: 0; padding-inline: 5px; }
body.cpd-theme-dark .ejad-sidebar-sections,
body.cpd-theme-dark-hc .ejad-sidebar-sections { background: color-mix(in srgb, var(--ejad-surface-raised) 86%, #061619); }

/* Composer */
body[data-ejad-surface="room"] .mx_MessageComposer {
    border-color: var(--ejad-line) !important;
    background: var(--ejad-surface-raised) !important;
    box-shadow: 0 12px 36px rgba(8, 39, 46, .1) !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body[data-ejad-surface="room"] .mx_MessageComposer:focus-within {
    border-color: var(--ejad-line-strong) !important;
    box-shadow: 0 0 0 3px var(--ejad-accent-soft), 0 16px 42px rgba(8, 39, 46, .13) !important;
    transform: translateY(-1px);
}
body[data-ejad-surface="room"] .mx_MessageComposer_button,
body[data-ejad-surface="room"] .mx_MessageComposer_actions button { color: var(--ejad-muted) !important; }
body[data-ejad-surface="room"] .mx_MessageComposer_button:hover,
body[data-ejad-surface="room"] .mx_MessageComposer_actions button:hover {
    background: var(--ejad-accent-soft) !important;
    color: var(--ejad-accent-strong) !important;
}

/* v98 — discoverable composer tool shelf. It delegates every action to
   Element's native controls, preserving Matrix permissions and semantics. */
body[data-ejad-surface="room"] .mx_MessageComposer:has(.ejad-composer-discovery) {
    position: relative;
    margin-block-start: 50px !important;
}
.ejad-composer-discovery {
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(100% + 8px);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    min-width: 0;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border: 1px solid var(--ejad-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ejad-surface-raised) 94%, transparent);
    box-shadow: var(--ejad-shadow-sm);
    backdrop-filter: blur(16px);
}
.ejad-composer-discovery button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    width: auto !important;
    height: auto !important;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ejad-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.ejad-composer-discovery button > span:first-child {
    display: grid;
    place-items: center;
    min-width: 18px;
    color: var(--ejad-accent-strong);
    font-size: 15px;
    font-weight: 700;
}
.ejad-composer-discovery button:hover:not(:disabled) {
    border-color: var(--ejad-line);
    background: var(--ejad-accent-soft);
    color: var(--ejad-ink);
}
.ejad-composer-discovery button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ejad-accent) 30%, transparent);
    outline-offset: 1px;
}
.ejad-composer-discovery button:disabled {
    opacity: .42;
    cursor: not-allowed;
}
body.cpd-theme-dark .ejad-composer-discovery,
body.cpd-theme-dark-hc .ejad-composer-discovery {
    background: color-mix(in srgb, var(--ejad-surface-raised) 92%, #061619);
}

/* Message notifications */
.mx_ToastContainer:not(.ejad-call-stack) > .mx_Toast_toast {
    box-sizing: border-box;
    border: 1px solid var(--ejad-line, rgba(3, 46, 56, .16)) !important;
    border-radius: 18px !important;
    background: var(--ejad-surface-raised, #fff) !important;
    color: var(--ejad-ink, #0c2a31) !important;
    box-shadow: var(--ejad-shadow-md, 0 18px 52px rgba(8, 36, 42, .16)) !important;
}
.ejad-unread-center__toast {
    border-color: var(--ejad-line-strong, rgba(8, 122, 94, .28)) !important;
    background: var(--ejad-surface-raised, #fff) !important;
    box-shadow: var(--ejad-shadow-md, 0 18px 52px rgba(8, 36, 42, .16)) !important;
}

/* Incoming calls: prominent, centred, accessible, and impossible to confuse
   with an ordinary message toast. Element keeps all translated action text. */
body.ejad-incoming-call-active::before {
    /* Do not create a document-level stacking layer here. Element mounts its
       toast portal inside an application stacking context, so a body pseudo
       element can cover the call card even when the card has a higher local
       z-index. The card itself supplies the visual focus treatment. */
    display: none !important;
}
.mx_ToastContainer:has(.mx_IncomingCallToast),
.mx_ToastContainer.ejad-call-stack {
    position: fixed !important;
    z-index: 2147483000 !important;
    isolation: isolate;
    inset-block-start: 50% !important;
    inset-inline-start: 50% !important;
    inset-inline-end: auto !important;
    width: min(480px, calc(100vw - 28px)) !important;
    max-height: min(82dvh, 720px) !important;
    padding: 4px !important;
    transform: translate(-50%, -50%);
    overflow: visible;
}
html[dir="rtl"] .mx_ToastContainer:has(.mx_IncomingCallToast),
html[dir="rtl"] .mx_ToastContainer.ejad-call-stack { transform: translate(50%, -50%); }
.mx_ToastContainer:has(.mx_IncomingCallToast) > .mx_Toast_toast,
.mx_ToastContainer.ejad-call-stack > .mx_Toast_toast {
    border: 1px solid rgba(19, 233, 177, .34) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(19, 233, 177, .2), transparent 40%),
        var(--ejad-surface-raised, #fff) !important;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .36), 0 0 0 1px rgba(255, 255, 255, .08) !important;
    animation: ejad-call-card-in .24s cubic-bezier(.2,.8,.2,1) both;
}
.mx_IncomingCallToast {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-height: 220px;
    padding: clamp(18px, 4vw, 28px) !important;
    color: var(--ejad-ink, #0c2a31) !important;
}
.mx_IncomingCallToast_content {
    display: grid;
    gap: 14px;
    min-width: 0;
    text-align: center;
}
.mx_IncomingCallToast_AvatarWithDetails,
.mx_IncomingCallToast_title { color: var(--ejad-ink, #0c2a31) !important; font-size: clamp(17px, 3vw, 22px) !important; font-weight: 700 !important; }
.mx_IncomingCallToast_avatars { justify-content: center; margin-inline: auto; }
.mx_IncomingCallToast_avatars .mx_BaseAvatar {
    box-shadow: 0 0 0 4px var(--ejad-surface-raised, #fff), 0 0 0 7px var(--ejad-accent-soft, rgba(8, 122, 94, .1)), 0 12px 30px rgba(7, 41, 49, .18);
    animation: ejad-call-avatar-pulse 1.8s ease-in-out infinite;
}
.mx_IncomingCallToast_buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    width: 100%;
    margin-top: 8px;
}
.mx_IncomingCallToast_actionButton {
    min-height: 48px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.mx_IncomingCallToast_actionButton[data-kind="primary"] {
    border-color: #087A5E !important;
    background: linear-gradient(135deg, #087A5E, #032E38) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(3, 46, 56, .24) !important;
}
.mx_IncomingCallToast_actionButton[data-kind="secondary"] {
    border-color: rgba(201, 71, 81, .34) !important;
    background: rgba(201, 71, 81, .09) !important;
    color: var(--ejad-danger, #c94751) !important;
}
.mx_IncomingCallToast_actionButton:hover { filter: brightness(1.04); transform: translateY(-2px); }
.mx_IncomingCallToast_actionButton:focus-visible { outline: 3px solid rgba(19, 232, 176, .34) !important; outline-offset: 3px; }
.mx_IncomingCallToast_expandButton { border-radius: 11px !important; color: var(--ejad-muted, #62767a) !important; }
body.cpd-theme-dark .mx_ToastContainer.ejad-call-stack > .mx_Toast_toast,
body.cpd-theme-dark-hc .mx_ToastContainer.ejad-call-stack > .mx_Toast_toast,
body.cpd-theme-dark .mx_ToastContainer:has(.mx_IncomingCallToast) > .mx_Toast_toast,
body.cpd-theme-dark-hc .mx_ToastContainer:has(.mx_IncomingCallToast) > .mx_Toast_toast {
    border-color: rgba(19, 233, 177, .25) !important;
    background: radial-gradient(circle at 10% 0%, rgba(19, 232, 176, .17), transparent 42%), #0b242a !important;
}
body.cpd-theme-dark .mx_IncomingCallToast,
body.cpd-theme-dark-hc .mx_IncomingCallToast,
body.cpd-theme-dark .mx_IncomingCallToast_title,
body.cpd-theme-dark-hc .mx_IncomingCallToast_title,
body.cpd-theme-dark .mx_IncomingCallToast_AvatarWithDetails,
body.cpd-theme-dark-hc .mx_IncomingCallToast_AvatarWithDetails { color: #f1fbf8 !important; }
body.cpd-theme-dark .mx_IncomingCallToast_avatars .mx_BaseAvatar,
body.cpd-theme-dark-hc .mx_IncomingCallToast_avatars .mx_BaseAvatar {
    box-shadow: 0 0 0 4px #0b242a, 0 0 0 7px rgba(19, 232, 176, .15), 0 14px 34px rgba(0, 0, 0, .3);
}
body.cpd-theme-dark .mx_IncomingCallToast_actionButton[data-kind="secondary"],
body.cpd-theme-dark-hc .mx_IncomingCallToast_actionButton[data-kind="secondary"] {
    background: rgba(227, 105, 114, .12) !important;
    color: #ff9ba4 !important;
}

@keyframes ejad-call-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ejad-call-card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ejad-call-avatar-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px var(--ejad-surface-raised, #fff), 0 0 0 7px var(--ejad-accent-soft, rgba(8, 122, 94, .1)), 0 12px 30px rgba(7, 41, 49, .18); }
    50% { transform: scale(1.035); box-shadow: 0 0 0 4px var(--ejad-surface-raised, #fff), 0 0 0 12px rgba(19, 232, 176, .08), 0 16px 34px rgba(7, 41, 49, .22); }
}

@media (max-width: 760px) {
    .mx_RoomList { padding-inline: 4px !important; }
    .mx_RoomTile,
    .mx_RoomListItemView,
    .mx_RoomList [role="treeitem"] { min-height: 50px; }
    body[data-ejad-surface="room"] .mx_RoomHeader {
    min-height: 58px;
    padding-inline: 8px !important;
}
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] { padding-inline: 8px !important; }
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line { max-width: 72ch !important; }
    .mx_IncomingCallToast { min-height: 0; padding: 18px 14px !important; }
    .mx_IncomingCallToast_buttons { grid-template-columns: 1fr; }
    body[data-ejad-surface="room"] .mx_MessageComposer:has(.ejad-composer-discovery) { margin-block-start: 48px !important; }
    .ejad-composer-discovery { gap: 3px; padding: 5px; }
    .ejad-composer-discovery button { min-width: 36px; min-height: 36px; padding-inline: 8px; }
    .ejad-composer-discovery button > span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mx_RoomTile,
    .mx_RoomListItemView,
    .mx_EntityTile,
    .mx_IncomingCallToast_actionButton,
    .mx_IncomingCallToast_avatars .mx_BaseAvatar,
    body.ejad-incoming-call-active::before,
    .mx_ToastContainer:has(.mx_IncomingCallToast) > .mx_Toast_toast,
    .mx_ToastContainer.ejad-call-stack > .mx_Toast_toast {
        animation: none !important;
        transition: none !important;
    }
}

/* v120 authoritative geometry — intentionally the final cascade layer. */
.ejad-governance-alert {
    position: fixed;
    z-index: 19000;
    inset-block-end: max(18px, env(safe-area-inset-bottom));
    inset-inline: max(18px, env(safe-area-inset-left)) auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: min(620px, calc(100vw - 36px));
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, #b54b4b 45%, var(--cpd-color-bg-subtle-primary, #eef4f2));
    border-radius: 12px;
    background: var(--cpd-color-bg-canvas-default, #fff);
    color: var(--cpd-color-text-primary, #172326);
    box-shadow: 0 18px 52px rgba(10, 34, 39, .22);
}
.ejad-governance-alert[hidden] { display: none !important; }
.ejad-governance-alert strong, .ejad-governance-alert p { display: block; margin: 0; text-align: start; }
.ejad-governance-alert strong { font-size: 14px; }
.ejad-governance-alert p { margin-block-start: 3px; color: var(--cpd-color-text-secondary, #526164); font-size: 12px; }
.ejad-governance-alert > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.ejad-governance-alert button { min-height: 36px; padding-inline: 12px; border: 1px solid var(--cpd-color-border-interactive-secondary, #b7c5c8); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.ejad-governance-alert button:first-child { border-color: transparent; background: #032E38; color: #fff; }
@media (max-width: 620px) { .ejad-governance-alert { grid-template-columns: 1fr; inset-inline: 10px; width: auto; } .ejad-governance-alert > div:last-child { justify-content: stretch; } .ejad-governance-alert button { flex: 1 1 120px; } }
@media (prefers-contrast: more) { .ejad-governance-alert { border-width: 2px; box-shadow: none; } }
.ejad-sidebar-sections--empty { display: flex; align-items: center; margin-block: 2px 5px; padding: 4px 7px; border-style: dashed; border-radius: 8px; background: transparent; }
.ejad-sidebar-sections--empty > header { width: 100%; }
.ejad-sidebar-sections--empty .ejad-sidebar-sections__title, .ejad-sidebar-sections--empty .ejad-sidebar-sections__list { display: none; }
.ejad-sidebar-sections--empty [data-ejad-section-action="create"] { width: 100%; min-height: 30px; border: 0; background: transparent; text-align: start; }
@media (min-width: 761px) {
    .mx_SpacePanel.collapsed, .mx_SpacePanel.collapsed .mx_SpacePanel_spaces { width: 68px !important; min-width: 68px !important; max-width: 68px !important; flex-basis: 68px !important; }
}
body[data-ejad-surface="room"] .mx_RoomHeader {
    box-sizing: border-box !important;
    min-height: 64px !important;
    max-height: 72px !important;
    padding: 8px clamp(10px, 1.4vw, 20px) !important;
    gap: 10px !important;
    overflow: hidden !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_BaseAvatar {
    height: 36px !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader_info {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    padding: 0 !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader_heading {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader_name {
    unicode-bidi: plaintext !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.ejad-room-header-context { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; margin-block-start: 2px !important; overflow: hidden !important; white-space: nowrap !important; }
.ejad-room-header-context > .ejad-room-header-context__governance { display: flex !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: none !important; overflow: hidden !important; }
.ejad-room-header-context__governance > .ejad-room-header-context__topic { flex: 1 1 auto !important; }
.ejad-room-header-context__governance > .ejad-room-header-context__owner, .ejad-room-header-context__governance > .ejad-room-header-context__notification { display: none !important; }
.ejad-room-header-context__external-policy,
.ejad-room-header-context__template { display: none !important; }
.ejad-conversation-tabs { box-sizing: border-box !important; min-height: 44px !important; max-height: 44px !important; padding: 5px clamp(10px, 1.4vw, 20px) !important; gap: 2px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; }
.ejad-conversation-tabs::-webkit-scrollbar { display: none !important; }
.ejad-conversation-tabs button { flex: 0 0 auto !important; min-height: 34px !important; padding-inline: 11px !important; font-size: 13px !important; }
body[data-ejad-surface="room"] .mx_RoomView_MessageList { box-sizing: border-box; padding-inline: clamp(12px, 3.6vw, 64px) !important; }
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { position: relative !important; box-sizing: border-box !important; width: min(100%, 1180px) !important; max-width: 1180px !important; margin-inline: auto !important; padding-inline: 62px 14px !important; }
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line, .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line { min-width: 0 !important; width: fit-content !important; max-width: 72ch !important; padding: 0 !important; }
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_ReadReceiptGroup_container, .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] [class*="ReadReceiptGroup"] { position: static !important; inset: auto !important; display: flex !important; width: fit-content !important; max-width: 160px !important; min-height: 20px; margin-block-start: 2px !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; justify-content: flex-start !important; }
body[data-ejad-surface="room"] .mx_MessageComposer:has(.ejad-composer-discovery) { margin-block-start: 10px !important; }
.ejad-composer-discovery { inset-inline: auto 8px !important; inset-block-end: calc(100% + 5px) !important; width: fit-content !important; max-width: calc(100% - 16px) !important; min-height: 32px !important; padding: 3px 5px !important; gap: 2px !important; scrollbar-width: none !important; }
.ejad-composer-discovery::-webkit-scrollbar { display: none !important; }
.ejad-composer-discovery button { min-width: 30px !important; min-height: 28px !important; padding: 3px 6px !important; gap: 0 !important; font-size: 11px !important; }
.ejad-composer-discovery button > span:last-child { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 980px) {
    .ejad-room-header-context__governance, .ejad-room-header-context__external-policy, .ejad-room-header-context__template { display: none !important; }
}
@media (max-width: 760px) {
    body[data-ejad-surface="room"] .mx_RoomHeader {
    min-height: 56px !important;
    max-height: 60px !important;
    padding: 6px 8px !important;
}
    body[data-ejad-surface="room"] .mx_RoomHeader > .mx_BaseAvatar {
    height: 36px !important;
}
    .ejad-room-header-context__members, .ejad-room-header-context__audience { display: none !important; }
    .ejad-conversation-tabs { min-height: 40px !important; max-height: 40px !important; padding-inline: 6px !important; }
    body[data-ejad-surface="room"] .mx_RoomView_MessageList { padding-inline: 0 !important; }
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { padding-inline: 46px 8px !important; }
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line, .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line { max-width: 72ch !important; }
    body[data-ejad-surface="room"] .mx_MessageComposer:has(.ejad-composer-discovery) { margin-block-start: 8px !important; }
    .ejad-composer-discovery { inset-inline: auto 4px !important; max-width: calc(100% - 8px) !important; }
}

/* Receipts must remain visibly attached to their event. Element renders them
   as a sibling on some timeline layouts and inside the event on others. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_ReadReceiptGroup_container,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] [class*="ReadReceiptGroup"],
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="false"] .mx_ReadReceiptGroup_container,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="false"] [class*="ReadReceiptGroup"] {
    flex: 0 0 auto !important;
    margin-inline: 0 auto !important;
}

/* v127 workspace rail — one compact, high-contrast navigation system.
   Keep these rules at the end of the cascade: the shared UserMenu class is
   also used by a popover, while its direct SpacePanel child is the account
   launcher. Scoping the launcher here prevents popover styling from turning
   it into the oversized pill seen in the collapsed rail. */
.mx_SpacePanel {
    --activeBackground-color: rgba(19, 233, 177, .18) !important;
    --activeBorder-color: rgba(229, 255, 248, .92) !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border-inline-end: 1px solid rgba(210, 255, 243, .12) !important;
    background: linear-gradient(180deg, #0d3038 0%, #09272e 100%) !important;
    color: #e7f8f3 !important;
}

.mx_SpacePanel.collapsed,
.mx_SpacePanel.collapsed .mx_SpacePanel_spaces {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    flex-basis: 68px !important;
}

.mx_SpacePanel > .mx_UserMenu {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 10px auto 8px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(218, 255, 245, .22) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .09) !important;
    box-shadow: none !important;
    color: #f2fffc !important;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease !important;
}
.mx_SpacePanel > .mx_UserMenu:hover,
.mx_SpacePanel > .mx_UserMenu:focus-visible {
    border-color: rgba(218, 255, 245, .55) !important;
    background: rgba(19, 233, 177, .18) !important;
}
.mx_SpacePanel > .mx_UserMenu:active { transform: scale(.96); }
.mx_SpacePanel > .mx_UserMenu .mx_BaseAvatar,
.mx_SpacePanel > .mx_UserMenu img {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
}

.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
    z-index: 4 !important;
    position: absolute !important;
    box-sizing: border-box !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    inset-block-start: 21px !important;
    left: auto !important;
    right: -11px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 50% !important;
    background: #14444f !important;
    box-shadow: 0 4px 12px rgba(2, 19, 23, .28) !important;
}
.mx_SpacePanel .mx_SpacePanel_toggleCollapse:hover,
.mx_SpacePanel .mx_SpacePanel_toggleCollapse:focus-visible { background: #032E38 !important; }
.mx_SpacePanel .mx_SpacePanel_toggleCollapse svg {
    width: 12px !important;
    height: 12px !important;
    color: #fff !important;
    fill: #fff !important;
}

.mx_SpacePanel > .mx_AutoHideScrollbar {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-block: 2px 14px !important;
}
.mx_SpacePanel .mx_SpaceTreeLevel {
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.mx_SpacePanel .mx_SpaceItem {
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_narrow {
    box-sizing: border-box !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.mx_SpacePanel .mx_SpaceButton:hover,
.mx_SpacePanel .mx_SpaceButton:focus-visible {
    background: rgba(19, 233, 177, .10) !important;
    box-shadow: none !important;
}
.mx_SpacePanel .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel .mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.mx_SpacePanel .mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel .mx_SpaceButton[aria-selected="true"] .mx_SpaceButton_selectionWrapper {
    padding: 4px !important;
    border: 1px solid rgba(222, 255, 246, .72) !important;
    background: rgba(19, 233, 177, .18) !important;
    box-shadow: inset 0 0 0 1px rgba(9, 38, 44, .16), 0 5px 14px rgba(2, 18, 22, .18) !important;
}
.mx_SpacePanel .mx_SpaceButton_avatarWrapper {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
}
.mx_SpacePanel .mx_SpaceButton_avatarPlaceholder,
.mx_SpacePanel .mx_SpaceButton_avatarWrapper > .mx_BaseAvatar,
.mx_SpacePanel .mx_SpaceButton_avatarWrapper img {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
}
.mx_SpacePanel .mx_SpaceButton_icon {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    padding: 7px !important;
    border-radius: 10px !important;
    background: rgba(238, 255, 250, .11) !important;
}
.mx_SpacePanel .mx_SpaceButton_icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #e4f8f3 !important;
    fill: currentColor !important;
}
.mx_SpacePanel .mx_SpacePanel_badgeContainer {
    inset-block-start: -4px !important;
    inset-inline-end: -4px !important;
    right: auto !important;
}
.mx_SpacePanel .mx_NotificationBadge {
    box-sizing: border-box !important;
    min-width: 15px !important;
    min-height: 15px !important;
    border: 2px solid #0c2d34 !important;
    box-shadow: none !important;
}

.mx_SpacePanel .mx_ThreadsActivityCentre_container {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    margin-block-start: auto !important;
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton,
.mx_SpacePanel .mx_QuickSettingsButton {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 3px auto !important;
    padding: 10px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #dff5ef !important;
    opacity: 1 !important;
}
.mx_SpacePanel .mx_QuickSettingsButton { margin-block-end: 10px !important; }
.mx_SpacePanel .mx_ThreadsActivityCentreButton:hover,
.mx_SpacePanel .mx_ThreadsActivityCentreButton:focus-visible,
.mx_SpacePanel .mx_QuickSettingsButton:hover,
.mx_SpacePanel .mx_QuickSettingsButton:focus-visible {
    border-color: rgba(220, 255, 246, .18) !important;
    background: rgba(19, 233, 177, .12) !important;
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton > div,
.mx_SpacePanel .mx_QuickSettingsButton > div {
    display: grid !important;
    place-items: center !important;
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton svg,
.mx_SpacePanel .mx_ThreadsActivityCentreButton_Icon,
.mx_SpacePanel .mx_QuickSettingsButton svg {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    color: #dff5ef !important;
    fill: currentColor !important;
    opacity: 1 !important;
}

@media (prefers-contrast: more) {
    .mx_SpacePanel .mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper,
    .mx_SpacePanel .mx_SpaceButton[aria-selected="true"] .mx_SpaceButton_selectionWrapper,
    .mx_SpacePanel > .mx_UserMenu { border-width: 2px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .mx_SpacePanel > .mx_UserMenu { transition: none !important; }
}

/* v128 — collapsed and expanded SpacePanel are different layouts. Element
   removes `.collapsed` before it renders labels. Never keep the 68px width in
   that state or labels and footer actions will be painted outside the rail. */
@media (min-width: 761px) {
    .mx_SpacePanel:not(.collapsed) {
        box-sizing: border-box !important;
        flex: 0 0 232px !important;
        width: 232px !important;
        min-width: 220px !important;
        max-width: 250px !important;
        padding-inline: 0 !important;
        overflow: visible !important;
    }
    .mx_SpacePanel:not(.collapsed) .mx_SpacePanel_spaces { width: 100% !important; min-width: 0 !important; max-width: none !important; }
}

.mx_SpacePanel.collapsed > .mx_UserMenu > * {
    box-sizing: border-box !important;
    max-width: 32px !important;
    max-height: 32px !important;
    overflow: hidden !important;
}
.mx_SpacePanel.collapsed > .mx_UserMenu [class*="Avatar"],
.mx_SpacePanel.collapsed > .mx_UserMenu [class*="avatar"],
.mx_SpacePanel.collapsed > .mx_UserMenu img,
.mx_SpacePanel.collapsed > .mx_UserMenu svg {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 10px !important;
}

.mx_SpacePanel:not(.collapsed) > .mx_UserMenu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    flex: 0 0 52px !important;
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 10px 12px 8px !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(218, 255, 245, .18) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: none !important;
    color: #f2fffc !important;
}
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu [class*="Avatar"],
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu [class*="avatar"],
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu img {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 10px !important;
}
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu [class*="name"],
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu [class*="Name"],
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu [class*="label"],
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu [class*="Label"] {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #f2fffc !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mx_SpacePanel:not(.collapsed) .mx_SpaceTreeLevel {
    align-items: stretch !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 250px !important;
    padding-inline: 8px !important;
}
.mx_SpacePanel:not(.collapsed) .mx_SpaceItem {
    justify-content: flex-start !important;
    width: 100% !important;
}
.mx_SpacePanel:not(.collapsed) .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton,
.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:not(.mx_SpaceButton_narrow) {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 2px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
}
.mx_SpacePanel:not(.collapsed) .mx_SpaceButton:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    gap: 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
}
.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel:not(.collapsed) .mx_SpaceButton[aria-selected="true"] .mx_SpaceButton_selectionWrapper {
    border-color: rgba(218, 255, 245, .16) !important;
    background: rgba(19, 233, 177, .16) !important;
    box-shadow: inset 3px 0 0 #13e9b1 !important;
}
html[dir="rtl"] .mx_SpacePanel:not(.collapsed) .mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper,
html[dir="rtl"] .mx_SpacePanel:not(.collapsed) .mx_SpaceButton[aria-selected="true"] .mx_SpaceButton_selectionWrapper {
    box-shadow: inset -3px 0 0 #13e9b1 !important;
}
.mx_SpacePanel:not(.collapsed) .mx_SpaceButton_name {
    display: block !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    overflow: hidden !important;
    color: #e7f8f3 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: start !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mx_SpacePanel:not(.collapsed) .mx_ThreadsActivityCentre_container {
    display: block !important;
    width: 100% !important;
    margin-block-start: auto !important;
    padding-inline: 10px !important;
}
.mx_SpacePanel:not(.collapsed) .mx_ThreadsActivityCentreButton,
.mx_SpacePanel:not(.collapsed) .mx_QuickSettingsButton {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 3px 10px !important;
    padding: 10px 12px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    color: #e7f8f3 !important;
}
.mx_SpacePanel:not(.collapsed) .mx_ThreadsActivityCentreButton { width: 100% !important; margin-inline: 0 !important; }
.mx_SpacePanel:not(.collapsed) .mx_QuickSettingsButton { margin-block-end: 10px !important; }
.mx_SpacePanel:not(.collapsed) .mx_ThreadsActivityCentreButton > div,
.mx_SpacePanel:not(.collapsed) .mx_QuickSettingsButton > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton svg *,
.mx_SpacePanel .mx_QuickSettingsButton svg * {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton_Text,
.mx_SpacePanel .mx_QuickSettingsButton_label {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #e7f8f3 !important;
    opacity: 1 !important;
    text-align: start !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* v129 — production DOM alignment for the workspace rail.
   UserMenu is a wrapper containing a separately-margined trigger button and a
   sibling display-name label. Reset the trigger itself (rather than merely
   cropping its wrapper), and establish a high-contrast footer token scope so
   Compound's typography cannot paint footer labels dark on the brand rail. */
.mx_SpacePanel {
    --cpd-color-text-primary: #f3fbf9 !important;
    --cpd-color-text-secondary: #d8efe9 !important;
    --cpd-color-icon-primary: #f3fbf9 !important;
    --cpd-color-icon-secondary: #d8efe9 !important;
}

.mx_SpacePanel > .mx_UserMenu > button,
.mx_SpacePanel > .mx_UserMenu > [class*="_triggerButton_"] {
    box-sizing: border-box !important;
    display: grid !important;
    flex: 0 0 36px !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #f3fbf9 !important;
}
.mx_SpacePanel > .mx_UserMenu > button > [class*="_avatarWrapper_"],
.mx_SpacePanel > .mx_UserMenu > [class*="_triggerButton_"] > [class*="_avatarWrapper_"] {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mx_SpacePanel > .mx_UserMenu > button [class*="cpd-avatar"],
.mx_SpacePanel > .mx_UserMenu > button [class*="Avatar"],
.mx_SpacePanel > .mx_UserMenu > button img,
.mx_SpacePanel > .mx_UserMenu > [class*="_triggerButton_"] [class*="cpd-avatar"],
.mx_SpacePanel > .mx_UserMenu > [class*="_triggerButton_"] img {
    box-sizing: border-box !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    border-radius: 11px !important;
}

.mx_SpacePanel.collapsed > .mx_UserMenu {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 8px auto 10px !important;
    padding: 5px !important;
    overflow: visible !important;
    border-radius: 15px !important;
}
.mx_SpacePanel.collapsed > .mx_UserMenu > * {
    max-width: 36px !important;
    max-height: 36px !important;
}
.mx_SpacePanel.collapsed > .mx_UserMenu > span,
.mx_SpacePanel.collapsed > .mx_UserMenu > [class*="_displayName_"] {
    display: none !important;
}

.mx_SpacePanel:not(.collapsed) > .mx_UserMenu {
    width: calc(100% - 20px) !important;
    height: 52px !important;
    margin: 8px 10px 10px !important;
    padding: 7px 9px !important;
    gap: 10px !important;
    border-color: rgba(219, 255, 245, .16) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(19, 233, 177, .07)) !important;
}
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu > span,
.mx_SpacePanel:not(.collapsed) > .mx_UserMenu > [class*="_displayName_"] {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #f3fbf9 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: start !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    -webkit-text-fill-color: #f3fbf9 !important;
}

/* Treat Threads and Settings as one footer group. The divider and shared
   spacing make their relationship clear without leaving two dim controls at
   the bottom of an otherwise empty rail. */
.mx_SpacePanel .mx_ThreadsActivityCentre_container {
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
    margin-inline: 8px !important;
    padding-block-start: 8px !important;
    padding-inline: 0 !important;
    border-block-start: 1px solid rgba(218, 255, 245, .13) !important;
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton,
.mx_SpacePanel .mx_QuickSettingsButton {
    color: #e7f8f3 !important;
    -webkit-text-fill-color: #e7f8f3 !important;
}
.mx_SpacePanel:not(.collapsed) .mx_ThreadsActivityCentreButton.expanded,
.mx_SpacePanel:not(.collapsed) .mx_QuickSettingsButton.expanded {
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 2px 8px !important;
    padding: 9px 10px !important;
    gap: 10px !important;
    border-radius: 10px !important;
}
.mx_SpacePanel:not(.collapsed) .mx_ThreadsActivityCentre_container .mx_ThreadsActivityCentreButton.expanded {
    width: 100% !important;
    margin-inline: 0 !important;
}
.mx_SpacePanel:not(.collapsed) .mx_QuickSettingsButton.expanded {
    margin-block-end: 8px !important;
}
.mx_SpacePanel:not(.collapsed) .mx_ThreadsActivityCentreButton.expanded .mx_ThreadsActivityCentreButton_Text,
.mx_SpacePanel:not(.collapsed) .mx_QuickSettingsButton.expanded .mx_QuickSettingsButton_label,
.mx_SpacePanel:not(.collapsed) .mx_ThreadsActivityCentreButton.expanded span,
.mx_SpacePanel:not(.collapsed) .mx_QuickSettingsButton.expanded span {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #e7f8f3 !important;
    opacity: 1 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: start !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    -webkit-text-fill-color: #e7f8f3 !important;
}
.mx_SpacePanel .mx_ThreadsActivityCentreButton svg,
.mx_SpacePanel .mx_QuickSettingsButton svg,
.mx_SpacePanel .mx_ThreadsActivityCentreButton svg *,
.mx_SpacePanel .mx_QuickSettingsButton svg * {
    color: #dff5ef !important;
    fill: #dff5ef !important;
    stroke: #dff5ef !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #dff5ef !important;
}

@media (max-height: 700px) {
    .mx_SpacePanel.collapsed > .mx_UserMenu { margin-block: 6px 7px !important; }
    .mx_SpacePanel .mx_SpaceTreeLevel { gap: 2px !important; }
    .mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton,
    .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_narrow { min-height: 44px !important; }
    .mx_SpacePanel .mx_ThreadsActivityCentreButton,
    .mx_SpacePanel .mx_QuickSettingsButton { height: 40px !important; min-height: 40px !important; }
}

/* =====================================================================
   v135 — one reading column, quiet chrome.

   Measured on the deployment: the timeline was 1252px wide while a message
   used 22% of it, so the conversation sat in the leading third of the screen
   with two thirds empty. The composer ran to 1240px, far wider than the text
   above it, and the room header plus pinned banner spent 128px before the
   first message.

   Everything here is written with logical properties so the same rules serve
   all 42 shipped locales in both directions. Specificity matches the earlier
   surface rules (body[data-ejad-surface="room"]) because those carry
   !important; this block is last in the cascade so it wins on order.

   v136 correction: an earlier revision centred the conversation. That is the
   personal-messaging pattern (WhatsApp, Telegram), not the work-chat one:
   Slack, Teams, Discord and Element upstream all align messages to the
   inline start and let them fill the pane. In a room with dozens of senders
   the reader scans a column of names at a fixed edge, and centring makes that
   column move with the window width. The empty remainder of a short message's
   row is not waste to reclaim -- it is what a conversation looks like. Only
   the text measure is capped, so a line never runs the full width.
   ===================================================================== */

:root {
  --ejad-measure: 72ch;          /* line length cap; the pane itself is not capped */
  --ejad-chrome-line: rgba(20, 69, 80, .10);
}
body.cpd-theme-dark, body.cpd-theme-dark-hc { --ejad-chrome-line: rgba(150, 183, 190, .16); }

/* ---- the conversation fills the pane from the inline start ---- */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] {
  width: 100% !important;
  max-width: 1180px !important;
  margin-inline: 0 !important;
}
body[data-ejad-surface="room"] .mx_RoomView_MessageList {
  padding-inline: clamp(12px, 2vw, 28px) !important;
}
/* only the text is capped, so a line never runs the full width */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line {
  max-width: var(--ejad-measure) !important;
}

/* ---- composer spans the pane, like the messages above it ---- */
body[data-ejad-surface="room"] .mx_MessageComposer,
html[dir="rtl"] body[data-ejad-surface="room"] .mx_MessageComposer {
  width: auto !important;
  max-width: 1180px !important;
  margin: 8px clamp(12px, 2vw, 28px) 12px !important;
  padding: 4px 6px !important;
  min-height: 48px !important;
  border: 1px solid var(--ejad-chrome-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer:focus-within {
  border-color: rgba(3, 46, 56, .5) !important;
  box-shadow: 0 0 0 3px rgba(3, 46, 56, .10) !important;
}

/* ---- top chrome: one hairline, no stacked banners ---- */
body[data-ejad-surface="room"] .mx_RoomHeader {
    height: 56px !important;
    min-height: 56px !important;
    padding-inline: 20px !important;
    border-bottom: 1px solid var(--ejad-chrome-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
body[data-ejad-surface="room"] [class*="PinnedMessageBanner"] {
  min-height: 40px !important;
  height: auto !important;
  padding-block: 7px !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--ejad-chrome-line) !important;
  box-shadow: none !important;
}

/* ---- sidebar: flat surface, denser rows ---- */
.mx_LeftPanel, .mx_RoomListView {
  border-inline-end: 1px solid var(--ejad-chrome-line) !important;
}
.mx_RoomListItemView {
  height: 44px !important;
  min-height: 44px !important;
  padding-block: 4px !important;
  padding-inline: 10px !important;
  border-radius: 8px;
  font-size: 14px !important;
  gap: 10px !important;
}

/* ---- sender identity: one weight, one size, readable in every script ---- */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_DisambiguatedProfile_displayName {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: .005em !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_avatar,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_avatar .mx_BaseAvatar {
  width: 26px !important;
  height: 26px !important;
}

/* ---- read receipts follow the message, never the empty half of the row ---- */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_ReadReceiptGroup_container,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] [class*="ReadReceiptGroup"] {
  position: static !important;
  inset: auto !important;
  margin-inline: 0 auto !important;
  justify-content: flex-start !important;
}

/* ---------------------------------------------------------------------
   v137 — the four things still reading as unfinished on the deployment.
   --------------------------------------------------------------------- */

/* A mention is a reference inside a sentence, not a button. Element paints the
   pill from a Compound token, so the token is redefined inside the pill rather
   than fighting the rule that reads it -- overriding the token globally would
   also repaint every primary button. */
.mx_RoomView_MessageList .mx_Pill,
.mx_RoomView_MessageList .mx_Pill.mx_UserPill,
.mx_RoomView_MessageList .mx_Pill.mx_RoomPill {
  --cpd-color-bg-action-primary-rest: rgba(3, 46, 56, .12);
  --cpd-color-bg-action-primary-hovered: rgba(3, 46, 56, .20);
  --cpd-color-text-on-solid-primary: #032E38;
  color: #032E38 !important;
  border-radius: 5px !important;
  padding: 0 5px !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  vertical-align: baseline !important;
}
.mx_RoomView_MessageList .mx_Pill .mx_Pill_text { color: inherit !important; font-size: inherit !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_Pill,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_Pill {
  --cpd-color-bg-action-primary-rest: rgba(19, 232, 176, .20);
  --cpd-color-text-on-solid-primary: #13e9b1;
  color: #13e9b1 !important;
}

/* The read receipt sits inside .mx_EventTile_msgOption, which Element floats to
   the trailing edge. Unfloating the parent is what actually brings the avatars
   back beside the message they belong to. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin-inline: 0 auto !important;
  margin-block-start: 2px !important;
  text-align: start !important;
}

/* Element sets dir="auto" on the message body, so an Arabic paragraph is RTL
   and aligns to the trailing edge of whatever box holds it. When a reply quote
   makes that box wide, a two-word answer drifts to the far side of its own
   message. Shrink-wrapping the text keeps it under the sender name. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_body,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_MTextBody {
  width: fit-content !important;
  max-width: 100% !important;
  margin-inline-end: auto !important;
}

/* The quick-control rail no longer sits over the reading area. Only logical
   insets are set: a left/right longhand after them cancels them in one
   direction, which is how it ended up pinned to the physical left. */
#ejad-quick-controls {
  inset-inline-start: auto !important;
  inset-inline-end: 12px !important;
  /* Centred on the inline edge, which is where it lived before it was moved
     down to dodge the composer. Centring clears the composer and Element's
     jump-to-bottom button outright, so neither has to be tracked: the measured
     offsets those collisions needed are gone with it. The reserved gutter on
     the message pane keeps timeline content out from under it. */
  inset-block-start: 50% !important;
  inset-block-end: auto !important;
  transform: translateY(-50%) !important;
  /* Unflagged: the ID selector already outranks every class-based layer that
     sets this, so the override flag bought nothing. The hover rule keeps its
     own, so the lift on focus still wins. */
  opacity: .5;
  box-shadow: 0 2px 10px rgba(7, 28, 33, .10) !important;
  transition: opacity .15s ease !important;
}
#ejad-quick-controls:hover,
#ejad-quick-controls:focus-within { opacity: 1 !important; }

/* ---------------------------------------------------------------------
   v138 — the two areas still reading as unfinished: the pinned banner and
   the floating composer toolbar.
   --------------------------------------------------------------------- */

/* The banner carried one line of text in 115px. Several descendants each set
   their own height -- a 70px stacked pin indicator and a 40px pin glyph --
   so the row is capped here and the overflow clipped. The pin icon and the
   banner's own click target already lead to the full pinned list, so the
   indicator column is not carrying its height in information. */
body[data-ejad-surface="room"] .mx_PinnedMessageBanner {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding-block: 0 !important;
  align-items: center !important;
  overflow: hidden !important;
}
body[data-ejad-surface="room"] .mx_PinnedMessageBanner * { max-height: 44px !important; }
body[data-ejad-surface="room"] .mx_PinnedMessageBanner_main,
body[data-ejad-surface="room"] .mx_PinnedMessageBanner_content {
  height: 44px !important;
  min-height: 0 !important;
  align-items: center !important;
}
body[data-ejad-surface="room"] .mx_PinnedMessageBanner_Indicators { display: none !important; }
body[data-ejad-surface="room"] .mx_PinnedMessageBanner svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}
body[data-ejad-surface="room"] .mx_PinnedMessageBanner_content .mx_EventPreview {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The composer discovery bar floated over the timeline as a detached pill
   while duplicating buttons the composer already shows. Docking it into the
   composer puts every writing control in one place and frees the reading
   area. */
.ejad-composer-discovery {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding-block: 2px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: auto !important;
}
.ejad-composer-discovery button {
  min-height: 24px !important;
  height: 24px !important;
  padding: 2px 6px !important;
}

/* ---------------------------------------------------------------------
   v139 — the send-options dialog, and one duplicated composer control.
   --------------------------------------------------------------------- */

/* Attach exists twice in the composer: Element's own Attachment button and the
   discovery bar's copy. Keeping the native one drops a custom control rather
   than adding another. */
.ejad-composer-discovery button[aria-label="Attach"] { display: none !important; }

/* =====================================================================
   v141 — bridge the EJAD palette onto Compound's tokens.

   The brand colours were already tokenised: of 188 occurrences of the brand
   hex values, 182 are `var(--ejad-token, #fallback)` fallbacks, which is the
   correct pattern, and only 3 were bare literals. What was missing is the
   other half of the chain -- `var(--cpd-*)` appeared 21 times in 9,600 lines,
   so Element's own components never saw the brand and every customisation had
   to out-specify them instead of inheriting.

   Defining Compound's semantic tokens from the EJAD palette is what lets a
   future override be deleted rather than re-stacked. It does not remove the
   existing 1,586 !important declarations: 42% of those are layout overrides
   that no token can express, and removing the rest needs a visual check per
   surface rather than a bulk edit on a live product.
   ===================================================================== */
:root {
  --cpd-color-text-action-accent: var(--ejad-accent, #087A5E);
  --cpd-color-bg-action-primary-rest: var(--ejad-accent, #087A5E);
  --cpd-color-bg-action-primary-hovered: var(--ejad-accent-strong, #032E38);
  --cpd-color-bg-action-primary-pressed: var(--ejad-accent-strong, #032E38);
  --cpd-color-border-interactive-secondary: var(--ejad-line, #d8e3e0);
  --cpd-color-text-secondary: var(--ejad-muted, #60767a);
}
body.cpd-theme-dark, body.cpd-theme-dark-hc {
  --cpd-color-text-action-accent: var(--ejad-accent, #13e9b1);
  --cpd-color-bg-action-primary-rest: var(--ejad-accent, #13e9b1);
  --cpd-color-bg-action-primary-hovered: var(--ejad-accent-strong, #13e9b1);
  --cpd-color-border-interactive-secondary: var(--ejad-dark-border, rgba(19, 233, 177, .2));
  --cpd-color-text-secondary: var(--ejad-dark-muted, #aebec1);
}

/* =====================================================================
   v143 — the four items still off-spec after the live review.
   ===================================================================== */

/* 1. Twelve inline tabs made the reader parse a whole strip before reaching
   the conversation. Three stay inline and the rest sit behind an overflow
   menu, built in ejad-controls.js. */
.ejad-conversation-tabs__overflow { position: relative; display: inline-flex; }
.ejad-conversation-tabs__menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-inline-size: 190px;
  padding: 6px;
  border: 1px solid var(--ejad-line, #d8e3e0);
  border-radius: 8px;
  background: var(--ejad-surface-raised, #fff);
  box-shadow: 0 14px 38px rgb(7 28 35 / .16);
}
.ejad-conversation-tabs__menu[hidden] { display: none; }
.ejad-conversation-tabs__menu button {
  inline-size: 100%;
  min-height: 34px;
  padding-inline: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: start;
  font: inherit;
  cursor: pointer;
}
.ejad-conversation-tabs__menu button:hover,
.ejad-conversation-tabs__menu button:focus-visible {
  background: var(--ejad-accent-soft, rgba(8, 122, 94, .1));
}
body.cpd-theme-dark .ejad-conversation-tabs__menu,
body.cpd-theme-dark-hc .ejad-conversation-tabs__menu {
  border-color: var(--ejad-dark-border, rgba(19, 233, 177, .2));
  background: var(--ejad-dark-surface-raised, #0c2a31);
}

#ejad-quick-controls:hover,
#ejad-quick-controls:focus-within { opacity: 1; }

/* 3. A message that mentions you was painted as a solid red block with white
   text, which shouts louder than the message itself. A tinted surface and an
   accent edge mark it without turning it into an alert. */
.mx_RoomView_MessageList .mx_EventTile_highlight .mx_EventTile_line,
.mx_RoomView_MessageList .mx_EventTile_highlight .mx_EventTile_body,
.mx_RoomView_MessageList .mx_EventTile_highlight .mx_MTextBody {
  background: rgba(200, 138, 32, .10);
  color: inherit;
}
.mx_RoomView_MessageList .mx_EventTile_highlight {
  border-inline-start: 2px solid rgba(200, 138, 32, .55);
  border-radius: 4px;
}
.mx_RoomView_MessageList .mx_EventTile_highlight .mx_Pill {
  --cpd-color-bg-action-primary-rest: rgba(200, 138, 32, .16);
  --cpd-color-text-on-solid-primary: #7a4f09;
  color: #7a4f09;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_highlight .mx_EventTile_line,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_highlight .mx_EventTile_line {
  background: rgba(228, 176, 86, .13);
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_highlight .mx_Pill,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_highlight .mx_Pill {
  --cpd-color-bg-action-primary-rest: rgba(228, 176, 86, .20);
  --cpd-color-text-on-solid-primary: #F0C987;
  color: #F0C987;
}

/* 4. "X and 58 others changed their name" rendered ~30 avatars overlapping
   into an unreadable smear. A membership event is a one-line footnote. */
.mx_RoomView_MessageList .mx_EventTile_info .mx_EventTile_avatar,
.mx_RoomView_MessageList .mx_EventTile_info .mx_EventListSummary_avatars,
.mx_RoomView_MessageList [class*="EventListSummary"] [class*="avatars"] {
  display: none;
}
.mx_RoomView_MessageList [class*="EventListSummary"] .mx_TextualEvent,
.mx_RoomView_MessageList [class*="EventListSummary"] > div > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 72ch;
}

/* v144 — a mention of you is not an error.

   Element paints .mx_UserPill_me from --cpd-color-bg-critical-primary
   (#d51928), the same token as destructive actions and error banners, so your
   own name inside a sentence rendered as a solid red block. The token is
   redefined on the pill alone: overriding it globally would repaint genuine
   danger UI, which is the one place that red has to stay. */
.mx_RoomView_MessageList .mx_Pill.mx_UserPill_me {
  --cpd-color-bg-critical-primary: rgba(200, 138, 32, .16);
  --cpd-color-bg-critical-hovered: rgba(200, 138, 32, .26);
  --cpd-color-text-on-solid-primary: #7a4f09;
  color: #7a4f09;
  font-weight: 600;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_Pill.mx_UserPill_me,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_Pill.mx_UserPill_me {
  --cpd-color-bg-critical-primary: rgba(228, 176, 86, .22);
  --cpd-color-bg-critical-hovered: rgba(228, 176, 86, .32);
  --cpd-color-text-on-solid-primary: #F0C987;
  color: #F0C987;
}

/* ==========================================================================
   1.12.27-ejad.151 — the chrome around the conversation
   Measured on the deployment before changing anything: the space rail's unread
   badge sat at x=22 over a tile spanning x=5–53, i.e. centred on the icon it
   was meant to annotate, in #656d77 grey against a dark rail. The tab bar ran
   at 11px/720 — a weight this family does not carry, so the browser synthesised
   it. The room header packed name, type, member count, visibility, topic and
   join policy onto one 468px line with no hierarchy between them.
   ========================================================================== */

/* A badge annotates the corner of the thing it counts; centred over the icon it
   just hides it. The badge element is position:static — the offset lives on
   .mx_SpacePanel_badgeContainer, whose containing block is the avatar, not the
   tile, and whose own 9.5px insets need beating on both physical axes. */
.mx_SpacePanel .mx_SpaceItem .mx_SpaceButton_avatarWrapper > .mx_SpacePanel_badgeContainer,
.mx_SpacePanel .mx_SpacePanel_badgeContainer {
  display: flex !important;
  justify-content: flex-end !important;
  width: auto !important;
  left: auto !important;
  right: -4px !important;
  top: -4px !important;
  bottom: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: -4px !important;
  inset-block-start: -4px !important;
  inset-block-end: auto !important;
}
.mx_SpacePanel .mx_SpacePanel_notificationBadge {
  box-sizing: border-box !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border: 2px solid var(--ejad-rail-ground, #103942) !important;
  border-radius: 999px !important;
  background: var(--ejad-flow-accent, #087A5E) !important;
  color: #fff !important;
  font: 600 10px/1 "EJAD Cairo", "Cairo", Inter, sans-serif !important;
}

/* The filter row mixed rounded rectangles with one circle, which reads as two
   kinds of control rather than one row of the same control. */


/* The room header's supporting line is metadata, not a second title: one quiet
   line that truncates, so a long topic cannot push the rest out of view. */
.mx_RoomHeader_infoWrapper {
    gap: 2px;
}
.mx_RoomHeader_infoWrapper > :nth-child(2) {
    overflow: hidden;
    color: var(--ejad-flow-muted, #60767a);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* One toolbar, in flow.
   151 lifted Element's actions out of flow with position:absolute to bring them
   onto the EJAD tool row's band. It worked visually and broke their menus:
   Element anchors a composer menu to a fixed reference, not to the button's
   live rect, so moving the button left the menu 987px away from it — measured
   with the interface in Arabic, button at x=67-105 and its menu at x=1054-1218.
   Nothing is taken out of flow now. The EJAD toolbar is moved into Element's
   own composer row by ejad-controls.js — our element, safe to move — and takes
   the same flex order as Element's actions so the two sit as one cluster. */
/* Both button groups sit after the input, at the same order, in both
   directions. Element's own rule put the actions at order -2 in Arabic and
   left them at 0 in English, which is why matching that number by hand made
   one cluster in one language and two in the other. */
.mx_MessageComposer_actions {
  order: 1 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
}
.ejad-composer-discovery {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  gap: 2px !important;
  margin: 0 !important;
}

/* The tool glyphs are text, not icons, so they inherit the font's own metrics
   and sat on five different baselines. A fixed box centres each one. */
.ejad-composer-discovery button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  color: var(--ejad-flow-muted, #60767a) !important;
}
.ejad-composer-discovery button > span:first-child {
  display: block !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
.ejad-composer-discovery button:hover:not(:disabled) {
  color: var(--ejad-flow-accent-strong, #032E38) !important;
}

/* The quick-control rail floats over the message pane, which runs to the same
   viewport edge, so timeline content passed underneath it. Measured on the
   deployment: the rail at x=1514–1588 sat on top of the "expand" button of a
   collapsed membership summary at x=1503–1552 — a click there hit the rail, not
   the control. The pane reserves the rail's lane instead, so nothing can end up
   beneath it. The summary needs its own reservation because it is not laid out
   inside the message list's padding. */
:root { --ejad-rail-gutter: 92px; }
.mx_RoomView_MessageList,
.mx_GenericEventListSummary { padding-inline-end: var(--ejad-rail-gutter) !important; }

/* ==========================================================================
   1.12.27-ejad.158 — the EJAD dialog system
   The three dialogs we author ourselves (send options, clip studio, writing
   assistant) were each styled on their own terms: 112 rules between them, three
   control heights, two type families, buttons that meant the same thing looking
   different in each. They are rebuilt here on one shell and one control set, so
   a person who learns one has learned all three.
   Built on the existing --ejad-* tokens rather than a new palette: this is the
   same product, not a second one.
   ========================================================================== */

.ejad-dialog {
  /* Local scale. Everything below sizes from these four. */
  --dlg-pad: 22px;
  --dlg-gap: 22px;
  --dlg-control: 40px;
  --dlg-radius: 10px;

  --dlg-ink: var(--ejad-ink, #0c2a31);
  --dlg-muted: var(--ejad-muted, #62767a);
  --dlg-line: var(--ejad-line, #d8e3e0);
  --dlg-raised: var(--ejad-surface-raised, #fff);
  --dlg-soft: var(--ejad-surface-soft, #f3f8f7);
  --dlg-accent: var(--ejad-accent, #087A5E);
  --dlg-accent-soft: var(--ejad-accent-soft, #eaf6f3);
  --dlg-accent-strong: var(--ejad-accent-strong, #032E38);

  position: fixed;
  inset: 0;
  z-index: 10060;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--dlg-ink);
  font-family: "EJAD Cairo", "Cairo", Inter, system-ui, sans-serif;
}
.ejad-dialog[hidden] { display: none !important; }

.ejad-dialog__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(6 28 32 / .52);
  backdrop-filter: blur(8px);
  cursor: default;
}

.ejad-dialog__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(var(--dlg-width, 680px), 100%);
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid var(--dlg-line);
  border-radius: 16px;
  background: var(--dlg-raised);
  box-shadow: 0 1px 2px rgb(7 35 39 / .06), 0 28px 64px -20px rgb(7 35 39 / .38);
}

/* ---------- header ---------- */

.ejad-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px var(--dlg-pad);
  border-block-end: 1px solid var(--dlg-line);
}
/* The heading has to claim the row, or the close control stops wherever the
   title text happens to end instead of sitting at the panel's inline end.
   English subtitles were long enough to hide this; in Arabic the close button
   measured 230px, 477px and 604px from the panel edge across the three. */
.ejad-dialog__heading { flex: 1 1 auto; min-width: 0; }
.ejad-dialog__title {
  display: block;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.ejad-dialog__subtitle {
  margin: 3px 0 0;
  color: var(--dlg-muted);
  font-size: 13px;
  line-height: 1.45;
}
.ejad-dialog__close {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-block-start: -2px;
  border: 0;
  border-radius: var(--dlg-radius);
  background: transparent;
  color: var(--dlg-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ejad-dialog__close:hover { background: var(--dlg-soft); color: var(--dlg-ink); }
.ejad-dialog__close svg { width: 18px; height: 18px; }

/* ---------- body ---------- */

.ejad-dialog__body {
  display: grid;
  align-content: start;
  gap: var(--dlg-gap);
  min-height: 0;
  padding: var(--dlg-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ejad-dialog__body--split {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr);
  gap: 0;
  padding: 0;
}
.ejad-dialog__col {
  display: grid;
  align-content: start;
  gap: var(--dlg-gap);
  min-width: 0;
  padding: var(--dlg-pad);
}
.ejad-dialog__col--aside {
  border-inline-start: 1px solid var(--dlg-line);
  background: var(--dlg-soft);
}
.ejad-dialog__section { display: grid; align-content: start; gap: 10px; min-width: 0; }
.ejad-dialog__section-label {
  margin: 0;
  color: var(--dlg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ---------- fields ---------- */

.ejad-field { display: grid; gap: 7px; min-width: 0; }
.ejad-field__label { font-size: 13px; font-weight: 600; }
.ejad-field__hint { margin: 0; color: var(--dlg-muted); font-size: 12px; line-height: 1.5; }

.ejad-dialog input:not([type="checkbox"]),
.ejad-dialog select,
.ejad-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--dlg-line);
  border-radius: var(--dlg-radius);
  background: var(--dlg-raised);
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ejad-dialog input:not([type="checkbox"]),
.ejad-dialog select {
  height: var(--dlg-control);
  padding-inline: 12px;
}
.ejad-dialog textarea {
  min-height: 124px;
  padding: 11px 12px;
  line-height: 1.55;
  resize: vertical;
}
.ejad-dialog input:not([type="checkbox"]):focus,
.ejad-dialog select:focus,
.ejad-dialog textarea:focus {
  outline: 0;
  border-color: var(--dlg-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dlg-accent) 22%, transparent);
}

.ejad-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--dlg-line);
  border-radius: var(--dlg-radius);
  font-size: 13px;
  cursor: pointer;
}
.ejad-check:hover { border-color: var(--dlg-accent); background: var(--dlg-accent-soft); }
.ejad-check input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--dlg-accent); }

.ejad-note {
  margin: 0;
  padding: 11px 13px;
  border-inline-start: 3px solid var(--dlg-accent);
  border-radius: 0 var(--dlg-radius) var(--dlg-radius) 0;
  background: var(--dlg-accent-soft);
  color: var(--dlg-accent-strong);
  font-size: 12px;
  line-height: 1.55;
}
.ejad-dialog[dir="rtl"] .ejad-note { border-radius: var(--dlg-radius) 0 0 var(--dlg-radius); }

/* ---------- buttons ---------- */

.ejad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: var(--dlg-control);
  padding-inline: 16px;
  border: 1px solid transparent;
  border-radius: var(--dlg-radius);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ejad-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dlg-accent) 30%, transparent);
}
.ejad-btn:disabled { opacity: .45; cursor: not-allowed; }
.ejad-btn--primary { background: var(--dlg-accent); border-color: var(--dlg-accent); color: #fff; }
.ejad-btn--primary:hover:not(:disabled) { background: var(--dlg-accent-strong); border-color: var(--dlg-accent-strong); }
.ejad-btn--secondary { background: var(--dlg-raised); border-color: var(--dlg-line); }
.ejad-btn--secondary:hover:not(:disabled) { border-color: var(--dlg-accent); background: var(--dlg-accent-soft); color: var(--dlg-accent-strong); }
.ejad-btn--quiet { color: var(--dlg-muted); }
.ejad-btn--quiet:hover:not(:disabled) { background: var(--dlg-soft); color: var(--dlg-ink); }
.ejad-btn--block { width: 100%; }
.ejad-btn--start { justify-content: flex-start; text-align: start; }

/* ---------- segmented control ---------- */

.ejad-segmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--dlg-soft);
}
.ejad-segmented button {
  flex: 1 1 0;
  min-height: 34px;
  padding-inline: 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--dlg-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ejad-segmented button:hover { color: var(--dlg-ink); }
.ejad-segmented button[aria-checked="true"] {
  background: var(--dlg-raised);
  color: var(--dlg-ink);
  box-shadow: 0 1px 2px rgb(7 35 39 / .12);
}
.ejad-segmented button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dlg-accent) 30%, transparent);
}

/* ---------- lists and empty states ---------- */

.ejad-list { display: grid; gap: 6px; min-width: 0; }
.ejad-list article {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--dlg-line);
  border-radius: var(--dlg-radius);
  background: var(--dlg-raised);
}
.ejad-list article > div,
.ejad-list article > button:first-child { min-width: 0; flex: 1 1 auto; }
.ejad-list strong { display: block; font-size: 13px; font-weight: 600; }
.ejad-list span,
.ejad-list time {
  display: block;
  overflow: hidden;
  color: var(--dlg-muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A dashed outline on the raised surface, so the state reads as "nothing here
   yet" on both the main column and the aside — a --dlg-soft fill disappeared
   against the aside, which is that same colour. */
.ejad-empty {
  display: grid;
  place-items: center;
  min-height: 68px;
  padding: 14px;
  border: 1px dashed var(--dlg-line);
  border-radius: 12px;
  background: var(--dlg-raised);
  color: var(--dlg-muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- recorder ---------- */

.ejad-recorder {
  display: grid;
  place-items: center;
  min-height: 168px;
  border: 1px solid var(--dlg-line);
  border-radius: 12px;
  background: var(--dlg-soft);
  overflow: hidden;
}
.ejad-recorder video,
.ejad-recorder audio { max-width: 100%; }
.ejad-transport { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- footer ---------- */

.ejad-dialog__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--dlg-pad);
  border-block-start: 1px solid var(--dlg-line);
  background: var(--dlg-soft);
}
.ejad-dialog__status {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--dlg-muted);
  font-size: 13px;
  line-height: 1.45;
}
.ejad-dialog__status:empty { display: none; }
.ejad-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }

/* ---------- per-dialog width ---------- */

.ejad-clip-studio { --dlg-width: 620px; z-index: 10070; }
.ejad-writing-assistant { --dlg-width: 720px; z-index: 10065; }
.ejad-message-productivity { --dlg-width: 1000px; }

/* ---------- narrow viewports ---------- */

@media (max-width: 860px) {
  .ejad-dialog { padding: 12px; }
  .ejad-dialog__body--split { grid-template-columns: 1fr; }
  .ejad-dialog__col--aside {
    border-inline-start: 0;
    border-block-start: 1px solid var(--dlg-line);
  }
  .ejad-dialog__panel { max-height: calc(100dvh - 24px); }
  .ejad-dialog__footer { flex-wrap: wrap; }
  .ejad-dialog__actions { width: 100%; }
  .ejad-dialog__actions .ejad-btn { flex: 1 1 auto; }
}

/* ---------- dark ---------- */

body.cpd-theme-dark .ejad-dialog,
body.cpd-theme-dark-hc .ejad-dialog {
  --dlg-ink: #e8f2ef;
  --dlg-muted: #9db0b4;
  --dlg-line: #2a4247;
  --dlg-raised: #142529;
  --dlg-soft: #0a2228;
  --dlg-accent: #13E8B0;
  --dlg-accent-soft: #0e3139;
  --dlg-accent-strong: #13e9b1;
}
body.cpd-theme-dark .ejad-dialog__scrim,
body.cpd-theme-dark-hc .ejad-dialog__scrim { background: rgb(2 12 14 / .62); }
body.cpd-theme-dark .ejad-btn--primary,
body.cpd-theme-dark-hc .ejad-btn--primary { color: #051d22; }

@media (prefers-reduced-motion: reduce) {
  .ejad-dialog *,
  .ejad-dialog *::before { transition: none !important; }
}

/* ---------- writing assistant ---------- */

.ejad-writing-assistant__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

/* ---------- send options ---------- */

/* The field carries its label above it, so the buttons align to the row's end
   rather than its centre — otherwise they float against the label box. */
.ejad-message-productivity__schedule {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}
.ejad-message-productivity__templates { display: grid; gap: 6px; }
.ejad-message-productivity__templates > button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--dlg-control);
  padding-inline: 12px;
  border: 1px solid var(--dlg-line);
  border-radius: var(--dlg-radius);
  background: var(--dlg-raised);
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ejad-message-productivity__templates > button:hover {
  border-color: var(--dlg-accent);
  background: var(--dlg-accent-soft);
  color: var(--dlg-accent-strong);
}

/* A row in a list is a record with one main control and an optional trailing
   action, not two buttons of equal weight. */
.ejad-list article > button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
.ejad-list article > button:hover strong { color: var(--dlg-accent-strong); }
.ejad-list article > button:last-child:not(:first-child) {
  flex: 0 0 auto;
  min-height: 30px;
  padding-inline: 10px;
  border-radius: 8px;
  color: var(--dlg-muted);
  font-size: 12px;
  font-weight: 600;
}
.ejad-list article > button:last-child:not(:first-child):hover {
  background: var(--dlg-soft);
  color: var(--dlg-ink);
}

/* Empty states: the render appends a bare <p>, so the list itself carries the
   treatment rather than every call site having to. */
.ejad-list > p:only-child {
  display: grid;
  place-items: center;
  min-height: 68px;
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--dlg-line);
  border-radius: 12px;
  background: var(--dlg-raised);
  color: var(--dlg-muted);
  font-size: 13px;
  text-align: center;
}

/* [hidden] has to win over the display the field and result labels set. */
.ejad-dialog [hidden] { display: none !important; }

/* The overflow trigger keeps its name and shows a dot when the open panel is
   one of the tabs it holds. */
.ejad-conversation-tabs__more { position: relative; }
.ejad-conversation-tabs__more--active {
  background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
  color: var(--ejad-flow-accent-strong, #032E38);
}
.ejad-conversation-tabs__more--active::before {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-end: 5px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ejad-flow-accent, #087A5E);
  content: "";
}
.ejad-conversation-tabs__menu button[aria-current="true"] {
  background: var(--ejad-flow-accent-soft, rgba(8, 122, 94, .11));
  color: var(--ejad-flow-accent-strong, #032E38);
  font-weight: 700;
}

/* ==========================================================================
   1.12.27-ejad.164 — the room header, by priority
   Measured before: the supporting line carried the room type, member count,
   visibility, the full topic and two governance fields across one 438px row,
   at 9px and 10px. Five competing facts, none of them legible.
   The line now has a reading size and an order of precedence: members and
   visibility always, the type when there is room, the topic only when there is
   room for it to be read rather than clipped.
   ========================================================================== */
.ejad-room-header-context {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.ejad-room-header-context > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* The precedence ladder. Anything dropped here is still on the room info
   panel; nothing is only available in the header. */

/* The governance group is capped at 260px but held a topic plus an owner, a
   guests badge and a notification state. At 1600px the old ladder had not
   started yet, so they all rendered and the trailing badge was clipped through
   the middle of a glyph — worse than not showing it.
   Inside that cap only the topic earns the space: it shrinks and ellipses,
   the badges keep their full width or do not appear. Owner, guests and
   notification state are all on the room info panel. */
.ejad-room-header-context__topic {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ejad-room-header-context__owner,
.ejad-room-header-context__guests,
.ejad-room-header-context__notification { flex: 0 0 auto; }


/* ==========================================================================
   1.12.27-ejad.167 — the room header, rebuilt
   Measured before this block, with the interface in Arabic: the name's box was
   120px wide sitting at x=731 while the supporting line ran 731→1188, because
   the heading computed to `width: auto` with `justify-self: end`. End is the
   left in Arabic and the right in English, so the name detached from the line
   below it in opposite directions depending on the language — which is what
   "it differs with every language" was describing. Seven rules touched the
   heading, four of them keyed to `html[dir="rtl"]` or `html[lang^="ar"]`.
   Those four are gone. One layout now serves both directions, groups and
   direct messages, at every width: nothing here is conditional on language or
   viewport.
   ========================================================================== */

body[data-ejad-surface="room"] .mx_RoomHeader {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 60px !important;
  padding-inline: 16px !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_BaseAvatar {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Two rows on one inline-start edge. justify-items does it for both of them,
   so neither row can drift to the other end. */
body[data-ejad-surface="room"] .mx_RoomHeader_info {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: start !important;
  align-content: center !important;
  row-gap: 1px !important;
  width: 100% !important;
  min-width: 0 !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader_info > * {
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader_heading {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  /* The box follows the interface; the text inside follows itself. isolate
     keeps a Latin room name ordered correctly inside an Arabic shell without
     dragging the box to the other edge, which `direction: ltr` was doing. */
  direction: inherit !important;
  text-align: start !important;
  unicode-bidi: isolate;
}
body[data-ejad-surface="room"] .mx_RoomHeader_truncated {
  overflow: hidden !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* ---- the supporting line ----
   One classification chip, the member count, and the topic. Room type, owner,
   guest policy, notification state, governance policy and template are all on
   the room info panel; a header that carries seven facts communicates none. */
body[data-ejad-surface="room"] .ejad-room-header-context {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
body[data-ejad-surface="room"] .ejad-room-header-context__kind,
body[data-ejad-surface="room"] .ejad-room-header-context__owner,
body[data-ejad-surface="room"] .ejad-room-header-context__guests,
body[data-ejad-surface="room"] .ejad-room-header-context__notification,
body[data-ejad-surface="room"] .ejad-room-header-context__external-policy,
body[data-ejad-surface="room"] .ejad-room-header-context__template { display: none !important; }

body[data-ejad-surface="room"] .ejad-room-header-context > span {
  flex: 0 0 auto;
  font-weight: 500 !important;
  color: var(--ejad-flow-muted, #60767a) !important;
}
body[data-ejad-surface="room"] .ejad-room-header-context__audience {
  order: 1;
  font-weight: 600 !important;
}
body[data-ejad-surface="room"] .ejad-room-header-context__members { order: 2; }
body[data-ejad-surface="room"] .ejad-room-header-context__governance {
  order: 3;
  flex: 0 1 auto !important;
  padding-inline-start: 8px;
  /* A hairline instead of a middot: it cannot dangle when a room has no topic,
     because a zero-width span collapses the rule with it. */
  border-inline-start: 1px solid var(--ejad-flow-line, rgba(18, 68, 79, .14));
}
body[data-ejad-surface="room"] .ejad-room-header-context > span + span::before { content: none !important; }
body[data-ejad-surface="room"] .ejad-room-header-context__topic {
  /* text-overflow does nothing on a flex container: the topic computed to
     display:flex, so an 886px string in an 809px box was clipped mid-word
     instead of ending in an ellipsis. */
  display: block !important;
  /* And it is capped, so a long topic cannot take 818px of a 965px line and
     drown the two facts beside it. */
  max-width: min(52ch, 45%) !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* In a direct message the avatar is wrapped in .mx_WithPresenceIndicator, so
   every selector written as :not(.mx_BaseAvatar) counted it as a header action
   and pushed it to the far end: measured with the interface in English, the
   name sat at x=354 and the avatar at x=1368, on opposite sides of the header.
   The wrapper is the avatar slot, and it is sized like one. */
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_WithPresenceIndicator {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  margin-inline: 0 !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_WithPresenceIndicator .mx_BaseAvatar {
  width: 36px !important;
  height: 36px !important;
}
body[data-ejad-room-kind="direct"] .mx_RoomHeader .mx_BaseAvatar { border-radius: 999px !important; }

/* The address line in a direct message reads as an address: same size and
   colour as the group line, always left-to-right. */
body[data-ejad-surface="room"] .ejad-room-header-context__identity {
  direction: ltr;
  unicode-bidi: isolate;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Nothing reorders the header any more. DOM order is avatar, identity, actions,
   and the identity block absorbs the free space, so the actions land at the
   inline end in either direction without a single rule naming a side. */
body[data-ejad-surface="room"] .mx_RoomHeader > * { order: 0 !important; }
/* The identity block is a button, so whatever width it has is the width of its
   hover highlight. Growing it to fill the row painted a 1006px slab behind a
   direct message whose name and address measure 93px. It sizes to its content
   and the element after it takes the free space instead, which keeps the
   actions at the inline end without naming a side. */
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
body[data-ejad-surface="room"] .mx_RoomHeader > .mx_RoomHeader_infoWrapper + * {
  margin-inline-start: auto !important;
}

/* ==========================================================================
   1.12.27-ejad.175 — the room list row
   Two rules competed for the hover state and the later one won: an opaque
   white fill, a 24px drop shadow and a 1px lift, so a row in a list levitated
   like a floating card when the pointer crossed it. The row also sat 9px from
   one panel edge and 1px from the other, and shifted a pixel between rest and
   hover.
   One rest state, one hover, one selected. The selected marker is a pseudo
   element on the inline start rather than an inset shadow, which is why the
   three html[dir="rtl"] rules that existed only to mirror it are gone.
   ========================================================================== */
.mx_RoomListItemView,
.mx_RoomList [role="treeitem"] {
  position: relative;
  box-sizing: border-box !important;
  margin-inline: 6px !important;
  border-radius: 8px !important;
  border-color: transparent !important;
  transform: none !important;
  transition: background-color .12s ease;
}
.mx_RoomListItemView:hover,
.mx_RoomList [role="treeitem"]:hover {
  background: rgba(8, 122, 94, .07) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Correction to 175: that release styled [aria-selected="true"], and no row on
   this build carries it — all 43 report aria-selected as null, so the rule was
   dead and the open room kept Element's own grey-blue
   (--cpd-color-bg-action-tertiary-selected, rgb(225,230,236)) in a product
   whose every other active state is green. The real hook is a _selected_
   modifier with the painted child beneath it. */
[class*="_selected_"] [class*="_container_"] {
  background: rgba(8, 122, 94, .13) !important;
}
.mx_RoomListItemView[class*="_selected_"],
.mx_RoomListItemView:has([class*="_selected_"]),
.mx_RoomList [role="treeitem"][aria-selected="true"] {
  background: rgba(8, 122, 94, .13) !important;
  box-shadow: none !important;
  transform: none !important;
}
.mx_RoomListItemView[class*="_selected_"]::before,
.mx_RoomListItemView:has([class*="_selected_"])::before,
.mx_RoomList [role="treeitem"][aria-selected="true"]::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--ejad-flow-accent, #087A5E);
  content: "";
}

body.cpd-theme-dark .mx_RoomListItemView:hover,
body.cpd-theme-dark-hc .mx_RoomListItemView:hover { background: rgba(19, 233, 177, .10) !important; }
body.cpd-theme-dark .mx_RoomListItemView[aria-selected="true"],
body.cpd-theme-dark-hc .mx_RoomListItemView[aria-selected="true"] { background: rgba(19, 233, 177, .16) !important; }

/* ==========================================================================
   1.12.27-ejad.179 — the sidebar, audited
   What the audit found sound: five rail tiles all 48x48 at a 14px radius with
   even 4px gaps, and 43 room rows all 44px with 32px avatars and one name
   style. Those are left alone.
   What it found wrong, and this block fixes:
     · three spellings of the same pill — 9999px, 99px and 50%
     · seven controls under a 32px target: four 28x28 icon buttons and three
       30px filter pills (the 30px was mine, added in 151)
     · section headers 268px wide starting at x=68 against rows 258px wide
       starting at x=74, so every heading overhung the list it headed
     · those headings set at 13px/400 against room names at 14px/400 — smaller
       and greyer than the things they group, which reads as a lesser row
       rather than a heading
   Element ships these as CSS-module classes with hashed suffixes, so the
   selectors match on the stable part of the name. They are pinned to this
   Element build and want re-checking on an upgrade.
   ========================================================================== */
.mx_RoomListPanel [class*="chat-filter"],
.mx_LeftPanel [class*="chat-filter"] {
  min-height: 32px !important;
  border-radius: 999px !important;
}
.mx_RoomListPanel [class*="icon-button"],
.mx_LeftPanel [class*="icon-button"] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 999px !important;
}

/* A heading sits on the same rail as the rows beneath it and reads as a
   heading: shorter, heavier, tracked, not merely smaller. */
.mx_RoomListPanel [class*="_header_"],
.mx_LeftPanel [class*="_header_"] {
  box-sizing: border-box !important;
  /* The width of the rows it heads, not the width of its own text: a
     content-width chip floating inside a full-width sticky band was the last
     thing in the list that did not line up with anything. */
  width: calc(100% - 12px) !important;
  margin-inline: 6px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}

/* One spelling for the pill radius. 9999px and 999px render identically, so
   this is source hygiene rather than a visible change — but a stylesheet should
   not hold two answers to one question. */
.mx_RoomListPanel [class*="search"],
.mx_RoomListPanel [class*="Search"],
.mx_RoomListPanel [class*="_button_"],
.mx_LeftPanel [class*="search"],
.mx_LeftPanel [class*="Search"],
.mx_LeftPanel [class*="_button_"] { border-radius: 999px !important; }

/* Correction to 180: the section headings were given the rows' width to line
   their trailing edge up. They carry no background and no border, so that edge
   was never visible and the widths that differ — 256px and 246px against rows
   at 258px — cannot be seen. What is seen is where the text starts, and that
   is x=74 for both, exactly on the rows. The width rule stays because it costs
   nothing, but it fixed nothing, and the note is here so the next person does
   not go looking for the 12px. */

/* A sticky heading has to be opaque or the list reads through it. Measured with
   the list scrolled: the heading computed to rgba(0,0,0,0) while "Ejad Mgmt."
   overlapped it by 66px and "Ejad SAAS" by 20px, so two room names showed
   through the word "Favourites". */
.mx_RoomListPanel [class*="stickyBackground"],
.mx_RoomListPanel [class*="stickyRow"],
.mx_RoomListPanel [class*="_header_"],
.mx_LeftPanel [class*="stickyBackground"],
.mx_LeftPanel [class*="stickyRow"],
.mx_LeftPanel [class*="_header_"] {
  background: var(--ejad-flow-sidebar, #f2f8f6) !important;
}
body.cpd-theme-dark .mx_RoomListPanel [class*="stickyBackground"],
body.cpd-theme-dark .mx_RoomListPanel [class*="stickyRow"],
body.cpd-theme-dark .mx_RoomListPanel [class*="_header_"],
body.cpd-theme-dark-hc .mx_RoomListPanel [class*="stickyBackground"],
body.cpd-theme-dark-hc .mx_RoomListPanel [class*="stickyRow"],
body.cpd-theme-dark-hc .mx_RoomListPanel [class*="_header_"] {
  background: var(--ejad-flow-sidebar-dark, #0a2228) !important;
}

/* Three filters fit in 196px of chip rail at 8px of side padding and an 8px
   gap: 184px of chips plus 16px of gaps is 200px, four over. Element drops the
   third into the overflow rather than shrink anything, so "Rooms" disappeared
   while two chips sat in a half-empty row. Six and six brings it back with
   room to spare, and the 32px target is untouched. */
.mx_RoomListPanel [class*="chat-filter"],
.mx_LeftPanel [class*="chat-filter"] {
  padding-inline: 6px !important;
}
.mx_RoomListPanel [class*="_list_"]:has([class*="chat-filter"]),
.mx_LeftPanel [class*="_list_"]:has([class*="chat-filter"]) {
  gap: 6px !important;
}

/* ==========================================================================
   1.12.27-ejad.185 — the room list panel gets the width Arabic needs
   Measured at 268px with the interface in Arabic: 16 of 46 room names were
   clipped, median overflow 52px, and only one of five filter chips fitted
   because "غير المقروءة" is 83px against "Unreads" at 63px. Element decides how
   many chips to render by measuring the rail once, so no amount of padding
   trimming reached the third.
   Width was chosen from that distribution rather than picked: three chips need
   206px of rail, which is a 278px panel; 320px clears that comfortably and sits
   past the median name overflow, recovering 9 of the 16 clipped names. The
   remaining 7 overflow by 56px or more and want an ellipsis at any sane width.
   340px would recover two more and 360px five more, at 72px and 92px off the
   conversation — past the point where the trade pays.
   Below 1100px the panel goes back to Element's own sizing, where the
   conversation needs the room more than the list does. */
/* Removed in ejad.192: a min-width on the panel fought the user's resize
   handle (the panel clipped its own end, badges included, below 320px), and
   Element already opens the panel at 370px. See the ejad.192 block. */

/* ===================================================================== */
/* EJAD UI fix — 2026-10-14 (ejad.189)                                   */
/* 1) Active-call dock on Element Call (MatrixRTC/LiveKit) runs inside an */
/*    iframe, so the dock's mute/camera/share proxies can never reach the */
/*    in-call controls and were rendered permanently disabled ("the bar   */
/*    does nothing"). When no native control is reachable we mark the dock */
/*    .ejad-active-call-dock--proxyless (set in ejad-controls.js) and hide  */
/*    the unreachable buttons, leaving a clean, fully-working dock: live   */
/*    indicator + room name + return-to-call + collapse.                   */
.ejad-active-call-dock--proxyless [data-call-action="mute"],
.ejad-active-call-dock--proxyless [data-call-action="camera"],
.ejad-active-call-dock--proxyless [data-call-action="share"] { display: none !important; }
.ejad-active-call-dock--proxyless .ejad-active-call-dock__controls [data-call-action="return"] {
    width: auto; min-width: 38px; padding-inline: 14px; font-weight: 700;
}
.ejad-active-call-dock--proxyless .ejad-active-call-dock__identity strong { font-size: 14.5px; }

/* 2) On large / maximised screens the message composer was capped at        */
/*    min(1240px,100%) and the conversation column at 1180px, leaving them    */
/*    small and left of a wide viewport ("box small, does not match screen"). */
/*    Governing rule: body[data-ejad-surface="room"] .mx_MessageComposer.     */
/*    Grow composer AND message column together to fill wide screens, keeping */
/*    text lines readable. Width is CONTAINER-relative (100%), never vw: the   */
/*    room panel is narrower than the viewport when the room list is open, so  */
/*    a vw width overflows the panel and pushes the composer actions off-      */
/*    screen. 100% fills the panel in every layout and never overflows.        */
@media (min-width: 1400px) {
    body[data-ejad-surface="room"] .mx_MessageComposer {
        width: min(2000px, calc(100% - 48px)) !important;
        max-width: min(2000px, calc(100% - 48px)) !important;
        margin-inline: auto !important;
    }
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] {
        width: 100% !important;
        max-width: min(2000px, 100%) !important;
        margin-inline: auto !important;
    }
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line,
    .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line {
        max-width: min(96ch, 100%) !important;
    }
}
/* EJAD UI fix end */

/* ==========================================================================
   1.12.27-ejad.190 — EJADTECH brand identity (Brand Guidelines V1.0)

   Palette (guidelines p27-28): Deep Teal #032E38, Mint #13E9B1,
   Slate #80999E, white. The legacy teal literals above were moved onto these
   hues with lightness preserved (scratch tool rebrand.py), so contrast is
   unchanged; this layer sets the brand-defining surfaces explicitly.
   Rules from the guide applied here: Deep Teal is the dark/text colour, Mint
   is the accent, and text on a Mint fill is Deep Teal (white on Mint is
   ~1.6:1). The guide defines no red, so red stays only where Element uses it
   for failures and destructive actions.
   ========================================================================== */
:root {
  --ejad-brand-deep: #032E38;
  --ejad-brand-deep-2: #02232B;
  --ejad-brand-mint: #13E9B1;
  --ejad-brand-mint-ink: #087A5E;   /* Mint darkened for text on white, 5.4:1 */
  --ejad-brand-slate: #80999E;
  --ejad-brand-slate-ink: #587177;  /* Slate darkened for text on white, 5.0:1 */
  --ejad-flow-rail: var(--ejad-brand-deep);
  --ejad-flow-rail-deep: var(--ejad-brand-deep-2);
  --ejad-flow-ink: var(--ejad-brand-deep);
  --ejad-ink: var(--ejad-brand-deep);
  --ejad-flow-muted: var(--ejad-brand-slate-ink);
  --ejad-muted: var(--ejad-brand-slate-ink);
}

/* Workspace rail: Deep Teal with the guide's teal-to-mint light at the foot. */
.mx_SpacePanel,
.mx_SpacePanel .mx_SpacePanel_spaces {
  background:
    radial-gradient(120% 40% at 50% 112%, rgba(19, 233, 177, .22), transparent 70%),
    linear-gradient(180deg, var(--ejad-brand-deep) 0%, var(--ejad-brand-deep-2) 100%) !important;
}
.mx_SpacePanel .mx_NotificationBadge { border-color: var(--ejad-brand-deep) !important; }

/* Unread counts: Mint fill, Deep Teal numerals (brand contrast rule). */
.mx_RoomList .mx_NotificationBadge,
.mx_RoomList [class*="NotificationBadge"],
.mx_RoomTile_badge,
.mx_RoomTile_badgeContainer,
.mx_RoomListItemView [class*="Badge"],
.mx_SpacePanel .mx_NotificationBadge,
.ejad-native-unread-bridge__badge {
  background: var(--ejad-brand-mint) !important;
  color: var(--ejad-brand-deep) !important;
  box-shadow: none !important;
}
/* A mention is the higher-priority count: invert to Deep Teal with a Mint
   ring rather than borrowing the error red. */
.mx_RoomList .mx_NotificationBadge_highlighted,
.mx_RoomListItemView [class*="Badge"][class*="highlight"],
.mx_RoomListItemView [class*="Badge"][class*="mention"],
.mx_SpacePanel .mx_NotificationBadge_highlighted,
.ejad-native-unread-bridge__badge--mention {
  background: var(--ejad-brand-deep) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1.5px var(--ejad-brand-mint) !important;
}
.ejad-home-attention__badge--mention { background: rgba(19, 233, 177, .16); color: var(--ejad-brand-mint); }
.cpd-theme-light .mx_HomePage_body #ejad-home-attention .ejad-home-attention__badge--mention {
  background: var(--ejad-brand-deep) !important;
  color: #fff !important;
}

/* Primary actions: light theme Deep Teal fill; dark theme Mint fill with
   Deep Teal text. */
:root,
body.cpd-theme-light,
body.cpd-theme-light-hc {
  --cpd-color-bg-action-primary-rest: var(--ejad-brand-deep);
  --cpd-color-bg-action-primary-hovered: #064452;
  --cpd-color-bg-action-primary-pressed: var(--ejad-brand-deep-2);
  --cpd-color-text-action-accent: var(--ejad-brand-mint-ink);
}
body.cpd-theme-dark, body.cpd-theme-dark-hc {
  --cpd-color-bg-action-primary-rest: var(--ejad-brand-mint);
  --cpd-color-bg-action-primary-hovered: #13E8B0;
  --cpd-color-bg-action-primary-pressed: #087A5E;
  --cpd-color-text-on-solid-primary: var(--ejad-brand-deep);
  --cpd-color-text-action-accent: var(--ejad-brand-mint);
}

/* Selected conversation: Mint edge on the reading side. */
.mx_RoomTile_selected,
.mx_RoomListItemView_selected,
.mx_RoomListItemView[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--ejad-brand-mint) !important;
}
[dir="rtl"] .mx_RoomTile_selected,
[dir="rtl"] .mx_RoomListItemView_selected,
[dir="rtl"] .mx_RoomListItemView[aria-selected="true"] {
  box-shadow: inset -3px 0 0 var(--ejad-brand-mint) !important;
}

/* Focus ring in brand Mint. */
:focus-visible { outline-color: var(--ejad-brand-mint); }

/* Sign-in / home header logo sits on Deep Teal; the guide asks for clear
   space of one emblem and no effects (p22, p24). */
.ejp-logo { filter: none !important; }

/* ==========================================================================
   1.12.27-ejad.190 — encryption trust marker placement

   Element absolutely positions the per-message padlock at a PHYSICAL
   left:44px (and with a margin/shadow card inherited from an earlier ejad
   rule). In this RTL timeline that drops the icon on top of the message
   text, and inside reply quotes it floats over the sender name. Placement
   only: the icon keeps Element's colour, tooltip and focusability, and it
   still shows on every message and quote it applies to. It sits in a fixed
   slot at the end of the row (ejad.191), aligned with every other marker.
   ========================================================================== */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line > .mx_EventTile_e2eIcon {
  position: absolute !important;
  inset: auto !important;
  inset-block-start: 4px !important;
  inset-inline-end: 6px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* Inside a quoted reply the line is a flex row: put the marker inline at the
   start of the quote instead of absolutely over the sender name. */
.mx_ReplyChain .mx_EventTile_e2eIcon,
.mx_ReplyTile .mx_EventTile_e2eIcon {
  position: static !important;
  inset: auto !important;
  display: inline-block !important;
  vertical-align: -2px;
  margin-inline-end: 6px !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ==========================================================================
   1.12.27-ejad.191 — message action bar

   Element renders the hover action bar (reply, thread, edit, pin, options)
   INSIDE .mx_EventTile_line and positions it against that box at a physical
   right:8px, 36px above it. Since v89 the line is width:fit-content so long
   text wraps at a readable measure, which made the line exactly as wide as
   the text: on a short message the bar was anchored to the end of a few
   words, spilled past the start of the timeline, was clipped by the room
   list, and covered the sender's name. Let the line span the row again and
   cap the measure on its content instead, then pin the bar to the row's
   inline end (right in English, left in Arabic) above the message.
   ========================================================================== */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line {
  width: auto !important;
  max-width: none !important;
  padding-inline-end: 30px !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line > :not(.mx_MessageActionBar):not(.mx_EventTile_e2eIcon):not(.mx_MessageTimestamp) {
  max-width: 72ch;
}
@media (min-width: 1400px) {
  .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line {
    max-width: none !important;
  }
  .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line > :not(.mx_MessageActionBar):not(.mx_EventTile_e2eIcon):not(.mx_MessageTimestamp) {
    max-width: min(96ch, 100%);
  }
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line > .mx_MessageActionBar {
  right: auto !important;
  left: auto !important;
  inset-inline-end: 6px !important;
  top: -34px !important;
  z-index: 20;
  display: flex !important;
  align-items: center;
  gap: 2px;
  padding: 3px !important;
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .12)) !important;
  border-radius: 10px !important;
  background: var(--ejad-surface-raised, #fff) !important;
  box-shadow: 0 6px 18px rgba(3, 46, 56, .12), 0 1px 2px rgba(3, 46, 56, .08) !important;
  backdrop-filter: none !important;
}
.mx_RoomView_MessageList .mx_MessageActionBar > button,
.mx_RoomView_MessageList .mx_MessageActionBar > [role="button"],
.mx_RoomView_MessageList .mx_MessageActionBar > .ejad-message-task-action {
  display: inline-grid !important;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ejad-brand-slate-ink, #587177) !important;
  transform: none !important;
}
.mx_RoomView_MessageList .mx_MessageActionBar > button:hover,
.mx_RoomView_MessageList .mx_MessageActionBar > [role="button"]:hover,
.mx_RoomView_MessageList .mx_MessageActionBar > .ejad-message-task-action:hover {
  background: rgba(19, 233, 177, .14) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
.mx_RoomView_MessageList .mx_MessageActionBar > button:focus-visible,
.mx_RoomView_MessageList .mx_MessageActionBar > .ejad-message-task-action:focus-visible {
  outline: 2px solid var(--ejad-brand-mint, #13E9B1) !important;
  outline-offset: 1px;
}
.mx_RoomView_MessageList .mx_MessageActionBar svg {
  width: 18px !important;
  height: 18px !important;
}
.mx_RoomView_MessageList .mx_MessageActionBar .ejad-message-task-action svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MessageActionBar > button,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MessageActionBar > button,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MessageActionBar > .ejad-message-task-action,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MessageActionBar > .ejad-message-task-action {
  color: #b9cdd0 !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MessageActionBar > button:hover,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MessageActionBar > button:hover {
  color: var(--ejad-brand-mint, #13E9B1) !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line > .mx_MessageActionBar,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line > .mx_MessageActionBar {
  border-color: rgba(19, 233, 177, .18) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35) !important;
}

/* ==========================================================================
   1.12.27-ejad.192 — the room list follows the width the user drags it to

   Element sizes the left panel itself (default 370px, drag range
   200-370px). The ejad.185 min-width:320px only took effect once the user
   dragged narrower, and then the panel overflowed its own frame: the end of
   every row, where the unread/mention badge lives, was clipped away, along
   with the header actions. Rows were also 12px wider than the list
   (width:100% plus a 6px inline margin each side).
   Rows now shrink with the panel: the name gives way to an ellipsis and the
   badge never shrinks or wraps. In a narrow panel the message preview and
   spacing tighten so the name keeps as much room as possible.
   ========================================================================== */
.mx_RoomListPanel {
  min-width: 0 !important;
  max-width: 100% !important;
  container-type: inline-size;
  container-name: ejad-roomlist;
}
/* A <button> with width:auto shrinks to its content, so fill the row
   explicitly; only the element that carries the 6px inline margins
   (role="treeitem", see above) gives those 12px back. */
.mx_RoomListItemView {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.mx_RoomList [role="treeitem"] {
  width: calc(100% - 12px) !important;
  max-width: calc(100% - 12px) !important;
  box-sizing: border-box !important;
}
.mx_RoomListItemView [class*="_container_"],
.mx_RoomListItemView [class*="_content_"],
.mx_RoomListItemView [class*="_ellipsis_"],
.mx_RoomListItemView [class*="_roomName_"] {
  min-width: 0 !important;
}
.mx_RoomListItemView [class*="_container_"] { flex: 1 1 auto; width: 100%; }
.mx_RoomListItemView [class*="_content_"] { flex: 1 1 auto; }
.mx_RoomListItemView [class*="_ellipsis_"] { flex: 1 1 auto; overflow: hidden; }
.mx_RoomListItemView [class*="_roomName_"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx_RoomListItemView [class*="_notificationDecoration_"],
.mx_RoomListItemView [class*="_hoverMenu_"] {
  flex: 0 0 auto !important;
}
.mx_RoomListItemView [class*="_notificationDecoration_"] .mx_NotificationBadge,
.mx_RoomListItemView [class*="Badge"] {
  flex-shrink: 0 !important;
  white-space: nowrap;
}
/* Header and filter chips: shrink with the panel instead of overflowing it. */
.mx_RoomListPanel [class*="_header_"] { min-width: 0; }
.mx_RoomListPanel [class*="_header_"] h1,
.mx_RoomListPanel [class*="_header_"] [class*="_title_"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx_RoomListPrimaryFilters,
.mx_RoomListPanel [class*="_primaryFilters_"],
.mx_RoomListPanel [role="listbox"][aria-label] {
  min-width: 0;
  max-width: 100%;
}

@container ejad-roomlist (max-width: 290px) {
  .mx_RoomListItemView {
    padding-inline: 6px !important;
    gap: 8px !important;
  }
  .mx_RoomListItemView [class*="subtitle"],
  .mx_RoomListItemView [class*="_ellipsis_"] > [class*="_ellipsis_"] {
    font-size: 10px !important;
  }
  .mx_RoomListItemView [class*="_roomName_"],
  .mx_RoomListItemView [class*="name"] {
    font-size: 12.5px !important;
  }
}
@container ejad-roomlist (max-width: 240px) {
  /* At the narrowest drag position keep avatar, name and count only. */
  .mx_RoomListItemView [class*="_ellipsis_"] > [class*="_ellipsis_"] { display: none !important; }
}

/* ==========================================================================
   1.12.27-ejad.193 — incoming call card

   The card's content had been turned into a one-column grid whose implicit
   track sizes to its widest child. A 1:1 ring prints the caller's Matrix ID
   under the name; for SSO accounts with Arabic given names that ID is one
   unbreakable escaped string ("=d9=81=d8=a7..."), so the track grew past
   the card and overflow:hidden cut off the name, the ID and the Answer
   button. The header also centred its title against a left-hand icon.
   Now: the track is minmax(0,1fr), long text ellipsizes, the caller block
   is a centred avatar + name + readable ID (decoded in ejad-controls.js),
   and the actions use the brand: Answer in Mint with Deep Teal text,
   Decline as a quiet destructive outline. The page behind is dimmed by
   the card's own shadow, so no extra stacking layer is introduced.
   ========================================================================== */
.mx_ToastContainer:has(.mx_IncomingCallToast),
.mx_ToastContainer.ejad-call-stack {
  width: min(400px, calc(100vw - 28px)) !important;
}
.mx_ToastContainer:has(.mx_IncomingCallToast) > .mx_Toast_toast,
.mx_ToastContainer.ejad-call-stack > .mx_Toast_toast {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(3, 46, 56, .10) !important;
  border-radius: 20px !important;
  background: var(--ejad-surface-raised, #fff) !important;
  box-shadow:
    0 0 0 100vmax rgba(3, 46, 56, .28),
    0 24px 60px rgba(3, 46, 56, .28) !important;
}
.mx_ToastContainer:has(.mx_IncomingCallToast) .mx_Toast_body,
.mx_ToastContainer.ejad-call-stack .mx_Toast_body {
  min-width: 0;
}
.mx_IncomingCallToast {
  min-height: 0 !important;
  padding: 0 !important;
}
.mx_IncomingCallToast .mx_IncomingCallToast_content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
}
.mx_IncomingCallToast .mx_IncomingCallToast_content > * { min-width: 0; }

/* Header strip: brand Deep Teal with the call type, icon beside the text. */
.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_title {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 12px 14px 12px 18px;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(19, 233, 177, .28), transparent 60%),
    var(--ejad-brand-deep, #032E38);
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: start;
}
.mx_IncomingCallToast .mx_IncomingCallToast_title > svg {
  flex: 0 0 auto;
  width: 30px !important;
  height: 30px !important;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(19, 233, 177, .18);
  color: var(--ejad-brand-mint, #13E9B1);
  fill: currentColor;
  animation: ejad-call-ring 1.6s ease-in-out infinite;
}
.mx_IncomingCallToast .mx_IncomingCallToast_title h2 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx_IncomingCallToast .mx_IncomingCallToast_title .mx_IncomingCallToast_expandButton {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .78) !important;
  border-radius: 8px !important;
}
.mx_IncomingCallToast .mx_IncomingCallToast_title .mx_IncomingCallToast_expandButton:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
}

/* Caller: avatar over name over readable ID, centred. */
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px !important;
  margin: 0 !important;
  padding: 22px 20px 6px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ejad-brand-deep, #032E38) !important;
  font-size: inherit !important;
  text-align: center;
}
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails > :not(:first-child) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
}
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails > :first-child,
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails .mx_BaseAvatar,
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_avatar_"] {
  --cpd-avatar-size: 64px !important;
  width: 64px !important;
  height: 64px !important;
  font-size: 26px !important;
  line-height: 64px !important;
  margin-block-end: 6px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(19, 233, 177, .35) !important;
  animation: ejad-call-avatar-ring 1.8s ease-in-out infinite !important;
}
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_title_"] {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ejad-brand-deep, #032E38) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_details_"] {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ejad-brand-slate-ink, #587177) !important;
  font-size: 13px !important;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx_IncomingCallToast [class*="_details_"][data-ejad-readable] { font-size: 0 !important; }
.mx_IncomingCallToast [class*="_details_"][data-ejad-readable]::after {
  content: attr(data-ejad-readable);
  font-size: 13px;
}
.mx_IncomingCallToast [class*="_details_"][data-ejad-redundant] { display: none !important; }
.mx_IncomingCallToast form,
.mx_IncomingCallToast_content > form {
  justify-self: center;
  padding: 6px 20px 0;
}

/* Actions */
.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 18px 18px 18px !important;
}
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton {
  min-width: 0 !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
}
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="primary"] {
  border: 0 !important;
  background: var(--ejad-brand-mint, #13E9B1) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="primary"]:hover {
  background: #13E8B0 !important;
  filter: none;
}
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="primary"] svg { color: var(--ejad-brand-deep, #032E38) !important; fill: currentColor; }
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"] {
  border: 1px solid rgba(201, 71, 81, .38) !important;
  background: #fff !important;
  color: #b23a45 !important;
}
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"]:hover {
  background: rgba(201, 71, 81, .07) !important;
  filter: none;
}
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton:focus-visible {
  outline: 3px solid rgba(19, 233, 177, .55) !important;
  outline-offset: 2px;
}

/* Dark theme */
body.cpd-theme-dark .mx_ToastContainer:has(.mx_IncomingCallToast) > .mx_Toast_toast,
body.cpd-theme-dark-hc .mx_ToastContainer:has(.mx_IncomingCallToast) > .mx_Toast_toast,
body.cpd-theme-dark .mx_ToastContainer.ejad-call-stack > .mx_Toast_toast,
body.cpd-theme-dark-hc .mx_ToastContainer.ejad-call-stack > .mx_Toast_toast {
  border-color: rgba(19, 233, 177, .22) !important;
  background: #0b242a !important;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .5) !important;
}
body.cpd-theme-dark .mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_title_"],
body.cpd-theme-dark-hc .mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_title_"] { color: #f1fbf8 !important; }
body.cpd-theme-dark .mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_details_"],
body.cpd-theme-dark-hc .mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_details_"] { color: #a9c0c3 !important; }
body.cpd-theme-dark .mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"],
body.cpd-theme-dark-hc .mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"] {
  background: transparent !important;
  color: #ff9ba4 !important;
  border-color: rgba(255, 155, 164, .4) !important;
}
body.cpd-theme-dark .mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails .mx_BaseAvatar,
body.cpd-theme-dark-hc .mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails .mx_BaseAvatar {
  box-shadow: 0 0 0 4px #0b242a, 0 0 0 7px rgba(19, 233, 177, .35) !important;
}

@keyframes ejad-call-ring {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-12deg); }
  20%, 40% { transform: rotate(12deg); }
  50% { transform: rotate(0); }
}
@keyframes ejad-call-avatar-ring {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(19, 233, 177, .35); }
  50% { box-shadow: 0 0 0 4px #fff, 0 0 0 13px rgba(19, 233, 177, .12); }
}
@media (max-width: 420px) {
  .mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_buttons { gap: 8px !important; padding: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mx_IncomingCallToast .mx_IncomingCallToast_title > svg,
  .mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails .mx_BaseAvatar { animation: none !important; }
}

/* ==========================================================================
   1.12.27-ejad.194 — a ringing call owns the screen
   The unread-message card (Mark read / Quick reply / Open conversation)
   kept rendering above the incoming call card and outside its dimmed
   backdrop. Hold it back while a call is ringing; it returns afterwards.
   The ID line inside the call card hides the span Element wraps it in when
   a readable form is shown (see describeIncomingCaller).
   ========================================================================== */
body.ejad-incoming-call-active .ejad-unread-center__toast {
  display: none !important;
}
.mx_IncomingCallToast [class*="_details_"][data-ejad-readable] > * {
  display: none !important;
}

/* ==========================================================================
   1.12.27-ejad.195 — composer actions and call tiles

   Composer: Element's own actions (emoji, attach, more) and the EJAD tools
   (format, mention, voice clip, assistant, send options) now share one
   36px button, one 20px stroke icon set (SVG, see COMPOSER_ICONS) and one
   colour ramp. The EJAD group loses its framed box and is set apart from
   the native actions by a hairline divider instead.
   ========================================================================== */
body[data-ejad-surface="room"] .mx_MessageComposer_actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions > button,
body[data-ejad-surface="room"] .mx_MessageComposer_actions > div > button,
body[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_AccessibleButton,
body[data-ejad-surface="room"] .mx_MessageComposer_button,
.ejad-composer-discovery button {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ejad-brand-slate-ink, #587177) !important;
  transform: none !important;
  transition: background-color .12s ease, color .12s ease !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions svg,
body[data-ejad-surface="room"] .mx_MessageComposer_button svg,
.ejad-composer-discovery button svg {
  width: 20px !important;
  height: 20px !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions > button:hover,
body[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_AccessibleButton:hover,
body[data-ejad-surface="room"] .mx_MessageComposer_button:hover,
.ejad-composer-discovery button:hover:not(:disabled),
.ejad-composer-discovery button[aria-expanded="true"] {
  background: rgba(19, 233, 177, .14) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions button:focus-visible,
.ejad-composer-discovery button:focus-visible {
  outline: 2px solid var(--ejad-brand-mint, #13E9B1) !important;
  outline-offset: 1px !important;
}
.ejad-composer-discovery button:disabled { opacity: .38 !important; cursor: default !important; }
.ejad-composer-discovery {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  padding: 0 !important;
  padding-inline-start: 8px !important;
  border: 0 !important;
  border-inline-start: 1px solid var(--ejad-line, rgba(3, 46, 56, .12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 28px !important;
}
.ejad-composer-discovery button > span:first-child {
  color: inherit !important;
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer_actions button,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer_actions button,
body.cpd-theme-dark .ejad-composer-discovery button[data-ejad-composer-action],
body.cpd-theme-dark-hc .ejad-composer-discovery button[data-ejad-composer-action] { color: #a9c0c3 !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer_actions button:hover,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer_actions button:hover,
body.cpd-theme-dark .ejad-composer-discovery button[data-ejad-composer-action]:hover:not(:disabled),
body.cpd-theme-dark-hc .ejad-composer-discovery button[data-ejad-composer-action]:hover:not(:disabled) {
  background: rgba(19, 233, 177, .14) !important;
  color: var(--ejad-brand-mint, #13E9B1) !important;
}
body.cpd-theme-dark .ejad-composer-discovery,
body.cpd-theme-dark-hc .ejad-composer-discovery { border-inline-start-color: rgba(255, 255, 255, .12) !important; }
@media (max-width: 760px) {
  body[data-ejad-surface="room"] .mx_MessageComposer_actions > button,
  body[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_AccessibleButton,
  .ejad-composer-discovery button { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; }
  .ejad-composer-discovery { margin-inline-start: 2px !important; padding-inline-start: 4px !important; }
}

/* Call tiles. Element draws an ongoing call as a full-width 70px bordered
   box with a grey icon square, a 20px avatar, and the running time as
   "(3:31)" pushed to the far edge; an ended call as a plain grey row. Both
   become one compact card: brand icon disc, title, a duration pill that
   reads LTR in every language (the parentheses are text nodes, so they
   are hidden by zeroing the wrapper's font size), and the Join action. */
.mx_RoomView_MessageList [class*="_container_122d2_"],
.mx_RoomView_MessageList [class*="_container_1opqj_"] {
  box-sizing: border-box !important;
  width: fit-content !important;
  min-width: min(320px, 100%) !important;
  max-width: min(480px, 100%) !important;
  min-height: 0 !important;
  margin: 6px 0 !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .12)) !important;
  border-radius: 14px !important;
  background: var(--ejad-surface-raised, #fff) !important;
  box-shadow: 0 1px 2px rgba(3, 46, 56, .05) !important;
}
.mx_RoomView_MessageList [class*="_container_122d2_"] > [class*="_content_11tya_"] {
  gap: 12px !important;
  min-width: 0 !important;
}
.mx_RoomView_MessageList [class*="_container_ghpy6_"],
.mx_RoomView_MessageList [class*="_container_1opqj_"] > svg {
  flex: 0 0 auto;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: rgba(19, 233, 177, .16) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
.mx_RoomView_MessageList [class*="_container_1opqj_"] > svg {
  box-sizing: border-box;
  padding: 10px;
}
.mx_RoomView_MessageList [class*="_icon_ghpy6_"] { color: var(--ejad-brand-deep, #032E38) !important; }
.mx_RoomView_MessageList [class*="_container_122d2_"] [class*="_title_11tya_"],
.mx_RoomView_MessageList [class*="_title_1opqj_"] {
  color: var(--ejad-brand-deep, #032E38) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
}
.mx_RoomView_MessageList [class*="_container_122d2_"] [class*="_avatar_11tya_"] {
  flex: 0 0 auto;
}
.mx_RoomView_MessageList [class*="_time_1opqj_"] {
  margin-inline-start: auto;
  color: var(--ejad-brand-slate-ink, #587177) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
/* "(3:31)" -> a pill: the outer wrapper keeps only the inner timer. */
.mx_RoomView_MessageList [class*="_container_q8hft_"]:not([class*="_container_q8hft_"] [class*="_container_q8hft_"]) {
  font-size: 0 !important;
  line-height: 0 !important;
  min-width: 0 !important;
}
.mx_RoomView_MessageList [class*="_container_q8hft_"] [class*="_container_q8hft_"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(3, 46, 56, .06);
  color: var(--ejad-brand-deep, #032E38) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 18px !important;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.mx_RoomView_MessageList [class*="_container_q8hft_"] [class*="_container_q8hft_"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #087A5E;
  box-shadow: 0 0 0 3px rgba(8, 122, 94, .18);
}
.mx_RoomView_MessageList [class*="_container_122d2_"] button {
  min-height: 36px !important;
  padding-inline: 14px !important;
  border-radius: 10px !important;
  background: var(--ejad-brand-deep, #032E38) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_container_122d2_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_container_122d2_"],
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_container_1opqj_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_container_1opqj_"] {
  border-color: rgba(19, 233, 177, .16) !important;
  background: #10282e !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_container_ghpy6_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_container_ghpy6_"],
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_icon_ghpy6_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_icon_ghpy6_"],
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_container_1opqj_"] > svg,
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_container_1opqj_"] > svg { color: var(--ejad-brand-mint, #13E9B1) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_container_122d2_"] [class*="_title_11tya_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_container_122d2_"] [class*="_title_11tya_"],
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_title_1opqj_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_title_1opqj_"],
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_container_q8hft_"] [class*="_container_q8hft_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_container_q8hft_"] [class*="_container_q8hft_"] { color: #eef8f6 !important; }
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_container_q8hft_"] [class*="_container_q8hft_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_container_q8hft_"] [class*="_container_q8hft_"] { background: rgba(255, 255, 255, .08); }
body.cpd-theme-dark .mx_RoomView_MessageList [class*="_container_122d2_"] button,
body.cpd-theme-dark-hc .mx_RoomView_MessageList [class*="_container_122d2_"] button {
  background: var(--ejad-brand-mint, #13E9B1) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}

/* ==========================================================================
   1.12.27-ejad.196 — message content surfaces

   One card language for everything a message can carry: 14px radius,
   1px brand hairline, white surface, 10-12px padding, fit-content width
   between 260px and 460px, and a 40px Mint icon tile. Logical properties
   only, so Arabic, English and every other UI language mirror correctly.
   ========================================================================== */

/* --- Files. An older rule framed both .mx_MFileBody and its inner
   .mx_MediaBody, so a file rendered as a box inside a box: the outer one
   full width around an empty download iframe, the inner one capped at
   243px with the name and size cut off. One card now: icon, name + size
   on up to two lines, download action at the end. */
.mx_RoomView_MessageList .mx_MFileBody,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MFileBody {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px !important;
  box-sizing: border-box;
  width: fit-content !important;
  min-width: min(280px, 100%) !important;
  max-width: min(460px, 100%) !important;
  margin-block: 4px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .12)) !important;
  border-radius: 14px !important;
  background: var(--ejad-surface-raised, #fff) !important;
  box-shadow: 0 1px 2px rgba(3, 46, 56, .05) !important;
}
.mx_RoomView_MessageList .mx_MFileBody > .mx_MediaBody,
.mx_RoomView_MessageList .mx_MFileBody .mx_MediaBody {
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_MFileBody [data-type="info"] { min-width: 0; }
.mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
  padding: 0 !important;
  text-align: start;
}
.mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button svg {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px !important;
  height: 40px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: rgba(19, 233, 177, .16) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
.mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button span {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--ejad-brand-deep, #032E38) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}
.mx_RoomView_MessageList .mx_MFileBody [data-type="download"] {
  display: flex;
  align-items: center;
  height: auto !important;
}
.mx_RoomView_MessageList .mx_MFileBody [data-type="download"] iframe {
  width: 112px !important;
  height: 36px !important;
  /* The sandboxed usercontent page has no colour scheme of its own; when
     the app is dark the browser would paint the frame opaque white. */
  color-scheme: light;
  background: transparent !important;
}
.mx_RoomView_MessageList .mx_MFileBody [data-type="download"] a,
.mx_RoomView_MessageList .mx_MFileBody [data-type="download"] button {
  min-height: 36px !important;
  padding-inline: 12px !important;
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .14)) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ejad-brand-deep, #032E38) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.mx_RoomView_MessageList .mx_MFileBody [data-type="download"] a:hover,
.mx_RoomView_MessageList .mx_MFileBody [data-type="download"] button:hover {
  background: rgba(19, 233, 177, .14) !important;
}
@media (max-width: 520px) {
  .mx_RoomView_MessageList .mx_MFileBody { grid-template-columns: minmax(0, 1fr); min-width: 0 !important; width: 100% !important; }
}

/* --- Voice messages: the same card, a Mint play disc and Deep Teal
   waveform with the played part in Mint. */
.mx_RoomView_MessageList .mx_MVoiceMessageBody .mx_VoiceMessagePrimaryContainer,
.mx_RoomView_MessageList .mx_MAudioBody .mx_MediaBody {
  box-sizing: border-box;
  width: fit-content !important;
  min-width: min(260px, 100%) !important;
  max-width: min(420px, 100%) !important;
  min-height: 52px;
  padding: 8px 14px 8px 8px !important;
  padding-inline: 8px 14px !important;
  gap: 10px;
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .12)) !important;
  border-radius: 999px !important;
  background: var(--ejad-surface-raised, #fff) !important;
  box-shadow: 0 1px 2px rgba(3, 46, 56, .05) !important;
}
.mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer > button:first-child,
.mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer [class*="PlayPause"],
.mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer [class*="playPause"] {
  flex: 0 0 auto;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: var(--ejad-brand-mint, #13E9B1) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
.mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
  background-color: rgba(3, 46, 56, .28) !important;
  border-radius: 2px;
}
.mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct {
  background-color: var(--ejad-brand-deep, #032E38) !important;
}
.mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer .mx_Clock {
  color: var(--ejad-brand-slate-ink, #587177) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Images and videos: rounded, hairline, no stray backgrounds. */
.mx_RoomView_MessageList .mx_MImageBody_thumbnail_container,
.mx_RoomView_MessageList .mx_MImageBody_thumbnail,
.mx_RoomView_MessageList .mx_MVideoBody video {
  border-radius: 12px !important;
  overflow: hidden;
}
.mx_RoomView_MessageList .mx_MImageBody_thumbnail_container,
.mx_RoomView_MessageList .mx_MVideoBody video {
  box-shadow: 0 0 0 1px rgba(3, 46, 56, .10) !important;
}

/* --- Quoted replies: a soft tinted card with a Mint rail. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReplyChain_wrapper,
.mx_RoomView_MessageList .mx_ReplyChain {
  box-sizing: border-box;
  max-width: min(560px, 100%) !important;
  margin-block: 2px 6px !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-inline-start: 3px solid var(--ejad-brand-mint, #13E9B1) !important;
  border-radius: 10px !important;
  background: rgba(3, 46, 56, .045) !important;
}
.mx_RoomView_MessageList .mx_ReplyChain .mx_ReplyChain { padding-block: 4px !important; background: transparent !important; }
.mx_RoomView_MessageList .mx_ReplyTile .mx_DisambiguatedProfile_displayName,
.mx_RoomView_MessageList .mx_ReplyTile_sender { font-size: 12.5px !important; font-weight: 600 !important; }

/* --- Link previews and code. */
.mx_RoomView_MessageList .mx_LinkPreviewWidget {
  max-width: min(520px, 100%) !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .12)) !important;
  border-inline-start: 3px solid var(--ejad-brand-mint, #13E9B1) !important;
  border-radius: 12px !important;
  background: var(--ejad-surface-raised, #fff) !important;
}
.mx_RoomView_MessageList .mx_EventTile_pre_container,
.mx_RoomView_MessageList .mx_EventTile_body pre {
  border: 1px solid rgba(3, 46, 56, .10) !important;
  border-radius: 10px !important;
  background: #f4f7f7 !important;
}
.mx_RoomView_MessageList .mx_EventTile_body pre,
.mx_RoomView_MessageList .mx_EventTile_body code { direction: ltr; unicode-bidi: isolate; text-align: left; }
.mx_RoomView_MessageList .mx_EventTile_body :not(pre) > code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(3, 46, 56, .07);
  font-size: .92em;
}

/* --- Reactions: quiet pills, Mint when you reacted. */
.mx_RoomView_MessageList .mx_ReactionsRow [class*="ReactionsRowButton"],
.mx_RoomView_MessageList .mx_ReactionsRow .mx_AccessibleButton {
  min-height: 26px !important;
  padding-inline: 8px !important;
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .12)) !important;
  border-radius: 999px !important;
  background: var(--ejad-surface-raised, #fff) !important;
}
.mx_RoomView_MessageList .mx_ReactionsRow [class*="selected"],
.mx_RoomView_MessageList .mx_ReactionsRow [aria-pressed="true"],
.mx_RoomView_MessageList .mx_ReactionsRow [aria-checked="true"] {
  border-color: rgba(19, 233, 177, .7) !important;
  background: rgba(19, 233, 177, .14) !important;
}

/* --- Jump to latest: brand disc. */
.mx_JumpToBottomButton_scrollDown {
  border: 0 !important;
  background: var(--ejad-surface-raised, #fff) !important;
  box-shadow: 0 4px 14px rgba(3, 46, 56, .16), 0 0 0 1px rgba(3, 46, 56, .08) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
.mx_JumpToBottomButton_badge {
  background: var(--ejad-brand-mint, #13E9B1) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}

/* --- Composer: Element wraps some actions (attach) in a <div>/<span>
   holding the hidden file input, which sat on a different baseline and
   lifted the paperclip above its neighbours. */
body[data-ejad-surface="room"] .mx_MessageComposer_actions > * {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  line-height: 0 !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions input[type="file"] { display: none !important; }

/* --- Dark theme */
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MFileBody,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MFileBody,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_LinkPreviewWidget,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_LinkPreviewWidget,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_ReactionsRow .mx_AccessibleButton,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_ReactionsRow .mx_AccessibleButton {
  border-color: rgba(19, 233, 177, .16) !important;
  background: #10282e !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button span,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button span,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MFileBody [data-type="download"] a,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MFileBody [data-type="download"] a,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MFileBody [data-type="download"] button,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MFileBody [data-type="download"] button { color: #eef8f6 !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button svg,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button svg { color: var(--ejad-brand-mint, #13E9B1) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar { background-color: rgba(255, 255, 255, .28) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct { background-color: var(--ejad-brand-mint, #13E9B1) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_ReplyChain,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_ReplyChain,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReplyChain_wrapper,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReplyChain_wrapper { background: rgba(255, 255, 255, .05) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_pre_container,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_pre_container,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_body pre,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_body pre { background: #0a1d22 !important; border-color: rgba(255, 255, 255, .08) !important; }
body.cpd-theme-dark .mx_JumpToBottomButton_scrollDown,
body.cpd-theme-dark-hc .mx_JumpToBottomButton_scrollDown { background: #10282e !important; color: #eef8f6 !important; }

/* ==========================================================================
   1.12.27-ejad.197 — attach alignment and the send button

   Attach is Compound's IconButton, not an AccessibleButton: its icon sits
   in an indicator <div> sized 100% of the button. With the button forced
   to 36px and the icon to 20px, the icon was pinned to the top-start corner
   of a 36px box, 8px above emoji and more. The indicator now collapses to
   the icon so the button's own centring applies.

   Send is an AccessibleButton inside .mx_MessageComposer_actions, so the
   v195 rule made it transparent while Element keeps its icon white: it only
   showed under the hover tint. That is the one button that must stay filled
   — it is how a voice recording is sent.
   ========================================================================== */
body[data-ejad-surface="room"] .mx_MessageComposer_actions button > [class*="_indicator-icon_"] {
  display: grid !important;
  place-items: center !important;
  inline-size: 20px !important;
  block-size: 20px !important;
  color: inherit !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage {
  background: var(--ejad-brand-deep, #032E38) !important;
  color: #fff !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage svg {
  color: #fff !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage:hover,
body[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage:focus-visible {
  background: #0b4a57 !important;
  color: #fff !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage {
  background: var(--ejad-brand-mint, #13E9B1) !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage svg,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage svg {
  color: var(--ejad-brand-deep, #032E38) !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage:hover,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer_actions .mx_MessageComposer_sendMessage:hover {
  background: #13E8B0 !important;
}

/* --- Quoted replies: one card, not two. The v195 card was given to both
   .mx_ReplyChain_wrapper and the .mx_ReplyChain blockquote inside it, and
   [data-self] matches data-self="false" too, so every reply drew a card
   with a rail inside another card with a rail. The wrapper is now only a
   container; the blockquote is the card, and the quoted tile inside it
   carries no surface of its own. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReplyChain_wrapper,
.mx_RoomView_MessageList .mx_ReplyChain_wrapper {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_ReplyChain .mx_ReplyTile,
.mx_RoomView_MessageList .mx_ReplyChain .mx_ReplyTile > a,
.mx_RoomView_MessageList .mx_ReplyChain .mx_EventTile_reply,
.mx_RoomView_MessageList .mx_ReplyChain .mx_EventTile_line,
.mx_RoomView_MessageList .mx_ReplyChain .mx_EventTile_content {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   1.12.27-ejad.198 — one voice recorder per job

   The toolbar mic now drives Element's inline voice message (see
   startNativeVoiceRecording). Its "⋯" menu entry is the same recorder, so
   it is hidden, and the menu is kept out of sight while the mic opens it.
   ========================================================================== */
.mx_MessageComposer_Menu [data-ejad-native-voice="true"] { display: none !important; }
body.ejad-native-voice-launch .mx_MessageComposer_Menu,
body.ejad-native-voice-launch .mx_ContextualMenu_wrapper:has(.mx_MessageComposer_Menu),
body.ejad-native-voice-launch .mx_ContextualMenu_wrapper.mx_MessageComposer_Menu {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- Reply bar above the composer. Element draws it as a full-width
   transparent sheet with a 40%-opacity "Replying" line, a 16px sender and
   a 96px thumbnail. Instead: one compact card set into the composer — a
   Mint rail, a small "Replying" label with the close control on the same
   row, the sender, then the quoted message clamped to two lines and media
   capped at 44px, so the composer keeps its height. */
body[data-ejad-surface="room"] .mx_ReplyPreview {
  box-sizing: border-box !important;
  max-height: none !important;
  margin: 8px 8px 2px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(3, 46, 56, .045) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_section {
  display: flex !important;
  flex-direction: column !important;
  row-gap: 2px !important;
  padding: 7px 8px 8px 12px !important;
  padding-inline: 12px 8px !important;
  border: 0 !important;
  border-inline-start: 3px solid var(--ejad-brand-mint, #13E9B1) !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 24px !important;
  opacity: 1 !important;
  color: var(--ejad-brand-mint-ink, #087A5E) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 1.3 !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header_cancel {
  display: inline-grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  color: var(--ejad-brand-slate-ink, #587177) !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header_cancel svg {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header_cancel:hover,
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header_cancel:focus-visible {
  background: rgba(3, 46, 56, .08) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile,
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile > a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
  text-decoration: none !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile_sender {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-block-end: 2px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile_sender .mx_DisambiguatedProfile,
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile_sender .mx_DisambiguatedProfile_displayName {
  font-size: 13px !important;
  font-weight: 600 !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_EventTile_body,
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_MTextBody {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  max-height: calc(2 * 1.45em) !important;
  color: var(--ejad-brand-slate-ink, #587177) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_MImageBody,
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_MVideoBody,
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_MImageBody_thumbnail_container {
  max-width: 80px !important;
  max-height: 44px !important;
  margin: 2px 0 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile img,
body[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile video {
  max-width: 80px !important;
  max-height: 44px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_ReplyPreview,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_ReplyPreview { background: rgba(255, 255, 255, .05) !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header { color: var(--ejad-brand-mint, #13E9B1) !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_EventTile_body,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_MTextBody,
body.cpd-theme-dark[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_MTextBody,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyTile .mx_EventTile_body { color: #a9c0c3 !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header_cancel,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_ReplyPreview .mx_ReplyPreview_header_cancel { color: #a9c0c3 !important; }

/* ==========================================================================
   1.12.27-ejad.199 — composer, sent receipt, call tiles

   Composer, the pattern Slack, Teams and WhatsApp share: one card; the
   text field fills the row and grows with what is typed; the tools sit on
   the bottom edge so they stay beside the last line of a long draft; the
   caret and placeholder are centred on the tools when the field is one
   line. Earlier layers set min-height on the contenteditable itself, which
   pinned the text to the top of a taller box. Below 640px the field takes
   the full first line and the tools move to a second line that scrolls
   sideways instead of overflowing.
   ========================================================================== */
body[data-ejad-surface="room"] .mx_MessageComposer {
  min-height: 0 !important;
  padding: 5px 6px !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer:has(.ejad-composer-discovery) { margin-block-start: 8px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer_wrapper { padding-block: 0 !important; }
body[data-ejad-surface="room"] .mx_MessageComposer_row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 4px !important;
  min-height: 0 !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_row > .mx_SendMessageComposer,
body[data-ejad-surface="room"] .mx_MessageComposer_row > .mx_MessageComposer_wysiwyg {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: stretch !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body[data-ejad-surface="room"] .mx_SendMessageComposer .mx_BasicMessageComposer {
  flex: 1 1 auto !important;
  justify-content: center !important;
  min-height: 40px !important;
}
body[data-ejad-surface="room"] .mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input,
body[data-ejad-surface="room"] .mx_MessageComposer_wysiwyg [contenteditable="true"] {
  box-sizing: border-box !important;
  min-height: 0 !important;
  max-height: min(40vh, 320px) !important;
  margin: auto 0 !important;
  padding: 9px 8px !important;
  overflow-y: auto !important;
  font-size: 15px !important;
  line-height: 22px !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer_row > .mx_MessageComposer_actions,
body[data-ejad-surface="room"] .mx_MessageComposer_row > .ejad-composer-discovery {
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  padding-block: 2px !important;
}
@media (max-width: 640px) {
  body[data-ejad-surface="room"] .mx_MessageComposer_row { flex-wrap: wrap !important; row-gap: 2px !important; }
  body[data-ejad-surface="room"] .mx_MessageComposer_row > .mx_SendMessageComposer,
  body[data-ejad-surface="room"] .mx_MessageComposer_row > .mx_MessageComposer_wysiwyg { flex: 1 0 100% !important; }
  body[data-ejad-surface="room"] .mx_MessageComposer_row > .mx_MessageComposer_actions { order: 3 !important; margin-inline-start: auto !important; }
  body[data-ejad-surface="room"] .mx_MessageComposer_row > .ejad-composer-discovery {
    order: 2 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    border-inline-start: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  body[data-ejad-surface="room"] .mx_MessageComposer_row > .ejad-composer-discovery::-webkit-scrollbar { display: none !important; }
  body[data-ejad-surface="room"] .mx_MessageComposer_row > .mx_MessageComposer_actions .mx_MessageComposer_sendMessage { order: 99 !important; }
}

/* --- The "sent" check and read avatars. v137 put .mx_EventTile_msgOption
   back into the flow to stop receipts drifting from their message, which
   gave every last message an extra line holding only a check mark. They
   now sit on the message's own last line, at its trailing edge, the way
   Element, Teams and WhatsApp place delivery state: no line of their own. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { position: relative; }
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption {
  position: absolute !important;
  inset-block-end: 4px !important;
  inset-block-start: auto !important;
  inset-inline-end: 12px !important;
  inset-inline-start: auto !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 1;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption .mx_ReadReceiptGroup,
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption .mx_ReadReceiptGroup_container {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}

/* --- Ended / legacy call tiles: one card, not two. An early rule framed
   .mx_LegacyCallEvent_wrapper, which spans the whole timeline width, while
   the 65%-wide .mx_LegacyCallEvent inside it is the actual tile. The
   wrapper is now only a row; the tile follows the v195 call card. */
.mx_RoomView_MessageList .mx_LegacyCallEvent_wrapper {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent {
  box-sizing: border-box !important;
  width: fit-content !important;
  min-width: min(320px, 100%) !important;
  max-width: min(480px, 100%) !important;
  margin: 6px 0 !important;
  padding: 10px 14px !important;
  gap: 4px 16px !important;
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .12)) !important;
  border-radius: 14px !important;
  background: var(--ejad-surface-raised, #fff) !important;
  box-shadow: 0 1px 2px rgba(3, 46, 56, .05) !important;
}
.mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_sender {
  color: var(--ejad-brand-deep, #032E38) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-block-end: 0 !important;
}
.mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_type,
.mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_content {
  color: var(--ejad-brand-slate-ink, #587177) !important;
  font-size: 12.5px !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent {
  border-color: rgba(19, 233, 177, .16) !important;
  background: #10282e !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_sender,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_sender { color: #eef8f6 !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_type,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_type,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_content,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_LegacyCallEvent .mx_LegacyCallEvent_content { color: #a9c0c3 !important; }

/* ==========================================================================
   1.12.27-ejad.200 — conversation review on the live deployment

   Measured in a signed-in browser, light and dark, English and Arabic,
   group rooms and direct chats. Each block names what was seen.
   ========================================================================== */

/* --- The app shell never scrolls: see lockShellScroll() in
   ejad-controls.js. CSS cannot do it — clip on the root element is read as
   hidden, and hidden still lets focus() and scrollIntoView() move the
   document (it measured 1860px in a 775px window because of Element's
   off-screen tooltips), which shifted the whole interface up 83-88px. */

/* --- Buttons inside a message. An old rule painted every AccessibleButton
   in a message line with the raised surface and a shadow, which turned
   Element's primary actions (the missed-call "Call back", poll and event
   actions) into white-on-white or dark-on-dark pills with no visible text,
   and framed the encryption shield as a floating badge. Kinded buttons get
   their kind back; the shield is an icon again. */
.mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
.mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary_sm {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ejad-brand-deep, #032E38) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary svg,
.mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary_sm svg { color: currentColor !important; }
.mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover { background: #0b4a57 !important; }
body.cpd-theme-dark .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
body.cpd-theme-dark-hc .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
body.cpd-theme-dark .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary_sm,
body.cpd-theme-dark-hc .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary_sm {
  background: var(--ejad-brand-mint, #13E9B1) !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
body.cpd-theme-dark .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover,
body.cpd-theme-dark-hc .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover { background: #13E8B0 !important; }
.mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
.mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_secondary {
  border: 1px solid var(--ejad-line, rgba(3, 46, 56, .16)) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ejad-brand-deep, #032E38) !important;
}
body.cpd-theme-dark .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
body.cpd-theme-dark-hc .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
body.cpd-theme-dark .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_secondary,
body.cpd-theme-dark-hc .mx_EventTile_line .mx_AccessibleButton.mx_AccessibleButton_kind_secondary {
  border-color: rgba(255, 255, 255, .16) !important;
  color: #eef8f6 !important;
}
.mx_RoomView_MessageList .mx_LegacyCallEvent_content_button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.mx_EventTile_e2eIcon {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* --- Quoted replies in the dark themes. v196 tinted the reply wrapper in
   dark with body.cpd-theme-dark in front, which outranks the v197 rule that
   made the wrapper a plain container: every Arabic and English reply in
   dark drew a full-width band behind its quote card. */
body.cpd-theme-dark .mx_RoomView_MessageList .mx_ReplyChain_wrapper,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_ReplyChain_wrapper,
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReplyChain_wrapper,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_ReplyChain_wrapper {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* --- Quick controls docked in the space rail. They floated over the
   message pane at the trailing edge (the leading edge in Arabic), covering
   the hover action bar and read receipts, and the pane gave up a 92px lane
   to make room. App-wide controls belong in the dark rail beside Home,
   Threads and Settings, the way Slack and Teams place them; the rail has
   free height between the space list and its footer. The node stays in
   <body>; only its box moves, so Element's React tree is never touched. */
body:has(.mx_SpacePanel) #ejad-quick-controls {
  position: fixed !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  inset-block-start: auto !important;
  inset-block-end: 124px !important;
  transform: none !important;
  width: var(--ejad-space-rail-width, 68px) !important;
  min-width: 0 !important;
  max-height: calc(100vh - 340px) !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  gap: 2px !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  z-index: 60 !important;
}
body:has(.mx_SpacePanel) #ejad-quick-controls::after,
body:has(.mx_SpacePanel) #ejad-quick-controls::before,
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__divider,
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__status { display: none !important; }
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(226, 244, 240, .74) !important;
}
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button > span:not(:first-child),
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button > span:last-child:not(:only-child) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button svg { width: 20px !important; height: 20px !important; }
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button:hover,
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button:focus-visible {
  background: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
}
@media (max-height: 640px) {
  body:has(.mx_SpacePanel) #ejad-quick-controls:not(.ejad-quick-controls--collapsed) .ejad-quick-controls__button:not(.ejad-quick-controls__toggle):not([data-ejad-action="home"]) { display: none !important; }
}
body:has(.mx_SpacePanel) { --ejad-rail-gutter: 0px; }

/* --- Message notifications. The in-app toast sat centred under the room
   header at 520px, on top of the messages being read. A notification goes
   to the trailing corner above the composer, the way Teams, Slack and
   WhatsApp Web place them, and is narrower. */
@media (min-width: 641px) {
  .ejad-unread-center.ejad-unread-center--room {
    inset-block-start: auto !important;
    inset-block-end: 96px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 20px !important;
    left: auto !important;
    right: auto !important;
    width: min(400px, calc(100vw - 40px)) !important;
    transform: none !important;
  }
  html[dir="rtl"] .ejad-unread-center.ejad-unread-center--room { left: 20px !important; right: auto !important; }
  html:not([dir="rtl"]) .ejad-unread-center.ejad-unread-center--room { right: 20px !important; left: auto !important; }
  .ejad-unread-center--room .ejad-unread-center__toast { min-height: 0 !important; padding: 11px 12px !important; }
}

/* --- Threads and the other conversation drawers. The drawer is fixed at
   392px and ran down over the composer. On wide screens the conversation
   now gives up that width, so the drawer sits beside it like Slack's and
   Teams' thread pane; below that it stays an overlay that ends above the
   composer. */
@media (min-width: 1100px) {
  body:has(#ejad-conversation-context.ejad-conversation-context--visible) .mx_RoomView_timeline {
    margin-inline-end: 412px !important;
  }
  body:has(#ejad-conversation-context.ejad-conversation-context--visible)[data-ejad-surface="room"] .mx_RoomView_body .mx_MessageComposer {
    width: auto !important;
    max-width: none !important;
    margin-inline: clamp(12px, 2vw, 28px) 424px !important;
  }
}
@media (max-width: 1099px) {
  #ejad-conversation-context.ejad-conversation-context--visible { inset-block-end: 84px !important; max-height: calc(100vh - 160px) !important; }
}

/* --- Room list. Its scroller measured 279px of content in 273px, so
   every language showed a horizontal scrollbar under the list. */
.mx_LeftPanel [class*="_roomList_"] { overflow-x: hidden !important; }

/* Filter chips: Element hides every chip that does not fit on one line.
   With Arabic letterforms only "Unread" fitted in 283px, so People and
   Rooms were reachable only through the expand arrow. Tighter chips keep
   the three primary filters visible in both languages. */
.mx_LeftPanel [class*="_roomListPrimaryFilters_"] [class*="_chat-filter_"] {
  padding-inline: 10px !important;
  font-size: 12.5px !important;
}
.mx_LeftPanel [class*="_roomListPrimaryFilters_"] [class*="_list_"] { gap: 6px !important; }

/* Initials for avatars whose name starts with whitespace or punctuation
   (" أمارة المدينة المنورة" rendered an empty circle). ejad-controls.js
   writes the first visible letter into data-ejad-initial. */
.mx_BaseAvatar[data-ejad-initial] { font-size: 0 !important; }
.mx_BaseAvatar[data-ejad-initial]::before {
  content: attr(data-ejad-initial);
  font-size: calc(var(--cpd-avatar-size, 32px) * .5625);
  line-height: 1;
}

/* --- Timestamps and the encryption marker in Arabic. The gutter timestamp
   is direction: ltr so its digits never reorder, and logical insets resolve
   against an element's own direction, so inset-inline-start meant left in
   Arabic too: the time sat at the far edge of the pane, clipped. In RTL it
   is pinned with a physical right. The red encryption marker ("sent from an
   unverified device") was pinned to the end of a 1100px line, nowhere near
   its message; it now sits in the gutter beside the text, as in Element,
   with the time below it when a message carries both. */
html[dir="rtl"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_MessageTimestamp {
  left: auto !important;
  right: -46px !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line > .mx_EventTile_e2eIcon {
  inset-inline-end: auto !important;
  inset-inline-start: -17px !important;
  inset-block-start: 5px !important;
}
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line:has(> .mx_EventTile_e2eIcon) > .mx_MessageTimestamp { inset-block-start: 22px !important; }
html[dir="rtl"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line:has(> .mx_EventTile_e2eIcon) > .mx_MessageTimestamp { right: -50px !important; }
html:not([dir="rtl"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self] .mx_EventTile_line:has(> .mx_EventTile_e2eIcon) > .mx_MessageTimestamp { left: -50px !important; }

/* ==========================================================================
   1.12.27-ejad.201 — rail tools, notifications, brand identity 2025

   Brand: EJADTECH Brand Guidelines V1.0 (2025). The palette is unchanged
   (Deep #032E38, Mint #13E8B0, Slate #80999E); what is new is the master
   logo and "e" emblem and their signature gradient, deep violet #150026 to
   teal #19C3A8, which the guidelines run down every sidebar. Brand values
   live in these custom properties so a deployment can re-brand by
   overriding them and replacing the files under /ejad/.
   ========================================================================== */
:root {
  --ejad-brand-violet: #150026;
  --ejad-brand-teal: #19C3A8;
  --ejad-brand-gradient: linear-gradient(135deg, #150026 0%, #164755 34%, #18A392 68%, #19C3A8 100%);
  /* The sidebar form of the gradient, held darker towards its end so white
     icons keep at least 5.9:1 contrast all the way down the rail. */
  --ejad-brand-rail: linear-gradient(180deg, #150026 0%, #0B2A3A 36%, #0A4B4F 72%, #0F6F66 100%);
}

/* --- The space rail carries the brand gradient, as the sidebars in the
   guidelines do. */
.mx_SpacePanel,
body.cpd-theme-dark .mx_SpacePanel,
body.cpd-theme-dark-hc .mx_SpacePanel {
  background: var(--ejad-brand-rail) !important;
}

/* --- Docked rail tools. Collapse made sense for a panel floating over the
   conversation; docked in the rail it only hid tools, and since v200 forced
   every button visible it did nothing at all. The toggle goes; the tools
   are always there. Each icon names itself on hover and keyboard focus with
   a tooltip beside the rail, mirrored in Arabic. */
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__toggle { display: none !important; }
body:has(.mx_SpacePanel) #ejad-quick-controls { overflow: visible !important; }
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button { position: relative !important; }
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button::after {
  content: attr(aria-label);
  position: absolute;
  inset-inline-start: calc(100% + 12px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: max-content;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #07232A;
  box-shadow: 0 6px 18px rgba(7, 35, 42, .22);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease .25s, visibility 0s linear .37s;
}
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button:hover::after,
body:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition: opacity .12s ease .25s, visibility 0s linear .25s;
}
body.cpd-theme-dark:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button::after,
body.cpd-theme-dark-hc:has(.mx_SpacePanel) #ejad-quick-controls .ejad-quick-controls__button::after {
  background: #EEF8F6;
  color: #07232A;
}

/* --- Message notifications in the corner on every screen, not only in a
   conversation: on the home page the centred toast covered the attention
   centre's title and its toolbar. */
@media (min-width: 641px) {
  .ejad-unread-center {
    inset-block-start: auto !important;
    inset-block-end: 96px !important;
    width: min(400px, calc(100vw - 40px)) !important;
    transform: none !important;
  }
  html[dir="rtl"] .ejad-unread-center { left: 20px !important; right: auto !important; }
  html:not([dir="rtl"]) .ejad-unread-center { right: 20px !important; left: auto !important; }
  .ejad-unread-center .ejad-unread-center__toast { min-height: 0 !important; padding: 11px 12px !important; }
}

/* --- The master logo on the portal header. The 2025 lockup is a three-line
   mark (wordmark, descriptor, "by GO") at 2.86:1; it keeps the guidelines'
   20px digital minimum for the wordmark at every width. */
.ejp-logo { width: clamp(190px, 18vw, 250px) !important; height: auto !important; }

/* ==========================================================================
   1.12.27-ejad.202 — brand identity 2025, both languages

   Colour: brand_colours.py mapped the 177 near-brand greens that releases
   had accumulated (461 uses) onto the palette by role and theme: text to
   Deep #032E38 or Mint Ink #087A5E on light grounds and Mint #13E8B0 on
   dark ones; surfaces and borders by lightness. test_ejad_controls.js fails
   if an off-palette green comes back.

   Logo: an early rule swapped the portal image for the retired
   "EJADTECH PLATFORM" artwork with content: url(...) in the light theme, so
   the image element showed the old mark whatever file it loaded. The image
   now renders its own source, which applyBrandLogos() keeps on the master
   logo for the language and ground (the dark-ground lockups follow the
   guidelines: white emblem with a Mint stroke, EJAD/إيجاد in white,
   TECH/التقنية and the descriptor in Mint).
   ========================================================================== */
.mx_HomePage_body img.ejp-logo,
.cpd-theme-light .mx_HomePage_body > div > div > div:first-child img.ejp-logo { content: normal !important; }

/* --- Sign-in, registration and recovery: the first screen every customer
   sees, rebuilt on the 2025 guidelines. Before, a stock globe-and-network
   photograph sat behind a white form glued to a grey panel whose only
   content was a 106px logo at the top and the language menu at the bottom;
   six portal tools floated beside it although only language and theme mean
   anything before sign-in; the login-type menu drew its arrow over its own
   label in Arabic; and the conversation dock leaked a dot under the card.
   Now: the brand gradient with the guidelines' graphic pattern, one card
   split into a brand panel (dark-ground master logo, line, language) and
   the form, and only the two tools that apply. */
body[data-ejad-surface="auth"] {
  --ejad-auth-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' fill='none'%3E%3Cg stroke='%2313E8B0' stroke-opacity='.16'%3E%3Ccircle cx='800' cy='800' r='260' stroke-width='56'/%3E%3Ccircle cx='800' cy='800' r='380' stroke-width='18'/%3E%3Ccircle cx='800' cy='800' r='450' stroke-width='8'/%3E%3C/g%3E%3C/svg%3E");
  --ejad-auth-tagline: "Saudi Tech. Global Impact.";
}
html[lang^="ar"] body[data-ejad-surface="auth"] { --ejad-auth-tagline: "تقنية سعودية. أثر عالمي."; }
body[data-ejad-surface="auth"] .mx_AuthPage {
  background: var(--ejad-auth-pattern) right bottom / min(900px, 90vw) no-repeat,
              linear-gradient(135deg, #150026 0%, #07232A 38%, #032E38 62%, #0A4B4F 100%) !important;
  background-attachment: fixed !important;
}
html[dir="rtl"] body[data-ejad-surface="auth"] .mx_AuthPage {
  background: var(--ejad-auth-pattern) left bottom / min(900px, 90vw) no-repeat,
              linear-gradient(225deg, #150026 0%, #07232A 38%, #032E38 62%, #0A4B4F 100%) !important;
}
body[data-ejad-surface="auth"] .mx_AuthPage_modalBlur { display: none !important; }
body[data-ejad-surface="auth"] .mx_AuthPage { justify-content: center !important; min-height: 100vh !important; box-sizing: border-box !important; padding-block: 72px 0 !important; }
body[data-ejad-surface="auth"] .mx_AuthFooter { margin-block-start: auto !important; }
body[data-ejad-surface="auth"] .mx_AuthPage_modal {
  width: auto !important;
  max-width: none !important;
  margin: auto !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body[data-ejad-surface="auth"] .mx_AuthPage_modalContent {
  display: flex !important;
  width: min(940px, calc(100vw - 32px)) !important;
  min-height: 560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  box-shadow: 0 30px 80px rgba(7, 2, 20, .45), 0 2px 8px rgba(7, 2, 20, .2) !important;
  backdrop-filter: none !important;
}
body[data-ejad-surface="auth"] .mx_AuthHeader {
  display: flex !important;
  flex: 0 0 360px !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 360px !important;
  min-width: 0 !important;
  padding: 44px 36px 32px !important;
  border: 0 !important;
  background: var(--ejad-auth-pattern) center bottom -120px / 640px no-repeat,
              linear-gradient(160deg, #150026 0%, #0B2A3A 40%, #0A4B4F 75%, #0F6F66 100%) !important;
  color: #FFFFFF !important;
}
body[data-ejad-surface="auth"] .mx_AuthHeaderLogo {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 22px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
body[data-ejad-surface="auth"] .mx_AuthHeaderLogo img {
  width: 240px !important;
  max-width: 100% !important;
  height: auto !important;
  content: normal !important;
}
body[data-ejad-surface="auth"] .mx_AuthHeaderLogo::after {
  content: var(--ejad-auth-tagline);
  max-width: 260px;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
body[data-ejad-surface="auth"] .mx_AuthHeader .mx_LanguageDropdown { width: 100% !important; margin: 0 !important; }
body[data-ejad-surface="auth"] .mx_AuthHeader .mx_Dropdown_input {
  min-height: 40px !important;
  padding-inline: 12px 10px !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #FFFFFF !important;
}
body[data-ejad-surface="auth"] .mx_AuthHeader .mx_Dropdown_input:hover,
body[data-ejad-surface="auth"] .mx_AuthHeader .mx_Dropdown_input:focus-visible { border-color: #13E8B0 !important; }
body[data-ejad-surface="auth"] .mx_AuthHeader .mx_Dropdown_option,
body[data-ejad-surface="auth"] .mx_AuthHeader .mx_Dropdown_input svg { color: #FFFFFF !important; }
body[data-ejad-surface="auth"] .mx_AuthBody {
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 48px 56px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  color: #07232A !important;
}
body[data-ejad-surface="auth"] .mx_AuthBody h1 {
  margin: 0 0 6px !important;
  color: #032E38 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
body[data-ejad-surface="auth"] .mx_AuthBody h2,
body[data-ejad-surface="auth"] .mx_ServerPicker h2 {
  color: #587177 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
body[data-ejad-surface="auth"] .mx_ServerPicker {
  margin-block-end: 22px !important;
  padding-block-end: 18px !important;
  border-block-end: 1px solid rgba(128, 153, 158, .28) !important;
}
body[data-ejad-surface="auth"] .mx_ServerPicker_server { color: #032E38 !important; font-weight: 600 !important; }
body[data-ejad-surface="auth"] .mx_Login_underlinedServerName { border-bottom-color: rgba(128, 153, 158, .55) !important; }
body[data-ejad-surface="auth"] .mx_AuthBody .mx_Field { margin-block: 0 14px !important; }
body[data-ejad-surface="auth"] .mx_AuthBody .mx_Field input,
body[data-ejad-surface="auth"] .mx_AuthBody .mx_Field select {
  box-sizing: border-box !important;
  min-height: 46px !important;
  padding-inline: 14px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #07232A !important;
  font-size: 15px !important;
}
body[data-ejad-surface="auth"] .mx_AuthBody .mx_Field {
  border-color: rgba(128, 153, 158, .55) !important;
  border-radius: 10px !important;
}
body[data-ejad-surface="auth"] .mx_AuthBody .mx_Field:focus-within {
  border-color: #032E38 !important;
  box-shadow: 0 0 0 3px rgba(19, 232, 176, .35) !important;
}
/* The select's arrow is drawn at the physical right; in Arabic the label is
   right-aligned too, so the arrow sat on top of it. */
body[data-ejad-surface="auth"] .mx_AuthBody .mx_Field_select select { padding-inline-end: 36px !important; }
html[dir="rtl"] body[data-ejad-surface="auth"] .mx_AuthBody .mx_Field_select > svg { right: auto !important; left: 12px !important; }
body[data-ejad-surface="auth"] .mx_Login_type_container { align-items: center !important; margin-block-end: 14px !important; }
body[data-ejad-surface="auth"] .mx_Login_type_container .mx_Field { margin: 0 !important; }
body[data-ejad-surface="auth"] .mx_Login_type_label { color: #587177 !important; font-size: 13px !important; }
body[data-ejad-surface="auth"] .mx_Login_forgot { margin-block: 2px 18px !important; color: #087A5E !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; }
body[data-ejad-surface="auth"] .mx_Login_forgot:hover { text-decoration: underline !important; }
body[data-ejad-surface="auth"] .mx_AuthBody .mx_Login_submit,
body[data-ejad-surface="auth"] .mx_AuthBody button[type="submit"] {
  min-height: 48px !important;
  border-radius: 10px !important;
  background: #032E38 !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
body[data-ejad-surface="auth"] .mx_AuthBody .mx_Login_submit:hover,
body[data-ejad-surface="auth"] .mx_AuthBody button[type="submit"]:hover { background: #0B4A57 !important; }
body[data-ejad-surface="auth"] .mx_SSOButtons { margin-block-start: 12px !important; }
body[data-ejad-surface="auth"] .mx_SSOButton {
  min-height: 48px !important;
  border: 1px solid rgba(128, 153, 158, .55) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #07232A !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
body[data-ejad-surface="auth"] .mx_SSOButton:hover { border-color: #032E38 !important; background: #F3F7F7 !important; }
body[data-ejad-surface="auth"] .mx_AuthBody_changeFlow { margin-block-start: 22px !important; color: #587177 !important; font-size: 13px !important; text-align: center !important; }
body[data-ejad-surface="auth"] .mx_AuthBody_changeFlow .mx_AccessibleButton { color: #087A5E !important; font-weight: 700 !important; text-decoration: none !important; }
body[data-ejad-surface="auth"] .mx_AuthFooter {
  background: none !important;
  padding-block: 18px !important;
}
body[data-ejad-surface="auth"] .mx_AuthFooter a {
  color: rgba(255, 255, 255, .72) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
body[data-ejad-surface="auth"] .mx_AuthFooter a:hover { color: #FFFFFF !important; text-decoration: underline !important; }
/* Before sign-in only language and theme apply: a compact pill in the top
   corner instead of the six-tool rail. The conversation dock never shows. */
body[data-ejad-surface="auth"] #ejad-room-dock { display: none !important; }
body[data-ejad-surface="auth"] #ejad-quick-controls {
  position: fixed !important;
  inset-block-start: 18px !important;
  inset-block-end: auto !important;
  inset-inline-end: 18px !important;
  inset-inline-start: auto !important;
  left: auto; right: auto;
  transform: none !important;
  flex-direction: row !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 12px !important;
  background: rgba(7, 35, 42, .55) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  opacity: 1 !important;
}
html[dir="rtl"] body[data-ejad-surface="auth"] #ejad-quick-controls { left: 18px !important; right: auto !important; }
html:not([dir="rtl"]) body[data-ejad-surface="auth"] #ejad-quick-controls { right: 18px !important; left: auto !important; }
body[data-ejad-surface="auth"] #ejad-quick-controls::before,
body[data-ejad-surface="auth"] #ejad-quick-controls::after,
body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__divider,
body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__status,
body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__button:not([data-ejad-action="language"]):not([data-ejad-action="theme"]) { display: none !important; }
body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__button svg { width: 18px !important; height: 18px !important; }
body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__button > span { position: static !important; width: auto !important; height: auto !important; clip: auto !important; color: inherit !important; font-size: 13px !important; }
body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__button:hover { background: rgba(255, 255, 255, .12) !important; }
/* Dark theme: the form half follows the theme, the brand half does not. */
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthPage_modalContent,
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody { background: #0C1F24 !important; color: #EEF8F6 !important; }
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody h1,
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_ServerPicker_server { color: #FFFFFF !important; }
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody .mx_Field input,
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody .mx_Field select,
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_SSOButton { background: #10282E !important; color: #EEF8F6 !important; }
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody .mx_Login_submit,
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody button[type="submit"] { background: #13E8B0 !important; color: #032E38 !important; }
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_Login_forgot,
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody_changeFlow .mx_AccessibleButton { color: #13E8B0 !important; }
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody h2,
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_Login_type_label,
body.cpd-theme-dark[data-ejad-surface="auth"] .mx_AuthBody_changeFlow { color: #A9C0C3 !important; }
/* Phones: the brand panel becomes a compact band above the form. */
@media (max-width: 760px) {
  body[data-ejad-surface="auth"] .mx_AuthPage_modalContent { flex-direction: column !important; min-height: 0 !important; border-radius: 18px !important; }
  body[data-ejad-surface="auth"] .mx_AuthHeader {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    padding: 20px 22px !important;
    background-position: center, center !important;
  }
  body[data-ejad-surface="auth"] .mx_AuthHeaderLogo::after { display: none !important; }
  body[data-ejad-surface="auth"] .mx_AuthHeaderLogo img { width: 168px !important; }
  body[data-ejad-surface="auth"] .mx_AuthHeader .mx_LanguageDropdown { width: auto !important; min-width: 120px !important; }
  body[data-ejad-surface="auth"] .mx_AuthBody { padding: 28px 22px 24px !important; }
  body[data-ejad-surface="auth"] #ejad-quick-controls { inset-block-start: 10px !important; }
}
/* SSO buttons: the provider mark is centred on the label's line and sits at
   the button's inline start (the right in Arabic). */
body[data-ejad-surface="auth"] .mx_SSOButton {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 48px !important;
}
body[data-ejad-surface="auth"] .mx_SSOButton > svg,
body[data-ejad-surface="auth"] .mx_SSOButton > img {
  position: absolute !important;
  inset-block-start: 50% !important;
  inset-inline-start: 14px !important;
  inset-inline-end: auto !important;
  left: auto; right: auto;
  width: 22px !important;
  height: 22px !important;
  transform: translateY(-50%) !important;
}
html[dir="rtl"] body[data-ejad-surface="auth"] .mx_SSOButton > svg,
html[dir="rtl"] body[data-ejad-surface="auth"] .mx_SSOButton > img { right: 14px !important; left: auto !important; }
html:not([dir="rtl"]) body[data-ejad-surface="auth"] .mx_SSOButton > svg,
html:not([dir="rtl"]) body[data-ejad-surface="auth"] .mx_SSOButton > img { left: 14px !important; right: auto !important; }
/* A product's sign-in screen carries nothing but sign-in. Element's footer
   (deployment links plus its own "Powered by Matrix"), the homeserver
   picker that offers to switch servers, and the registration prompt are
   removed; recovery and single sign-on stay because they are sign-in. */
body[data-ejad-surface="auth"] .mx_AuthFooter,
body[data-ejad-surface="auth"] .mx_ServerPicker,
body[data-ejad-surface="auth"] .mx_AuthBody_changeFlow { display: none !important; }
body[data-ejad-surface="auth"] .mx_AuthBody h1 { margin-block-end: 26px !important; }
body[data-ejad-surface="auth"] .mx_AuthPage { padding-block: 72px !important; }
@media (max-width: 760px) {
  body[data-ejad-surface="auth"] .mx_AuthPage { padding-block: 64px 24px !important; justify-content: flex-start !important; }
  body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__button { padding: 0 9px !important; }
  body[data-ejad-surface="auth"] #ejad-quick-controls .ejad-quick-controls__button > span:not(:first-child) { display: none !important; }
}
body[data-ejad-surface="auth"] .mx_AuthPage_modalContent { min-height: 500px !important; }
@media (max-width: 760px) {
  body[data-ejad-surface="auth"] .mx_AuthPage_modalContent { min-height: 0 !important; }
  body[data-ejad-surface="auth"] .mx_AuthBody { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
}

/* ==========================================================================
   1.12.27-ejad.203 — search, and Element's own colours on the brand

   Colour: configure_ejadtech.py now writes the EJADTECH Light and Midnight
   themes from the 2025 palette. Element derives its buttons, links,
   toggles, badges, highlights and bubbles from those themes, which still
   carried #238F7B and a navy Midnight; the 202 stylesheet mapping could not
   reach them.
   ========================================================================== */

/* --- Search inside a conversation: a field at the end of the tab strip. */
.ejad-conversation-tabs__search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 260px !important;
  min-width: 0 !important;
  height: 32px !important;
  margin-inline-start: auto !important;
  padding: 0 10px !important;
  border: 1px solid rgba(128, 153, 158, .45) !important;
  border-radius: 9px !important;
  background: #FFFFFF !important;
  color: #587177 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: text !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}
.ejad-conversation-tabs__search svg { flex: 0 0 auto; }
.ejad-conversation-tabs__search-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ejad-conversation-tabs__search kbd {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid rgba(128, 153, 158, .4);
  border-radius: 5px;
  background: #F4F8F8;
  color: #587177;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  direction: ltr;
}
.ejad-conversation-tabs__search:hover { border-color: #032E38 !important; color: #032E38 !important; }
.ejad-conversation-tabs__search:focus-visible { outline: none !important; border-color: #032E38 !important; box-shadow: 0 0 0 3px rgba(19, 232, 176, .35) !important; }
body.cpd-theme-dark .ejad-conversation-tabs__search,
body.cpd-theme-dark-hc .ejad-conversation-tabs__search { border-color: rgba(255, 255, 255, .16) !important; background: #0A2A31 !important; color: #A9C0C3 !important; }
body.cpd-theme-dark .ejad-conversation-tabs__search kbd,
body.cpd-theme-dark-hc .ejad-conversation-tabs__search kbd { border-color: rgba(255, 255, 255, .16); background: #07232A; color: #A9C0C3; }
body.cpd-theme-dark .ejad-conversation-tabs__search:hover,
body.cpd-theme-dark-hc .ejad-conversation-tabs__search:hover { border-color: #13E8B0 !important; color: #EEF8F6 !important; }
@media (max-width: 900px) {
  .ejad-conversation-tabs__search { flex: 0 0 34px !important; justify-content: center !important; padding: 0 !important; }
  .ejad-conversation-tabs__search-label,
  .ejad-conversation-tabs__search kbd { display: none !important; }
}

/* --- Global search (Ctrl K). Element's dialog showed a bare "Search" line
   with no field, unsectioned 36px rows, the server's escaped Matrix ID
   beside every Arabic name ("@=d8=a7=d8=ad..."), and action icons on every
   hovered row. Now: a real search field, readable sections, 48px rows with
   the name first, escaped IDs hidden, actions only on the active row, and
   the keyboard hints Slack and Teams show. */
.mx_SpotlightDialog_wrapper .mx_Dialog { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.mx_SpotlightDialog {
  width: min(680px, calc(100vw - 32px)) !important;
  max-height: min(640px, 78vh) !important;
  border: 1px solid rgba(128, 153, 158, .3) !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 64px rgba(7, 35, 42, .28), 0 2px 8px rgba(7, 35, 42, .1) !important;
  overflow: hidden !important;
}
.mx_SpotlightDialog_searchBox {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  padding-inline-start: 50px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(128, 153, 158, .28) !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
}
.mx_SpotlightDialog_searchBox::before {
  content: "";
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: #587177;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mx_SpotlightDialog_searchBox input {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #07232A !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}
.mx_SpotlightDialog_searchBox input::placeholder { color: #80999E !important; }
.mx_SpotlightDialog_section { padding: 10px 10px 4px !important; }
.mx_SpotlightDialog_section h4 {
  margin: 4px 8px 6px !important;
  color: #587177 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.mx_SpotlightDialog_section:not(.mx_SpotlightDialog_recentlyViewed) .mx_SpotlightDialog_option {
  position: relative !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  gap: 12px !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
}
.mx_SpotlightDialog_section:not(.mx_SpotlightDialog_recentlyViewed) .mx_SpotlightDialog_option .mx_BaseAvatar,
.mx_SpotlightDialog_section:not(.mx_SpotlightDialog_recentlyViewed) .mx_SpotlightDialog_option .mx_DecoratedRoomAvatar { flex: 0 0 auto; }
.mx_SpotlightDialog_result_name { color: #07232A !important; font-weight: 600 !important; }
.mx_SpotlightDialog_result_details { color: #80999E !important; font-size: 12.5px !important; }
.mx_SpotlightDialog_result_details[data-ejad-encoded-id] { display: none !important; }
.mx_SpotlightDialog_option[aria-selected="true"],
.mx_SpotlightDialog_option:hover {
  background: #E7FBF6 !important;
}
.mx_SpotlightDialog_section:not(.mx_SpotlightDialog_recentlyViewed) .mx_SpotlightDialog_option[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: #13E8B0;
}
.mx_SpotlightDialog_option:not([aria-selected="true"]) .mx_SpotlightDialog_option--endAdornment,
.mx_SpotlightDialog_option:not([aria-selected="true"]) [class*="RoomResultContextMenus"] { visibility: hidden !important; }
.mx_SpotlightDialog::after {
  content: var(--ejad-spotlight-hint, "↑ ↓  to move   ·   Enter  to open   ·   Esc  to close");
  display: block;
  padding: 10px 18px;
  border-top: 1px solid rgba(128, 153, 158, .22);
  background: #F4F8F8;
  color: #80999E;
  font-size: 12px;
  white-space: pre;
}
html[lang^="ar"] .mx_SpotlightDialog { --ejad-spotlight-hint: "↑ ↓  للتنقل   ·   Enter  للفتح   ·   Esc  للإغلاق"; }
body.cpd-theme-dark .mx_SpotlightDialog,
body.cpd-theme-dark-hc .mx_SpotlightDialog,
body.cpd-theme-dark .mx_SpotlightDialog_searchBox,
body.cpd-theme-dark-hc .mx_SpotlightDialog_searchBox { border-color: rgba(255, 255, 255, .12) !important; background: #0A2A31 !important; }
body.cpd-theme-dark .mx_SpotlightDialog_searchBox input,
body.cpd-theme-dark-hc .mx_SpotlightDialog_searchBox input,
body.cpd-theme-dark .mx_SpotlightDialog_result_name,
body.cpd-theme-dark-hc .mx_SpotlightDialog_result_name { color: #EEF8F6 !important; }
body.cpd-theme-dark .mx_SpotlightDialog_searchBox::before,
body.cpd-theme-dark-hc .mx_SpotlightDialog_searchBox::before { background: #A9C0C3; }
body.cpd-theme-dark .mx_SpotlightDialog_section h4,
body.cpd-theme-dark-hc .mx_SpotlightDialog_section h4 { color: #A9C0C3 !important; }
body.cpd-theme-dark .mx_SpotlightDialog_option[aria-selected="true"],
body.cpd-theme-dark-hc .mx_SpotlightDialog_option[aria-selected="true"],
body.cpd-theme-dark .mx_SpotlightDialog_option:hover,
body.cpd-theme-dark-hc .mx_SpotlightDialog_option:hover { background: #0E333B !important; }
body.cpd-theme-dark .mx_SpotlightDialog::after,
body.cpd-theme-dark-hc .mx_SpotlightDialog::after { border-color: rgba(255, 255, 255, .1); background: #07232A; color: #A9C0C3; }

/* --- On-device search in encrypted conversations (buildConversationFind). */
.ejad-find__form { display: flex; gap: 8px; margin: 0 0 8px; }
.ejad-find__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(128, 153, 158, .55);
  border-radius: 10px;
  background: #FFFFFF;
  color: #07232A;
  font: inherit;
  font-size: 14.5px;
}
.ejad-find__input:focus { outline: none; border-color: #032E38; box-shadow: 0 0 0 3px rgba(19, 232, 176, .35); }
.ejad-find__submit {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #032E38;
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.ejad-find__submit:hover { background: #0B4A57; }
.ejad-find__note { margin: 0 0 10px; color: #80999E; font-size: 12px; line-height: 1.5; }
.ejad-find__status { margin: 0 0 8px; color: #587177; font-size: 12.5px; font-weight: 600; }
.ejad-find__results { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ejad-find__result {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ejad-find__result:hover,
.ejad-find__result:focus-visible { outline: none; background: #E7FBF6; }
.ejad-find__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ejad-find__meta strong { color: #07232A; font-size: 13px; font-weight: 700; }
.ejad-find__meta time { flex: 0 0 auto; color: #80999E; font-size: 11.5px; direction: ltr; unicode-bidi: isolate; }
.ejad-find__snippet { color: #3B5257; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.ejad-find__snippet mark { padding: 0 2px; border-radius: 3px; background: rgba(19, 232, 176, .35); color: inherit; }
.ejad-find__more {
  width: 100%;
  margin-block-start: 10px;
  padding: 10px;
  border: 1px solid rgba(128, 153, 158, .45);
  border-radius: 10px;
  background: transparent;
  color: #032E38;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.ejad-find__more:hover { border-color: #032E38; }
body.cpd-theme-dark .ejad-find__input,
body.cpd-theme-dark-hc .ejad-find__input { border-color: rgba(255, 255, 255, .16); background: #0A2A31; color: #EEF8F6; }
body.cpd-theme-dark .ejad-find__submit,
body.cpd-theme-dark-hc .ejad-find__submit { background: #13E8B0; color: #032E38; }
body.cpd-theme-dark .ejad-find__result:hover,
body.cpd-theme-dark-hc .ejad-find__result:hover { background: #0E333B; }
body.cpd-theme-dark .ejad-find__meta strong,
body.cpd-theme-dark-hc .ejad-find__meta strong { color: #EEF8F6; }
body.cpd-theme-dark .ejad-find__snippet,
body.cpd-theme-dark-hc .ejad-find__snippet { color: #C9D8DA; }
body.cpd-theme-dark .ejad-find__status,
body.cpd-theme-dark-hc .ejad-find__status,
body.cpd-theme-dark .ejad-find__note,
body.cpd-theme-dark-hc .ejad-find__note { color: #A9C0C3; }
body.cpd-theme-dark .ejad-find__more,
body.cpd-theme-dark-hc .ejad-find__more { border-color: rgba(255, 255, 255, .16); color: #13E8B0; }


/* ==========================================================================
   1.12.27-ejad.205 — calls and search refinements, checked during a live call

   Global search: the 203 row styling also reached the horizontal "Recently
   viewed" tiles, clipping their avatars and names and drawing the row
   marker inside a tile; it is now limited to the vertical lists, and the
   section headings are sentence case. Recently viewed tiles get a quiet
   selection instead.
   ========================================================================== */
.mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option {
  border-radius: 12px !important;
}
.mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"],
.mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover { background: #E7FBF6 !important; }
body.cpd-theme-dark .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"],
body.cpd-theme-dark-hc .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"],
body.cpd-theme-dark .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover,
body.cpd-theme-dark-hc .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover { background: #0E333B !important; }
.mx_SpotlightDialog_section h4 .mx_AccessibleButton { text-transform: none !important; font-size: 12.5px !important; }

/* --- Incoming call card. An earlier rule sized every avatar in the card to
   64px with a ring, including the stacked avatars of people already in the
   call. Compound clips stacked avatars with an SVG path drawn for their
   small size; at 64px that clip cut both faces into a lens and sheared the
   second one. Only the caller's avatar is large now; the participants are a
   24px overlapping row beside "on the call", without the clip. */
.mx_IncomingCallToast .mx_BaseAvatar,
.mx_IncomingCallToast [class*="_avatar_"] { clip-path: none !important; overflow: hidden !important; border-radius: 50% !important; }
.mx_IncomingCallToast .mx_BaseAvatar img,
.mx_IncomingCallToast [class*="_avatar_"] img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.mx_IncomingCallToast [class*="_stacked-avatars_"],
.mx_IncomingCallToast [class*="_facepile_"] {
  display: inline-flex !important;
  align-items: center !important;
}
.mx_IncomingCallToast [class*="_stacked-avatars_"] [class*="_avatar_"],
.mx_IncomingCallToast [class*="_facepile_"] [class*="_avatar_"],
.mx_IncomingCallToast [class*="_facepile_"] .mx_BaseAvatar {
  --cpd-avatar-size: 24px !important;
  float: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  margin-inline-start: -6px !important;
  font-size: 11px !important;
  line-height: 24px !important;
  box-shadow: 0 0 0 2px #FFFFFF !important;
  animation: none !important;
}
.mx_IncomingCallToast [class*="_stacked-avatars_"] > :first-child,
.mx_IncomingCallToast [class*="_facepile_"] [class*="_avatar_"]:first-child { margin-inline-start: 0 !important; }
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_details_"] {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
body.cpd-theme-dark .mx_IncomingCallToast [class*="_facepile_"] [class*="_avatar_"],
body.cpd-theme-dark-hc .mx_IncomingCallToast [class*="_facepile_"] [class*="_avatar_"] { box-shadow: 0 0 0 2px #0A2A31 !important; }

/* The retired active-call dock, should a cached older script still draw it. */
#ejad-active-call-dock { display: none !important; }

/* --- Search this conversation, rebuilt (205): a field that searches while
   typing, a thin progress bar instead of a "Searching…" line, a count and
   scope line, results grouped by day with the sender's initial, time and a
   two-line excerpt, a real empty state, and the on-device note as a quiet
   footer. Replaces the 203/204 form with its separate Search button. */
#ejad-conversation-context[data-kind="find"] .ejad-conversation-context__body.ejad-find {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.ejad-find .ejad-find__form { display: none !important; }
.ejad-find__bar {
  position: relative;
  flex: 0 0 auto;
  margin: 12px 14px 8px;
}
.ejad-find__bar svg {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: #587177;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.ejad-find .ejad-find__input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding-block: 0;
  padding-inline: 40px 12px;
  border: 1px solid rgba(128, 153, 158, .5);
  border-radius: 10px;
  background: #FFFFFF;
  color: #07232A;
  font: inherit;
  font-size: 14.5px;
}
.ejad-find .ejad-find__input:focus { outline: none; border-color: #032E38; box-shadow: 0 0 0 3px rgba(19, 232, 176, .32); }
.ejad-find__progress {
  position: relative;
  flex: 0 0 auto;
  height: 2px;
  margin: 0 14px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(19, 232, 176, .18);
}
.ejad-find__progress span {
  position: absolute;
  inset-block: 0;
  width: 35%;
  border-radius: 2px;
  background: #13E8B0;
  animation: ejad-find-progress 1.1s ease-in-out infinite;
}
@keyframes ejad-find-progress { 0% { inset-inline-start: -35%; } 100% { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .ejad-find__progress span { animation: none; width: 100%; opacity: .6; } }
.ejad-find .ejad-find__summary {
  flex: 0 0 auto;
  min-height: 18px;
  margin: 6px 16px 4px;
  color: #587177;
  font-size: 12px;
  font-weight: 600;
}
.ejad-find .ejad-find__results {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 8px 8px;
  overflow-y: auto;
}
.ejad-find__day {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 8px 4px;
  background: inherit;
  color: #80999E;
  font-size: 11.5px;
  font-weight: 700;
}
#ejad-conversation-context[data-kind="find"] .ejad-find__day { background: var(--ejad-surface-raised, #FFFFFF); }
.ejad-find .ejad-find__result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ejad-find .ejad-find__result:hover,
.ejad-find .ejad-find__result:focus-visible { outline: none; background: #E7FBF6; }
.ejad-find__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(3, 46, 56, .08);
  color: #032E38;
  font-size: 13px;
  font-weight: 700;
}
.ejad-find__main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ejad-find .ejad-find__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ejad-find .ejad-find__meta strong { overflow: hidden; color: #07232A; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ejad-find .ejad-find__meta time { flex: 0 0 auto; color: #80999E; font-size: 11.5px; direction: ltr; unicode-bidi: isolate; }
.ejad-find .ejad-find__snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #3B5257;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ejad-find .ejad-find__snippet mark { padding: 0 2px; border-radius: 3px; background: rgba(19, 232, 176, .38); color: inherit; }
.ejad-find__empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 28px 24px;
  text-align: center;
}
.ejad-find__empty[hidden] { display: none; }
.ejad-find__empty svg { width: 40px; height: 40px; fill: none; stroke: #80999E; stroke-width: 1.6; stroke-linecap: round; }
.ejad-find__empty strong { color: #07232A; font-size: 14px; }
.ejad-find__empty span { color: #587177; font-size: 12.5px; line-height: 1.5; }
.ejad-find .ejad-find__more {
  flex: 0 0 auto;
  width: auto;
  margin: 4px 14px 8px;
  padding: 9px;
  border: 1px solid rgba(128, 153, 158, .45);
  border-radius: 10px;
  background: transparent;
  color: #032E38;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ejad-find .ejad-find__more:hover { border-color: #032E38; background: #F4F8F8; }
.ejad-find__privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 16px;
  border-top: 1px solid rgba(128, 153, 158, .22);
  color: #80999E;
  font-size: 11.5px;
}
.ejad-find__privacy svg { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.cpd-theme-dark .ejad-find .ejad-find__input,
body.cpd-theme-dark-hc .ejad-find .ejad-find__input { border-color: rgba(255, 255, 255, .16); background: #0A2A31; color: #EEF8F6; }
body.cpd-theme-dark .ejad-find .ejad-find__result:hover,
body.cpd-theme-dark-hc .ejad-find .ejad-find__result:hover,
body.cpd-theme-dark .ejad-find .ejad-find__result:focus-visible,
body.cpd-theme-dark-hc .ejad-find .ejad-find__result:focus-visible { background: #0E333B; }
body.cpd-theme-dark .ejad-find__avatar,
body.cpd-theme-dark-hc .ejad-find__avatar { background: rgba(19, 232, 176, .14); color: #13E8B0; }
body.cpd-theme-dark .ejad-find .ejad-find__meta strong,
body.cpd-theme-dark-hc .ejad-find .ejad-find__meta strong,
body.cpd-theme-dark .ejad-find__empty strong,
body.cpd-theme-dark-hc .ejad-find__empty strong { color: #EEF8F6; }
body.cpd-theme-dark .ejad-find .ejad-find__snippet,
body.cpd-theme-dark-hc .ejad-find .ejad-find__snippet { color: #C9D8DA; }
body.cpd-theme-dark #ejad-conversation-context[data-kind="find"] .ejad-find__day,
body.cpd-theme-dark-hc #ejad-conversation-context[data-kind="find"] .ejad-find__day { background: #0A2A31; }
body.cpd-theme-dark .ejad-find .ejad-find__more,
body.cpd-theme-dark-hc .ejad-find .ejad-find__more { border-color: rgba(255, 255, 255, .16); color: #13E8B0; }
body.cpd-theme-dark .ejad-find__privacy,
body.cpd-theme-dark-hc .ejad-find__privacy { border-color: rgba(255, 255, 255, .1); color: #A9C0C3; }

/* ==========================================================================
   1.12.27-ejad.207 — mandatory updates, conversation pictures, quick-chat
   retry and forward
   ========================================================================== */

/* --- Conversation pictures (fillConversationAvatar): the room or person's
   photo over the kind icon, which stays as the fallback. */
.ejad-avatar--photo { position: relative; overflow: hidden; }
.ejad-avatar--photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.ejad-avatar--photo > svg { visibility: hidden; }
.ejad-home-attention__avatar.ejad-avatar--photo,
.ejad-room-preview__avatar.ejad-avatar--photo { border-radius: 50% !important; background: #F4F8F8 !important; }

/* --- Mandatory update notice: no "Later"; a live countdown or the reason
   it is waiting (a call, typing). */
.ejad-update-notice [data-ejad-update-action="later"] { display: none !important; }
.ejad-update-notice__countdown {
  display: block;
  margin-block-start: 2px;
  color: #087A5E;
  font-size: 12px;
  font-weight: 700;
}
body.cpd-theme-dark .ejad-update-notice__countdown,
body.cpd-theme-dark-hc .ejad-update-notice__countdown { color: #13E8B0; }

/* --- Quick conversation: failed messages and forwarding. */
.ejad-room-preview__message--failed { border-inline-start: 3px solid #B54852; }
.ejad-room-preview__failed {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 6px;
  color: #B54852;
  font-size: 12px;
  font-weight: 700;
}
.ejad-room-preview__failed button {
  padding: 3px 10px;
  border: 1px solid rgba(181, 72, 82, .45);
  border-radius: 999px;
  background: transparent;
  color: #B54852;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ejad-room-preview__failed button:first-of-type { border-color: #B54852; background: #B54852; color: #FFFFFF; }
.ejad-room-preview__failed button:disabled { opacity: .55; cursor: default; }
.ejad-room-preview__message > div:first-child { position: relative; }
.ejad-room-preview__forward {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #587177;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background-color .12s ease;
}
.ejad-room-preview__forward svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .ejad-room-preview__forward svg { transform: scaleX(-1); }
.ejad-room-preview__message:hover .ejad-room-preview__forward,
.ejad-room-preview__forward:focus-visible { opacity: 1; }
.ejad-room-preview__forward:hover { background: rgba(3, 46, 56, .08); color: #032E38; }
@media (hover: none) { .ejad-room-preview__forward { opacity: 1; } }

.ejad-forward { --dlg-width: 460px; z-index: 10080; }
.ejad-forward .ejad-dialog__subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ejad-forward__search {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin-block-end: 8px;
  padding: 0 12px;
  border: 1px solid rgba(128, 153, 158, .5);
  border-radius: 10px;
  background: #FFFFFF;
  color: #07232A;
  font: inherit;
  font-size: 14px;
}
.ejad-forward__search:focus { outline: none; border-color: #032E38; box-shadow: 0 0 0 3px rgba(19, 232, 176, .32); }
.ejad-forward__list { display: grid; gap: 2px; max-height: min(52vh, 420px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.ejad-forward__list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.ejad-forward__list li:hover { background: #F4F8F8; }
.ejad-forward__avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; }
.ejad-forward__name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #07232A; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ejad-forward__send {
  flex: 0 0 auto;
  min-width: 76px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: #032E38;
  color: #FFFFFF;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.ejad-forward__send:disabled { cursor: default; }
.ejad-forward__send--done { background: #E7FBF6; color: #087A5E; }
body.cpd-theme-dark .ejad-forward__search,
body.cpd-theme-dark-hc .ejad-forward__search { border-color: rgba(255, 255, 255, .16); background: #0A2A31; color: #EEF8F6; }
body.cpd-theme-dark .ejad-forward__name,
body.cpd-theme-dark-hc .ejad-forward__name { color: #EEF8F6; }
body.cpd-theme-dark .ejad-forward__list li:hover,
body.cpd-theme-dark-hc .ejad-forward__list li:hover { background: #0E333B; }
body.cpd-theme-dark .ejad-forward__send,
body.cpd-theme-dark-hc .ejad-forward__send { background: #13E8B0; color: #032E38; }
body.cpd-theme-dark .ejad-forward__send--done,
body.cpd-theme-dark-hc .ejad-forward__send--done { background: #0E333B; color: #13E8B0; }

/* ==========================================================================
   1.12.27-ejad.208 — home search field, session handover
   ========================================================================== */

/* --- Home search. The input carried its own frame and a narrower width
   from an older layer, so focusing it drew a second, shorter rounded box
   inside the field's frame and clipped the end of the placeholder. The
   input now fills the field with no frame of its own; the field alone shows
   focus, one Deep border with a Mint ring, like every other EJAD input. */
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__search {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border: 1px solid rgba(128, 153, 158, .5) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__search:focus-within {
  border-color: #032E38 !important;
  box-shadow: 0 0 0 3px rgba(19, 232, 176, .32) !important;
}
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__search > span { color: #587177 !important; }
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-input,
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-input:focus,
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-input:focus-visible {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding-block: 0 !important;
  padding-inline: 44px 40px !important;
  border: 0 !important;
  border-radius: inherit !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #07232A !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
}
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-input::placeholder { color: #80999E !important; }
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-hint { font-size: 12px !important; color: #80999E !important; }
body.cpd-theme-dark .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search,
body.cpd-theme-dark-hc .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search { border-color: rgba(255, 255, 255, .16) !important; background: #0A2A31 !important; }
body.cpd-theme-dark .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search:focus-within,
body.cpd-theme-dark-hc .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search:focus-within { border-color: #13E8B0 !important; }
body.cpd-theme-dark .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-input,
body.cpd-theme-dark-hc .mx_HomePage_body #ejad-home-attention .ejad-home-attention__search-input { color: #EEF8F6 !important; }

/* --- When the session moves to another tab, Element replaces the app with
   its "connected in another tab" page; EJAD's floating tools (quick chat,
   notifications, rail tools, dialogs) went on showing over it. */
body:has(.mx_SessionLockStolenView) [id^="ejad-"],
body:has(.mx_ConfirmSessionLockTheftView) [id^="ejad-"] { display: none !important; }

/* ==========================================================================
   1.12.27-ejad.209 — Mentions: the last 14 days of messages that mention
   you, read or not (refreshRecentMentions), listed under the Mentions tile.
   ========================================================================== */
.ejad-home-attention__list.ejad-home-attention__list--mentions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}
.ejad-home-mention {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #FFFFFF;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ejad-home-mention:hover,
.ejad-home-mention:focus-visible { outline: none; border-color: rgba(128, 153, 158, .4); background: #F4F8F8; }
.ejad-home-mention--unread { border-inline-start: 3px solid #13E8B0; }
.ejad-home-mention__avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; }
.ejad-home-mention__main { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.ejad-home-mention__top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ejad-home-mention__top strong { flex: 0 1 auto; overflow: hidden; color: #07232A; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ejad-home-mention__top span { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #587177; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ejad-home-mention__top time { flex: 0 0 auto; color: #80999E; font-size: 12px; direction: ltr; unicode-bidi: isolate; }
.ejad-home-mention__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #3B5257;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ejad-home-attention__mentions-loading { margin: 18px 4px; color: #587177; font-size: 13px; font-weight: 600; }
body.cpd-theme-dark .ejad-home-mention,
body.cpd-theme-dark-hc .ejad-home-mention { background: #0A2A31; }
body.cpd-theme-dark .ejad-home-mention:hover,
body.cpd-theme-dark-hc .ejad-home-mention:hover { background: #0E333B; border-color: rgba(255, 255, 255, .12); }
body.cpd-theme-dark .ejad-home-mention__top strong,
body.cpd-theme-dark-hc .ejad-home-mention__top strong { color: #EEF8F6; }
body.cpd-theme-dark .ejad-home-mention__body,
body.cpd-theme-dark-hc .ejad-home-mention__body { color: #C9D8DA; }

/* ===== Release 210: real data on the home page ===== */
/* Workspace cards are built from the user's own groups; the template's
   placeholders never show, even for a frame before the client is ready. */
.mx_HomePage_body .ejp-groups:not(.ejp-groups--live) { visibility: hidden; }
.mx_HomePage_body .ejp-group--live .ejp-icon::before { content: none !important; }
.mx_HomePage_body .ejp-group--live .ejp-icon { border-radius: 50%; overflow: hidden; }
.mx_HomePage_body .ejp-group--live .ejp-icon > svg { width: 22px; height: 22px; }
.mx_HomePage_body .ejp-group--live .ejp-icon.ejad-avatar--photo { background: #F4F8F8; border-color: transparent; }
.mx_HomePage_body .ejp-group--live .ejp-copy { min-width: 0; }
.mx_HomePage_body .ejp-group--live .ejp-copy strong,
.mx_HomePage_body .ejp-group--live .ejp-copy > span:not(.ejp-group-unread) {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx_HomePage_body .ejp-group-unread {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; margin-top: 6px; padding: 0 7px;
  border-radius: 999px; background: #087A5E; color: #FFFFFF;
  font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
body.cpd-theme-dark .mx_HomePage_body .ejp-group-unread,
body.cpd-theme-dark-hc .mx_HomePage_body .ejp-group-unread { background: #13E8B0; color: #032E38; }
body.cpd-theme-dark .mx_HomePage_body .ejp-group--live .ejp-icon.ejad-avatar--photo,
body.cpd-theme-dark-hc .mx_HomePage_body .ejp-group--live .ejp-icon.ejad-avatar--photo { background: #0A2A31; }

/* Mentions: "New" (unread, counted by the tile) above "Earlier · read". */
.ejad-home-mention-group {
  margin: 10px 4px 2px; color: #587177;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.ejad-home-mention-group:first-child { margin-top: 2px; }
.ejad-home-mention--read { opacity: .78; }
.ejad-home-mention--read .ejad-home-mention__top strong { font-weight: 600; }
.ejad-home-mention--read:hover, .ejad-home-mention--read:focus-visible { opacity: 1; }
body.cpd-theme-dark .ejad-home-mention-group,
body.cpd-theme-dark-hc .ejad-home-mention-group { color: #9FB4B8; }

/* Truncated unread list: a way to see the rest. */
.ejad-home-attention__more {
  grid-column: 1 / -1; justify-self: center; margin: 6px auto 0; padding: 7px 14px;
  border: 1px solid rgba(128, 153, 158, .35); border-radius: 999px;
  background: transparent; color: #087A5E; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ejad-home-attention__more:hover, .ejad-home-attention__more:focus-visible { outline: none; background: rgba(19, 232, 176, .1); }
body.cpd-theme-dark .ejad-home-attention__more,
body.cpd-theme-dark-hc .ejad-home-attention__more { color: #13E8B0; border-color: rgba(255, 255, 255, .16); }

/* ===== Release 211: workspace card polish ===== */
.mx_HomePage_body .ejp-group--live .ejp-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: start; }
.mx_HomePage_body .ejp-group--live .ejp-copy strong,
.mx_HomePage_body .ejp-group--live .ejp-copy > span:not(.ejp-group-unread) { max-width: 100%; }
.mx_HomePage_body .ejp-group--live .ejp-group-unread { flex: 0 0 auto; width: auto; max-width: max-content; align-self: flex-start; }

/* ===== Release 212: sidebar, people, notifications, calls ===== */
/* Room names keep their own direction, so a long Arabic name in the
   English interface (and the reverse) is cut at its end, not its start. */
.mx_RoomListItemView [class*="_roomName_"] { unicode-bidi: plaintext; text-align: start; }

/* Conversation header: availability instead of the Matrix ID. */
.ejad-room-header-context__identity[data-ejad-presence] { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.ejad-room-header-context__identity[data-ejad-presence="online"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #13E8B0; box-shadow: 0 0 0 2px rgba(19, 232, 176, .22);
}

/* Message toast: the conversation's picture, sender photo on its corner. */
.ejad-unread-center__toast-avatar.ejad-avatar--photo { position: relative; overflow: visible !important; color: transparent !important; background: #F4F8F8 !important; }
.ejad-unread-center__toast-avatar.ejad-avatar--photo > img:not(.ejad-unread-center__toast-sender-photo) {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover;
}
.ejad-unread-center__toast-sender-photo {
  position: absolute; inset-block-end: -4px; inset-inline-end: -4px;
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px #FFFFFF;
}
body.cpd-theme-dark .ejad-unread-center__toast-sender-photo,
body.cpd-theme-dark-hc .ejad-unread-center__toast-sender-photo { box-shadow: 0 0 0 2px #0B242A; }
body.cpd-theme-dark .ejad-unread-center__toast-avatar.ejad-avatar--photo,
body.cpd-theme-dark-hc .ejad-unread-center__toast-avatar.ejad-avatar--photo { background: #0A2A31 !important; }

/* Incoming call: Decline reads as decline, Join as join; the caller's ID
   is gone; Silence and Decline-with-message sit under them. */
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"] {
  border: 0 !important; background: #D93F4C !important; color: #FFFFFF !important;
}
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"] svg { color: #FFFFFF !important; fill: currentColor; }
.mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"]:hover { background: #C23441 !important; }
body.cpd-theme-dark .mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"],
body.cpd-theme-dark-hc .mx_IncomingCallToast .mx_IncomingCallToast_actionButton[data-kind="secondary"] { background: #E5525E !important; color: #FFFFFF !important; border: 0 !important; }
.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_buttons { padding-block-end: 10px !important; }
.mx_IncomingCallToast.ejad-call--sending { opacity: .7; pointer-events: none; }

.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails [class*="_details_"][data-ejad-redundant] { display: none !important; }
.ejad-call-extras { display: grid; gap: 8px; min-width: 0; padding: 0 18px 16px; }
.ejad-call-extras__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ejad-call-extras__row button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 10px; border: 1px solid rgba(128, 153, 158, .32); border-radius: 10px;
  background: transparent; color: #32494E; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  min-width: 0; line-height: 1.25; text-align: center;
}
.ejad-call-extras__row button span { min-width: 0; overflow-wrap: anywhere; }
.ejad-call-extras__row button svg { flex: 0 0 auto; }
.ejad-call-extras__row button[hidden] { display: none; }
.ejad-call-extras__row button:only-child { grid-column: 1 / -1; }
.ejad-call-extras__row button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ejad-call-extras__row button:hover, .ejad-call-extras__row button:focus-visible { outline: none; background: #F1F6F6; border-color: rgba(128, 153, 158, .55); }
.ejad-call-extras__row button[aria-pressed="true"] { background: #FFF6E5; border-color: #E8B65A; color: #8A5A00; }
.ejad-call-extras__row button[aria-expanded="true"] { background: #EAF8F3; border-color: #13E8B0; color: #087A5E; }
.ejad-call-extras__menu {
  display: grid; gap: 4px; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 6px !important;
  border: 1px solid rgba(128, 153, 158, .25) !important; border-radius: 12px !important; background: #F7FAFA !important; box-shadow: none !important;
}
.ejad-call-extras__menu[hidden] { display: none; }
.ejad-call-extras__menu > button {
  padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: #18363C;
  font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; line-height: 1.4;
}
.ejad-call-extras__menu > button:hover, .ejad-call-extras__menu > button:focus-visible { outline: none; background: #FFFFFF; box-shadow: 0 1px 2px rgba(3, 46, 56, .08); }
.ejad-call-extras__custom { display: flex; gap: 6px; min-width: 0; padding: 4px 2px 2px; }
.mx_IncomingCallToast .mx_IncomingCallToast_AvatarWithDetails:has([data-ejad-redundant]) { padding-block-end: 0 !important; }
.ejad-call-extras__custom input {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid rgba(128, 153, 158, .4); border-radius: 8px;
  background: #FFFFFF; color: #07232A; font: inherit; font-size: 13.5px;
}
.ejad-call-extras__custom input:focus { outline: 2px solid rgba(19, 232, 176, .5); outline-offset: 0; border-color: #13E8B0; }
.ejad-call-extras__custom button {
  flex: 0 0 auto; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: #032E38; color: #FFFFFF;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ejad-call-extras__status { margin: 0; color: #B23A45; font-size: 12.5px; }
.ejad-call-extras__status:empty { display: none; }
body.cpd-theme-dark .ejad-call-extras__row button, body.cpd-theme-dark-hc .ejad-call-extras__row button { color: #D5E4E6; border-color: rgba(255, 255, 255, .16); }
body.cpd-theme-dark .ejad-call-extras__row button:hover, body.cpd-theme-dark-hc .ejad-call-extras__row button:hover { background: rgba(255, 255, 255, .06); }
body.cpd-theme-dark .ejad-call-extras__row button[aria-pressed="true"], body.cpd-theme-dark-hc .ejad-call-extras__row button[aria-pressed="true"] { background: rgba(232, 182, 90, .14); border-color: rgba(232, 182, 90, .6); color: #F3CF85; }
body.cpd-theme-dark .ejad-call-extras__row button[aria-expanded="true"], body.cpd-theme-dark-hc .ejad-call-extras__row button[aria-expanded="true"] { background: rgba(19, 232, 176, .1); border-color: rgba(19, 232, 176, .5); color: #13E8B0; }
body.cpd-theme-dark .ejad-call-extras__menu, body.cpd-theme-dark-hc .ejad-call-extras__menu { background: #0F2F36 !important; border-color: rgba(255, 255, 255, .1) !important; }
body.cpd-theme-dark .ejad-call-extras__menu > button, body.cpd-theme-dark-hc .ejad-call-extras__menu > button { color: #E3EEF0; }
body.cpd-theme-dark .ejad-call-extras__menu > button:hover, body.cpd-theme-dark-hc .ejad-call-extras__menu > button:hover { background: rgba(255, 255, 255, .07); box-shadow: none; }
body.cpd-theme-dark .ejad-call-extras__custom input, body.cpd-theme-dark-hc .ejad-call-extras__custom input { background: #0A2A31; color: #EEF8F6; border-color: rgba(255, 255, 255, .18); }
body.cpd-theme-dark .ejad-call-extras__custom button, body.cpd-theme-dark-hc .ejad-call-extras__custom button { background: #13E8B0; color: #032E38; }

/* Menus in the dark themes: an early layer painted every [role="menu"]
   white, so Element's Sort menu was a white box with dark rows. */
body.cpd-theme-dark [role="menu"],
body.cpd-theme-dark-hc [role="menu"],
body.cpd-theme-dark .mx_ContextualMenu,
body.cpd-theme-dark-hc .mx_ContextualMenu {
  border-color: rgba(255, 255, 255, .12) !important;
  background: #0E2A31 !important;
  color: #E6F1F2 !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45) !important;
}
body.cpd-theme-dark [role="menu"] [role="menuitem"]:hover,
body.cpd-theme-dark [role="menu"] [role="menuitemradio"]:hover,
body.cpd-theme-dark [role="menu"] [role="menuitemcheckbox"]:hover,
body.cpd-theme-dark-hc [role="menu"] [role="menuitem"]:hover { background: rgba(19, 232, 176, .1) !important; }
body.cpd-theme-dark [role="menu"] [class*="_item_"]:not(:hover):not(:focus-visible),
body.cpd-theme-dark-hc [role="menu"] [class*="_item_"]:not(:hover):not(:focus-visible) { background: transparent !important; }
body.cpd-theme-dark [role="menu"] [class*="_separator_"],
body.cpd-theme-dark-hc [role="menu"] [class*="_separator_"] { border-color: rgba(255, 255, 255, .1) !important; background: rgba(255, 255, 255, .1) !important; }

/* ===== Release 213: work status ===== */
/* Rail button: the person icon carries the current status colour. */
.ejad-quick-controls__status-button .ejad-status-icon__dot { fill: var(--ejad-status-colour, #13E8B0); stroke: #FFFFFF; stroke-width: 1.4; }
.ejad-quick-controls__status-button[data-ejad-status="available"] .ejad-status-icon__dot { fill: #13E8B0; }

/* Room list: a ring in the status colour around the person's picture. */
.mx_RoomListItemView[data-ejad-status] [class*="_avatar_"]:not([class*="_avatar_"] [class*="_avatar_"]) {
  box-shadow: 0 0 0 2px var(--cpd-color-bg-canvas-default, #FFFFFF), 0 0 0 4px var(--ejad-status-colour) !important;
}
.mx_RoomListItemView[data-ejad-status="leave"] [class*="_roomName_"]::after,
.mx_RoomListItemView[data-ejad-status="travel"] [class*="_roomName_"]::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: 6px; border-radius: 50%;
  background: var(--ejad-status-colour); vertical-align: middle;
}
.mx_UserMenu [data-ejad-status] > [class*="_avatar_"], [data-ejad-status] > .mx_BaseAvatar { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ejad-status-colour) !important; border-radius: 50%; }

/* Conversation header line takes the status colour. */
.ejad-room-header-context__identity[data-ejad-presence]:not([data-ejad-presence="online"]):not([data-ejad-presence="other"])::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ejad-status-colour);
}
.ejad-room-header-context__identity[data-ejad-presence="leave"],
.ejad-room-header-context__identity[data-ejad-presence="travel"] { color: var(--ejad-status-colour) !important; font-weight: 600; }

/* Notice above the composer before writing to someone who is away. */
.ejad-status-banner {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin: 0 0 8px; padding: 10px 12px 10px 0; border: 1px solid rgba(128, 153, 158, .28); border-radius: 12px;
  background: color-mix(in srgb, var(--ejad-status-colour) 8%, #FFFFFF); color: #18363C; font-size: 13px; line-height: 1.5;
}
.ejad-status-banner[dir="rtl"] { padding: 10px 0 10px 12px; }
.ejad-status-banner__mark { align-self: stretch; border-radius: 4px; background: var(--ejad-status-colour); }
.ejad-status-banner__body { display: grid; gap: 2px; min-width: 0; }
.ejad-status-banner__body strong { font-size: 13.5px; font-weight: 700; color: #07232A; }
.ejad-status-banner__reply { margin: 0; color: #3B5257; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ejad-status-banner__reply em { font-style: normal; font-weight: 700; color: var(--ejad-status-colour); }
.ejad-status-banner__actions { display: flex; align-items: center; gap: 6px; }
.ejad-status-banner__contact { padding: 6px 10px; border: 1px solid rgba(128, 153, 158, .4); border-radius: 999px; background: #FFFFFF; color: #087A5E; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
button.ejad-status-banner__contact { cursor: pointer; }
span.ejad-status-banner__contact { border-style: dashed; color: #3B5257; }
.ejad-status-banner__dismiss { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #587177; font-size: 18px; line-height: 1; cursor: pointer; }
.ejad-status-banner__dismiss:hover { background: rgba(3, 46, 56, .06); }
body.cpd-theme-dark .ejad-status-banner, body.cpd-theme-dark-hc .ejad-status-banner { background: color-mix(in srgb, var(--ejad-status-colour) 12%, #0A2A31); border-color: rgba(255, 255, 255, .1); color: #D5E4E6; }
body.cpd-theme-dark .ejad-status-banner__body strong, body.cpd-theme-dark-hc .ejad-status-banner__body strong { color: #EEF8F6; }
body.cpd-theme-dark .ejad-status-banner__reply, body.cpd-theme-dark-hc .ejad-status-banner__reply { color: #B9CCCF; }
body.cpd-theme-dark .ejad-status-banner__contact, body.cpd-theme-dark-hc .ejad-status-banner__contact { background: transparent; color: #13E8B0; border-color: rgba(255, 255, 255, .2); }
body.cpd-theme-dark .ejad-status-banner__dismiss, body.cpd-theme-dark-hc .ejad-status-banner__dismiss { color: #9FB4B8; }

/* Status dialog */
.ejad-status { position: fixed; z-index: 9800; inset: 0; display: grid; place-items: center; padding: 22px; font-family: "EJAD Cairo", "Cairo", system-ui, sans-serif; }
.ejad-status[hidden] { display: none; }
.ejad-status__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(4, 20, 24, .48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: default; }
.ejad-status__dialog {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(560px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px));
  border: 1px solid rgba(3, 46, 56, .2); border-radius: 16px; background: #FBFDFC; color: #0D2D34;
  box-shadow: 0 28px 90px rgba(5, 25, 30, .28); overflow: hidden;
}
.ejad-status__header { display: grid; grid-template-columns: 46px minmax(0, 1fr) 38px; align-items: center; gap: 13px; padding: 18px 20px; border-bottom: 1px solid rgba(3, 46, 56, .12); }
.ejad-status__hero { position: relative; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--ejad-status-colour) 18%, #FFFFFF); }
.ejad-status__hero::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--ejad-status-colour); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ejad-status-colour) 30%, transparent); }
.ejad-status__header > div { display: grid; gap: 3px; min-width: 0; }
.ejad-status__header strong { font-size: 18px; line-height: 1.35; }
.ejad-status__subtitle { color: #637C81; font-size: 12px; line-height: 1.55; }
.ejad-status__close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #587177; font-size: 22px; cursor: pointer; }
.ejad-status__close:hover { background: rgba(3, 46, 56, .06); }
.ejad-status__body { display: grid; gap: 16px; padding: 18px 20px; overflow: auto; overscroll-behavior: contain; }
.ejad-status__states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ejad-status__states > button {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: center;
  padding: 11px 12px; border: 1px solid rgba(128, 153, 158, .3); border-radius: 12px; background: #FFFFFF; color: #0D2D34;
  font: inherit; text-align: start; cursor: pointer; min-width: 0;
}
.ejad-status__states > button:hover { border-color: rgba(128, 153, 158, .6); }
.ejad-status__states > button:focus-visible { outline: 3px solid rgba(19, 232, 176, .45); outline-offset: 1px; }
.ejad-status__states > button[aria-checked="true"] { border-color: var(--ejad-status-colour); background: color-mix(in srgb, var(--ejad-status-colour) 9%, #FFFFFF); box-shadow: inset 0 0 0 1px var(--ejad-status-colour); }
.ejad-status__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ejad-status-colour); }
.ejad-status__states strong { font-size: 13.5px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.ejad-status__states small { grid-column: 2; color: #637C81; font-size: 11.5px; line-height: 1.4; }
.ejad-status__details { display: grid; gap: 14px; padding: 14px; border: 1px solid rgba(128, 153, 158, .22); border-radius: 12px; background: #FFFFFF; }
.ejad-status__details[hidden], .ejad-status__details [hidden] { display: none !important; }
.ejad-status__field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.ejad-status__field small { color: #637C81; font-size: 11.5px; font-weight: 400; }
.ejad-status__field input, .ejad-status__field select, .ejad-status__reply textarea {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 10px; border: 1px solid rgba(128, 153, 158, .45); border-radius: 10px;
  background: #FFFFFF; color: #07232A; font: inherit; font-size: 13.5px; font-weight: 400;
}
.ejad-status__reply textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.ejad-status__reply textarea:disabled { opacity: .55; }
.ejad-status__field input:focus, .ejad-status__field select:focus, .ejad-status__reply textarea:focus { outline: 2px solid rgba(19, 232, 176, .45); border-color: #087A5E; }
.ejad-status__reply { display: grid; gap: 6px; }
.ejad-status__reply > small { color: #637C81; font-size: 11.5px; line-height: 1.5; }
.ejad-status__switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.ejad-status__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ejad-status__switch span { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #C9D6D8; transition: background .15s; flex: 0 0 auto; }
.ejad-status__switch span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: inset-inline-start .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ejad-status__switch input:checked + span { background: #087A5E; }
.ejad-status__switch input:checked + span::after { inset-inline-start: 19px; }
.ejad-status__switch input:focus-visible + span { outline: 3px solid rgba(19, 232, 176, .45); outline-offset: 2px; }
.ejad-status__rename { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #FFF8E8; color: #6B4A00; font-size: 13px; }
.ejad-status__rename[hidden] { display: none; }
.ejad-status__message { margin: 0; min-height: 1em; color: #087A5E; font-size: 12.5px; font-weight: 600; }
.ejad-status__message:empty { display: none; }
.ejad-status__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid rgba(3, 46, 56, .12); background: #FBFDFC; }
.ejad-status__footer button { min-height: 40px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ejad-status__clear { margin-inline-end: auto; border: 1px solid rgba(201, 71, 81, .4); background: transparent; color: #B23A45; }
.ejad-status__clear[hidden] { display: none; }
.ejad-status__save { border: 0; background: #032E38; color: #FFFFFF; }
.ejad-status--busy .ejad-status__footer button { opacity: .6; pointer-events: none; }
@media (max-width: 560px) {
  .ejad-status { padding: 10px; align-items: end; }
  .ejad-status__states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.cpd-theme-dark .ejad-status__dialog, body.cpd-theme-dark-hc .ejad-status__dialog { background: #0B242A; color: #E6F1F2; border-color: rgba(255, 255, 255, .12); }
body.cpd-theme-dark .ejad-status__header, body.cpd-theme-dark .ejad-status__footer,
body.cpd-theme-dark-hc .ejad-status__header, body.cpd-theme-dark-hc .ejad-status__footer { background: #0B242A; border-color: rgba(255, 255, 255, .1); }
body.cpd-theme-dark .ejad-status__subtitle, body.cpd-theme-dark .ejad-status__states small, body.cpd-theme-dark .ejad-status__field small, body.cpd-theme-dark .ejad-status__reply > small,
body.cpd-theme-dark-hc .ejad-status__subtitle, body.cpd-theme-dark-hc .ejad-status__states small { color: #9FB4B8; }
body.cpd-theme-dark .ejad-status__states > button, body.cpd-theme-dark-hc .ejad-status__states > button { background: #0F2F36; color: #E6F1F2; border-color: rgba(255, 255, 255, .12); }
body.cpd-theme-dark .ejad-status__states > button[aria-checked="true"], body.cpd-theme-dark-hc .ejad-status__states > button[aria-checked="true"] { background: color-mix(in srgb, var(--ejad-status-colour) 16%, #0F2F36); border-color: var(--ejad-status-colour); }
body.cpd-theme-dark .ejad-status__details, body.cpd-theme-dark-hc .ejad-status__details { background: #0F2F36; border-color: rgba(255, 255, 255, .1); }
body.cpd-theme-dark .ejad-status__field input, body.cpd-theme-dark .ejad-status__field select, body.cpd-theme-dark .ejad-status__reply textarea,
body.cpd-theme-dark-hc .ejad-status__field input, body.cpd-theme-dark-hc .ejad-status__field select, body.cpd-theme-dark-hc .ejad-status__reply textarea { background: #0A2A31; color: #EEF8F6; border-color: rgba(255, 255, 255, .18); color-scheme: dark; }
body.cpd-theme-dark .ejad-status__hero, body.cpd-theme-dark-hc .ejad-status__hero { background: color-mix(in srgb, var(--ejad-status-colour) 22%, #0B242A); }
body.cpd-theme-dark .ejad-status__save, body.cpd-theme-dark-hc .ejad-status__save { background: #13E8B0; color: #032E38; }
body.cpd-theme-dark .ejad-status__clear, body.cpd-theme-dark-hc .ejad-status__clear { color: #FF9BA4; border-color: rgba(255, 155, 164, .4); }
body.cpd-theme-dark .ejad-status__close, body.cpd-theme-dark-hc .ejad-status__close { color: #9FB4B8; }
body.cpd-theme-dark .ejad-status__rename, body.cpd-theme-dark-hc .ejad-status__rename { background: rgba(242, 179, 61, .12); color: #F3CF85; }
body.cpd-theme-dark .ejad-status__switch span, body.cpd-theme-dark-hc .ejad-status__switch span { background: #33545B; }
body.cpd-theme-dark .ejad-status__switch input:checked + span, body.cpd-theme-dark-hc .ejad-status__switch input:checked + span { background: #13E8B0; }
body.cpd-theme-dark .ejad-quick-controls__status-button .ejad-status-icon__dot { stroke: #0B242A; }

/* ===== Release 214: personal portal header ===== */
.mx_HomePage_body .ejp-header.ejp-header--live {
  display: flex !important; align-items: center !important; gap: clamp(16px, 2.4vw, 32px) !important;
  margin-bottom: 0 !important; padding: 4px 0 20px !important;
}
.mx_HomePage_body .ejp-header--live .ejp-heading,
.mx_HomePage_body .ejp-header--live .ejp-secure { display: none !important; }
.mx_HomePage_body .ejp-header--live .ejp-brand { flex: 0 0 auto; padding-inline-end: clamp(16px, 2.4vw, 32px); border-inline-end: 1px solid var(--ejp-line, rgba(3, 46, 56, .12)); }
.mx_HomePage_body .ejp-header--live .ejp-logo { width: clamp(132px, 12vw, 168px) !important; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__text { display: grid; gap: 6px; min-width: 0; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__greeting { margin: 0; color: #032E38; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: #587177; font-size: 13.5px; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__summary > span { color: #A6B8BB; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__summary a { color: #087A5E; font-weight: 700; text-decoration: none; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__summary a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__summary a.ejad-home-hero__summary--clear { color: #587177; font-weight: 600; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__status {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px;
  border: 1px solid rgba(128, 153, 158, .35); border-radius: 999px; background: #FFFFFF; color: #18363C;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(3, 46, 56, .06);
}
.mx_HomePage_body .ejp-header--live .ejad-home-hero__status:hover { border-color: var(--ejad-status-colour); }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__status:focus-visible { outline: 3px solid rgba(19, 232, 176, .45); outline-offset: 2px; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ejad-status-colour); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ejad-status-colour) 22%, transparent); }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__status svg { width: 16px; height: 16px; fill: none; stroke: #80999E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__secure { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; background: rgba(19, 232, 176, .1); color: #087A5E; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__secure svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.cpd-theme-dark .mx_HomePage_body .ejp-header--live .ejad-home-hero__greeting, body.cpd-theme-dark-hc .mx_HomePage_body .ejp-header--live .ejad-home-hero__greeting { color: #F1FBF8; }
body.cpd-theme-dark .mx_HomePage_body .ejp-header--live .ejad-home-hero__summary, body.cpd-theme-dark-hc .mx_HomePage_body .ejp-header--live .ejad-home-hero__summary { color: #9FB4B8; }
body.cpd-theme-dark .mx_HomePage_body .ejp-header--live .ejad-home-hero__summary > span { color: #4E6C72; }
body.cpd-theme-dark .mx_HomePage_body .ejp-header--live .ejad-home-hero__summary a, body.cpd-theme-dark-hc .mx_HomePage_body .ejp-header--live .ejad-home-hero__summary a { color: #13E8B0; }
body.cpd-theme-dark .mx_HomePage_body .ejp-header--live .ejad-home-hero__summary a.ejad-home-hero__summary--clear { color: #9FB4B8; }
body.cpd-theme-dark .mx_HomePage_body .ejp-header--live .ejad-home-hero__status, body.cpd-theme-dark-hc .mx_HomePage_body .ejp-header--live .ejad-home-hero__status { background: #0F2F36; color: #E6F1F2; border-color: rgba(255, 255, 255, .14); box-shadow: none; }
body.cpd-theme-dark .mx_HomePage_body .ejp-header--live .ejad-home-hero__secure, body.cpd-theme-dark-hc .mx_HomePage_body .ejp-header--live .ejad-home-hero__secure { background: rgba(19, 232, 176, .12); color: #13E8B0; }
@media (max-width: 1100px) { .mx_HomePage_body .ejp-header--live .ejad-home-hero__secure { display: none; } }
@media (max-width: 820px) {
  .mx_HomePage_body .ejp-header.ejp-header--live { flex-wrap: wrap !important; }
  .mx_HomePage_body .ejp-header--live .ejp-brand { border: 0; padding: 0; }
  .mx_HomePage_body .ejp-header--live .ejad-home-hero { flex: 1 1 100%; flex-wrap: wrap; }
}

/* Older layers style the header's last child (the retired "secure" line:
   nowrap, 11px, a leading dot) and every h1/p on the page. */
.mx_HomePage_body .ejp-header--live > .ejad-home-hero { display: flex !important; white-space: normal; font-size: inherit; color: inherit; text-align: start; letter-spacing: normal; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__text, .mx_HomePage_body .ejp-header--live .ejad-home-hero__text * { text-align: start; letter-spacing: normal; }
.mx_HomePage_body .ejp-header--live > .ejad-home-hero::before { content: none !important; display: none !important; }
.mx_HomePage_body .ejp-header--live .ejad-home-hero__summary { margin: 0 !important; }

/* ===== Release 215: one Activity entry, in-app confirmation, app directory in the user menu ===== */
/* The dashboard keeps two actions; give them room instead of the old seven-button squeeze. */
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__actions { gap: 8px; }
.mx_HomePage_body #ejad-home-attention .ejad-home-attention__actions button { min-height: 36px; padding: 7px 14px; font-size: 12.5px; }
@media (max-width: 640px) {
  .mx_HomePage_body #ejad-home-attention .ejad-home-attention__actions { width: 100%; }
  .mx_HomePage_body #ejad-home-attention .ejad-home-attention__actions button { flex: 1 1 0; }
}

.ejad-confirm {
  position: fixed; z-index: 6000; box-sizing: border-box; width: min(340px, calc(100vw - 24px));
  padding: 16px; border: 1px solid rgba(3, 46, 56, .12); border-radius: 12px;
  background: #FFFFFF; color: #032E38; text-align: start;
  box-shadow: 0 12px 32px rgba(3, 46, 56, .18), 0 2px 6px rgba(3, 46, 56, .08);
  font: inherit; font-size: 13px;
}
.ejad-confirm strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.45; }
.ejad-confirm p { margin: 6px 0 0; color: #587177; font-size: 13px; line-height: 1.5; }
.ejad-confirm p[hidden] { display: none; }
.ejad-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ejad-confirm__actions button {
  min-height: 34px; padding: 0 14px; border: 1px solid rgba(3, 46, 56, .16); border-radius: 8px;
  background: transparent; color: #18363C; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ejad-confirm__actions button:hover { background: rgba(3, 46, 56, .05); }
.ejad-confirm__actions .ejad-confirm__primary { border-color: #087A5E; background: #087A5E; color: #FFFFFF; }
.ejad-confirm__actions .ejad-confirm__primary:hover { background: #032E38; border-color: #032E38; }
.ejad-confirm__actions button:focus-visible { outline: 3px solid rgba(19, 232, 176, .45); outline-offset: 2px; }
body.cpd-theme-dark .ejad-confirm, body.cpd-theme-dark-hc .ejad-confirm {
  border-color: rgba(255, 255, 255, .14); background: #0F2F36; color: #E6F1F2;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
body.cpd-theme-dark .ejad-confirm p, body.cpd-theme-dark-hc .ejad-confirm p { color: #9FB4B8; }
body.cpd-theme-dark .ejad-confirm__actions button, body.cpd-theme-dark-hc .ejad-confirm__actions button { border-color: rgba(255, 255, 255, .18); color: #E6F1F2; }
body.cpd-theme-dark .ejad-confirm__actions button:hover { background: rgba(255, 255, 255, .06); }
body.cpd-theme-dark .ejad-confirm__actions .ejad-confirm__primary, body.cpd-theme-dark-hc .ejad-confirm__actions .ejad-confirm__primary { border-color: #13E8B0; background: #13E8B0; color: #032E38; }
body.cpd-theme-dark .ejad-confirm__actions .ejad-confirm__primary:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .ejad-confirm { animation: ejad-confirm-in .14s ease-out; }
  @keyframes ejad-confirm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ===== Release 216: rich messages read like chat (direction, size, width, Show more) ===== */
/* Direction follows the script most of the message is written in; every
   paragraph, item and cell still takes its own direction, so an English log
   line inside an Arabic report stays left-to-right. */
.mx_RoomView_MessageList .mx_EventTile_body.markdown-body[data-ejad-dir="rtl"] { direction: rtl; text-align: start; }
.mx_RoomView_MessageList .mx_EventTile_body.markdown-body[data-ejad-dir="ltr"] { direction: ltr; text-align: start; }
.mx_EventTile_body.markdown-body[data-ejad-rich] :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, summary, dt, dd) { unicode-bidi: plaintext; text-align: start; }

/* Headings at chat scale (Element uses document sizes: 22.5px / 18.75px). */
.mx_EventTile_body.markdown-body[data-ejad-rich] :is(h1, h2, h3, h4, h5, h6) { margin: 12px 0 4px !important; padding: 0 !important; border: 0 !important; line-height: 1.4 !important; font-weight: 700 !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] h1 { font-size: 17px !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] h2 { font-size: 16px !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] h3 { font-size: 15px !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] :is(h4, h5, h6) { font-size: 14px !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] > div > :first-child,
.mx_EventTile_body.markdown-body[data-ejad-rich] > :first-child { margin-top: 0 !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] p { margin: 0 0 6px !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] :is(ol, ul) { margin: 4px 0 8px !important; padding-inline-start: 22px !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] li + li { margin-top: 2px; }
.mx_EventTile_body.markdown-body[data-ejad-rich] blockquote { margin: 6px 0 8px !important; padding-block: 2px !important; }
/* Element draws the quote bar with a physical left border; keep it on the reading side. */
.mx_EventTile_body.markdown-body[data-ejad-dir="rtl"] blockquote { border-left: 0 !important; border-right: 2px solid rgb(129, 138, 149) !important; border-right-color: var(--cpd-color-border-interactive-primary, rgb(129, 138, 149)) !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] hr { margin: 10px 0 !important; height: 1px !important; border: 0 !important; background: rgba(3, 46, 56, .12) !important; }
.mx_EventTile_body.markdown-body[data-ejad-rich] table { display: table; width: auto !important; max-width: 100%; margin: 6px 0 10px !important; font-size: 13.5px; border-collapse: collapse; }
.mx_EventTile_body.markdown-body[data-ejad-rich] :is(td, th) { padding: 5px 10px !important; vertical-align: top; }
.mx_EventTile_body.markdown-body[data-ejad-rich] th { font-weight: 700; }
.mx_EventTile_body.markdown-body[data-ejad-rich] details { margin: 4px 0 8px; }
body.cpd-theme-dark .mx_EventTile_body.markdown-body[data-ejad-rich] hr,
body.cpd-theme-dark-hc .mx_EventTile_body.markdown-body[data-ejad-rich] hr { background: rgba(255, 255, 255, .14) !important; }
/* Element paints dark-theme table rows black; sit them on the message surface. */
body.cpd-theme-dark .mx_EventTile_body.markdown-body[data-ejad-rich] :is(tr, td, th),
body.cpd-theme-dark-hc .mx_EventTile_body.markdown-body[data-ejad-rich] :is(tr, td, th) { background: transparent !important; border-color: rgba(255, 255, 255, .12) !important; }
body.cpd-theme-dark .mx_EventTile_body.markdown-body[data-ejad-rich] tr:nth-child(even) :is(td, th),
body.cpd-theme-dark-hc .mx_EventTile_body.markdown-body[data-ejad-rich] tr:nth-child(even) :is(td, th) { background: rgba(255, 255, 255, .04) !important; }

/* A readable measure: rich messages stop at ~760px instead of the full column. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line:has(.mx_EventTile_body[data-ejad-rich]) { max-width: min(760px, 100%) !important; margin-inline: 0 auto !important; }

/* Long messages fold behind Show more / Show less. */
.mx_EventTile_body.markdown-body[data-ejad-collapsed="true"] {
  max-height: 360px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
.ejad-rich-toggle {
  /* Its own dir is the message's, so margin-inline puts it at the message's reading start. */
  display: flex; width: fit-content; align-items: center; min-height: 28px; margin: 6px 0 2px; margin-inline: 0 auto; padding: 0 12px;
  border: 0; border-radius: 999px; background: rgba(8, 122, 94, .09); color: #087A5E;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.ejad-rich-toggle:hover { background: rgba(8, 122, 94, .15); }
.ejad-rich-toggle:focus-visible { outline: 3px solid rgba(19, 232, 176, .45); outline-offset: 2px; }
body.cpd-theme-dark .ejad-rich-toggle, body.cpd-theme-dark-hc .ejad-rich-toggle { background: rgba(19, 232, 176, .12); color: #13E8B0; }
body.cpd-theme-dark .ejad-rich-toggle:hover { background: rgba(19, 232, 176, .2); }

/* Search in a conversation: an icon in Element's header beside the calls;
   its tooltip is drawn on <body> in Compound's tooltip style. */
.ejad-header-tip {
  position: fixed; z-index: 2147481300; padding: 4px 8px; border-radius: 4px;
  background: #1B1D22; color: #FFFFFF; font-size: 12px; font-weight: 500; line-height: 1.4;
  white-space: nowrap; pointer-events: none;
}
.ejad-header-tip[hidden] { display: none; }
body.cpd-theme-dark .ejad-header-tip, body.cpd-theme-dark-hc .ejad-header-tip { background: #EBEEF2; color: #1B1D22; }

/* The selected conversation tab used a dark-theme-blind token (#032E38 on a
   dark strip); give it the dark palette. */
body.cpd-theme-dark .ejad-conversation-tabs button[aria-selected="true"],
body.cpd-theme-dark-hc .ejad-conversation-tabs button[aria-selected="true"] { background: rgba(19, 232, 176, .14); color: #EEF8F6; }
body.cpd-theme-dark .ejad-conversation-tabs button[aria-selected="true"]::after,
body.cpd-theme-dark-hc .ejad-conversation-tabs button[aria-selected="true"]::after { background: #13E8B0; }
body.cpd-theme-dark .ejad-conversation-tabs button:hover,
body.cpd-theme-dark-hc .ejad-conversation-tabs button:hover { background: rgba(19, 232, 176, .1); color: #EEF8F6; }

/* Room names keep their own direction (Release 212, so mixed names read
   correctly) but line up with the interface: in the Arabic list an English
   name sits beside its avatar like the Arabic ones instead of drifting to
   the far edge, and the reverse in English. */
html[dir="rtl"] .mx_RoomListItemView [class*="_roomName_"] { text-align: right; }
html:not([dir="rtl"]) .mx_RoomListItemView [class*="_roomName_"] { text-align: left; }

/* Bilingual room names show the half in the interface's script (from
   data-ejad-name); Element's text is kept but takes no space. */
/* A flex line: the half is its own item with the ellipsis, so the hidden
   text's zero baseline cannot drop it (descenders were clipped), and the
   status dot (Release 213 ::after) stays beside it. */
.mx_RoomListItemView [class*="_roomName_"][data-ejad-name] { display: flex; align-items: center; font-size: 0 !important; }
.mx_RoomListItemView [class*="_roomName_"][data-ejad-name]::before {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext;
  font-size: var(--ejad-name-size, 12.5px); content: attr(data-ejad-name);
}

/* ===== Release 218: conversation page review, phase one ===== */
/* 1) A plain message keeps one direction per line, so a log or code pasted
   into an Arabic chat reads left-to-right line by line; long ones fold like
   rich ones (Release 216). */
.mx_RoomView_MessageList .mx_EventTile_line > .mx_MTextBody > .mx_EventTile_body:not([data-ejad-dir]) { unicode-bidi: plaintext; }
/* Multi-line messages take the direction of most of their text (set by
   ejad-controls.js), aligned to their own start. */
.mx_RoomView_MessageList .mx_EventTile_line > .mx_MTextBody > .mx_EventTile_body[data-ejad-dir-of][data-ejad-dir="rtl"] { direction: rtl; text-align: start; }
.mx_RoomView_MessageList .mx_EventTile_line > .mx_MTextBody > .mx_EventTile_body[data-ejad-dir-of][data-ejad-dir="ltr"] { direction: ltr; text-align: start; }
.mx_RoomView_MessageList .mx_EventTile_line > .mx_MTextBody > .mx_EventTile_body[data-ejad-dir-of] > :is(p, div) { direction: inherit; text-align: inherit; }
.mx_RoomView_MessageList .mx_EventTile_body[data-ejad-collapsed="true"] {
  max-height: 360px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}

/* 2) The header's "no purpose" placeholder was hidden in the DOM but older
   layers give the context spans a display (up to
   body[data-ejad-surface="room"] … display:block !important), so it showed
   truncated. */
body[data-ejad-surface] .ejad-room-header-context [hidden], .ejad-room-header-context [hidden] { display: none !important; }

/* 3) A reply to a reply: one quote card, without Element's extra
   "In reply to …" line above it. */
.mx_ReplyChain_wrapper > div:has(> .mx_ReplyChain .mx_ReplyChain_show) { display: none !important; }

/* 4) Reactions start where the message starts (the footer carried a second
   64px gutter). */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_footer { margin-left: 0 !important; margin-right: 0 !important; }

/* 5) File cards: type badge, name on one line, "DOCX · 542 KB" under it,
   a download mark at the end. The label rules outrank the older
   ".mx_MFileBody [data-type=info] button span" (13.5px, -webkit-box). */
.mx_MFileBody button[data-ejad-file-kind] { gap: 10px !important; min-width: min(280px, 100%); max-width: min(420px, 100%); text-align: start; }
.mx_MFileBody button[data-ejad-file-kind] > svg { display: none !important; }
.mx_MFileBody button[data-ejad-file-kind]::before {
  display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border-radius: 8px;
  background: var(--ejad-file-colour, #587177); color: #FFFFFF; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  content: attr(data-ejad-file-ext);
}
.mx_MFileBody button[data-ejad-file-kind]::after {
  flex: 0 0 auto; width: 18px; height: 18px; margin-inline-start: auto; background: currentColor; opacity: .55; content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V4a1 1 0 0 1 1-1ZM5 19a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V4a1 1 0 0 1 1-1ZM5 19a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mx_MFileBody button[data-ejad-file-kind="pdf"] { --ejad-file-colour: #C9474F; }
.mx_MFileBody button[data-ejad-file-kind="doc"] { --ejad-file-colour: #2F6BC9; }
.mx_MFileBody button[data-ejad-file-kind="sheet"] { --ejad-file-colour: #087A5E; }
.mx_MFileBody button[data-ejad-file-kind="slide"] { --ejad-file-colour: #D9772B; }
.mx_MFileBody button[data-ejad-file-kind="archive"] { --ejad-file-colour: #6B5BD2; }
.mx_MFileBody button[data-ejad-file-kind="image"] { --ejad-file-colour: #0E8FB0; }
.mx_MFileBody button[data-ejad-file-kind="audio"] { --ejad-file-colour: #A64DBF; }
.mx_MFileBody button[data-ejad-file-kind="video"] { --ejad-file-colour: #C2416B; }
.mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name] { display: grid !important; flex: 1 1 auto; gap: 1px; min-width: 0; font-size: 0 !important; text-align: start; }
.mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name]::before {
  overflow: hidden; color: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext;
  content: attr(data-ejad-file-name);
}
.mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name]::after { color: #587177; font-size: 11.5px; font-weight: 500; line-height: 1.3; unicode-bidi: isolate; content: attr(data-ejad-file-meta); }
/* Both lines start on the interface's side whatever script the name is in. */
html[dir="rtl"] .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name]::before,
html[dir="rtl"] .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name]::after { text-align: right; }
html:not([dir="rtl"]) .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name]::before,
html:not([dir="rtl"]) .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name]::after { text-align: left; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name]::after, body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_MFileBody [data-type="info"] button > span[data-ejad-file-name]::after { color: #9FB4B8; }

/* 6) People in the conversation (mention pills, sender names) show the
   half of a bilingual name in the interface's script, like the room list. */
/* Sender names carry !important sizes from older layers (up to five
   selectors deep), so these rules are one step more specific. */
.mx_RoomView_MessageList .mx_EventTile :is(.mx_Pill, .mx_DisambiguatedProfile) :is(.mx_Pill_text, .mx_DisambiguatedProfile_displayName)[data-ejad-name][data-ejad-name-of] { display: inline-flex; align-items: baseline; font-size: 0 !important; }
.mx_RoomView_MessageList .mx_EventTile :is(.mx_Pill, .mx_DisambiguatedProfile) :is(.mx_Pill_text, .mx_DisambiguatedProfile_displayName)[data-ejad-name][data-ejad-name-of]::before { font-size: var(--ejad-name-size, 13px); content: attr(data-ejad-name); }
.mx_RoomView_MessageList .mx_ThreadSummary [class*="_sender_"][data-ejad-name][data-ejad-name-of] { font-size: 0 !important; }
.mx_RoomView_MessageList .mx_ThreadSummary [class*="_sender_"][data-ejad-name][data-ejad-name-of]::before { font-size: var(--ejad-name-size, 12px); content: attr(data-ejad-name); }

/* 7) Read receipts and the sent mark sat at the far edge of a 1500px row,
   away from the message they belong to. The message row keeps a reading
   width on wide screens (about 75 characters), so they sit beside it. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { max-width: min(880px, 100%) !important; margin-inline: 0 auto !important; }

/* 8) Times: alwaysShowTimestamps is on by default (configure_ejadtech.py),
   and Element then renders a time on every message; an older rule meant for
   one's own messages matched every tile ([data-self] is "true" or "false")
   and hid them all. Other people's messages show theirs again; one's own
   keep the time beside the sent mark (Release 199). */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="false"] .mx_MessageTimestamp { opacity: 1 !important; }
/* The time sat 26px down a 24px single-line row and ran into the next
   sender's avatar; it lines up with the first line of text instead. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_EventTile_line > .mx_MessageTimestamp { top: 6px !important; }

/* ===== Release 219: conversation review phase two — DM bubbles, compact calls, a lighter composer ===== */
/* 1) Direct conversations read as two sides (WhatsApp, Teams): one's own
   messages at the end in a mint tint, the other person's at the start;
   no avatar or name over every message, the time inside the bubble. */
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] {
  max-width: min(920px, 100%) !important; margin-inline: auto !important; padding-inline: 16px !important;
}
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] :is(.mx_EventTile_avatar, .mx_DisambiguatedProfile) { display: none !important; }
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not([data-ejad-call]) > .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
  position: relative !important; width: fit-content !important; max-width: min(72%, 620px) !important; margin-block: 1px !important;
  padding: 7px 12px 7px !important; padding-inline-end: 64px !important;
  border: 1px solid rgba(3, 46, 56, .08) !important; border-radius: 16px !important; border-end-start-radius: 6px !important;
  background: #FFFFFF !important; box-shadow: 0 1px 1px rgba(3, 46, 56, .04) !important;
}
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"]:not([data-ejad-call]) > .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
  margin-inline-start: auto !important; border-color: rgba(8, 122, 94, .16) !important; border-radius: 16px !important; border-end-end-radius: 6px !important;
  background: rgba(19, 232, 176, .16) !important;
}
/* One's own bubble leaves room for Element's sent/read mark at the row's end. */
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] > .mx_EventTile_line { margin-inline-end: 26px !important; }
/* Images and files: as wide as the media, the time in a small pill on its corner. */
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_line.mx_EventTile_mediaLine { position: relative !important; width: fit-content !important; max-width: min(72%, 620px) !important; padding-inline-end: 0 !important; }
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] > .mx_EventTile_line.mx_EventTile_mediaLine { margin-inline-start: auto !important; }
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_line.mx_EventTile_mediaLine > .mx_MessageTimestamp {
  z-index: 2; inset-block-end: 8px !important; inset-inline-end: 8px !important;
  padding: 1px 6px !important; border-radius: 999px; background: rgba(3, 46, 56, .55); color: #FFFFFF !important; opacity: 1 !important;
}
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_line > .mx_MessageTimestamp {
  position: absolute !important; inset-block: auto 6px !important; inset-inline: auto 10px !important; top: auto !important;
  width: auto !important; opacity: .72 !important; font-size: 10.5px !important; line-height: 1.2 !important; text-align: end;
}
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"] .mx_EventTile_footer { display: flex; justify-content: flex-end; }
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) { margin-block-start: 8px; }
body.cpd-theme-dark[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not([data-ejad-call]) > .mx_EventTile_line:not(.mx_EventTile_mediaLine),
body.cpd-theme-dark-hc[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not([data-ejad-call]) > .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
  border-color: rgba(255, 255, 255, .08) !important; background: #12333A !important; box-shadow: none !important;
}
body.cpd-theme-dark[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"]:not([data-ejad-call]) > .mx_EventTile_line:not(.mx_EventTile_mediaLine),
body.cpd-theme-dark-hc[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-self="true"]:not([data-ejad-call]) > .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
  border-color: rgba(19, 232, 176, .2) !important; background: rgba(19, 232, 176, .14) !important;
}

/* 2) Calls: one compact line — direction mark, kind, time. */
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] { padding-block: 1px !important; }
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line { padding-inline-end: 0 !important; }
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child {
  display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; min-height: 0 !important;
  padding: 6px 14px 6px 10px !important; padding-inline: 10px 14px !important; border-radius: 999px !important; font-size: 13px;
}
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child::before {
  flex: 0 0 auto; width: 16px; height: 16px; background: #087A5E; content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7 7 17M7 9v8h8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7 7 17M7 9v8h8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call-dir="out"] > .mx_EventTile_line > div:first-child::before { transform: scale(-1, -1); }
html[dir="rtl"] .mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child::before { transform: scaleX(-1); }
html[dir="rtl"] .mx_RoomView_MessageList .mx_EventTile[data-ejad-call-dir="out"] > .mx_EventTile_line > div:first-child::before { transform: scaleY(-1); }
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child > * { margin: 0 !important; font-size: 13px !important; line-height: 1.3 !important; }
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child > :last-child { opacity: .7; }
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-ejad-call-dir="out"] > .mx_EventTile_line { display: flex !important; justify-content: flex-end !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child::before { background: #13E8B0; }

/* 3) Composer: Element's Emoji and Attach, Voice, and one "more" menu.
   Element's own "More options" stays in the DOM (the menu opens it) but
   out of sight; the menu outranks older toolbar layers that hide labels. */
.mx_MessageComposer .mx_MessageComposer_actions > .mx_MessageComposer_buttonMenu {
  position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
.ejad-composer-discovery { position: relative; }
.ejad-composer-discovery .ejad-composer-overflow {
  position: absolute; z-index: 40; inset-block-end: calc(100% + 8px); inset-inline-end: 0; display: grid; min-width: 232px; padding: 6px;
  border: 1px solid rgba(3, 46, 56, .1); border-radius: 12px; background: #FFFFFF; box-shadow: 0 12px 32px rgba(3, 46, 56, .18);
}
.ejad-composer-discovery .ejad-composer-overflow[hidden] { display: none !important; }
.ejad-composer-discovery .ejad-composer-overflow button {
  display: flex !important; align-items: center; justify-content: flex-start !important; gap: 10px !important; width: 100%; min-height: 36px !important; padding: 6px 10px !important;
  border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #18363C !important; font-size: 13.5px !important; font-weight: 600; text-align: start; cursor: pointer;
}
.ejad-composer-discovery .ejad-composer-overflow button:hover:not(:disabled), .ejad-composer-discovery .ejad-composer-overflow button:focus-visible { background: rgba(8, 122, 94, .09) !important; outline: none; }
.ejad-composer-discovery .ejad-composer-overflow button:disabled { opacity: .45; cursor: default; }
.ejad-composer-discovery .ejad-composer-overflow button > span:first-child { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; }
.ejad-composer-discovery .ejad-composer-overflow button > span:last-child {
  position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: nowrap !important;
}
.ejad-composer-discovery [data-ejad-composer-action="more"] svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.ejad-composer-discovery [data-ejad-composer-action="more"][aria-expanded="true"] { background: rgba(8, 122, 94, .12) !important; }
body.cpd-theme-dark .ejad-composer-discovery .ejad-composer-overflow, body.cpd-theme-dark-hc .ejad-composer-discovery .ejad-composer-overflow { border-color: rgba(255, 255, 255, .12); background: #0F2F36; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
body.cpd-theme-dark .ejad-composer-discovery .ejad-composer-overflow button, body.cpd-theme-dark-hc .ejad-composer-discovery .ejad-composer-overflow button { color: #E6F1F2 !important; }
body.cpd-theme-dark .ejad-composer-discovery .ejad-composer-overflow button:hover:not(:disabled) { background: rgba(19, 232, 176, .12) !important; }

/* 4) Search in a conversation: a find bar over the tab strip with the
   matches under it while typing (the side panel it replaces stood empty
   and heavy next to the conversation). */
.ejad-conversation-tabs[data-ejad-finding] { position: relative; overflow: visible !important; }
.ejad-conversation-tabs[data-ejad-finding] > :not(.ejad-findbar) { visibility: hidden; }
.ejad-findbar { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; gap: 4px; padding-inline: 12px; background: var(--cpd-color-bg-canvas-default, #FFFFFF); }
.ejad-findbar__field {
  display: flex; flex: 1 1 auto; align-items: center; gap: 8px; max-width: 560px; height: 34px; padding-inline: 12px 10px;
  border: 1px solid #087A5E; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(19, 232, 176, .18);
}
.ejad-findbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ejad-findbar__field > svg { flex: 0 0 auto; width: 16px; height: 16px; color: #587177; }
.ejad-findbar__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: #032E38; font: inherit; font-size: 14px; }
.ejad-findbar__input::-webkit-search-cancel-button { display: none; }
.ejad-findbar__count { flex: 0 0 auto; color: #587177; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.ejad-findbar__step, .ejad-findbar__close {
  display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: #18363C; cursor: pointer;
}
.ejad-findbar__step:hover:not(:disabled), .ejad-findbar__close:hover { background: rgba(8, 122, 94, .09); }
.ejad-findbar__step:focus-visible, .ejad-findbar__close:focus-visible { outline: 3px solid rgba(19, 232, 176, .45); outline-offset: 1px; }
.ejad-findbar__step:disabled { opacity: .35; cursor: default; }
.ejad-findbar__panel {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 12px; width: min(560px, calc(100% - 24px)); max-height: min(60vh, 520px);
  overflow: auto; padding: 6px 0; border: 1px solid rgba(3, 46, 56, .1); border-radius: 12px; background: #FFFFFF; box-shadow: 0 16px 40px rgba(3, 46, 56, .18);
}
.ejad-findbar__panel[hidden] { display: none !important; }
.ejad-findbar__panel .ejad-find__bar { display: none !important; }
.ejad-findbar__panel .ejad-find__result--current { background: rgba(19, 232, 176, .12); }
body.cpd-theme-dark .ejad-findbar, body.cpd-theme-dark-hc .ejad-findbar { background: var(--cpd-color-bg-canvas-default, #0A2A31); }
body.cpd-theme-dark .ejad-findbar__field, body.cpd-theme-dark-hc .ejad-findbar__field { border-color: #13E8B0; background: #0F2F36; }
body.cpd-theme-dark .ejad-findbar__input, body.cpd-theme-dark-hc .ejad-findbar__input { color: #EEF8F6; }
body.cpd-theme-dark .ejad-findbar__step, body.cpd-theme-dark .ejad-findbar__close, body.cpd-theme-dark-hc .ejad-findbar__step, body.cpd-theme-dark-hc .ejad-findbar__close { color: #E6F1F2; }
body.cpd-theme-dark .ejad-findbar__count, body.cpd-theme-dark .ejad-findbar__field > svg { color: #9FB4B8; }
body.cpd-theme-dark .ejad-findbar__panel, body.cpd-theme-dark-hc .ejad-findbar__panel { border-color: rgba(255, 255, 255, .12); background: #0F2F36; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }

/* ===== Release 220: live review of 219 ===== */
/* The composer toolbar kept overflow:auto (and a static position) from
   older layers, which clipped the "more" menu; with two buttons it never
   scrolls. The menu sits above the timeline's jump-to-bottom button. */
.mx_MessageComposer .ejad-composer-discovery { position: relative !important; overflow: visible !important; }
.mx_MessageComposer .ejad-composer-discovery .ejad-composer-overflow { z-index: 100; }
/* An older global focus style drew a second frame around the find field. */
.ejad-findbar .ejad-findbar__input, .ejad-findbar .ejad-findbar__input:focus, .ejad-findbar .ejad-findbar__input:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
/* The match the find bar jumped to is marked briefly. */
.mx_RoomView_MessageList .mx_EventTile[data-ejad-find-hit] > .mx_EventTile_line { box-shadow: 0 0 0 2px #13E8B0, 0 0 0 6px rgba(19, 232, 176, .22) !important; border-radius: 12px; transition: box-shadow .2s ease; }

/* ===== Release 221: find jump settles, Element's menu opens beside "more" ===== */
/* Element's own "More options" button stays invisible but sits exactly
   under the "more" button at the end of the composer row, so the menu it
   opens (sticker, poll, location) appears there instead of mid-screen. */
.mx_MessageComposer .mx_MessageComposer_row { position: relative; }
.mx_MessageComposer .mx_MessageComposer_actions > .mx_MessageComposer_buttonMenu {
  inset-block-end: 0 !important; inset-inline-end: 0 !important; width: 36px !important; height: 36px !important;
}

/* ===== Release 222: call outcomes, sticky dates ===== */
/* A call card says how it went: its length ("15:06") when answered,
   "Missed" (red) or "No answer"; the note sits between the kind and time. */
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child > :not(:last-child) { flex-grow: 0 !important; white-space: nowrap; }
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child > :last-child { order: 2; margin-inline-start: auto !important; padding-inline-start: 10px; }
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child[data-ejad-call-note]::after {
  order: 1; color: #587177; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; content: "\00B7\00a0" attr(data-ejad-call-note);
}
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call-state="missed"] > .mx_EventTile_line > div:first-child[data-ejad-call-note]::after { color: #C9474F; font-weight: 600; }
.mx_RoomView_MessageList .mx_EventTile[data-ejad-call-state="missed"] > .mx_EventTile_line > div:first-child::before { background: #C9474F !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child[data-ejad-call-note]::after,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile[data-ejad-call] > .mx_EventTile_line > div:first-child[data-ejad-call-note]::after { color: #9FB4B8; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-ejad-call-state="missed"] > .mx_EventTile_line > div:first-child[data-ejad-call-note]::after { color: #F07C84; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile[data-ejad-call-state="missed"] > .mx_EventTile_line > div:first-child::before { background: #F07C84 !important; }

/* The date stays in view while scrolling (WhatsApp, Telegram, Slack): each
   day's separator sticks to the top as a small centred pill; Element's
   "jump to date" menu on it keeps working. */
.mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) { position: sticky; top: 6px; z-index: 4; pointer-events: none; }
.mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > hr { visibility: hidden; }
.mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"] {
  padding: 3px 12px; border: 1px solid rgba(3, 46, 56, .1); border-radius: 999px; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(3, 46, 56, .08); pointer-events: auto;
}
/* One width for every pill, so a newer date fully covers the one stuck
   beneath it. */
.mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"] { justify-content: center; min-width: 176px; box-sizing: border-box; }
.mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"] h2 { margin: 0; color: #587177; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; }
body.cpd-theme-dark .mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"] { border-color: rgba(255, 255, 255, .1); background: #0F2F36; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
body.cpd-theme-dark .mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"] h2,
body.cpd-theme-dark-hc .mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"] h2 { color: #9FB4B8; }

/* ===== Release 223: the conversation in Slack's pattern — a composer card and a sender row ===== */
/* 1) Composer: one card — the field on top, a tool row under it (Element's
   Emoji and Attach, then mention, clip, voice and the "more" menu), and
   Send at the row's end in Mint Ink; while the field is empty a muted Send
   mark holds its place, as in Slack. Element's nodes keep their order: the
   row becomes a grid and its children are placed in it. */
body[data-ejad-surface="room"] .mx_MessageComposer {
  border: 1px solid rgba(3, 46, 56, .14) !important; border-radius: 12px !important; background: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(3, 46, 56, .06) !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer:focus-within { border-color: rgba(8, 122, 94, .45) !important; box-shadow: 0 0 0 3px rgba(19, 232, 176, .14) !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row {
  display: grid !important; grid-template-columns: auto auto auto 1fr auto; align-items: center; row-gap: 2px; column-gap: 2px;
  min-height: 0 !important; padding: 6px 8px 6px !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .mx_SendMessageComposer { grid-row: 1; grid-column: 1 / -1; min-height: 40px; padding-inline: 6px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .mx_MessageComposer_actions { display: contents !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_EmojiButton { grid-row: 2; grid-column: 1; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > button[class*="_icon-button_"] { grid-row: 2; grid-column: 2; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .ejad-composer-discovery { grid-row: 2; grid-column: 3; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_MessageComposer_sendMessage {
  grid-row: 2; grid-column: 5; width: 44px !important; height: 32px !important; border-radius: 8px !important; background: #087A5E !important; color: #FFFFFF !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_MessageComposer_sendMessage svg { color: #FFFFFF !important; fill: currentColor; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_MessageComposer_sendMessage:hover { background: #032E38 !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:not(:has(.mx_MessageComposer_sendMessage))::after {
  grid-row: 2; grid-column: 5; width: 44px; height: 32px; border-radius: 8px; background: rgba(3, 46, 56, .08); content: "";
  -webkit-mask: none; pointer-events: none;
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:not(:has(.mx_MessageComposer_sendMessage))::before {
  z-index: 1; grid-row: 2; grid-column: 5; justify-self: center; align-self: center; width: 16px; height: 16px; background: rgba(3, 46, 56, .35); content: ""; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 21 12 3.4 3.6l-.01 6.53L15 12 3.39 13.87z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 20.4 21 12 3.4 3.6l-.01 6.53L15 12 3.39 13.87z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[dir="rtl"] body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:not(:has(.mx_MessageComposer_sendMessage))::before { transform: scaleX(-1); }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer, body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer { border-color: rgba(255, 255, 255, .14) !important; background: #0F2F36 !important; box-shadow: none !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_MessageComposer_sendMessage { background: #13E8B0 !important; color: #032E38 !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_MessageComposer_sendMessage svg { color: #032E38 !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:not(:has(.mx_MessageComposer_sendMessage))::after { background: rgba(255, 255, 255, .08); }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:not(:has(.mx_MessageComposer_sendMessage))::before { background: rgba(255, 255, 255, .35); }

/* 2) Groups: a clear sender row — a 34px avatar, the name in bold at the
   message size, the time right after it (--ejad-name-x/y from
   ejad-controls.js); later messages from the same sender show their time
   in the margin only on hover. Direct conversations keep their bubbles. */
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) .mx_EventTile_avatar { top: 4px !important; width: 34px !important; height: 34px !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) .mx_EventTile_avatar :is(.mx_BaseAvatar, [class*="_avatar_"]) { width: 34px !important; height: 34px !important; font-size: 14px !important; line-height: 34px !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) .mx_EventTile_avatar img { width: 34px !important; height: 34px !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName:not([data-ejad-name]) { font-size: 15px !important; font-weight: 700 !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName[data-ejad-name][data-ejad-name-of]::before { font-size: 15px !important; font-weight: 700; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-ejad-name-row]:not(.mx_EventTile_continuation) > .mx_EventTile_line > .mx_MessageTimestamp {
  top: calc(var(--ejad-name-y, -22px) + 3px) !important; inset-inline-start: calc(var(--ejad-name-x, 120px) + 8px) !important; inset-inline-end: auto !important;
  width: auto !important; opacity: 1 !important; font-size: 12px !important; text-align: start !important;
}
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"].mx_EventTile_continuation:not(:hover):not(:focus-within) > .mx_EventTile_line > .mx_MessageTimestamp { opacity: 0 !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"].mx_EventTile_continuation:is(:hover, :focus-within) > .mx_EventTile_line > .mx_MessageTimestamp { opacity: 1 !important; }

/* ===== Release 224: sender time in Arabic ===== */
/* Element gives the time direction:ltr, so the logical inset of Release
   223 resolved to "left" in the Arabic interface too and the time sat at
   the far side; the side is set by the interface's direction instead. */
html:not([dir="rtl"]) body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-ejad-name-row]:not(.mx_EventTile_continuation) > .mx_EventTile_line > .mx_MessageTimestamp { left: calc(var(--ejad-name-x, 120px) + 8px) !important; right: auto !important; }
html[dir="rtl"] body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"][data-ejad-name-row]:not(.mx_EventTile_continuation) > .mx_EventTile_line > .mx_MessageTimestamp { right: calc(var(--ejad-name-x, 120px) + 8px) !important; left: auto !important; }

/* ===== Release 225: a voice recording is a card in the composer (Slack) ===== */
/* Release 223 placed Element's recording controls (delete, stop, the
   recording) in the tool row, among the tools. The composer now has three
   rows: the field, the recording card (empty without one), the tools. */
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_EmojiButton,
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > button[class*="_icon-button_"],
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .ejad-composer-discovery,
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_MessageComposer_sendMessage,
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:not(:has(.mx_MessageComposer_sendMessage))::before,
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:not(:has(.mx_MessageComposer_sendMessage))::after { grid-row: 3 !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_VoiceMessagePrimaryContainer {
  grid-row: 2; grid-column: 1 / -1; justify-self: start; box-sizing: border-box; width: 340px !important; max-width: none !important; min-height: 48px;
  margin: 2px 6px 6px !important; padding-block: 6px !important; padding-inline: 12px 46px !important;
  border: 1px solid rgba(3, 46, 56, .14) !important; border-radius: 12px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(3, 46, 56, .06);
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:has(.mx_VoiceRecordComposerTile_stop) > .mx_MessageComposer_actions > .mx_VoiceMessagePrimaryContainer { padding-inline-start: 52px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_VoiceRecordComposerTile_stop {
  z-index: 2; grid-row: 2; grid-column: 1; justify-self: start; align-self: center; margin-inline-start: 16px !important; margin-block-end: 4px;
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_VoiceRecordComposerTile_delete {
  z-index: 2; grid-row: 2; grid-column: 1 / -1; justify-self: start; align-self: center; width: 30px !important; height: 30px !important; margin-block-end: 4px;
  margin-inline-start: 306px !important; border-radius: 50% !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_VoiceRecordComposerTile_delete:hover { background: rgba(201, 71, 79, .1) !important; color: #C9474F !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_VoiceMessagePrimaryContainer,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_VoiceMessagePrimaryContainer { border-color: rgba(255, 255, 255, .14) !important; background: #12333A !important; box-shadow: none; }
/* Narrow composers: the card takes the row and delete sits at its end. */
@media (max-width: 520px) {
  body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_VoiceMessagePrimaryContainer { width: calc(100% - 12px) !important; }
  body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_actions > .mx_VoiceRecordComposerTile_delete { justify-self: end; margin-inline: 0 14px !important; }
}

/* ===== Release 226: text with a voice recording ===== */
/* Element locks its field while a recording exists; our field
   (.ejad-voice-caption) takes its place in the first row of the card. */
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:has(> .ejad-voice-caption) > .mx_SendMessageComposer { visibility: hidden; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .ejad-voice-caption {
  grid-row: 1; grid-column: 1 / -1; z-index: 1; box-sizing: border-box; width: 100%; min-height: 40px; max-height: 140px; margin: 0; padding: 9px 12px;
  border: 0; outline: 0; background: transparent; color: #032E38; font: inherit; font-size: 15px; line-height: 1.45; resize: none; text-align: start;
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .ejad-voice-caption::placeholder { color: #80999E; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .ejad-voice-caption,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .ejad-voice-caption { color: #EEF8F6; }

/* ===== Release 227: the recording's text field without a focus frame ===== */
/* An older global focus style drew a square frame inside the composer card
   around the field that takes text with a recording (seen in the live test). */
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .ejad-voice-caption:is(:focus, :focus-visible) { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }

/* ===== Release 228: the hover highlight spans the conversation (Slack) ===== */
/* Release 218 capped the whole message row at 880px to keep read receipts
   near the text, so the hover highlight stopped short and left an empty
   strip. The row is full width again (highlight and action bar reach the
   edge); the reading width moves to the content, and the receipts sit
   right after it. */
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { max-width: none !important; margin-inline: 0 !important; border-radius: 0 !important; }
/* The line stays full width (Element's action bar sits at its end); its
   content keeps the reading width. Rich messages keep their 760px card. */
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_line:not(:has(.mx_EventTile_body[data-ejad-rich])) { max-width: none !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_line > :not(.mx_MessageActionBar):not(.mx_MessageTimestamp) { max-width: min(818px, 100%) !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_footer { max-width: min(818px, 100%); }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_msgOption { inset-inline-start: min(888px, calc(100% - 40px)) !important; inset-inline-end: auto !important; }
/* Direct conversations: the bubbles keep a 920px column centred in a
   full-width row; the receipts sit in the gap after one's own bubbles. */
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] {
  max-width: none !important; margin-inline: 0 !important; padding-inline: max(16px, calc((100% - 920px) / 2)) !important;
}
body[data-ejad-room-kind="direct"] .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_msgOption { inset-inline-start: auto !important; inset-inline-end: calc(max(16px, calc((100% - 920px) / 2)) + 2px) !important; }

/* ===== Release 229: Slack's conversation geometry, measured side by side ===== */
/* The list's own side padding (clamp 12–64px) left a gap at both edges that
   no hover could fill; rows now run edge to edge and carry Slack's 20px
   gutter themselves: avatar at 20px, text at 64px. */
body[data-ejad-surface="room"] .mx_RoomView_MessageList { padding-inline: 0 !important; }
.mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { width: 100% !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { padding-inline: 64px 20px !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) { padding-block-start: 8px !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) .mx_EventTile_avatar { top: 9px !important; inset-inline-start: 20px !important; width: 36px !important; height: 36px !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) .mx_EventTile_avatar :is(.mx_BaseAvatar, [class*="_avatar_"]) { width: 36px !important; height: 36px !important; border-radius: 8px !important; line-height: 36px !important; }
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) .mx_EventTile_avatar img { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
/* Read receipts move from mid-row to the row's far edge. */
body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] > .mx_EventTile_msgOption { inset-inline-start: auto !important; inset-inline-end: 20px !important; }
/* Slack's hover is a neutral grey, not a tint. */
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:is(:hover, :focus-within) { background: rgba(3, 46, 56, .035) !important; }
/* The date pill: 28px, 13px bold. */
.mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"] { min-height: 28px; padding: 0 12px 0 16px; }
.mx_RoomView_MessageList > li:has(> .mx_TimelineSeparator) > .mx_TimelineSeparator > [role="button"] h2 { color: #032E38; font-size: 13px !important; font-weight: 700 !important; }
/* Conversation tabs: text with an underline on the selected one, as in Slack. */
.ejad-conversation-tabs:not([data-ejad-finding]) { align-items: stretch !important; padding-block: 0 !important; }
.ejad-conversation-tabs button { min-height: 0 !important; border-radius: 0 !important; background: transparent !important; font-weight: 700 !important; }
.ejad-conversation-tabs button:hover { color: #032E38; }
.ejad-conversation-tabs button[aria-selected="true"]::after { inset-inline: 0 !important; border-radius: 0 !important; }
body.cpd-theme-dark .ejad-conversation-tabs button:hover, body.cpd-theme-dark-hc .ejad-conversation-tabs button:hover { color: #EEF8F6; }
/* The composer: Slack's 8px corners and a quiet focus. */
body[data-ejad-surface="room"] .mx_MessageComposer { border-radius: 8px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer:focus-within { border-color: rgba(3, 46, 56, .32) !important; box-shadow: none !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer:focus-within, body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer:focus-within { border-color: rgba(255, 255, 255, .3) !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:not(:has(.mx_MessageComposer_sendMessage))::after { background: transparent !important; }
@media (max-width: 760px) {
  body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"] { padding-inline: 56px 12px !important; }
  body:not([data-ejad-room-kind="direct"]) .mx_RoomView_MessageList .mx_EventTile[data-layout="group"]:not(.mx_EventTile_continuation) .mx_EventTile_avatar { inset-inline-start: 12px !important; }
}

/* ===== Release 230: a formatting bar on top of the composer (Slack) ===== */
/* Element's own format bar (.mx_MessageComposerFormatBar, first child of
   the field's flex column) stays in view instead of floating over a
   selection. The side padding that sat on four nested boxes (card,
   wrapper, row, field: 42px) moves to the field itself, so the bar spans
   the card and the text starts 12px from its edge, as in Slack. */
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendMessageComposer) { padding: 0 !important; }
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendMessageComposer) > .mx_MessageComposer_wrapper { padding-inline: 0 !important; }
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendMessageComposer) .mx_MessageComposer_row { padding: 0 6px 6px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .mx_SendMessageComposer { max-width: none !important; margin-inline: -6px !important; padding-inline: 0 !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_BasicMessageComposer_input { padding: 8px 12px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar {
  position: static !important; display: flex !important; align-items: center; gap: 2px; order: -1; align-self: stretch;
  width: auto !important; max-width: none !important; height: 37px; box-sizing: border-box; margin: 0 !important; padding: 0 6px !important;
  border: 0 !important; border-bottom: 1px solid rgba(3, 46, 56, .08) !important; border-radius: 7px 7px 0 0 !important;
  background: rgba(3, 46, 56, .03) !important; box-shadow: none !important; transform: none !important;
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
  position: relative; display: grid; place-items: center; width: 28px !important; height: 28px !important; margin: 0 !important;
  border-radius: 4px; background: transparent; color: rgba(3, 46, 56, .62); font-size: 18px;
}
body[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover { background: rgba(3, 46, 56, .07); color: #032E38; }
/* Groups, as in Slack: text styles | code, quote | link. */
body[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:is(:nth-child(3), :nth-child(5)) { margin-inline-end: 9px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:is(:nth-child(3), :nth-child(5))::after {
  position: absolute; inset-inline-end: -6px; top: 6px; width: 1px; height: 16px; background: rgba(3, 46, 56, .14); content: ""; pointer-events: none;
}
/* Below a reply preview the bar is a band across the card. */
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_ReplyPreview) .mx_SendMessageComposer .mx_MessageComposerFormatBar { border-top: 1px solid rgba(3, 46, 56, .08) !important; border-radius: 0 !important; }
/* A recording locks Element's field; the bar goes with it. */
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:has(> .ejad-voice-caption) .mx_MessageComposerFormatBar { display: none !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar { border-color: rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .04) !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button { color: rgba(238, 248, 246, .65); }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover { background: rgba(255, 255, 255, .08); color: #EEF8F6; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:is(:nth-child(3), :nth-child(5))::after,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_MessageComposer .mx_SendMessageComposer .mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:is(:nth-child(3), :nth-child(5))::after { background: rgba(255, 255, 255, .14); }

/* ===== Release 231: the formatting bar spans the card in Arabic too ===== */
/* html[dir="rtl"] body[…] .mx_MessageComposer { padding: 4px 6px } (0,3,2)
   outranked Release 230's padding: 0 (0,3,1) in Arabic, leaving the bar 7px
   short of each edge; :root lifts it to (0,4,1). */
:root body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendMessageComposer) { padding: 0 !important; }

/* ===== Release 232: Element's rich text editor, laid out as Slack's composer ===== */
/* Release 230 kept Element's markdown format bar in view, but it inserts
   markdown (**bold**), which reads as broken next to Slack. Element's rich
   text editor (feature_wysiwyg_composer, on by default from
   configure_ejadtech.py) formats as you type and brings Slack's full bar:
   bold, italic, underline, strike, lists, quote, code, code block, link.
   The card keeps Release 223/230's shape: bar on top across the card, the
   field, then the tools row with send at the end. */
:root body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendWysiwygComposer) { padding: 0 !important; }
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendWysiwygComposer) > .mx_MessageComposer_wrapper { margin: 0 !important; padding-inline: 0 !important; }
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendWysiwygComposer) .mx_MessageComposer_row { padding: 0 6px 6px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .mx_SendWysiwygComposer {
  position: static !important; grid-row: 1; grid-column: 1 / -1; display: flex !important; flex-direction: column; gap: 0 !important; min-width: 0;
  max-width: none !important; margin: 0 -6px !important; padding: 0 !important; border: 0 !important; background: transparent !important;
}
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons {
  display: flex !important; align-items: center; gap: 2px; height: 37px; box-sizing: border-box; margin: 0 !important; padding: 0 6px !important;
  border-bottom: 1px solid rgba(3, 46, 56, .08); border-radius: 7px 7px 0 0; background: rgba(3, 46, 56, .03);
}
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button {
  position: relative; display: grid !important; place-items: center; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important;
  border-radius: 4px !important; background: transparent !important; color: rgba(3, 46, 56, .62) !important;
}
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button svg { width: 18px !important; height: 18px !important; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button:hover { background: rgba(3, 46, 56, .07) !important; color: #032E38 !important; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button.mx_FormattingButtons_active { background: rgba(8, 122, 94, .12) !important; color: #087A5E !important; }
/* Groups, as in Slack: text styles | lists (and their indent) | quote, code | link. */
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:is(:nth-child(4), :nth-child(6)) { margin-inline-end: 9px !important; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:last-child { margin-inline-start: 9px !important; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:is(:nth-child(4), :nth-child(6))::after,
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:last-child::before {
  position: absolute; top: 6px; width: 1px; height: 16px; background: rgba(3, 46, 56, .14); content: ""; pointer-events: none;
}
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:is(:nth-child(4), :nth-child(6))::after { inset-inline-end: -6px; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:last-child::before { inset-inline-start: -6px; }
/* The field: no inner bubble; text 12px from the edge. */
body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_WysiwygComposer_Editor { min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_container { min-height: 0 !important; margin: 0 !important; padding: 8px 12px !important; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content { min-height: 22px; max-height: 40vh; padding: 0 !important; font-size: 15px; line-height: 22px; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content :is(pre, code) { border-radius: 4px; background: rgba(3, 46, 56, .05) !important; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content a[data-mention-type] { text-decoration: none !important; background: rgba(3, 46, 56, .08) !important; color: #032E38 !important; }
/* Emoji opens the tools row, as in Slack; the bar toggle follows it. */
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor > .mx_EmojiButton {
  position: absolute !important; inset-block-end: 6px; inset-inline-start: 6px; display: grid !important; place-items: center; width: 36px !important; height: 36px !important; margin: 0 !important;
}
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor > .mx_EmojiButton svg { width: 20px !important; height: 20px !important; }
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendWysiwygComposer) { position: relative; }
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_SendWysiwygComposer) .mx_MessageComposer_actions > .mx_MessageComposer_button:not(.mx_MessageComposer_buttonMenu) { grid-row: 3; grid-column: 1; margin-inline-start: 36px !important; }
/* A recording locks the field; our caption field (Release 226) takes it. */
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:has(> .ejad-voice-caption) > .mx_SendWysiwygComposer { visibility: hidden; }
body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row:has(> .ejad-voice-caption) > .mx_SendWysiwygComposer > .mx_FormattingButtons { display: none !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button { color: rgba(238, 248, 246, .65) !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button:hover,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button:hover { background: rgba(255, 255, 255, .08) !important; color: #EEF8F6 !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button.mx_FormattingButtons_active,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons .mx_FormattingButtons_Button.mx_FormattingButtons_active { background: rgba(19, 232, 176, .14) !important; color: #13E8B0 !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:is(:nth-child(4), :nth-child(6))::after,
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:last-child::before { background: rgba(255, 255, 255, .14); }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content :is(pre, code) { background: rgba(255, 255, 255, .06) !important; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content a[data-mention-type] { background: rgba(255, 255, 255, .1) !important; color: #EEF8F6 !important; }

/* ===== Release 234: the rich composer in Arabic, checked button by button ===== */
/* Inline code (2px padding) made the field 1px taller than its line and
   drew scroll arrows; the padding moves from the container to the field. */
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_container { padding: 6px 12px !important; }
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content { position: relative; padding: 2px 0 !important; }
/* An empty field is dir="auto" (left to right) with a zero-width
   placeholder, which our right alignment pushed out of view in Arabic;
   the placeholder is placed on the reading side. */
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content_placeholder::before { position: absolute; top: 2px; width: auto !important; }
html:not([dir="rtl"]) body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content_placeholder::before { left: 0; right: auto; }
html[dir="rtl"] body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content_placeholder::before { right: 0; left: auto; direction: rtl; }
/* A quote's bar on its reading side (Element draws it on the left). */
body[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content blockquote {
  margin: 0 !important; padding-block: 0 !important; padding-inline: 10px 0 !important; border: 0 !important; border-inline-start: 3px solid rgba(3, 46, 56, .2) !important;
}
body.cpd-theme-dark[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content blockquote,
body.cpd-theme-dark-hc[data-ejad-surface="room"] .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor_content blockquote { border-inline-start-color: rgba(255, 255, 255, .25) !important; }
/* List and indent icons face the reading direction. */
html[dir="rtl"] body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons > .mx_FormattingButtons_Button:is(:nth-child(5), :nth-child(6)) svg,
html[dir="rtl"] body[data-ejad-surface="room"] .mx_SendWysiwygComposer > .mx_FormattingButtons:has(> :nth-child(12)) > .mx_FormattingButtons_Button:is(:nth-child(7), :nth-child(8)) svg { transform: scaleX(-1); }
/* Below a reply preview the bar is a band across the card. */
body[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_ReplyPreview) .mx_SendWysiwygComposer > .mx_FormattingButtons { border-top: 1px solid rgba(3, 46, 56, .08); border-radius: 0; }
body.cpd-theme-dark[data-ejad-surface="room"] .mx_MessageComposer:has(.mx_ReplyPreview) .mx_SendWysiwygComposer > .mx_FormattingButtons { border-top-color: rgba(255, 255, 255, .08); }
/* The recording's text field (dir="auto") reads right to left while empty. */
html[dir="rtl"] body[data-ejad-surface="room"] .mx_MessageComposer .mx_MessageComposer_row > .ejad-voice-caption:placeholder-shown { direction: rtl; }

/* ===== Release 235: formatted messages in the conversation, as in Slack ===== */
/* Code block: one box at the message width (Element drew two nested boxes
   around the code's own width), Slack's tone and 13px monospace. */
.mx_RoomView_MessageList .mx_EventTile_line:has(.mx_EventTile_pre_container) { width: auto !important; }
.mx_RoomView_MessageList .mx_EventTile_line:has(.mx_EventTile_pre_container) > .mx_MTextBody,
.mx_RoomView_MessageList .mx_EventTile_line:has(.mx_EventTile_pre_container) > .mx_MTextBody > .mx_EventTile_body { width: 100% !important; }
.mx_RoomView_MessageList .mx_EventTile_body .mx_EventTile_pre_container {
  position: relative; box-sizing: border-box; width: 100% !important; max-width: 100% !important; margin: 4px 0 !important; padding: 0 !important;
  border: 1px solid rgba(3, 46, 56, .13) !important; border-radius: 6px !important; background: rgba(3, 46, 56, .035) !important; box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_EventTile_body .mx_EventTile_pre_container > pre {
  margin: 0 !important; padding: 8px 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: #1B2A2E !important; font-size: 13px !important; line-height: 20px !important; white-space: pre-wrap; overflow-wrap: anywhere;
}
.mx_RoomView_MessageList .mx_EventTile_body .mx_EventTile_pre_container > pre code { padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; font-size: inherit !important; }
/* Inline code: a small framed chip in its own colour (Slack). */
.mx_RoomView_MessageList .mx_EventTile_body code:not(pre code) {
  padding: 1px 4px !important; border: 1px solid rgba(3, 46, 56, .13) !important; border-radius: 4px !important; background: rgba(3, 46, 56, .04) !important;
  color: #B4234F !important; font-size: .86em !important; line-height: 1.5;
}
/* Quote: a 4px bar on the quote's own reading side, text in the body colour. */
.mx_RoomView_MessageList .mx_EventTile_body.markdown-body blockquote:not(.mx_ReplyChain) {
  margin: 4px 0 !important; padding: 0 !important; padding-inline-start: 12px !important; border: 0 !important;
  border-inline-start: 4px solid rgba(3, 46, 56, .18) !important; border-radius: 0 !important; color: inherit !important;
}
/* Lists: markers beside their text (Release 216 aligned each item's text to
   its own script, away from a bullet on the other side). */
.mx_RoomView_MessageList .mx_EventTile_body.markdown-body :is(ul, ol) { margin: 2px 0 6px !important; padding-inline: 24px 0 !important; }
.mx_RoomView_MessageList .mx_EventTile_body.markdown-body li { unicode-bidi: isolate !important; text-align: match-parent !important; }
/* Links: the brand's link colour with a light underline, so they read as
   links (the theme's primary colour is the text colour). Mentions keep
   their pill. */
.mx_RoomView_MessageList .mx_EventTile_body a:not(.mx_Pill):not([data-mention-type]):not([class*="Pill"]) {
  color: #087A5E !important; text-decoration: underline !important; text-decoration-color: rgba(8, 122, 94, .35) !important; text-underline-offset: 2px;
}
.mx_RoomView_MessageList .mx_EventTile_body a:not(.mx_Pill):not([data-mention-type]):not([class*="Pill"]):hover { text-decoration-color: currentColor !important; }
/* Link preview: a compact card (Slack) — a side bar, site name, title and
   description, with the image as a small thumbnail instead of a banner. */
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews { margin-top: 6px !important; }
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_previewGroup_"] > div {
  flex-direction: row !important; align-items: flex-start; gap: 12px; max-width: 520px !important; padding: 2px 0 !important; padding-inline-start: 12px !important;
  border: 0 !important; border-inline-start: 4px solid rgba(3, 46, 56, .15) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_previewGroup_"] > div > button[class*="_preview_"] {
  order: 2; flex: 0 0 72px; width: 72px !important; height: 72px !important; margin: 0 !important; border-radius: 8px !important; background-size: cover !important; background-position: center !important;
}
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_previewGroup_"] > div > [class*="_textContent_"] { order: 1; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; padding: 0 !important; }
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_textContent_"] > [class*="_siteName_"] { order: -1; font-weight: 700; }
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_textContent_"] > a { color: #087A5E !important; font-size: 15px; line-height: 22px; }
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_textContent_"] > p { margin: 0; font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_body .mx_EventTile_pre_container,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_body .mx_EventTile_pre_container { border-color: rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .04) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_body .mx_EventTile_pre_container > pre,
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_body .mx_EventTile_pre_container > pre { color: #E6F1F2 !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_body code:not(pre code),
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_body code:not(pre code) { border-color: rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .06) !important; color: #FF8FAB !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_body.markdown-body blockquote:not(.mx_ReplyChain),
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_body.markdown-body blockquote:not(.mx_ReplyChain) { border-inline-start-color: rgba(255, 255, 255, .22) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_EventTile_body a:not(.mx_Pill):not([data-mention-type]):not([class*="Pill"]),
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_EventTile_body a:not(.mx_Pill):not([data-mention-type]):not([class*="Pill"]) { color: #13E8B0 !important; text-decoration-color: rgba(19, 232, 176, .4) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_previewGroup_"] > div { border-inline-start-color: rgba(255, 255, 255, .18) !important; }
body.cpd-theme-dark .mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_textContent_"] > a { color: #13E8B0 !important; }

/* ===== Release 236: the link preview's thumbnail and close button ===== */
/* A wide banner cropped into the 72px thumbnail showed a slice of a logo;
   the whole image fits on a quiet tile. The close button shows on hover
   (Slack) instead of sitting on the thumbnail. */
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews { max-width: 520px; }
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_previewGroup_"] > div > button[class*="_preview_"] {
  background-color: rgba(3, 46, 56, .05) !important; background-size: contain !important; background-repeat: no-repeat !important;
}
body.cpd-theme-dark .mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_previewGroup_"] > div > button[class*="_preview_"],
body.cpd-theme-dark-hc .mx_RoomView_MessageList .mx_TextualBody_urlPreviews [class*="_previewGroup_"] > div > button[class*="_preview_"] { background-color: rgba(255, 255, 255, .06) !important; }
.mx_RoomView_MessageList .mx_TextualBody_urlPreviews > [class*="_hideButton_"] { top: 0 !important; opacity: 0; transition: opacity .12s ease; }
html:not([dir="rtl"]) .mx_RoomView_MessageList .mx_TextualBody_urlPreviews > [class*="_hideButton_"] { right: 0 !important; left: auto !important; }
html[dir="rtl"] .mx_RoomView_MessageList .mx_TextualBody_urlPreviews > [class*="_hideButton_"] { left: 0 !important; right: auto !important; }
.mx_RoomView_MessageList .mx_EventTile:is(:hover, :focus-within) .mx_TextualBody_urlPreviews > [class*="_hideButton_"] { opacity: 1; }