/**
 * Element Web (telegraf.cdto.life) — анимированный фон палитры CDTO (teal + lime + slate).
 * Подключается через element-nginx (sub_filter в index.html).
 * Селекторы: mx_AuthPage (Element Web 1.12.x).
 * Версия оформления: 2026-03-27 — читаемость на мобильных, светлые поля (color-scheme), контраст текста.
 */

.mx_AuthPage.mx_AuthPage_branded,
.mx_AuthPage {
  position: relative !important;
  /* Иначе iOS/Android в тёмной теме ОС рисуют чёрные поля и бледный текст */
  color-scheme: light only !important;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  background-color: #0d9488 !important;
  background-image: linear-gradient(
    125deg,
    #f8fafc 0%,
    #ecfdf5 14%,
    #d1fae5 28%,
    #99f6e4 42%,
    #5eead4 56%,
    #a7f3d0 70%,
    #ecfdf5 86%,
    #e0f2f1 100%
  ) !important;
  background-size: 420% 420% !important;
  animation: cdtoWelcomeGradient 26s ease-in-out infinite !important;
  overflow: hidden !important;
}

@keyframes cdtoWelcomeGradient {
  0% {
    background-position: 0% 45%;
  }
  50% {
    background-position: 100% 55%;
  }
  100% {
    background-position: 0% 45%;
  }
}

.mx_AuthPage.mx_AuthPage_branded::before,
.mx_AuthPage::before {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 42% 38% at 78% 18%,
    rgba(132, 204, 22, 0.32) 0%,
    rgba(132, 204, 22, 0.08) 45%,
    transparent 70%
  );
  animation: cdtoLimeOrb 20s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes cdtoLimeOrb {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(-10%, 14%) scale(1.12);
    opacity: 1;
  }
}

.mx_AuthPage.mx_AuthPage_branded::after,
.mx_AuthPage::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 48% 42% at 15% 82%,
    rgba(15, 118, 110, 0.38) 0%,
    rgba(13, 148, 136, 0.12) 50%,
    transparent 72%
  );
  animation: cdtoTealOrb 24s ease-in-out infinite alternate-reverse;
  z-index: 0;
}

@keyframes cdtoTealOrb {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(12%, -8%) scale(1.15);
  }
}

.mx_AuthPage .mx_AuthPage_modal,
.mx_AuthPage > .mx_AuthPage_modal {
  position: relative;
  z-index: 1;
}

/*
 * Карточка auth (inline-стили Element): стекло, тень, скругление — единый силуэт для welcome/login/register.
 */
.mx_AuthPage .mx_AuthPage_modalContent {
  border-radius: 20px !important;
  /* Почти непрозрачный фон — текст не смешивается с градиентом за карточкой (особенно на мобильных) */
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0f172a !important;
  backdrop-filter: blur(22px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.45) !important;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 20px 40px -14px rgba(15, 118, 110, 0.28) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
}

.mx_AuthPage .mx_AuthPage_modalContent h1,
.mx_AuthPage .mx_AuthPage_modalContent h2,
.mx_AuthPage .mx_AuthPage_modalContent .mx_Heading,
.mx_AuthPage .mx_AuthPage_modalContent [class*="Header_title"] {
  color: #0f172a !important;
}

/* Не использовать [class*="secondary"] — совпадает с mx_ButtonKind_secondary на кнопках → бледный текст на светлом фоне */
.mx_AuthPage .mx_AuthPage_modalContent .mx_secondary:not(.mx_ButtonParent):not(.mx_AccessibleButton),
.mx_AuthPage .mx_Register_mainContent .mx_AuthBody > p {
  color: #475569 !important;
}

.mx_AuthPage .mx_AuthPage_modalContent label,
.mx_AuthPage .mx_AuthPage_modalContent [class*="Field_label"] {
  color: #334155 !important;
}

.mx_AuthFooter {
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  opacity: 1 !important;
  padding: 16px 12px 20px !important;
}

