:root, .cpd-theme-dark {
  --astra-bg: #0e1621;
  --astra-panel: #17212b;
  --astra-panel-2: #202b36;
  --astra-incoming: #182533;
  --astra-outgoing: #2b5278;
  --astra-accent: #64a9e3;
  --astra-text: #f1f5f8;
  --astra-muted: #9cadba;
}

body, .mx_MatrixChat { background: var(--astra-bg) !important; color: var(--astra-text); }
.mx_LeftPanel, .mx_RoomListPanel { background: var(--astra-panel) !important; }
.mx_RoomView, .mx_RoomView_body, .mx_RoomView_messagePanel { background: var(--astra-bg) !important; }
.mx_RoomHeader, .mx_MessageComposer { background: var(--astra-panel) !important; border-color: #263442 !important; }
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
.mx_EventTile[data-layout="bubble"] .mx_EventTile_content { max-width: min(72ch, 78%); }
.mx_EventTile[data-layout="bubble"][data-self="false"]:not(.mx_EventTile_info):not(.mx_EventTile_bubbleContainer) .mx_EventTile_line {
  background: var(--astra-incoming);
  border-radius: 15px 15px 15px 4px;
  margin: 2px 12px;
  padding: 7px 11px;
  width: fit-content;
}
.mx_EventTile[data-layout="bubble"][data-self="true"]:not(.mx_EventTile_info):not(.mx_EventTile_bubbleContainer) .mx_EventTile_line {
  background: var(--astra-outgoing);
  border-radius: 15px 15px 4px 15px;
  margin-left: auto;
}
.mx_EventTile[data-layout="bubble"][data-self="true"]:not(.mx_EventTile_info):not(.mx_EventTile_bubbleContainer) .mx_EventTile_content { margin-left: auto; }
.mx_RoomTile_selected, .mx_RoomTile:hover { background: var(--astra-panel-2) !important; }
.mx_MessageComposer_wrapper { border-radius: 18px !important; background: var(--astra-panel-2) !important; }
a { color: var(--astra-accent); }
@media (max-width: 720px) {
  .mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
  .mx_EventTile[data-layout="bubble"] .mx_EventTile_content { max-width: 88%; }
  .mx_RightPanel { display: none; }
  .mx_AuthPage {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    padding: 12px !important;
    width: 100% !important;
  }
  .mx_AuthPage > div,
  .mx_Welcome,
  .mx_DefaultWelcome,
  .mx_AuthPage_modal,
  .mx_AuthPage_modalContent,
  .mx_AuthBody,
  .mx_AuthBody_fieldRow {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .mx_DefaultWelcome_logo,
  .mx_DefaultWelcome h1,
  .mx_DefaultWelcome_buttons,
  .mx_DefaultWelcome_buttons > * { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
  .mx_AuthHeader { white-space: normal !important; overflow-wrap: anywhere; }
  .mx_AuthFooter {
    box-sizing: border-box !important;
    flex-wrap: wrap;
    max-width: 100% !important;
    padding-inline: 18px !important;
    width: 100% !important;
  }
}