/* ================================================================
   PREMIUM SKIN for Element Web v1.12+
   Верстка заточена под живой DOM с messenger.newtechcompany.ru
   ================================================================ */

html, body {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Inter, Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ===========================================================
   AURORA BACKDROP (auth + session-lock)
   =========================================================== */
.mx_AuthPage,
.mx_ConfirmSessionLockTheftView {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(139, 92, 246, 0.28), transparent 55%),
    radial-gradient(1000px 600px at 110% 110%, rgba(236, 72, 153, 0.22), transparent 55%),
    radial-gradient(800px 500px at 50% 50%, rgba(59, 130, 246, 0.10), transparent 60%),
    linear-gradient(135deg, #0b1020 0%, #1a1440 40%, #0b1020 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: auto !important;
  position: relative !important;
}

/* Floating orbs */
.mx_AuthPage::before,
.mx_AuthPage::after,
.mx_ConfirmSessionLockTheftView::before,
.mx_ConfirmSessionLockTheftView::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: premium-float 22s ease-in-out infinite;
}
.mx_AuthPage::before,
.mx_ConfirmSessionLockTheftView::before {
  width: 560px; height: 560px;
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
  top: -220px; left: -180px;
}
.mx_AuthPage::after,
.mx_ConfirmSessionLockTheftView::after {
  width: 460px; height: 460px;
  background: radial-gradient(circle, #ec4899 0%, transparent 70%);
  bottom: -180px; right: -140px;
  animation-delay: -11s;
}
@keyframes premium-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(40px,-30px,0) scale(1.08); }
  66%      { transform: translate3d(-30px,25px,0) scale(0.95); }
}

/* ===========================================================
   MODAL (glass card). В v1.12 это flex-row с двумя колонками.
   Перестраиваем в одну вертикальную колонку.
   =========================================================== */
