/* Element polish; colours come from the Compound token overrides below (Element 1.12 ignores config.json custom_themes colours).
   Compound declares palette/semantic tokens inside @layer compound-tokens, and the theme class sits on <body>; unlayered rules
   here win. The tripled class is kept so the palette also beats `.cpd-theme-*.cpd-theme-*` if Element ever unlayers it. */
body, .mx_MatrixChat, button, input, textarea { font-family: Poppins, "Segoe UI", system-ui, sans-serif; }
[dir="rtl"] body, [dir="rtl"] .mx_MatrixChat, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea { font-family: "IBM Plex Sans Arabic", Poppins, system-ui, sans-serif; }

/* Exo top bar (same as exoMail) above Element; Element gets the rest of the viewport. */
#matrixchat { height: calc(100vh - 52px) !important; }
.mx_AuthPage { height: 100% !important; }

/* ---- Light (custom-Exo): navy-tinted greys, Exo greens. ---- */
.cpd-theme-light.cpd-theme-light.cpd-theme-light {
  --cpd-color-gray-100: #FAFBFD; --cpd-color-gray-200: #F4F6FA; --cpd-color-gray-300: #EDF1F6; --cpd-color-gray-400: #DDE3EC;
  --cpd-color-gray-500: #C9D2DF; --cpd-color-gray-600: #B4BFCF; --cpd-color-gray-700: #97A4B9; --cpd-color-gray-800: #74839D;
  --cpd-color-gray-900: #4A5B78; --cpd-color-gray-1000: #3E4F6C; --cpd-color-gray-1100: #33435F; --cpd-color-gray-1200: #253652;
  --cpd-color-gray-1300: #172A49; --cpd-color-gray-1400: #0A2142; /* text-primary + tooltips/toasts = navy */
  --cpd-color-bg-accent-rest: #1EA362;
  --cpd-color-bg-accent-hovered: #178A52;
  --cpd-color-bg-accent-pressed: #146F43;
  --cpd-color-bg-accent-selected: #E3F4EB;
  --cpd-color-bg-badge-accent: #C4E9D6;
  --cpd-color-text-badge-accent: #146F43;
  --cpd-color-border-accent-primary: #1EA362;
  --cpd-color-border-accent-subtle: #8FD1B0;
  --cpd-color-border-focused: #1EA362;
  --cpd-color-icon-accent-primary: #146F43;
  --cpd-color-icon-accent-tertiary: #1EA362;
  --cpd-color-text-action-accent: #146F43; /* darker than #1EA362: >=4.5:1 on white */
  --cpd-color-text-accent-primary: #146F43;
  --cpd-color-text-link-external: #146F43;
  --cpd-color-text-primary: #0A2142;
  --cpd-color-bg-action-tertiary-selected: #E3F4EB;
  --cpd-color-bg-action-tertiary-hovered: #EDF1F6;
  /* avatars + display names: green, navy and four muted companions (text >= 5:1 on its tile) */
  --cpd-color-bg-decorative-1: #E3F4EB; --cpd-color-text-decorative-1: #146F43;
  --cpd-color-bg-decorative-2: #E1E8F2; --cpd-color-text-decorative-2: #0A2142;
  --cpd-color-bg-decorative-3: #DDF1F2; --cpd-color-text-decorative-3: #0F6670;
  --cpd-color-bg-decorative-4: #E2ECFA; --cpd-color-text-decorative-4: #1F4E8C;
  --cpd-color-bg-decorative-5: #F7EEDC; --cpd-color-text-decorative-5: #8A5A0B;
  --cpd-color-bg-decorative-6: #EEE6F3; --cpd-color-text-decorative-6: #6A3D86;
}

