:root {
  --rechat-accent: #ff244f;
  --rechat-accent-hover: #ff3f68;
  --rechat-text: #f5f7fb;
  --rechat-muted: #a4abbb;
  --rechat-panel: rgba(12, 16, 28, 0.92);
  --rechat-border: rgba(255, 255, 255, 0.1);
}

@keyframes rechatGridShift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(8px, 6px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rechatWave {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
    opacity: 0.42;
  }

  50% {
    transform: translate3d(2%, 1%, 0) scale(1.03);
    opacity: 0.6;
  }

  100% {
    transform: translate3d(-2%, -1%, 0) scale(1);
    opacity: 0.42;
  }
}

html,
body,
#matrixchat {
  min-height: 100%;
  background: #070b15 !important;
}

.rechat-hidden-warning,
.rechat-hidden-verification {
  display: none !important;
}

.rechat-auth-brand {
  display: flex;
  justify-content: center;
  margin: 0 auto 14px;
}

.rechat-auth-brand img {
  width: 170px;
  max-width: 78%;
  height: auto;
  display: block;
}

/* AUTH FULL REBRAND */
.mx_AuthPage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 36, 79, 0.2), transparent 33%),
    radial-gradient(circle at 80% 78%, rgba(0, 173, 239, 0.14), transparent 36%),
    linear-gradient(180deg, #080b14 0%, #05070d 100%) !important;
}

.mx_AuthPage > aside,
.mx_AuthPage > .mx_AuthHeader,
.mx_AuthHeader,
.mx_AuthHeaderLogo,
.mx_AuthPage_background,
.mx_AuthPage .mx_AuthPage_brand {
  display: none !important;
}

.mx_AuthPage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.17) 1px, transparent 1.2px);
  background-size: 22px 22px;
  opacity: 0.2;
  animation: rechatGridShift 28s linear infinite;
  pointer-events: none;
}

.mx_AuthPage::after {
  content: "";
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse at 30% 35%, rgba(255, 36, 79, 0.2), transparent 46%),
    radial-gradient(ellipse at 74% 75%, rgba(0, 173, 239, 0.15), transparent 44%);
  animation: rechatWave 18s ease-in-out infinite;
  pointer-events: none;
}

.mx_AuthPage_modal {
  position: relative !important;
  z-index: 2 !important;
  width: min(100vw - 36px, 470px) !important;
  max-width: 470px !important;
  margin: auto !important;
  background: transparent !important;
  border: 1px solid var(--rechat-border) !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.5) !important;
}

.mx_AuthPage_modalContent {
  width: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

.mx_AuthBody {
  width: 100% !important;
  max-width: 470px !important;
  min-width: 0 !important;
  padding: 34px 28px 28px !important;
  background: var(--rechat-panel) !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
  color: var(--rechat-text) !important;
}

.mx_AuthBody h1 {
  color: var(--rechat-text) !important;
  text-align: center !important;
  font-size: 20px !important;
  margin: 0 0 12px !important;
}

.mx_AuthFooter,
.mx_AuthPage .mx_AuthFooter,
.mx_WelcomePage .mx_AuthFooter,
.mx_WelcomePage ~ .mx_AuthFooter {
  display: none !important;
}

.mx_AuthBody_language,
.mx_LanguageDropdown,
.mx_AuthPage .mx_AuthBody_language,
.mx_WelcomePage .mx_AuthBody_language {
  display: none !important;
}

.mx_ServerPicker,
.mx_ServerPicker_server,
.mx_Login_underlinedServerName,
.mx_Login_serverUrl,
.mx_ServerPicker_help,
.mx_ServerPicker_button,
.mx_Login_type_container,
.mx_ServerPicker .mx_AccessibleButton,
.mx_ServerPicker .mx_Field,
.mx_AuthBody .mx_ServerPicker {
  display: none !important;
}

.mx_AuthBody form {
  display: block !important;
}

.mx_AuthBody .mx_AuthBody_fieldRow {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 0 0 14px !important;
  width: 100% !important;
}

.mx_AuthBody .mx_Field,
.mx_AuthBody .mx_AuthBody_fieldRow > .mx_Field {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mx_AuthBody .mx_Field + .mx_Field,
.mx_AuthBody .mx_Field + .mx_AuthBody_fieldRow,
.mx_AuthBody .mx_AuthBody_fieldRow + .mx_Field,
.mx_AuthBody .mx_AuthBody_fieldRow > .mx_Field + .mx_Field,
.mx_AuthBody .mx_AuthBody_fieldRow > * + * {
  margin-top: 12px !important;
}

.mx_AuthBody .mx_Field:last-child,
.mx_AuthBody .mx_AuthBody_fieldRow > .mx_Field:last-child {
  margin-bottom: 0 !important;
}

.mx_AuthBody .mx_Field label,
.mx_AuthBody .mx_Field_labelAlwaysTopLeft label {
  display: none !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field select,
.mx_AuthBody .mx_Field textarea {
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--rechat-text) !important;
  box-shadow: none !important;
}

.mx_AuthBody .mx_Field input::placeholder,
.mx_AuthBody .mx_Field textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  opacity: 1 !important;
}

.mx_AuthBody .mx_Field input:focus,
.mx_AuthBody .mx_Field select:focus,
.mx_AuthBody .mx_Field textarea:focus {
  border-color: rgba(125, 175, 255, 0.82) !important;
  box-shadow: 0 0 0 1px rgba(125, 175, 255, 0.24) !important;
}

.mx_AuthBody [type="submit"],
.mx_AuthBody button[type="submit"],
.mx_AuthBody .mx_AccessibleButton_kind_primary,
.mx_AuthBody button.mx_AccessibleButton_kind_primary,
.mx_AuthBody .mx_Login_submit,
.mx_AuthBody .mx_Login_fullWidthButton {
  width: 100% !important;
  min-height: 50px !important;
  margin-top: 8px !important;
  border: none !important;
  border-radius: 14px !important;
  background: var(--rechat-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.mx_AuthBody [type="submit"]:hover,
.mx_AuthBody button[type="submit"]:hover,
.mx_AuthBody .mx_AccessibleButton_kind_primary:hover,
.mx_AuthBody .mx_Login_submit:hover,
.mx_AuthBody .mx_Login_fullWidthButton:hover {
  background: var(--rechat-accent-hover) !important;
}

.mx_AuthBody hr {
  border-color: rgba(255, 255, 255, 0.09) !important;
  opacity: 0.7;
}

.mx_AuthBody .mx_AuthBody_changeFlow,
.mx_AuthBody .mx_Login_prompt {
  margin-top: 14px !important;
  text-align: center !important;
}

.mx_AuthPage .mx_BaseCard,
.mx_AuthPage .mx_InfoMessage,
.mx_AuthPage .mx_Toast_toast {
  max-width: 100% !important;
}

@media (max-width: 560px) {
  .mx_AuthPage_modal {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    border-radius: 22px !important;
  }

  .mx_AuthBody {
    padding: 24px 16px 20px !important;
    border-radius: 22px !important;
  }
}

/* APP BACKGROUND */
body.rechat-app-mode #matrixchat,
body.rechat-app-mode .mx_MatrixChat,
body.rechat-app-mode .mx_MatrixChat_wrapper {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 36, 79, 0.16), transparent 34%),
    radial-gradient(circle at 80% 78%, rgba(0, 173, 239, 0.14), transparent 36%),
    linear-gradient(180deg, #080b14 0%, #05070d 100%) !important;
}

body.rechat-app-mode .mx_MatrixChat_wrapper {
  position: relative !important;
  overflow: hidden !important;
}

body.rechat-app-mode .mx_MatrixChat_wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1.2px);
  background-size: 22px 22px;
  opacity: 0.2;
  animation: rechatGridShift 28s linear infinite;
}