.mx_AuthFooter a:link,
.mx_AuthFooter a:hover,
.mx_AuthFooter a:visited {
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 18px !important;
  text-decoration: none !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

.mx_AuthFooter a:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Подвал входа: вместо «Powered by Matrix» — ссылки auth_footer_links (element-config.json) */
.mx_AuthFooter a[href="https://matrix.org"] {
  display: none !important;
}

/*
 * Welcome (#/welcome): первый ряд — «Войти» и «Создать учётную запись» вертикально.
 * Штатный welcome.html задаёт .mx_ButtonRow как flex-row (колонка только при max-width: 480px).
 * Селекторы: apps/web/res/welcome.html (element-hq/element-web).
 */
.mx_Welcome .mx_ButtonGroup > .mx_ButtonRow:first-child {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
}

.mx_Welcome .mx_ButtonGroup > .mx_ButtonRow:first-child > * {
  margin: 0 !important;
}

.mx_Welcome .mx_ButtonGroup > .mx_ButtonRow:first-child .mx_ButtonParent {
  width: min(100%, 280px) !important;
  box-sizing: border-box;
}

/* welcome.html добавляет ::after "!" к заголовку — при тексте «Добро пожаловать!» получалось «!!» */
.mx_Welcome .mx_Header_title::after {
  content: none !important;
}

.mx_Welcome .mx_Parent {
  max-width: 440px;
  padding: 28px 32px 24px !important;
}

.mx_Welcome .mx_Header_title {
  font-size: clamp(1.375rem, 3.8vw, 1.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #1e293b !important;
  margin: 16px 0 0 !important;
  line-height: 1.22 !important;
}

.mx_Welcome .mx_Header_subtitle {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: #64748b !important;
  margin: 10px 0 0 !important;
  max-width: 26em;
}

.mx_Welcome .mx_Logo {
  height: 56px !important;
  filter: drop-shadow(0 4px 14px rgba(15, 118, 110, 0.28));
}

.mx_Welcome .mx_ButtonGroup {
  margin-top: 22px !important;
}

.mx_Welcome .mx_ButtonParent {
  border-radius: 14px !important;
  min-height: 48px !important;
  padding: 12px 22px !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease !important;
}

.mx_Welcome .mx_ButtonParent:hover {
  transform: translateY(-2px);
}

.mx_Welcome .mx_ButtonParent:focus-visible {
  outline: 3px solid rgba(13, 148, 136, 0.45) !important;
  outline-offset: 2px !important;
}

.mx_Welcome .mx_ButtonSignIn {
  background: linear-gradient(165deg, #0d9488 0%, #0f766e 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 24px -8px rgba(15, 118, 110, 0.55) !important;
}

.mx_Welcome .mx_ButtonSignIn:hover {
  box-shadow: 0 14px 32px -10px rgba(15, 118, 110, 0.62) !important;
  filter: brightness(1.04);
}

.mx_Welcome .mx_ButtonCreateAccount {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #0f766e !important;
  border: 2px solid rgba(13, 148, 136, 0.5) !important;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.1) !important;
}

.mx_Welcome .mx_ButtonCreateAccount:hover {
  background: #ffffff !important;
  border-color: #0f766e !important;
}

/* Подпись «Создать учётную запись»: тёмный бирюзовый; WebKit иначе рисует бледный текст на светлой кнопке */
.mx_Welcome .mx_ButtonCreateAccount,
.mx_Welcome .mx_ButtonCreateAccount *,
.mx_Welcome .mx_ButtonParent.mx_ButtonCreateAccount,
.mx_Welcome .mx_ButtonParent.mx_ButtonCreateAccount *,
.mx_Welcome .mx_ButtonGroup a[href*="/register"],
.mx_Welcome .mx_ButtonGroup a[href*="/register"] *,
.mx_Welcome .mx_ButtonGroup a[href*="#/register"],
.mx_Welcome .mx_ButtonGroup a[href*="#/register"] * {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  opacity: 1 !important;
}

.mx_Welcome .mx_ButtonCreateAccount:hover,
.mx_Welcome .mx_ButtonCreateAccount:hover *,
.mx_Welcome .mx_ButtonParent.mx_ButtonCreateAccount:hover,
.mx_Welcome .mx_ButtonParent.mx_ButtonCreateAccount:hover * {
  color: #134e4a !important;
  -webkit-text-fill-color: #134e4a !important;
}

/*
 * Регистрация (#/register): убрать блок «Ваша учётная запись обслуживается», домен и «Редактировать».
 * В Element Web 1.12.x disable_custom_urls скрывает только Edit/Help; заголовок и имя сервера остаются.
 * Селектор только для mx_Register_mainContent.
 */
.mx_Register_mainContent .mx_ServerPicker {
  display: none !important;
}

/*
 * Вход (#/login): тот же предел SDK — без CSS остаются «Домашний сервер» и server_name.
 * На экране входа ServerPicker — прямой потомок mx_AuthBody (в Register он внутри mx_Register_mainContent).
 */
.mx_AuthBody > .mx_ServerPicker {
  display: none !important;
}

/*
 * Вход OIDC (#/login): «Продолжить» и «Создать учётную запись» столбцом; вместо текста «Впервые здесь? …»
 * — только кнопка регистрации в том же силуэте, что и «Продолжить», второй цвет (outline teal).
 * Экран входа: .mx_AuthBody без .mx_AuthBody_flex; регистрация (#/register) использует .mx_AuthBody_flex — не трогаем.
 * Версия правки: 2026-03-26.
 */
.mx_AuthBody:not(.mx_AuthBody_flex) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.mx_AuthBody:not(.mx_AuthBody_flex) > .mx_Login_fullWidthButton {
  margin-bottom: 0 !important;
}

.mx_AuthBody:not(.mx_AuthBody_flex) .mx_AuthBody_changeFlow {
  width: 100% !important;
  margin: 0 !important;
}

/* Убрать подпись «Впервые здесь?» — остаётся только интерактив «Создать учётную запись» */
.mx_AuthBody:not(.mx_AuthBody_flex) .mx_AuthBody_changeFlow > span {
  visibility: hidden !important;
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
}

.mx_AuthBody:not(.mx_AuthBody_flex)
  .mx_AuthBody_changeFlow
  .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline {
  visibility: visible !important;
  font-size: 15px !important;
  line-height: 22.5px !important;
  font-weight: 600 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 36px !important;
  padding: 4px 20px !important;
  border-radius: 9999px !important;
  text-align: center !important;
  margin: 0 !important;
  cursor: pointer !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  border: 2px solid #0d9488 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.mx_AuthBody:not(.mx_AuthBody_flex)
  .mx_AuthBody_changeFlow
  .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline:hover {
  background-color: #ffffff !important;
  border-color: #0f766e !important;
  color: #134e4a !important;
}

.mx_AuthBody:not(.mx_AuthBody_flex)
  .mx_AuthBody_changeFlow
  .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline:focus-visible {
  outline: 2px solid #0d9488 !important;
  outline-offset: 2px !important;
}

.mx_AuthBody:not(.mx_AuthBody_flex)
  .mx_AuthBody_changeFlow
  .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline
  * {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
}

/*
 * Поля форм: светлая заливка и тёмный текст (иначе в тёмной теме ОС — «чёрные» поля).
 */
.mx_AuthPage input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.mx_AuthPage textarea,
.mx_AuthPage select {
  border-radius: 10px !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
  color-scheme: light !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease !important;
}

.mx_AuthPage input::placeholder,
.mx_AuthPage textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

.mx_AuthPage input:-webkit-autofill,
.mx_AuthPage input:-webkit-autofill:hover,
.mx_AuthPage input:-webkit-autofill:focus,
.mx_AuthPage textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
}

.mx_AuthPage input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible,
.mx_AuthPage textarea:focus-visible {
  outline: none !important;
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22) !important;
}

.mx_AuthPage .mx_AccessibleButton_kind_primary {
  border-radius: 12px !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

.mx_AuthPage .mx_AccessibleButton_kind_primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(15, 118, 110, 0.45) !important;
}

/*
 * Подтверждение устройства (Complete Security / encryption, Element Web 1.12.x):
 * скрыть блок со ссылкой «Узнать больше» на element.io (SetupEncryptionBody → ExternalLink).
 */
.mx_SetupEncryptionBody .mx_EncryptionCard_emphasisedContent > span:has(> a[href*="element.io/help#encryption-device-verification"]) {
  display: none !important;
}

/*
 * Адаптив и доступность: телефоны, планшеты, ландшафт, вырезы, WCAG-подобные режимы ОС.
 */
@media (max-width: 480px) {
  .mx_AuthPage .mx_AuthPage_modalContent {
    border-radius: 16px !important;
    /* На узком экране — полностью белая карточка для максимального контраста текста */
    background: #ffffff !important;
  }

  .mx_Welcome .mx_Parent {
    padding: 20px 18px 20px !important;
    max-width: min(440px, calc(100vw - 24px));
  }

  .mx_Welcome .mx_Header_subtitle {
    color: #475569 !important;
  }

  .mx_AuthFooter {
    padding: 12px 10px max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .mx_AuthFooter a:link,
  .mx_AuthFooter a:hover,
  .mx_AuthFooter a:visited {
    margin: 0 10px !important;
  }

  /* Меньше «шума» фона на маленьком экране */
  .mx_AuthPage {
    background-size: 300% 300% !important;
  }
}

@media (max-width: 380px) {
  .mx_Welcome .mx_Header_title {
    font-size: clamp(1.2rem, 5.5vw, 1.55rem) !important;
  }

  .mx_Welcome .mx_Header_subtitle {
    font-size: 14px !important;
  }
}

/* Ландшафт / короткий экран: компактнее welcome */
@media (max-height: 520px) and (orientation: landscape) {
  .mx_Welcome .mx_Parent {
    padding: 14px 18px 14px !important;
  }

  .mx_Welcome .mx_Logo {
    height: 44px !important;
  }

  .mx_Welcome .mx_ButtonGroup {
    margin-top: 14px !important;
  }
}

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

  .mx_AuthPage::before,
  .mx_AuthPage::after,
  .mx_AuthPage.mx_AuthPage_branded::before,
  .mx_AuthPage.mx_AuthPage_branded::after {
    animation: none !important;
  }

  .mx_Welcome .mx_ButtonParent:hover {
    transform: none !important;
  }

  .mx_AuthPage .mx_AccessibleButton_kind_primary:hover {
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  .mx_AuthPage .mx_AuthPage_modalContent {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.28) !important;
    box-shadow:
      0 1px 0 rgba(15, 23, 42, 0.08),
      0 12px 28px -8px rgba(15, 118, 110, 0.35) !important;
  }

  .mx_Welcome .mx_Header_subtitle {
    color: #475569 !important;
  }
}