/* Datcord's presentation layer. Never hide verification, recovery or encryption warnings. */
:root, .cpd-theme-dark, .mx_Theme_dark, .mx_Theme_custom-Datcord {
  color-scheme: dark;
  --dc-rail: #1e1f22;
  --dc-sidebar: #2b2d31;
  --dc-canvas: #313338;
  --dc-hover: #35373c;
  --dc-selected: #404249;
  --dc-muted: #949ba4;
  --dc-text: #dbdee1;
  --dc-accent: #5865f2;
  --cpd-color-bg-canvas-default: #313338;
  --cpd-color-bg-canvas-subtle: #2b2d31;
  --cpd-color-bg-subtle-primary: #2b2d31;
  --cpd-color-bg-subtle-secondary: #35373c;
  --cpd-color-bg-action-primary-rest: #5865f2;
  --cpd-color-bg-action-primary-hovered: #4752c4;
  --cpd-color-bg-action-primary-pressed: #3c45a5;
  --cpd-color-text-primary: #f2f3f5;
  --cpd-color-text-secondary: #b5bac1;
  --cpd-color-text-action-accent: #a7b0ff;
  --cpd-color-icon-accent-primary: #a7b0ff;
  --cpd-color-border-interactive-secondary: #4e5058;
}
html, body { background: #313338; }
body, input, textarea, button { font-family: Inter, "Segoe UI", sans-serif; }
* { scrollbar-width: thin; scrollbar-color: #1e1f22 transparent; }
::selection { background: #5865f28c; }
.mx_MatrixChat { background: var(--dc-canvas); }
.mx_SpacePanel { background: var(--dc-rail) !important; width: 72px !important; padding-top: 12px; }
.mx_SpacePanel .mx_SpaceButton { margin-bottom: 8px; }
.mx_SpaceButton .mx_BaseAvatar_image, .mx_SpaceButton .mx_BaseAvatar_initial {
  border-radius: 18px !important; transition: border-radius .18s ease, background .18s ease;
}
.mx_SpaceButton:hover .mx_BaseAvatar_image, .mx_SpaceButton:hover .mx_BaseAvatar_initial { border-radius: 13px !important; }
.mx_LeftPanel, .mx_LeftPanel_roomListContainer, .mx_RoomList, .mx_RoomListPanel { background: var(--dc-sidebar) !important; }
.mx_LeftPanel { border-right: 1px solid #1f2023; min-width: 232px; }
@media (min-width: 1024px) {
  .mx_MatrixChat div:has(> .mx_LeftPanel_panel > .mx_LeftPanel_outerWrapper) { flex: 0 0 252px !important; }
  .mx_LeftPanel_panel:has(> .mx_LeftPanel_outerWrapper) { width: 252px !important; flex: 0 0 252px !important; }
  .mx_LeftPanel { width: 252px !important; }
}
.mx_LeftPanel .mx_AccessibleButton, .mx_RoomSublist { border-radius: 5px; }
.mx_RoomListItem, .mx_RoomTile { margin-inline: 8px; border-radius: 5px !important; }
.mx_RoomTile_selected, .mx_RoomListItem[aria-selected="true"] { background: var(--dc-selected) !important; }
.mx_RoomTile:hover, .mx_RoomListItem:hover { background: var(--dc-hover) !important; }
.mx_RoomTile_name, .mx_RoomListItem_name { font-weight: 500; }
.mx_RoomListItemView { min-height: 40px !important; padding-block: 3px !important; }
.mx_RoomListItemView_selected { background: #404249 !important; border-radius: 5px; }
.mx_RoomListItemView:hover { background: #35373c !important; }
/* Compact channel-list placeholders; identity and verification badges elsewhere are untouched. */
.mx_RoomListItemView [data-testid="avatar-img"][role="presentation"] {
  color: #949ba4 !important; background: transparent !important;
  font-size: 0 !important; --cpd-avatar-size: 24px !important;
  border: 0 !important; box-shadow: none !important; outline: none !important;
}
.mx_RoomListItemView [data-testid="avatar-img"][role="presentation"]::after { content: '#'; font-size: 24px; font-weight: 500; }
.mx_RoomSublist_headerText { font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.mx_RoomHeader, .mx_RoomHeader_wrapper { background: var(--dc-canvas) !important; }
.mx_RoomHeader { min-height: 56px; border-bottom: 1px solid #26272b; box-shadow: 0 1px 2px #1112; }
.mx_RoomHeader_name { font-size: 16px; font-weight: 700; }
.mx_RoomView, .mx_RoomView_body, .mx_RoomView_timeline, .mx_TimelinePanel, .mx_EventTile { background-color: var(--dc-canvas); }
.mx_EventTile { border-radius: 0 !important; }
.mx_EventTile:hover { background: #2e3035; }
.mx_EventTile .mx_DisambiguatedProfile_displayName { font-weight: 650; }
.mx_EventTile_line { line-height: 1.55; }
.mx_EventTile_avatar .mx_BaseAvatar_image { border-radius: 50%; }
.mx_DateSeparator { color: var(--dc-muted); font-size: 11px; font-weight: 600; }
.mx_RightPanel, .mx_MemberList, .mx_MemberList_wrapper { background: var(--dc-sidebar) !important; }
.mx_RightPanel { border-left: 1px solid #26272b; }
.mx_MessageComposer { box-sizing: border-box; width: 100%; background: var(--dc-canvas) !important; padding: 0 16px 20px !important; border-top: 0 !important; }
.mx_MessageComposer_wrapper { background: #383a40 !important; border: 0 !important; border-radius: 9px !important; padding: 4px 8px; }
.mx_BasicMessageComposer { min-height: 38px; color: var(--dc-text); }
.mx_MessageComposer .mx_AccessibleButton { border-radius: 6px; }
.mx_AccessibleButton_kind_primary { background: var(--dc-accent) !important; color: white !important; border-radius: 5px !important; }
.mx_AccessibleButton_kind_primary:hover { background: #4752c4 !important; }
.mx_Dialog { border: 1px solid #454750; border-radius: 12px !important; box-shadow: 0 24px 100px #0007; }
.mx_Field input, .mx_Field select, .mx_Field textarea { border-radius: 5px; }
.mx_AuthPage { background: radial-gradient(ellipse at 12% 15%, #5865f224, transparent 42%), #1e1f22 !important; }
.mx_AuthPage_modal { background: #313338 !important; border: 1px solid #454750; border-radius: 14px !important; box-shadow: 0 30px 100px #0005; }
.mx_AuthHeader { padding-top: 32px; }
.mx_AuthHeader_logo img { width: 210px; max-height: 62px; }
.mx_AuthBody h1, .mx_AuthBody h2 { color: #f2f3f5; font-weight: 750; }
.mx_AuthFooter { color: #949ba4; }
/* Element sanitizes the embedded fragment's classes, so style its own wrapper. */
.mx_HomePage_body { box-sizing: border-box; width: min(100%, 650px); padding: 40px 36px; margin: 24px auto !important; font: 16px/1.6 Inter, "Segoe UI", sans-serif; }
.mx_HomePage_body > img { width: 190px; margin-bottom: 32px; }
.mx_HomePage_body > div:first-of-type { color: #a7b0ff; font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.mx_HomePage_body h1 { color: #f2f3f5; font-size: 46px; line-height: 1.07; letter-spacing: -1.7px; margin: 16px 0 24px; }
.mx_HomePage_body p { color: #b5bac1; max-width: 500px; }
.mx_HomePage_body > div:last-of-type { margin-top: 32px; border-top: 1px solid #454750; }
.mx_HomePage_body > div:last-of-type > div { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid #454750; }
.mx_HomePage_body > div:last-of-type > div > span { font-size: 12px; color: #949ba4; padding-top: 4px; }
.mx_HomePage_body strong { display: block; color: #f2f3f5; font-size: 15px; margin-bottom: 3px; }
.mx_HomePage_body div > div > div > span { color: #b5bac1; font-size: 14px; }
.mx_HomePage_body > p:last-child { font-size: 12px; color: #949ba4; margin-top: 28px; }
.mx_HomePage_body a { color: #a7b0ff; }
@media (max-width: 720px) {
  .mx_SpacePanel { width: 58px !important; }
  .mx_MessageComposer { padding: 0 8px 10px !important; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }