@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-Regular.woff2") format("woff2"),
       url("/fonts/Poppins/Poppins-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-Medium.woff2") format("woff2"),
       url("/fonts/Poppins/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-SemiBold.woff2") format("woff2"),
       url("/fonts/Poppins/Poppins-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins/Poppins-Bold.woff2") format("woff2"),
       url("/fonts/Poppins/Poppins-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cutek-primary: #74b35e;
  --cutek-primary-dark: #5f964d;
  --cutek-primary-soft: #e2eedb;
  --cutek-surface: #f7f7f7;
  --cutek-surface-2: #ffffff;
  --cutek-header: #171717;
  --cutek-text: #343a40;
  --cutek-link: #2c5a2b;
}

html,
body,
#matrixchat,
.mx_MatrixChat,
.mx_RootView {
  font-family: "Poppins", sans-serif !important;
  color: var(--cutek-text);
  background: var(--cutek-surface);
}

a,
.mx_Link {
  color: var(--cutek-link) !important;
}

.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary:hover,
.mx_AccessibleButton_kind_primary:focus,
.mx_AccessibleButton_kind_primary:active {
  background-color: var(--cutek-primary) !important;
  border-color: var(--cutek-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.mx_AccessibleButton_kind_danger {
  border-radius: 4px !important;
}

.mx_AccessibleButton {
  border-radius: 4px !important;
}

.mx_DirectoryRoomRow:hover,
.mx_RoomTile:hover,
.mx_AutoHideScrollbar .mx_RoomTile:hover,
.mx_EntityTile:hover,
.mx_CallListItem:hover,
.mx_NotificationSettingsTab .mx_NotificationSettingsTab_row:hover,
.mx_SettingsTab .mx_SettingsTab_section .mx_SettingsTab_subsection:hover,
.mx_ContextualMenu .mx_ContextualMenuItem:hover,
.mx_Dropdown .mx_Dropdown_option:hover,
.mx_Dropdown .mx_Dropdown_option--highlighted {
  background-color: color-mix(in srgb, var(--cutek-primary) 12%, #fff) !important;
}

.mx_RoomTile.mx_RoomTile_selected,
.mx_DirectoryRoomRow.mx_DirectoryRoomRow_highlighted,
.mx_EntityTile.mx_EntityTile_selected {
  background-color: color-mix(in srgb, var(--cutek-primary) 18%, #fff) !important;
}

.mx_LeftPanel,
.mx_SpacePanel {
  background-color: var(--cutek-header) !important;
}

/* Ensure high contrast only in the dark space rail (text only, no global wildcard). */
.mx_SpacePanel {
  color: #f7f7f7 !important;
}

.mx_SpaceButton_name,
.mx_SpaceButton_icon,
.mx_SpacePanel_toggleCollapse,
.mx_LeftPanel_exploreButton,
.mx_LeftPanel_dialPadButton,
.mx_LegacyRoomListHeader_contextLessTitle,
.mx_LegacyRoomListHeader_contextMenuButton,
.mx_LegacyRoomListHeader_plusButton {
  color: #ffffff !important;
}

/* Crisp rendering for space rail icons/active button (avoid fuzzy shadows). */
.mx_SpacePanel .mx_SpaceButton,
.mx_SpacePanel .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel .mx_SpaceButton_avatarWrapper,
.mx_SpacePanel .mx_SpaceButton_icon,
.mx_SpacePanel .mx_SpaceButton svg {
  filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Targeted icon visibility for left rail (home/plus/etc). */
.mx_SpaceTreeLevel .mx_SpaceButton .mx_SpaceButton_icon,
.mx_SpaceTreeLevel .mx_SpaceButton .mx_SpaceButton_icon *,
.mx_SpaceTreeLevel .mx_SpaceButton .mx_Icon,
.mx_SpaceTreeLevel .mx_SpaceButton .mx_Icon * {
  color: #f7f7f7 !important;
  fill: #f7f7f7 !important;
  stroke: #f7f7f7 !important;
  opacity: 1 !important;
}

.mx_SpaceTreeLevel .mx_SpaceButton_active .mx_SpaceButton_icon,
.mx_SpaceTreeLevel .mx_SpaceButton_active .mx_SpaceButton_icon *,
.mx_SpaceTreeLevel .mx_SpaceButton_active .mx_Icon,
.mx_SpaceTreeLevel .mx_SpaceButton_active .mx_Icon * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
}

.mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_selectionWrapper {
  background-color: #20232a !important;
  border: 1px solid #343a45 !important;
  border-radius: 10px !important;
}

.mx_RoomHeader_wrapper,
.mx_RoomHeader,
.mx_MatrixToolbar {
  background-color: var(--cutek-surface-2) !important;
  border-bottom: 1px solid #dee2e6 !important;
}

.mx_LeftPanel .mx_RoomTile_name,
.mx_LeftPanel .mx_RoomSublist_headingText,
.mx_LeftPanel .mx_NotificationBadge,
.mx_LeftPanel .mx_BaseAvatar_initial {
  color: var(--cutek-text) !important;
}

.mx_LeftPanel .mx_RoomTile_unread .mx_RoomTile_name {
  color: var(--cutek-text) !important;
  font-weight: 600 !important;
}

.mx_HomePage .mx_AccessibleButton,
.mx_HomePage .mx_AccessibleButton:hover,
.mx_HomePage .mx_AccessibleButton:focus {
  background-color: var(--cutek-primary) !important;
  border-color: var(--cutek-primary) !important;
}

.mx_AuthPage,
.mx_AuthBody,
.mx_AuthPage_modal {
  background: linear-gradient(160deg, #f7f7f7 0%, #e9ecef 100%) !important;
}

.mx_AuthHeader {
  background-color: var(--cutek-header) !important;
}

.mx_Field input:focus,
.mx_Field textarea:focus,
.mx_Dropdown_input:focus {
  border-color: var(--cutek-primary) !important;
  box-shadow: 0 0 0 1px var(--cutek-primary-soft) !important;
}

.mx_RoomView {
  background: var(--cutek-surface) !important;
}

/* Message composer field styling for visible input boundary. */
.mx_SendMessageComposer,
.mx_MessageComposer,
.mx_MessageComposer_wrapper,
.mx_MessageComposer_row {
  background-color: #ffffff !important;
}

.mx_SendMessageComposer {
  border: 1px solid #d7dee5 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}

.mx_MessageComposer,
.mx_MessageComposer_wrapper,
.mx_MessageComposer_row {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mx_MessageComposer:focus-within,
.mx_SendMessageComposer:focus-within {
  border-color: #bfc9d4 !important;
  box-shadow: 0 0 0 2px rgba(116, 179, 94, 0.12) !important;
}

/* Remove default Element/Matrix branding copy from auth card. */
.mx_AuthBody h1 {
  font-size: 0 !important;
  line-height: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

.mx_AuthBody h1::after {
  content: "Welcome to CUTEK Chat\ASecure messaging for CUTEK University";
  white-space: pre-line;
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: #343a40;
}

.mx_AuthBody .mx_AuthBody_text,
.mx_AuthBody .mx_AuthBody_loginSubtitle,
.mx_AuthBody h4,
.mx_AuthBody p {
  display: none !important;
}

.mx_AuthBody a[href*="matrix.org"],
.mx_AuthBody img[alt*="matrix"],
.mx_AuthBody img[src*="matrix"] {
  display: none !important;
}

/* Suppress E2EE verification warning badges/tooltips in CUTEK chat UX. */
.mx_Untrusted,
[title*="Encrypted by a device not verified"],
[title*="Encrypted by an unverified session"],
[data-testid*="unverified"],
[class*="unverified"] [class*="icon"],
[class*="Unverified"] [class*="icon"] {
  display: none !important;
}

.mx_EventTileBubble.mx_cryptoEvent,
.mx_cryptoEvent {
  display: none !important;
}

/* Hide residual E2EE warning dots/icons in timeline/composer for non-E2EE rollout. */
.mx_EventTile_e2eIcon,
.mx_MessageComposer_e2eIcon,
.mx_MessageComposer_e2eIconWrapper,
.mx_MessageComposer_e2eStatus {
  display: none !important;
}

/* Chat-only UX: remove voice/video call entry points. */
.mx_RoomHeader_videoCallOption,
.mx_LegacyCallView,
.mx_LegacyCallViewForRoom,
.mx_CallView,
[data-testid*="video-call"],
[data-testid*="voice-call"],
[aria-label*="voice call" i],
[aria-label*="video call" i],
[title*="voice call" i],
[title*="video call" i] {
  display: none !important;
}

/* Learner/basic chat mode: no room creation or advanced settings/admin controls. */
html[data-cutek-chat-access="basic"] .mx_LegacyRoomListHeader_plusButton,
html[data-cutek-chat-access="basic"] .mx_HomePage_button_createGroup,
html[data-cutek-chat-access="basic"] .mx_SpaceSettingsDialog,
html[data-cutek-chat-access="basic"] .mx_SpaceButton_new,
html[data-cutek-chat-access="basic"] .mx_SpaceItem_new,
html[data-cutek-chat-access="basic"] .mx_QuickSettingsButton_moreOptionsButton,
html[data-cutek-chat-access="basic"] .mx_QuickSettingsButton_ContextMenuWrapper_new_room_list,
html[data-cutek-chat-access="basic"] [aria-label*="create room" i],
html[data-cutek-chat-access="basic"] [title*="create room" i],
html[data-cutek-chat-access="basic"] [aria-label*="create space" i],
html[data-cutek-chat-access="basic"] [title*="create space" i],
html[data-cutek-chat-access="basic"] [aria-label*="room settings" i],
html[data-cutek-chat-access="basic"] [title*="room settings" i],
html[data-cutek-chat-access="basic"] [aria-label*="space settings" i],
html[data-cutek-chat-access="basic"] [title*="space settings" i],
html[data-cutek-chat-access="basic"] [aria-label*="security & privacy" i],
html[data-cutek-chat-access="basic"] [title*="security & privacy" i] {
  display: none !important;
}