.mx_AuthPage_modal,
.mx_AuthPage_modal.mx_AuthPage_modal_withBlur {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(15, 17, 40, 0.72) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(139, 92, 246, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  padding: 0 !important;
  max-width: 520px !important;          /* было 440px, русский текст не помещался */
  width: min(92vw, 520px) !important;
  margin: 0 auto !important;
  overflow: visible !important;         /* было hidden — обрезало текст в верификации */
  display: flex !important;
  flex-direction: column !important;
  animation: premium-in 0.65s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes premium-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Внутренний блюр-слой Element'а убираем — у нас свой блюр */
.mx_AuthPage_modalBlur {
  display: none !important;
}

/* Content контейнер — тоже column */
.mx_AuthPage_modalContent {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  padding: 36px 32px 30px !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0 !important;
  overflow: visible !important;        /* было hidden — обрезало длинный русский текст */
}

/* Complete-Security (верификация устройства) использует тот же AuthPage
   контейнер, но с ДРУГИМ контентом. Длинные русские фразы не влезали. */
.mx_CompleteSecurity,
.mx_CompleteSecurity_body,
.mx_CompleteSecurityBody,
.mx_CompleteSecurity_actionRow {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
/* Заголовок и текст верификации — позволяем переноситься */
.mx_CompleteSecurity h1,
.mx_CompleteSecurity h2,
.mx_CompleteSecurity p {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Register-специфичные контейнеры — тоже ограничиваем и убираем min-height */
.mx_Register_mainContent,
.mx_Register_footerActions,
.mx_AuthBody_flex {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  flex: 0 1 auto !important;
}
.mx_Register_footerActions {
  margin-top: 16px !important;
  border: 0 !important;                 /* убираем двойной разделитель */
  padding-top: 0 !important;
}

/* ===========================================================
   FORM ROWS — унифицированная вертикальная сетка полей
   Стек: row1 (username) → row2 (password+confirm) → row3 (...)
   Каждое поле и каждая строка разделены ровно 12px.
   =========================================================== */
.mx_AuthBody_fieldRow {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;               /* zazor mezhdu polyami vnutri stroki */
  width: 100% !important;
  margin: 0 0 12px 0 !important;      /* zazor mezhdu strokami */
  padding: 0 !important;
}
/* Последняя строка без нижнего margin — дальше идёт кнопка */
.mx_AuthBody_fieldRow:last-of-type,
.mx_AuthBody_fieldRow:empty {
  margin-bottom: 0 !important;
}
/* Пустая строка не занимает высоту */
.mx_AuthBody_fieldRow:empty {
  display: none !important;
}

.mx_AuthBody_fieldRow > .mx_Field,
.mx_AuthBody_fieldRow > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 !important;               /* все margins в ряду обнулены, spacing через gap */
}

/* Password strength meter (Element показывает силу пароля под полем) */
.mx_PassphraseField { position: relative !important; }
.mx_PassphraseField_progressBar,
.mx_PassphraseField progress,
.mx_PassphraseField [role="progressbar"] {
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  border-radius: 100px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  margin-top: 6px !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
}
.mx_PassphraseField_progressBar::-webkit-progress-bar,
.mx_PassphraseField progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 100px !important;
}
.mx_PassphraseField_progressBar::-webkit-progress-value,
.mx_PassphraseField progress::-webkit-progress-value {
  background: linear-gradient(90deg, #f87171 0%, #fbbf24 40%, #8b5cf6 70%, #22c55e 100%) !important;
  border-radius: 100px !important;
  transition: all 0.25s ease;
}
.mx_PassphraseField_progressBar::-moz-progress-bar,
.mx_PassphraseField progress::-moz-progress-bar {
  background: linear-gradient(90deg, #f87171 0%, #fbbf24 40%, #8b5cf6 70%, #22c55e 100%) !important;
  border-radius: 100px !important;
}
/* Текст-подсказка про пароль */
.mx_PassphraseField_complexity,
.mx_PassphraseField_warning {
  color: #94a3b8 !important;
  font-size: 12px !important;
  margin-top: 6px !important;
  padding: 0 4px !important;
  line-height: 1.4 !important;
}

/* ===========================================================
   HEADER — в v1.12 column с логотипом и (иногда) языком внизу
   Центрируем, уменьшаем логотип
   =========================================================== */
.mx_AuthHeader {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

.mx_AuthHeader_logo,
.mx_AuthHeaderLogo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
  box-shadow: 0 10px 24px -6px rgba(139, 92, 246, 0.5) !important;
  overflow: hidden !important;
  position: relative !important;
}
/* Прячем дефолтную svg/img Element'а, рисуем свою иконку через ::after */
.mx_AuthHeader_logo > img,
.mx_AuthHeaderLogo > img,
.mx_AuthHeader_logo > svg,
.mx_AuthHeaderLogo > svg {
  display: none !important;
}
.mx_AuthHeader_logo::after,
.mx_AuthHeaderLogo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px 32px;
}

/* Язык на странице логина не нужен — в Settings есть */
.mx_AuthBody_language,
.mx_AuthHeader .mx_AuthBody_language,
.mx_LanguageDropdown,
.mx_AuthHeader_language {
  display: none !important;
}

/* ===========================================================
   BODY — форма
   =========================================================== */
.mx_AuthBody {
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  color: #cbd5e1 !important;
  background: transparent !important;
  padding: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Заголовок "Войти" / "Создать учётную запись" */
.mx_AuthBody h1,
.mx_AuthBody h2 {
  color: #f8fafc !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  background: linear-gradient(135deg, #f8fafc 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtitle: пристраивается сразу после h1/h2 через ::after */
.mx_AuthBody h1::after,
.mx_AuthBody h2::after {
  content: 'messenger.newtechcompany.ru';
  display: block;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #64748b;
  -webkit-text-fill-color: #64748b;
  background: none;
  text-transform: none;
  opacity: 0.8;
}

.mx_AuthBody p,
.mx_AuthBody .mx_AuthBody_text {
  color: #94a3b8 !important;
}

/* Убираем все штатные разделители кроме одного */
.mx_AuthBody hr,
.mx_AuthBody_flex > hr { display: none !important; }
.mx_Register_footerActions,
.mx_AuthBody_flex > .mx_Register_footerActions {
  border: 0 !important;
  padding-top: 0 !important;
}
/* Единственный видимый разделитель — перед changeFlow */
.mx_AuthBody_changeFlow {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 18px !important;
}

/* ===========================================================
   FIELDS — у Element v1.12 label плавает сверху поля
   Добавляем лёгкое entrance-animation и иконки через background-image
   =========================================================== */
/* Базовый look полей — брендовая тема, применяется везде */
.mx_Field {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  align-items: stretch !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Фиксированную высоту 54px — ТОЛЬКО для auth и session-lock.
   В Settings/Dialogs/RoomSettings поля могут быть textareas или inline,
   не хотим их в 54px зажимать. */
.mx_AuthBody .mx_Field,
.mx_ConfirmSessionLockTheftView_body .mx_Field {
  height: 54px !important;
  margin: 0 0 12px 0 !important;
  animation: field-in 0.5s cubic-bezier(0.2, 0, 0, 1) both;
}
.mx_AuthBody .mx_AuthBody_fieldRow .mx_Field { margin-bottom: 0 !important; }

/* Textarea внутри Field (например room topic, bio) — высота по контенту */
.mx_Field.mx_Field_textarea,
.mx_Field:has(textarea) {
  height: auto !important;
  min-height: 54px !important;
}
.mx_Field:nth-of-type(1) { animation-delay: 0.05s; }
.mx_Field:nth-of-type(2) { animation-delay: 0.10s; }
.mx_Field:nth-of-type(3) { animation-delay: 0.15s; }
.mx_Field:nth-of-type(4) { animation-delay: 0.20s; }
@keyframes field-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mx_Field:hover {
  border-color: rgba(139, 92, 246, 0.35) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-1px);
}
.mx_Field:focus-within {
  border-color: #8b5cf6 !important;
  background: rgba(139, 92, 246, 0.08) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16) !important;
  transform: translateY(-1px);
}
.mx_Field input,
.mx_Field textarea,
.mx_Field select {
  color: #f1f5f9 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  margin: 0 !important;
  width: 100% !important;
  outline: none !important;
  caret-color: #c4b5fd !important;
  box-sizing: border-box !important;
}

/* В auth 54px-поле input занимает всю высоту */
.mx_AuthBody .mx_Field input,
.mx_ConfirmSessionLockTheftView_body .mx_Field input {
  height: 100% !important;
  padding: 0 18px !important;
  line-height: normal !important;
}

/* Textarea — растягивается по контенту */
.mx_Field textarea {
  min-height: 54px !important;
  padding: 14px 16px !important;
  resize: vertical !important;
  line-height: 1.4 !important;
}
.mx_Field input::placeholder { color: #64748b !important; opacity: 1 !important; }
.mx_Field input:-webkit-autofill {
  -webkit-text-fill-color: #f1f5f9 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(139, 92, 246, 0.06) inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Лейблы Element'а — полностью убираем (используем placeholder).
   display: none foolproof вариант против двойных надписей. */
.mx_Field > label,
.mx_Field label:not(.mx_Checkbox *):not(.mx_Toggle *) {
  display: none !important;
}

/* ===========================================================
   BUTTONS — gradient, без псевдо-оверлеев.
   Брендовый gradient применяем ВЕЗДЕ (brand consistency).
   Но width: 100% — только для auth-формы (mx_Login_submit).
   В остальных местах Element сам управляет шириной.
   =========================================================== */
.mx_Login_submit,
input.mx_Login_submit,
button.mx_Login_submit,
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 12px !important;
  padding: 12px 22px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1),
              box-shadow 0.2s ease,
              filter 0.18s ease !important;
  box-shadow:
    0 6px 16px 0 rgba(139, 92, 246, 0.38),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22) !important;
  position: relative;
}
/* Auth submit — full-width и чуть больше; остальные primary — auto width */
.mx_Login_submit,
input.mx_Login_submit,
button.mx_Login_submit {
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  margin: 14px 0 0 !important;
  display: flex !important;
}
.mx_Login_submit::before,
.mx_Login_submit::after,
.mx_AccessibleButton.mx_AccessibleButton_kind_primary::before,
.mx_AccessibleButton.mx_AccessibleButton_kind_primary::after {
  content: none !important;            /* убираем любые псевдо-оверлеи */
}

.mx_Login_submit:hover,
.mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px 0 rgba(139, 92, 246, 0.58),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35) !important;
  filter: saturate(1.08);
}
.mx_Login_submit:active,
.mx_AccessibleButton.mx_AccessibleButton_kind_primary:active {
  transform: translateY(0) scale(0.985);
}
.mx_Login_submit:disabled,
.mx_AccessibleButton.mx_AccessibleButton_kind_primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  filter: grayscale(0.3);
}