body.rechat-app-mode .mx_MatrixChat_wrapper::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 28% 34%, rgba(255, 36, 79, 0.2), transparent 46%),
    radial-gradient(ellipse at 74% 74%, rgba(0, 173, 239, 0.16), transparent 44%);
  animation: rechatWave 18s ease-in-out infinite;
}

body.rechat-app-mode .mx_MatrixChat_wrapper > * {
  position: relative;
  z-index: 1;
}

body.rechat-app-mode .mx_LeftPanel,
body.rechat-app-mode .mx_LeftPanel_wrapper,
body.rechat-app-mode .mx_SpacePanel {
  background: rgba(6, 10, 18, 0.62) !important;
  backdrop-filter: blur(4px);
}

body.rechat-app-mode .mx_RoomList,
body.rechat-app-mode .mx_RoomSublist,
body.rechat-app-mode .mx_HomePage,
body.rechat-app-mode .mx_HomePage_default,
body.rechat-app-mode .mx_RoomView,
body.rechat-app-mode .mx_RoomView_body,
body.rechat-app-mode .mx_RoomView_messagePanel,
body.rechat-app-mode .mx_RoomHeader,
body.rechat-app-mode .mx_MainSplit,
body.rechat-app-mode .mx_ScrollPanel {
  background: transparent !important;
}

#mx_ContextualMenu_Container,
#mx_Dialog_StaticContainer,
#mx_Dialog_Container {
  z-index: 2000;
}

/* HOME PAGE CARDS */
.mx_HomePage_default_wrapper,
.mx_HomePage_wrapper {
  position: relative !important;
  z-index: 1 !important;
}

.mx_HomePage_default_buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  gap: 18px !important;
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
}

.mx_HomePage_default_buttons .mx_AccessibleButton,
.mx_HomePage_default_buttons button {
  min-height: 148px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 36, 79, 0.32) !important;
  background: linear-gradient(180deg, rgba(255, 36, 79, 0.18) 0%, rgba(255, 36, 79, 0.1) 100%) !important;
  color: var(--rechat-text) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
  transition: transform 170ms ease, background 170ms ease, border-color 170ms ease !important;
}

.mx_HomePage_default_buttons .mx_AccessibleButton:hover,
.mx_HomePage_default_buttons button:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 63, 104, 0.56) !important;
  background: linear-gradient(180deg, rgba(255, 36, 79, 0.24) 0%, rgba(255, 36, 79, 0.14) 100%) !important;
}

.mx_HomePage_default_buttons .mx_AccessibleButton svg,
.mx_HomePage_default_buttons button svg {
  color: #ffd5df !important;
}

@media (max-width: 900px) {
  .mx_HomePage_default_buttons {
    grid-template-columns: 1fr !important;
    width: min(100%, 420px) !important;
  }

  .mx_HomePage_default_buttons .mx_AccessibleButton,
  .mx_HomePage_default_buttons button {
    min-height: 86px !important;
  }
}