/* ---- Dark (Element "Dark" or match-system on a dark OS): the shared Exo dark palette. ---- */
.cpd-theme-dark.cpd-theme-dark.cpd-theme-dark {
  --cpd-color-theme-bg: #071426; /* --exo-dark-bg: timeline, header */
  --cpd-color-gray-100: #0A1930; --cpd-color-gray-200: #0D1F3A; --cpd-color-gray-300: #132A4D; --cpd-color-gray-400: #1F3658;
  --cpd-color-gray-500: #26406A; --cpd-color-gray-600: #2E4B78; --cpd-color-gray-700: #3A5580; --cpd-color-gray-800: #6F81A0;
  --cpd-color-gray-900: #A9B6CC; --cpd-color-gray-1000: #B7C3D6; --cpd-color-gray-1100: #C6D0E0; --cpd-color-gray-1200: #D5DDE9;
  --cpd-color-gray-1300: #DFE6F0; --cpd-color-gray-1400: #E8EEF7;
  --cpd-color-green-100: #0A2219; --cpd-color-green-200: #0D2A1F; --cpd-color-green-300: #103225; --cpd-color-green-400: #12382A;
  --cpd-color-green-500: #154532; --cpd-color-green-600: #18553D; --cpd-color-green-700: #1A6B4A; --cpd-color-green-800: #1C8656;
  --cpd-color-green-900: #1EA362; --cpd-color-green-1000: #2BB572; --cpd-color-green-1100: #3CC583; --cpd-color-green-1200: #6FD6A3;
  --cpd-color-green-1300: #A9E7C7; --cpd-color-green-1400: #D6F4E5;
  --cpd-color-bg-accent-rest: #1EA362;
  --cpd-color-bg-accent-hovered: #2BB572;
  --cpd-color-bg-accent-pressed: #178A52;
  --cpd-color-bg-accent-selected: #12382A;
  --cpd-color-bg-action-tertiary-selected: #12382A;
  --cpd-color-bg-badge-accent: #12382A;
  --cpd-color-text-badge-accent: #6FD6A3;
  --cpd-color-text-action-accent: #3CC583;
  --cpd-color-text-accent-primary: #3CC583;
  --cpd-color-text-success-primary: #3CC583;
  --cpd-color-text-link-external: #3CC583;
  --cpd-color-icon-accent-primary: #3CC583;
  --cpd-color-icon-success-primary: #3CC583;
  --cpd-color-border-accent-primary: #1EA362;
  --cpd-color-border-focused: #3CC583;
  --cpd-color-bg-decorative-1: #12382A; --cpd-color-text-decorative-1: #5FD39A;
  --cpd-color-bg-decorative-2: #1C3358; --cpd-color-text-decorative-2: #A9C4EE;
  --cpd-color-bg-decorative-3: #0E3A40; --cpd-color-text-decorative-3: #5CC9D3;
  --cpd-color-bg-decorative-4: #16325E; --cpd-color-text-decorative-4: #84B2F0;
  --cpd-color-bg-decorative-5: #3A2E14; --cpd-color-text-decorative-5: #E3B661;
  --cpd-color-bg-decorative-6: #33224A; --cpd-color-text-decorative-6: #C5A3E6;
  scrollbar-color: #2E4B78 transparent;
}
.cpd-theme-dark .mx_EventTile { --event-tile-state-highlight-background: #12382A; }

/* Primary buttons: Exo green with white text in both themes (tooltips/toasts keep the navy/light action colour). */
[class*="cpd-theme-"] [class*="_button_"][data-kind="primary"] {
  --cpd-color-bg-action-primary-rest: #1EA362; --cpd-color-bg-action-primary-hovered: #178A52; --cpd-color-bg-action-primary-pressed: #146F43;
  --cpd-color-text-on-solid-primary: #fff; --cpd-color-icon-on-solid-primary: #fff;
}

/* Space bar: navy with white icons (both themes, continues the top bar). */
[class*="cpd-theme-"] .mx_SpacePanel.mx_SpacePanel {
  background-color: var(--exo-navy);
  --cpd-color-text-primary: #fff; --cpd-color-text-secondary: #C9D3E0;
  --cpd-color-icon-primary: #fff; --cpd-color-icon-secondary: #C9D3E0; --cpd-color-icon-tertiary: #C9D3E0;
  --activeBackground-color: rgba(255,255,255,.15); --activeBorder-color: var(--exo-green);
  --secondary-content: #fff; --tertiary-content: #fff; --timeline-text-color: #fff; --timeline-background-color: var(--exo-navy);
}
.cpd-theme-dark .mx_SpacePanel.mx_SpacePanel { border-inline-end: 1px solid #1F3658; }
[class*="cpd-theme-"] .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon { background-color: rgba(255,255,255,.15); }
[class*="cpd-theme-"] .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon { background-color: transparent; }
[class*="cpd-theme-"] .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon svg,
[class*="cpd-theme-"] .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse svg { color: #fff; }

/* Room list: soft panel, green selected room with a leading bar. */
.cpd-theme-light :is(.mx_RoomListPanel, [class*="_roomList_"]) { --cpd-color-bg-canvas-default: var(--exo-bg); background-color: var(--exo-bg); } /* token too: header/filters use it */
.cpd-theme-dark :is(.mx_RoomListPanel, [class*="_roomList_"]) { --cpd-color-bg-canvas-default: #0D1F3A; background-color: #0D1F3A; }
.cpd-theme-dark .mx_RoomListPanel { border-inline-end: 1px solid #1F3658; }
.cpd-theme-light [class*="_roomListItem_"][class*="_selected_"] [class*="_container_"] { background-color: var(--exo-green-soft); box-shadow: inset 3px 0 0 var(--exo-green); }
.cpd-theme-dark [class*="_roomListItem_"][class*="_selected_"] [class*="_container_"] { background-color: #12382A; box-shadow: inset 3px 0 0 var(--exo-green); }
[dir="rtl"] [class*="cpd-theme-"] [class*="_roomListItem_"][class*="_selected_"] [class*="_container_"] { box-shadow: inset -3px 0 0 var(--exo-green); }

/* Room header: navy title, quiet line, grey icons that turn green on hover. */
.mx_RoomHeader.mx_RoomHeader { border-bottom-color: var(--cpd-color-gray-400); }
.mx_RoomHeader .mx_RoomHeader_heading { font-weight: 600; color: var(--cpd-color-text-primary); }
.mx_RoomHeader [class*="_icon-button_"] { --cpd-color-icon-secondary: var(--cpd-color-gray-900); --cpd-color-bg-subtle-primary: var(--cpd-color-bg-accent-selected); }
.mx_RoomHeader [class*="_icon-button_"]:not([aria-disabled="true"]):hover * { color: var(--cpd-color-icon-accent-primary); }

/* Timeline: quiet hover, date separators as small secondary labels. */
.cpd-theme-light .mx_EventTile { --event-tile-state-hover-background: #F4F6FA; --event-tile-state-selected-background: #E3F4EB; }
[class*="_timelineSeparator_"] { color: var(--cpd-color-text-secondary); font-size: 12px; font-weight: 500; }
[class*="_timelineSeparator_"] > hr { border-bottom-color: var(--cpd-color-gray-400); }

/* Composer: rounded field, green focus ring. */
.mx_RoomView .mx_MessageComposer_wrapper { border: 1px solid var(--cpd-color-gray-500); border-radius: 12px; margin: 0 16px;
  background: var(--cpd-color-bg-canvas-default); transition: border-color .12s, box-shadow .12s; }
.mx_RoomView .mx_MessageComposer_wrapper:focus-within { border-color: #1EA362; box-shadow: 0 0 0 3px rgba(30,163,98,.18); }