/* Heval theme v4 — Impreza's dark look: ink-black surfaces, mint-green for everything
   interactive, Catamaran type, heavy headings, uppercase actions.
   Applied over Element's DARK theme by replacing its base colour scales, so every
   screen follows the same palette; the rules below only add shape and typography. */

@font-face { font-family: "Catamaran"; font-weight: 100 900; font-display: swap; src: url("fonts/catamaran-var.ttf") format("truetype"); }
/* Arabic-script glyphs (Arabic, Sorani, Persian) */
@font-face { font-family: "Vazirmatn"; font-weight: 400; font-display: swap; src: url("fonts/vazirmatn-400.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 500; font-display: swap; src: url("fonts/vazirmatn-500.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 600; font-display: swap; src: url("fonts/vazirmatn-600.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 700; font-display: swap; src: url("fonts/vazirmatn-700.woff2") format("woff2"); }

:root {
  --ciya-font: "Catamaran", "Vazirmatn", system-ui, sans-serif;
  /* Impreza */
  --ink: #0f1419;        /* page */
  --ink-2: #141b1e;      /* bars, cards */
  --ink-3: #1a2327;      /* raised */
  --ink-4: #212b30;
  --line: #273035;
  --line-2: #344047;
  --text: #ffffff;
  --muted: #a3aeb4;
  --mint: #00bf80;
  --mint-2: #14cc8f;
  --mint-3: #00a36d;
  --mint-deep: #0a6b4d;  /* own message bubble */
  --mint-dim: rgba(0, 191, 128, .12);
  --r-btn: 6px;
  --r-card: 12px;
  /* Letter-spacing breaks joined Arabic-script letters, so it is switched off for those languages. */
  --track: .06em;
}
:root:lang(ar), :root:lang(fa), :root:lang(ckb) { --track: 0em; }

/* ---------- colour scales: everything in Element derives from these ---------- */
.cpd-theme-dark.cpd-theme-dark {
  --cpd-font-family-sans: var(--ciya-font);
  --cpd-color-theme-bg: #0f1419;
  --cpd-color-gray-100: #12181c;
  --cpd-color-gray-200: #141b1e;
  --cpd-color-gray-300: #1a2327;
  --cpd-color-gray-400: #212b30;
  --cpd-color-gray-500: #2a353b;
  --cpd-color-gray-600: #344047;
  --cpd-color-gray-700: #435058;
  --cpd-color-gray-800: #5f6d75;
  --cpd-color-gray-900: #7c8a92;
  --cpd-color-gray-1000: #8f9ca3;
  --cpd-color-gray-1100: #a3aeb4;
  --cpd-color-gray-1200: #bfc8cc;
  --cpd-color-gray-1300: #dbe1e4;
  --cpd-color-gray-1400: #ffffff;
  --cpd-color-alpha-gray-100: rgba(225, 240, 236, .02);
  --cpd-color-alpha-gray-200: rgba(225, 240, 236, .04);
  --cpd-color-alpha-gray-300: rgba(225, 240, 236, .06);
  --cpd-color-alpha-gray-400: rgba(225, 240, 236, .1);
  --cpd-color-alpha-gray-500: rgba(225, 240, 236, .15);
  --cpd-color-alpha-gray-600: rgba(225, 240, 236, .2);
  --cpd-color-alpha-gray-700: rgba(225, 240, 236, .27);
  --cpd-color-alpha-gray-800: rgba(225, 240, 236, .41);
  --cpd-color-alpha-gray-900: rgba(225, 240, 236, .54);
  --cpd-color-alpha-gray-1000: rgba(225, 240, 236, .61);
  --cpd-color-alpha-gray-1100: rgba(225, 240, 236, .68);
  --cpd-color-alpha-gray-1200: rgba(235, 245, 242, .79);
  --cpd-color-alpha-gray-1300: rgba(245, 250, 248, .89);
  --cpd-color-alpha-gray-1400: rgba(255, 255, 255, .96);
  --cpd-color-green-100: #00170f;
  --cpd-color-green-200: #001c12;
  --cpd-color-green-300: #00261a;
  --cpd-color-green-400: #003323;
  --cpd-color-green-500: #004330;
  --cpd-color-green-600: #00553d;
  --cpd-color-green-700: #006e4f;
  --cpd-color-green-800: #009966;
  --cpd-color-green-900: #00bf80;
  --cpd-color-green-1000: #14cc8f;
  --cpd-color-green-1100: #33d9a3;
  --cpd-color-green-1200: #7ce8c4;
  --cpd-color-green-1300: #b8f3df;
  --cpd-color-green-1400: #dcfaef;
  --cpd-color-alpha-green-100: #00170f;
  --cpd-color-alpha-green-200: #001c12;
  --cpd-color-alpha-green-300: #00261a;
  --cpd-color-alpha-green-400: #003323;
  --cpd-color-alpha-green-500: #004330;
  --cpd-color-alpha-green-600: #00553d;
  --cpd-color-alpha-green-700: #006e4f;
  --cpd-color-alpha-green-800: #009966;
  --cpd-color-alpha-green-900: rgba(0, 255, 171, .74);
  --cpd-color-alpha-green-1000: rgba(20, 255, 179, .8);
  --cpd-color-alpha-green-1100: rgba(51, 255, 191, .85);
  --cpd-color-alpha-green-1200: rgba(134, 253, 214, .91);
  --cpd-color-alpha-green-1300: rgba(196, 253, 232, .95);
  --cpd-color-alpha-green-1400: rgba(226, 253, 243, .98);
  /* Impreza's solid actions are mint with white lettering */
  --cpd-color-bg-action-primary-rest: var(--mint);
  --cpd-color-bg-action-primary-hovered: var(--mint-2);
  --cpd-color-bg-action-primary-pressed: var(--mint-3);
  --cpd-color-text-on-solid-primary: #ffffff;
  --cpd-color-icon-on-solid-primary: #ffffff;
  --cpd-color-border-focused: var(--mint);
  --cpd-color-text-link-external: var(--mint);
  /* avatars: one family of greens and teals instead of a rainbow */
  --cpd-color-bg-decorative-1: #0b3d2e; --cpd-color-text-decorative-1: #33d9a3;
  --cpd-color-bg-decorative-2: #0d3a3a; --cpd-color-text-decorative-2: #4ad6cd;
  --cpd-color-bg-decorative-3: #16402a; --cpd-color-text-decorative-3: #74dc8f;
  --cpd-color-bg-decorative-4: #0a4034; --cpd-color-text-decorative-4: #19d994;
  --cpd-color-bg-decorative-5: #12383f; --cpd-color-text-decorative-5: #5ccfe0;
  --cpd-color-bg-decorative-6: #1f3f24; --cpd-color-text-decorative-6: #9be28a;
}

/* ---------- type ---------- */
body { font-family: var(--ciya-font) !important; background: var(--ink); }
h1, h2, h3, .mx_Heading_h1, .mx_Heading_h2, .mx_Heading_h3, .mx_Dialog_title { font-weight: 800 !important; }
a, .mx_linkButton { color: var(--mint); }
::selection { background: rgba(0, 191, 128, .35); }
:focus-visible { outline-color: var(--mint); }

/* ---------- buttons: mint, squared, uppercase ---------- */
.mx_AccessibleButton_kind_primary, button[class*="_button_"][data-kind="primary"] {
  background: var(--mint) !important; color: #fff !important; border-color: var(--mint) !important;
  border-radius: var(--r-btn) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: var(--track);
  transition: background .15s, transform .1s;
}
.mx_AccessibleButton_kind_primary:hover, button[class*="_button_"][data-kind="primary"]:hover { background: var(--mint-2) !important; border-color: var(--mint-2) !important; }
.mx_AccessibleButton_kind_primary:active, button[class*="_button_"][data-kind="primary"]:active { background: var(--mint-3) !important; transform: translateY(1px); }
.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled, button[class*="_button_"][data-kind="primary"]:disabled { background: var(--ink-4) !important; border-color: var(--ink-4) !important; color: var(--muted) !important; }
.mx_AccessibleButton_kind_secondary, .mx_AccessibleButton_kind_primary_outline, button[class*="_button_"][data-kind="secondary"] {
  background: transparent !important; color: var(--mint) !important; border: 2px solid var(--mint) !important;
  border-radius: var(--r-btn) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: var(--track);
}
.mx_AccessibleButton_kind_secondary:hover, .mx_AccessibleButton_kind_primary_outline:hover, button[class*="_button_"][data-kind="secondary"]:hover { background: var(--mint-dim) !important; }
button[class*="_button_"][data-kind="tertiary"] { color: var(--mint) !important; font-weight: 700 !important; }
.mx_AccessibleButton_kind_danger, .mx_AccessibleButton_kind_danger_outline, button[class*="_button_"][data-kind="destructive"] { border-radius: var(--r-btn) !important; text-transform: uppercase; letter-spacing: var(--track); font-weight: 700 !important; }
.mx_AccessibleButton_kind_link, .mx_AccessibleButton_kind_link_inline { color: var(--mint) !important; }

/* ======================= SIGN-IN ======================= */
.mx_AuthPage { position: relative; overflow: hidden; background: var(--ink) !important; }
/* night sky: a mint glow on the horizon and sparse stars on uneven grids so no pattern shows */
.mx_AuthPage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70vmax 34vmax at 50% 74%, rgba(0, 191, 128, .26), transparent 66%),
    radial-gradient(44vmax 34vmax at 100% -10%, rgba(0, 191, 128, .12), transparent 60%),
    radial-gradient(1.6px 1.6px at 61px 83px, #fff 50%, transparent 52%) 0 0 / 397px 431px,
    radial-gradient(1px 1px at 240px 190px, rgba(255, 255, 255, .7) 50%, transparent 52%) 120px 40px / 463px 379px,
    radial-gradient(1.9px 1.9px at 330px 120px, rgba(255, 255, 255, .9) 50%, transparent 52%) 30px 90px / 521px 557px,
    radial-gradient(1.3px 1.3px at 150px 300px, rgba(0, 255, 171, .9) 50%, transparent 52%) 200px 10px / 613px 409px,
    radial-gradient(1px 1px at 90px 220px, rgba(255, 255, 255, .55) 50%, transparent 52%) 260px 150px / 353px 487px,
    radial-gradient(1.4px 1.4px at 410px 60px, rgba(255, 255, 255, .8) 50%, transparent 52%) 70px 230px / 571px 523px;
  animation: ciya-sky 9s ease-in-out infinite alternate;
}
/* mountain ridges (Heval means mountain), front ridge lit along its edge */
.mx_AuthPage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400V250l150-110 110 70 170-170 150 150 120-90 190 170 140-110 160 120 130-80 120 60v140z' fill='%23121b1f'/%3E%3Cpath d='M0 400V320l180-120 130 80 150-150 170 160 160-110 180 140 150-90 170 110 150-70v150z' fill='%23162226'/%3E%3Cpath d='M0 320l180-120 130 80 150-150 170 160 160-110 180 140 150-90 170 110 150-70' fill='none' stroke='%2300bf80' stroke-opacity='.55' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
@keyframes ciya-sky { from { opacity: .72; } to { opacity: 1; } }

.mx_AuthPage_modal {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--ink-2) !important; border: 1px solid var(--line) !important; border-top: 3px solid var(--mint) !important;
  border-radius: var(--r-card) !important; box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .95) !important;
  animation: ciya-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ciya-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.mx_AuthPage_modalBlur, .mx_AuthPage_modal_withBlur { background: transparent !important; backdrop-filter: none !important; }
.mx_AuthPage_modalContent { background: transparent !important; }

/* brand column: mark, then the wordmark with its last letter in mint like the Impreza logo */
.mx_AuthHeader {
  background: var(--ink) !important; border-inline-end: 1px solid var(--line); min-width: 270px; padding: 44px 28px 28px !important;
  display: flex; flex-flow: row wrap; align-content: flex-start; justify-content: center;
}
.mx_AuthHeaderLogo { flex: 0 0 100%; order: 0; width: 92px !important; height: 92px !important; margin: 0 0 18px !important; display: flex; justify-content: center;
  filter: drop-shadow(0 18px 30px rgba(0, 191, 128, .35)); animation: ciya-float 9s ease-in-out infinite; }
.mx_AuthHeaderLogo img { width: 92px; height: 92px; }
@keyframes ciya-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mx_AuthHeader::before, .mx_AuthHeader::after { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: .1em; }
.mx_AuthHeader::before { order: 1; content: "HEVA"; color: #fff; }
.mx_AuthHeader::after { order: 2; content: "L"; color: var(--mint); }
.mx_AuthHeader .mx_AuthBody_language, .mx_AuthHeader .mx_LanguageSelector, .mx_AuthHeader > .mx_Dropdown { flex: 0 0 100%; order: 3; align-self: flex-end; margin-top: 48px; }
.mx_AuthBody_language .mx_Dropdown_input { background: var(--ink-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r-btn) !important; color: #fff !important; }
.mx_AuthBody_language .mx_Dropdown_option { color: #fff !important; }
.mx_AuthBody_language .mx_Dropdown_menu { background: var(--ink-3) !important; border: 1px solid var(--line) !important; }

/* form column */
.mx_AuthBody { background: var(--ink-2) !important; padding: 46px 48px !important; color: #fff !important; border-radius: 0 !important; }
.mx_AuthBody h1, .mx_AuthBody h2 { font-size: 42px !important; font-weight: 900 !important; line-height: 1.05; margin: 0 0 6px !important; color: #fff !important; }
.mx_AuthBody h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 16px; background: var(--mint); }
.mx_AuthBody .mx_Field { margin: 20px 0 0 !important; }
.mx_AuthBody .mx_Field input {
  background: var(--ink) !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-btn) !important;
  padding: 15px 16px !important; height: auto !important; font-size: 16px !important; color: #fff !important; transition: border-color .15s, box-shadow .15s;
}
.mx_AuthBody .mx_Field input:focus { border-color: var(--mint) !important; box-shadow: 0 0 0 3px rgba(0, 191, 128, .22) !important; }
.mx_AuthBody .mx_Field, .mx_AuthBody .mx_Field::before, .mx_AuthBody .mx_Field::after { border-color: transparent !important; }
.mx_AuthBody .mx_Field label { color: var(--muted) !important; background: transparent !important; }
.mx_AuthBody .mx_Field_focused label, .mx_AuthBody .mx_Field input:not(:placeholder-shown) + label, .mx_AuthBody .mx_Field_labelAlwaysTopLeft label { color: var(--mint) !important; background: var(--ink-2) !important; }
.mx_Login_submit {
  background: var(--mint) !important; color: #fff !important; border-radius: var(--r-btn) !important; padding: 16px !important; min-height: 54px; width: 100%;
  font-weight: 800 !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: var(--track); margin-top: 26px !important;
  transition: background .15s, transform .12s;
}
.mx_Login_submit:hover { background: var(--mint-2) !important; transform: translateY(-1px); }
.mx_Login_error, .mx_Login_serverError { background: rgba(253, 62, 60, .1); border: 1px solid rgba(253, 62, 60, .4); color: #ff877c !important; border-radius: var(--r-btn); padding: 10px 12px; }
.mx_AuthBody_changeFlow, .mx_Login_forgot, .mx_AuthBody_forgot, .mx_LoginWithQRSection { display: none !important; }
@media (max-width: 760px) {
  .mx_AuthPage_modal { flex-direction: column; }
  .mx_AuthHeader { min-width: 0; padding: 28px 24px 22px !important; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .mx_AuthHeader .mx_AuthBody_language, .mx_AuthHeader .mx_LanguageSelector, .mx_AuthHeader > .mx_Dropdown { margin-top: 22px; }
  .mx_AuthBody { padding: 28px 22px !important; }
  .mx_AuthBody h1, .mx_AuthBody h2 { font-size: 32px !important; }
}

/* ======================= CHAT SHELL ======================= */
.mx_MatrixChat, .mx_RoomView, .mx_RoomView_body, .mx_HomePage { background: var(--ink) !important; }
.mx_SpacePanel { background: #0b0f13 !important; border-inline-end: 1px solid var(--line) !important; }
.mx_LeftPanel { background: var(--ink-2) !important; border-inline-end: 1px solid var(--line) !important; }
.mx_RoomList, .mx_RoomListPanel { background: var(--ink-2) !important; }
.mx_RoomSearch, .mx_RoomListSearch_search { background: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: var(--r-btn) !important; }

/* chat list (Element's new list uses hashed class names, hence the attribute selectors) */
.mx_LeftPanel_roomListContainer, .mx_LeftPanel_wrapper--user { background: var(--ink-2) !important; }
.mx_RoomListPanel button[class*="_search_"] {
  background: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: var(--r-btn) !important;
  color: var(--muted) !important; text-transform: none; letter-spacing: 0; font-weight: 500 !important;
}
.mx_RoomListPanel button[class*="_search_"]:hover { border-color: var(--mint) !important; background: var(--ink) !important; }
/* "explore public rooms": nothing is public on a private server */
.mx_RoomListPanel [class*="_view_"] > button[class*="_icon-only_"] { display: none !important; }
.mx_RoomListPanel header h1 { font-weight: 900 !important; font-size: 22px !important; }
button[class*="_chat-filter_"] {
  border-radius: var(--r-btn) !important; border-color: var(--line-2) !important; background: transparent !important; color: var(--muted) !important;
  text-transform: uppercase; font-size: 11px !important; letter-spacing: .02em; font-weight: 700 !important; padding-inline: 7px !important;
}
button[class*="_chat-filter_"]:hover { border-color: var(--mint) !important; color: var(--mint) !important; }
button[class*="_chat-filter_"][aria-selected="true"] { background: var(--mint) !important; border-color: var(--mint) !important; color: #fff !important; }
.mx_RoomListItemView { border-radius: 0 !important; transition: background .12s; }
.mx_RoomListItemView [class*="_container_"] { background: transparent !important; }
.mx_RoomListItemView:hover { background: rgba(255, 255, 255, .04) !important; }
.mx_RoomListItemView[aria-selected="true"] { background: var(--mint-dim) !important; box-shadow: inset 3px 0 0 var(--mint); }
.mx_RoomListItemView [class*="_roomName_"] { font-weight: 700; font-size: 16px; }
.mx_NotificationBadge_visible, [class*="_unread-counter_"] { background: var(--mint) !important; color: #fff !important; font-weight: 800; }

/* space rail: the active marker in mint instead of white */
.mx_SpaceButton_active .mx_SpaceButton_selectionWrapper { border-color: var(--mint) !important; outline-color: var(--mint) !important; }
.mx_SpaceButton_active .mx_SpaceButton_icon { background: var(--mint-dim) !important; }
.mx_SpaceButton_active .mx_SpaceButton_icon::before { background-color: var(--mint) !important; }

/* header bar */
.mx_RoomHeader { background: var(--ink-2) !important; border-bottom: 1px solid var(--line) !important; min-height: 62px; }
.mx_RoomHeader_heading { font-weight: 800 !important; font-size: 18px !important; }
.mx_RoomHeader button:hover svg, .mx_RoomHeader [role="button"]:hover svg { color: var(--mint) !important; }

/* timeline */
.mx_RoomView_timeline, .mx_MainSplit, .mx_RoomView_messagePanel { background: transparent !important; }
.mx_EventTile[data-layout="bubble"][data-self="false"] { --backgroundColor: var(--ink-4); }
.mx_EventTile[data-layout="bubble"][data-self="true"] { --backgroundColor: var(--mint-deep); }
.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"], .mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"], .mx_EventTile.mx_EventTile_info[data-layout="bubble"],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"], .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] { --backgroundColor: transparent; }
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line { border-radius: 14px !important; }
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line, .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MTextBody { color: #fff !important; }
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line a { color: #b8f3df; }
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MessageTimestamp { color: rgba(255, 255, 255, .75) !important; }
.mx_EventTileBubble { background: var(--ink-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; }
.mx_DateSeparator_dateContent { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 3px 12px; }
.mx_DateSeparator_dateHeading { text-transform: uppercase; font-size: 12px !important; letter-spacing: var(--track); font-weight: 700 !important; color: var(--muted) !important; }
.mx_NewRoomIntro h2 { font-weight: 900 !important; font-size: 32px !important; }
.mx_HomePage h1 { font-weight: 900 !important; font-size: 46px !important; line-height: 1.05; }
.mx_HomePage h4, .mx_HomePage h2 { color: var(--muted) !important; font-weight: 500 !important; }
.mx_HomePage_default_buttons .mx_HomePage_button_createGroup, .mx_HomePage_default_buttons .mx_HomePage_button_explore { display: none !important; }
.mx_HomePage_default_buttons .mx_HomePage_button_sendDm { background: var(--mint) !important; color: #fff !important; border-radius: var(--r-card) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: var(--track); }
.mx_HomePage_default_buttons .mx_HomePage_button_sendDm:hover { background: var(--mint-2) !important; }

/* composer */
.mx_MessageComposer { background: var(--ink-2) !important; border-top: 1px solid var(--line) !important; padding: 10px 12px !important; box-sizing: border-box !important; }
.mx_MessageComposer_wrapper { padding: 0 !important; overflow: visible !important; }
.mx_MessageComposer_row { align-items: center !important; gap: 6px; overflow: visible !important; }
.mx_MessageComposer_row .mx_BasicMessageComposer, .mx_MessageComposer_row .mx_WysiwygComposer {
  background: var(--ink) !important; border: 1px solid var(--line-2) !important; border-radius: 24px !important; padding: 10px 16px !important; min-height: 44px;
}
.mx_MessageComposer_row .mx_BasicMessageComposer:focus-within, .mx_MessageComposer_row .mx_WysiwygComposer:focus-within { border-color: var(--mint) !important; }
.mx_MessageComposer_e2eIconWrapper { display: none !important; }
.mx_MessageComposer_actions { display: flex !important; align-items: center; gap: 2px; flex: none; overflow: visible !important; }
.mx_MessageComposer_button { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; flex: none; display: flex !important; align-items: center; justify-content: center; }
.mx_MessageComposer_button svg { width: 24px !important; height: 24px !important; }
.mx_MessageComposer_button::before { background-color: var(--muted) !important; }
.mx_MessageComposer_button svg { color: var(--muted); }
.mx_MessageComposer_button:hover { background: var(--mint-dim) !important; }
.mx_MessageComposer_button:hover::before { background-color: var(--mint) !important; }
.mx_MessageComposer_button:hover svg { color: var(--mint); }
.mx_MessageComposer_sendMessage { background: var(--mint) !important; width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 50% !important; flex: none; }
.mx_MessageComposer_sendMessage::before { background-color: #fff !important; }
.mx_MessageComposer_sendMessage:hover { background: var(--mint-2) !important; }
.mx_VoiceMessagePrimaryContainer, .mx_VoiceRecordComposerTile { background: var(--mint-dim) !important; border: 1px solid rgba(0, 191, 128, .45); border-radius: 24px !important; }

/* panels, dialogs, menus */
.mx_RightPanel { background: var(--ink-2) !important; border-inline-start: 1px solid var(--line) !important; }
.mx_Dialog { background: var(--ink-2) !important; border: 1px solid var(--line) !important; border-top: 3px solid var(--mint) !important; border-radius: var(--r-card) !important; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9) !important; }
.mx_Dialog_background { background: rgba(8, 11, 14, .78) !important; }
/* Element wraps dialogs in a thick frosted frame; Impreza's cards have a plain hairline edge */
.mx_Dialog_border { background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: var(--r-card) !important; box-shadow: none !important; backdrop-filter: none !important; }
.mx_Dialog_border::before, .mx_Dialog_border::after { display: none !important; }
.mx_Dialog .mx_Field input, .mx_Dialog input[type="text"], .mx_InviteDialog_editor { background: var(--ink) !important; border-radius: var(--r-btn) !important; }
.mx_ContextualMenu, .mx_IconizedContextMenu, [class*="_menu_"][role="menu"] { background: var(--ink-3) !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; }
.mx_TabbedView_tabLabel { border-radius: var(--r-btn) !important; }
.mx_TabbedView_tabLabel_active { background: var(--mint-dim) !important; color: var(--mint) !important; }
.mx_TabbedView_tabLabel_active svg, .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text { color: var(--mint) !important; }
.mx_SettingsSubsection:has([class*="mx_ThemeChoicePanel"]), [class*="mx_ThemeChoicePanel"], .mx_UserMenu_contextMenu_themeButton { display: none !important; }  /* one theme only */
.mx_InviteDialog_footer, .mx_InviteDialog_section_hidden_suggestions_disclaimer, .mx_InviteDialog_identityServer { display: none !important; }
.mx_InviteDialog_tile { border-radius: var(--r-btn); }
.mx_InviteDialog_tile:hover { background: var(--mint-dim) !important; }
.mx_InviteDialog_goButton { background: var(--mint) !important; color: #fff !important; border-radius: var(--r-btn) !important; text-transform: uppercase; letter-spacing: var(--track); font-weight: 800 !important; }
.mx_Toast_toast { background: var(--ink-3) !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; }
.mx_Toast_title h2 { font-weight: 800 !important; }

[class*="_tooltip_"] { background: var(--ink-4) !important; color: #fff !important; border: 1px solid var(--line-2); border-radius: var(--r-btn) !important; }
[class*="_tooltip_"] svg { fill: var(--ink-4) !important; }
[class*="_tooltip_"] [class*="_caption_"] { color: var(--muted) !important; }
.mx_InviteDialog_addressBar .mx_InviteDialog_editor { border: 1px solid var(--line-2) !important; }
.mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within { border-color: var(--mint) !important; }

/* Disappearing messages and ticks (ciya-features.js) */
.ciya-expired { display: none !important; }
.ciya-timer, .ciya-rename { display: inline-flex; align-items: center; gap: 4px; height: 32px; min-width: 32px; padding: 0 6px; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--muted); cursor: pointer; font: 700 12px var(--ciya-font); }
.ciya-timer:hover, .ciya-rename:hover { background: var(--mint-dim); color: var(--mint); }
.ciya-timer.ciya-on, .ciya-rename.ciya-on { color: var(--mint); }
.ciya-menu { position: fixed; z-index: 100000; width: 250px; padding: 8px; background: var(--ink-3); border: 1px solid var(--line); border-top: 3px solid var(--mint); border-radius: var(--r-card); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); font-family: var(--ciya-font); color: #fff; }
.ciya-menu-title { padding: 6px 10px 2px; font-weight: 800; font-size: 16px; }
.ciya-menu-hint { padding: 0 10px 8px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.ciya-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-btn); background: transparent; color: #fff; font: 500 15px var(--ciya-font); text-align: start; cursor: pointer; }
.ciya-menu-item:hover { background: var(--mint-dim); }
.ciya-menu-item.ciya-selected { color: var(--mint); font-weight: 700; }
.ciya-menu-item.ciya-selected::after { content: "✓"; }
.ciya-alert { position: fixed; z-index: 100002; top: 18px; inset-inline-end: 18px; width: min(420px, calc(100% - 36px)); padding: 16px 18px; background: var(--ink-3); color: #fff; border: 1px solid var(--line); border-top: 3px solid var(--mint); border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); font: 500 15px/1.5 var(--ciya-font); }
.ciya-alert + .ciya-alert { top: 190px; }
.ciya-alert b { display: block; font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.ciya-alert p { margin: 0 0 12px; color: var(--muted); }
.ciya-alert button { background: var(--mint); color: #fff; border: 0; border-radius: var(--r-btn); padding: 7px 22px; font: 800 14px var(--ciya-font); cursor: pointer; }
.ciya-toast { position: fixed; z-index: 100001; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 16px; background: var(--ink-3); color: #fff; border: 1px solid var(--line); border-inline-start: 3px solid var(--mint); border-radius: var(--r-btn); font: 500 14px var(--ciya-font); }
.mx_EventTile { position: relative; }
.ciya-ticks { position: absolute; right: -8px; bottom: 4px; display: inline-flex; color: rgba(255, 255, 255, .6); cursor: pointer; }
/* the time moves aside so the ticks sit after it, as in Telegram */
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line { padding-right: 78px !important; }
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line > .mx_MessageTimestamp, .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line > a > .mx_MessageTimestamp { right: 18px !important; }
.ciya-ticks[data-state="read"] { color: #3dffb4; }
/* the ticks say it all: no "sent" circle and no row of small reader avatars */
.mx_EventTile_receiptSent, .mx_ReadReceiptGroup { display: none !important; }

/* Settings: no experimental ("beta") features and no "Help & About" page of the original project */
[aria-controls="mx_tabpanel_USER_LABS_TAB"], [aria-controls="mx_tabpanel_USER_HELP_TAB"] { display: none !important; }

/* Heval help buttons */
.ciya-help { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.ciya-help:hover, .ciya-help:focus-visible { background: var(--mint) !important; color: #fff !important; }
.ciya-help-pop { background: var(--ink-3) !important; color: #fff !important; border: 1px solid var(--line); border-top: 3px solid var(--mint); border-radius: var(--r-card) !important; font-family: var(--ciya-font) !important; font-size: 15px !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--mint-3); }

@media (prefers-reduced-motion: reduce) {
  .mx_AuthPage::before, .mx_AuthHeaderLogo, .mx_AuthPage_modal { animation: none !important; }
}

/* names only I see */
.ciya-original { font: 500 12px var(--ciya-font); color: var(--muted); margin-top: 1px; }
.ciya-rename-menu { width: 300px; padding-bottom: 12px; }
.ciya-rename-input { display: block; width: calc(100% - 12px); margin: 4px 6px 10px; padding: 9px 11px; border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--ink); color: #fff; font: 500 14px var(--ciya-font); }
.ciya-rename-input:focus { outline: none; border-color: var(--mint); }
.ciya-rename-row { display: flex; gap: 8px; padding: 0 6px; }
.ciya-rename-row button { flex: 1; padding: 8px 10px; border-radius: var(--r-btn); border: 1px solid var(--line); background: transparent; color: #fff; font: 700 13px var(--ciya-font); cursor: pointer; }
.ciya-rename-row .ciya-rename-save { background: var(--mint); border-color: var(--mint); }

/* seen by */
.ciya-seen-row { display: flex !important; justify-content: space-between; gap: 14px; cursor: default; }
.ciya-seen-time { color: var(--muted); font-size: 12px; }
/* transfer progress */
.ciya-transfer { position: fixed; z-index: 100001; bottom: 90px; inset-inline-end: 24px; padding: 8px 14px; background: var(--ink-3); color: #fff; border: 1px solid var(--line); border-inline-start: 3px solid var(--mint); border-radius: var(--r-btn); font: 600 13px var(--ciya-font); direction: ltr; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); }
/* no threads (and no "beta" threads panel) */
.mx_MessageActionBar_threadButton, .mx_ThreadSummary, .mx_ThreadPanel_betaPill { display: none !important; }