/* Link-buttons: брендовый цвет ВЕЗДЕ, но размер/отступы
   применяем только в auth (в остальных местах Element сам решает). */
.mx_AccessibleButton_kind_link,
.mx_AccessibleButton_kind_link_inline,
.mx_AccessibleButton_kind_link_sm {
  color: #c4b5fd !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 0 !important;
}
.mx_AccessibleButton_kind_link:hover,
.mx_AccessibleButton_kind_link_inline:hover,
.mx_AccessibleButton_kind_link_sm:hover { color: #e9d5ff !important; }

/* Специфично для auth — "Забыли пароль?" */
.mx_Login_forgot {
  color: #c4b5fd !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-block;
  padding: 4px 2px !important;
  margin: -4px 0 10px !important;
  text-align: center !important;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
}
.mx_Login_forgot:hover { color: #e9d5ff !important; }

/* "Впервые здесь? Создать учётную запись" */
.mx_AuthBody_changeFlow {
  text-align: center !important;
  margin-top: 20px !important;
  padding-top: 18px !important;
  color: #94a3b8 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 14px !important;
  width: 100% !important;
}
.mx_AuthBody_changeFlow a,
.mx_AuthBody_changeFlow .mx_AccessibleButton {
  color: #c4b5fd !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 0 0 0 4px !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  display: inline !important;
  font-size: 14px !important;
}

/* Language dropdown — переносим вниз, компактно */
.mx_AuthBody_language,
.mx_LanguageDropdown {
  margin: 16px auto 0 !important;
  width: auto !important;
  max-width: 180px !important;
}
.mx_Dropdown,
.mx_Dropdown_input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
}
.mx_Dropdown_input {
  padding: 8px 12px !important;
}
.mx_Dropdown_menu {
  background: #161a2e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
}
.mx_Dropdown_option { color: #cbd5e1 !important; padding: 8px 12px !important; }
.mx_Dropdown_option:hover,
.mx_Dropdown_option_highlight { background: rgba(139, 92, 246, 0.2) !important; }

/* Spinner */
.mx_Spinner circle { stroke: #a78bfa !important; }

/* Errors */
.mx_Login_error,
.mx_Field_validation_error,
.mx_ErrorMessage {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
}

/* Scrollbar */
.mx_AuthPage_modalBlock,
.mx_AuthPage_modalContent {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

/* ===========================================================
   HIDE
   =========================================================== */
.mx_AuthFooter,
.mx_ServerPicker,
.mx_AuthBody_serverDetails { display: none !important; }

/* ===========================================================
   SESSION-LOCK VIEW — красим в ту же карточку
   =========================================================== */
.mx_ConfirmSessionLockTheftView_body {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(15, 17, 40, 0.72) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(139, 92, 246, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
  padding: 44px 36px !important;
  max-width: 440px !important;
  width: 92vw !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  animation: premium-in 0.65s cubic-bezier(0.2, 0, 0, 1);
}
.mx_ConfirmSessionLockTheftView_body > * { max-width: 100%; }
.mx_ConfirmSessionLockTheftView_body > p {
  margin: 0 0 24px !important;
  color: #cbd5e1 !important;
}

/* ===========================================================
   WELCOME wrapper
   =========================================================== */
.mx_Welcome, .mx_EmbeddedPage { background: transparent !important; }

/* ===========================================================
   MOBILE / ADAPTIVE
   Breakpoints:
     <= 768px — tablet
     <= 520px — phone
     <= 380px — small phone (iPhone SE)
     landscape phone — компактнее
   =========================================================== */

@media (max-width: 768px) {
  .mx_AuthPage {
    padding: 16px !important;
    align-items: flex-start !important;
    padding-top: 40px !important;
  }
  .mx_AuthPage_modal {
    max-width: 420px !important;
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .mx_AuthPage {
    padding: 0 !important;
    padding-top: 24px !important;
    align-items: flex-start !important;
  }
  .mx_AuthPage_modal {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    margin: 0 10px !important;
    border-radius: 20px !important;
  }
  .mx_AuthPage_modalContent,
  .mx_ConfirmSessionLockTheftView_body {
    padding: 28px 20px 24px !important;
  }
  .mx_AuthBody h1,
  .mx_AuthBody h2 {
    font-size: 24px !important;
    margin-bottom: 4px !important;
  }
  .mx_AuthBody h1::after,
  .mx_AuthBody h2::after {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }
  /* На мобильном поля в AUTH уменьшаем до 52px (иначе занимают много места),
     Settings/Dialog поля не трогаем. */
  .mx_AuthBody .mx_Field,
  .mx_ConfirmSessionLockTheftView_body .mx_Field {
    height: 52px !important;
    border-radius: 12px !important;
  }
  .mx_Field input {
    font-size: 16px !important;           /* >=16px на iOS чтобы не зумило при фокусе */
  }
  .mx_AuthBody .mx_Field input,
  .mx_ConfirmSessionLockTheftView_body .mx_Field input {
    padding: 0 16px !important;
  }
  .mx_Login_submit {
    padding: 14px 20px !important;
    min-height: 50px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
  .mx_AuthHeader_logo,
  .mx_AuthHeaderLogo {
    width: 56px !important; height: 56px !important;
    margin-bottom: 10px !important;
  }
  .mx_AuthHeader_logo::after,
  .mx_AuthHeaderLogo::after { background-size: 28px 28px !important; }
  .mx_AuthBody_changeFlow {
    font-size: 13px !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
  }
  /* ауро-орбы слабее на мобильном чтобы не тормозить */
  .mx_AuthPage::before,
  .mx_AuthPage::after,
  .mx_ConfirmSessionLockTheftView::before,
  .mx_ConfirmSessionLockTheftView::after {
    filter: blur(70px) !important;
    opacity: 0.4 !important;
  }
}

@media (max-width: 380px) {
  .mx_AuthPage_modalContent,
  .mx_ConfirmSessionLockTheftView_body {
    padding: 24px 16px 20px !important;
  }
  .mx_AuthBody h1, .mx_AuthBody h2 { font-size: 22px !important; }
  .mx_AuthBody .mx_Field,
  .mx_ConfirmSessionLockTheftView_body .mx_Field { height: 50px !important; }
  .mx_Field input { font-size: 16px !important; padding: 0 14px !important; }
  .mx_Login_submit { min-height: 48px !important; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .mx_AuthPage { padding-top: 10px !important; }
  .mx_AuthPage_modalContent { padding: 20px 24px !important; }
  .mx_AuthBody h1 { font-size: 20px !important; margin-bottom: 2px !important; }
  .mx_AuthBody h1::after { margin-bottom: 12px !important; }
  .mx_AuthHeader { margin-bottom: 12px !important; }
  .mx_AuthHeader_logo {
    width: 48px !important; height: 48px !important;
    margin-bottom: 8px !important;
  }
  .mx_AuthBody .mx_Field,
  .mx_ConfirmSessionLockTheftView_body .mx_Field { height: 46px !important; }
  .mx_AuthBody_fieldRow { gap: 8px !important; margin-bottom: 8px !important; }
}

/* iOS safe-areas */
@supports (padding: max(0px)) {
  .mx_AuthPage {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-top: max(24px, env(safe-area-inset-top)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mx_AuthPage::before, .mx_AuthPage::after,
  .mx_ConfirmSessionLockTheftView::before, .mx_ConfirmSessionLockTheftView::after {
    animation: none !important;
  }
  .mx_AuthPage_modal, .mx_ConfirmSessionLockTheftView_body,
  .mx_Field { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ================================================================
   CHAT APP — MOBILE
   Стили для страницы после логина. Element делает narrow-layout
   автоматически, мы его полируем.
   ================================================================ */

/* Везде >= 16px font-size на input/textarea в мобильном чтобы iOS
   не зумил. Помимо auth-формы это ещё и composer сообщений. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea,
  .mx_BasicMessageComposer_input {
    font-size: 16px !important;
  }

  /* Прячем space-panel (иконки слева от комнат) на узком — лишняя колонка */
  .mx_SpacePanel {
    display: none !important;
  }

  /* Прячем правую панель (room info) на узком */
  .mx_RightPanel,
  .mx_RightPanel_ResizeWrapper {
    display: none !important;
  }

  /* Главный split: больше не 3 колонки, а 1 */
  .mx_MainSplit {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* LeftPanel на всю ширину когда он видимый */
  .mx_LeftPanel,
  .mx_LeftPanel_wrapper,
  .mx_LeftPanel_outerWrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  /* RoomView — на весь экран когда активный */
  .mx_RoomView,
  .mx_RoomView_wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Header комнаты — уменьшаем padding */
  .mx_RoomHeader {
    padding: 10px 12px !important;
    min-height: 54px !important;
  }

  /* Message composer — фиксированный внизу с safe-area */
  .mx_MessageComposer {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  .mx_MessageComposer_wrapper {
    margin: 0 !important;
  }

  /* Увеличиваем tap-targets у кнопок — минимум 44×44px */
  .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary):not(.mx_AccessibleButton_kind_link):not(.mx_AccessibleButton_kind_link_inline),
  .mx_MessageComposer_button,
  .mx_RoomHeader_button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Room list items — комфортная высота для пальца */
  .mx_RoomTile {
    padding: 8px 10px !important;
    min-height: 56px !important;
  }
  .mx_RoomTile_avatar {
    margin-right: 10px !important;
  }

  /* Timeline сообщений — больше воздуха */
  .mx_EventTile {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Меньше размер user menu avatar header */
  .mx_UserMenu {
    padding: 10px !important;
  }

  /* Прячем hover-only tooltips на тач-устройствах */
  .mx_Tooltip { display: none !important; }

  /* Menu-button в room tile не форсим видимым — на touch работает long-press. */
}

/* Hover-only эффекты (которые Element навешивает) убираем
   на touch-устройствах где hover = clicked-and-held. */
@media (hover: none) {
  /* Кнопки не должны мигать при touch */
  *:hover {
    transition: none !important;
  }
}

/* Очень узкий (< 400px) — ещё компактнее */
@media (max-width: 400px) {
  .mx_RoomTile {
    padding: 6px 8px !important;
    min-height: 52px !important;
  }
  .mx_RoomTile_title {
    font-size: 14px !important;
  }
  .mx_RoomHeader {
    padding: 8px 10px !important;
  }
  .mx_EventTile {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ================================================================
   GENERAL MOBILE POLISH
   ================================================================ */

/* iOS: тап-подсветка цвета бренда вместо голубого дефолта */
* {
  -webkit-tap-highlight-color: rgba(139, 92, 246, 0.25);
}

/* Scrollbars в chat views на Mac/Win */
.mx_RoomList_wrapper::-webkit-scrollbar,
.mx_ScrollPanel::-webkit-scrollbar {
  width: 8px;
}
.mx_RoomList_wrapper::-webkit-scrollbar-thumb,
.mx_ScrollPanel::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 4px;
}
.mx_RoomList_wrapper::-webkit-scrollbar-thumb:hover,
.mx_ScrollPanel::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* ================================================================
   ЭКРАНЫ CHAT APP — ДЕТАЛЬНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ
   (всё что после логина: rooms, settings, dialogs, composer)
   ================================================================ */

@media (max-width: 768px) {

  /* ---- 1. ROOT LAYOUT — убираем все фиксированные ширины ---- */
  html, body {
    overscroll-behavior: none;            /* не даём pull-to-refresh ломать UX */
    height: 100%;
    -webkit-text-size-adjust: 100%;
  }
  .mx_MatrixChat,
  .mx_MatrixChat_wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;             /* dynamic viewport для iOS Safari */
    min-height: 100dvh !important;
    width: 100% !important;
  }

  /* Resize-handles между панелями — не нужны на мобильном */
  .mx_ResizeHandle,
  .mx_ResizeHandle_horizontal,
  .mx_ResizeHandle_vertical {
    display: none !important;
  }

  /* ---- 2. ROOM LIST (left panel когда видимый) ---- */
  .mx_LeftPanel_wrapper {
    flex-direction: column !important;
    padding: 0 !important;
  }
  .mx_LeftPanel_wrapper--user {
    padding-top: env(safe-area-inset-top) !important;
  }

  /* Поиск вверху */
  .mx_RoomSearch,
  .mx_RoomSearch_minimized {
    margin: 8px 10px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .mx_RoomSearch_input {
    font-size: 16px !important;           /* iOS no-zoom */
  }

  /* RoomSublist header (категории: People, Rooms, Favorites) */
  .mx_RoomSublist_headerContainer {
    padding: 10px 14px 4px !important;
  }
  .mx_RoomSublist_headerText {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #94a3b8 !important;
    /* text-transform: uppercase убран — для Cyrillic выглядит агрессивно */
  }

  /* Room tile — full-width с хорошим touch target */
  .mx_RoomTile {
    padding: 10px 14px !important;
    min-height: 64px !important;
    border-radius: 0 !important;          /* на мобильном edge-to-edge */
    gap: 12px !important;
  }
  .mx_RoomTile_selected {
    background: rgba(139, 92, 246, 0.12) !important;
  }
  .mx_RoomTile_avatarContainer {
    flex-shrink: 0;
  }
  /* Scope к RoomTile, не задеваем аватары в header/dialogs/members */
  .mx_RoomTile .mx_BaseAvatar {
    width: 40px !important;
    height: 40px !important;
  }
  .mx_RoomTile_titleContainer {
    min-width: 0 !important;              /* чтобы text-overflow работал */
  }
  .mx_RoomTile_title {
    font-size: 15px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .mx_RoomTile_subtitle {
    font-size: 13px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Scope badge rules только к RoomTile — чтобы не зацепить Header/Space badges */
  .mx_RoomTile .mx_NotificationBadge {
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  /* ---- 3. ROOM HEADER (top bar в активной комнате) ---- */
  .mx_RoomHeader {
    display: flex !important;
    align-items: center !important;
    padding: 8px 8px !important;
    min-height: 56px !important;
    gap: 8px !important;
    background: rgba(15, 17, 40, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
    flex-shrink: 0 !important;
    /* position: sticky удалён — может ломать scroll-контейнер Element'а */
    z-index: 20 !important;
  }
  .mx_RoomHeader_backButton {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  .mx_RoomHeader_name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .mx_RoomHeader_nametext {
    font-size: 16px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .mx_RoomHeader_topic {
    font-size: 12px !important;
    color: #94a3b8 !important;
  }

  /* ---- 4. TIMELINE / СООБЩЕНИЯ ---- */
  .mx_RoomView_MessageList,
  .mx_ScrollPanel {
    padding: 0 !important;
  }
  .mx_EventTile {
    padding: 8px 12px !important;
    word-break: break-word !important;
  }
  /* Текст сообщения */
  .mx_EventTile .mx_MTextBody,
  .mx_EventTile_content {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  .mx_EventTile_avatar .mx_BaseAvatar {
    width: 32px !important;
    height: 32px !important;
  }
  .mx_EventTile_sender {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  /* ActionBar (реакции/reply/edit) на мобильном — показывается при
     focus-within (долгий тап = выделение) или когда сообщение selected */
  .mx_EventTile_actionBar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .mx_EventTile:focus-within .mx_EventTile_actionBar,
  .mx_EventTile.mx_EventTile_selected .mx_EventTile_actionBar,
  .mx_EventTile:active .mx_EventTile_actionBar {
    opacity: 1;
    pointer-events: auto;
  }
  /* Reply chain — сжимаем */
  .mx_ReplyChain { margin: 4px 0 !important; padding-left: 8px !important; }

  /* Image / video — не выходят за ширину */
  .mx_MImageBody_thumbnail,
  .mx_MVideoBody,
  .mx_MediaBody {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
  }

  /* ---- 5. MESSAGE COMPOSER ---- */
  /* Composer уже внизу в flex-column Element'а; не ставим sticky
     (ломает scrolling), просто украшаем и добавляем safe-area. */
  .mx_MessageComposer {
    background: rgba(15, 17, 40, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 8px 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    flex-shrink: 0 !important;
    z-index: 15;
  }
  .mx_MessageComposer_wrapper {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 4px !important;
    margin: 0 !important;
  }
  .mx_MessageComposer_wrapper:focus-within {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  }
  .mx_MessageComposer_row {
    align-items: flex-end !important;
  }
  .mx_BasicMessageComposer_input,
  .mx_MessageComposer_input {
    font-size: 16px !important;
    padding: 10px 12px !important;
    min-height: 40px !important;
    max-height: 140px !important;         /* не даём composer занять весь экран */
    color: #f1f5f9 !important;
  }
  .mx_MessageComposer_sendMessage,
  .mx_MessageComposer_button {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }
  /* Send-кнопка: брендовый градиент + SVG-стрелочка белая */
  .mx_MessageComposer_sendMessage {
    background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
    color: white !important;
    border-radius: 10px !important;
  }
  .mx_MessageComposer_sendMessage svg,
  .mx_MessageComposer_sendMessage svg * {
    fill: white !important;
    stroke: white !important;
  }

  /* ---- 6. DIALOGS ---- */
  /* Большие dialogs (Settings, Invite, CreateRoom, RoomSettings) — full-screen */
  .mx_UserSettingsDialog,
  .mx_RoomSettingsDialog,
  .mx_SpaceSettingsDialog,
  .mx_InviteDialog,
  .mx_CreateRoomDialog,
  .mx_Dialog.mx_SettingsDialog,
  .mx_Dialog_fixedWidth {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding: 16px !important;
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  /* Маленькие confirm/info dialogs — просто центрированы, не на весь экран */
  .mx_Dialog_wrapper {
    padding: 16px !important;
  }
  .mx_Dialog {
    width: 100% !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 32px) !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }
  .mx_Dialog_header {
    position: sticky;
    top: 0;
    background: inherit;
    padding-bottom: 12px !important;
    z-index: 1;
  }
  .mx_Dialog_title {
    font-size: 18px !important;
    font-weight: 700 !important;
  }
  .mx_Dialog_cancelButton {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .mx_Dialog_buttons {
    padding-top: 16px !important;
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .mx_Dialog_buttons button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  /* TabbedView в Settings — вертикальные табы в dropdown-стиле */
  .mx_TabbedView_tabsContainer {
    flex-direction: row !important;
    overflow-x: auto !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    padding: 6px 0 12px !important;
    scrollbar-width: none !important;
  }
  .mx_TabbedView_tabsContainer::-webkit-scrollbar { display: none; }
  .mx_TabbedView_tabLabel {
    white-space: nowrap !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
    border-radius: 100px !important;
  }

  /* ---- 7. USER MENU (bottom-left на desktop, на mobile part of LeftPanel) ---- */
  .mx_UserMenu {
    padding: 12px 14px !important;
    /* padding-top с env(safe-area-inset-top) УБРАН — UserMenu не вверху экрана */
  }
  .mx_UserMenu_name {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* ---- 8. CONTEXT MENUS — от центра, полная ширина ---- */
  .mx_ContextualMenu {
    max-width: calc(100vw - 24px) !important;
    min-width: 260px !important;
  }
  .mx_IconizedContextMenu_item,
  .mx_ContextualMenu_option {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  /* ---- 9. TOASTS (верхние уведомления) ---- */
  .mx_Toast_toastContainer {
    top: env(safe-area-inset-top, 0) !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }
  .mx_Toast {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  /* ---- 10. CALL VIEW (голос/видео overlay) ---- */
  .mx_CallView,
  .mx_LegacyCallView {
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* ---- 11. HOME PAGE (приветствие после логина без выбранной комнаты) ---- */
  .mx_HomePage {
    padding: 20px 16px !important;
    text-align: center;
  }
  .mx_HomePage_default_buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .mx_HomePage_button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* ---- 12. EMOJI PICKER, STICKER ---- */
  /* НЕ ломаем Element'овское позиционирование popup. Просто ограничиваем размер. */
  .mx_EmojiPicker,
  .mx_Stickerpack {
    max-width: calc(100vw - 16px) !important;
    max-height: 60dvh !important;
  }

  /* ---- 13. SPACES PANEL — если user всё же включит spaces ---- */
  /* Уже скрыли mx_SpacePanel выше, но если визит из space URL: */
  .mx_SpacePanel { display: none !important; }

  /* ---- 14. UPLOAD прогресс — сжимаем ---- */
  .mx_UploadBar {
    padding: 8px 12px !important;
  }

  /* ---- 15. READ RECEIPTS — сжимаем (но не скрываем) ---- */
  .mx_ReadReceiptGroup {
    transform: scale(0.85);
    transform-origin: right center;
  }

  /* ---- 16. PLACEHOLDER когда нет выбранной комнаты ---- */
  .mx_RoomView_empty,
  .mx_RoomView_messageListWrapper:empty {
    padding: 24px 16px !important;
  }
}

/* Совсем маленький экран (≤ 360px, iPhone SE) */
@media (max-width: 360px) {
  .mx_RoomTile { padding: 8px 10px !important; min-height: 58px !important; }
  .mx_BaseAvatar { width: 36px !important; height: 36px !important; }
  .mx_RoomTile_title { font-size: 14px !important; }
  .mx_RoomTile_subtitle { font-size: 12px !important; }
  .mx_RoomHeader_nametext { font-size: 15px !important; }
  .mx_EventTile { padding: 6px 10px !important; }
  .mx_EventTile_line { font-size: 14px !important; }
  .mx_MessageComposer { padding-left: 6px !important; padding-right: 6px !important; }
}

/* iPad и планшеты — Element сам делает нужный layout. Ничего не прячем. */

/* Landscape на телефоне — экономим вертикаль */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
  .mx_RoomHeader { min-height: 44px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
  .mx_MessageComposer { padding-top: 4px !important; padding-bottom: max(4px, env(safe-area-inset-bottom)) !important; }
  .mx_BasicMessageComposer_input { min-height: 32px !important; padding: 6px 10px !important; }
  .mx_RoomTile { min-height: 48px !important; padding: 6px 10px !important; }
}

/* ================================================================
   TOUCH-SPECIFIC
   Применяется к любым устройствам с coarse pointer (тач)
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Hover-only action bars на сообщениях не показываются никогда */
  .mx_EventTile_actionBar,
  .mx_RoomTile_menuButton_invisible {
    display: none !important;
  }
  /* Всё что на hover появлялось — либо visible, либо hidden */
  .mx_AccessibleButton { transition: none !important; }
  /* Отключаем tooltips полностью */
  .mx_Tooltip { display: none !important; }
}