/* Auto-generated from web/patches/mobile-patch.css — do not edit */
/* ForOur mobile shell — fluid layout, native-like (no pinch / double-tap zoom) */

html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* Без выделения в интерфейсе; в полях ввода — выделение и копирование */
html.forour-mobile,
html.forour-mobile body,
html.forour-mobile #matrixchat,
html.forour-mobile #matrixchat * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* #matrixchat * выше по специфичности, чем input — явно перебиваем для editable */
html.forour-mobile #matrixchat :is(
    input,
    textarea,
    select,
    [contenteditable]:not([contenteditable='false']),
    [role='searchbox'],
    [role='textbox'],
    .cm-editor,
    .cm-content,
    .mx_BasicMessageComposer,
    .mx_MessageComposer_input,
    .mx_Field input,
    .mx_Field textarea
  ),
html.forour-mobile #matrixchat :is(
    [contenteditable]:not([contenteditable='false']),
    [role='searchbox'],
    [role='textbox'],
    .cm-editor,
    .cm-content,
    .mx_BasicMessageComposer,
    .mx_MessageComposer_input,
    .mx_EditMessageComposer
  )
  *,
html.forour-mobile #mx_Dialog_StaticContainer :is(
    input,
    textarea,
    select,
    [contenteditable]:not([contenteditable='false']),
    [role='searchbox'],
    [role='textbox']
  ),
html.forour-mobile #mx_Dialog_StaticContainer :is(
    [contenteditable]:not([contenteditable='false']),
    [role='searchbox'],
    [role='textbox']
  )
  *,
html.forour-mobile #mx_Dialog_Container :is(
    input,
    textarea,
    select,
    [contenteditable]:not([contenteditable='false']),
    [role='searchbox'],
    [role='textbox']
  ),
html.forour-mobile #mx_Dialog_Container :is(
    [contenteditable]:not([contenteditable='false']),
    [role='searchbox'],
    [role='textbox']
  )
  *,
html.forour-mobile .mx_AuthBody :is(input, textarea, select),
html.forour-mobile .mx_SpotlightDialog :is(input, textarea, [role='searchbox']) {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

:root {
  --forour-safe-top: env(safe-area-inset-top, 0px);
  --forour-safe-right: env(safe-area-inset-right, 0px);
  --forour-safe-bottom: env(safe-area-inset-bottom, 0px);
  --forour-safe-left: env(safe-area-inset-left, 0px);
  --forour-bg: var(--cpd-color-bg-canvas-default, #101317);
  --forour-surface: var(--cpd-color-bg-subtle-primary, #15191f);
  --forour-surface-2: var(--cpd-color-bg-subtle-secondary, #20252d);
  --forour-border: var(--cpd-color-border-subtle-primary, #343b46);
  --forour-muted: var(--cpd-color-text-secondary, #8f99a8);
  --forour-touch: 34px;
  --forour-icon: 16px;
  --forour-avatar: 36px;
  --forour-pad: clamp(8px, 2vw, 12px);
  --forour-radius: 10px;
  --forour-text-xs: 0.625rem;
  --forour-text-sm: 0.75rem;
  --forour-text-md: 0.8125rem;
  --forour-text-lg: 0.9375rem;
}

html {
  font-size: clamp(12px, 2.75vw, 14px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body,
#matrixchat,
.mx_MatrixChat_wrapper {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.mx_MatrixChat {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

/* Prevent 100vw horizontal scroll (scrollbar width) */
html.forour-mobile .mx_LeftPanel,
html.forour-mobile .mx_RoomView,
html.forour-mobile .mx_RoomView_wrapper,
html.forour-mobile .mx_MainSplit,
html.forour-mobile [data-testid='left-panel'],
html.forour-mobile .mx_SpacePanel,
html.forour-mobile .mx_RoomList,
html.forour-mobile .mx_RoomListHeader,
html.forour-mobile .mx_SpaceTree,
html.forour-mobile .mx_LeftPanel_roomListWrapper {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Single-panel navigation — no desktop space rail on mobile */
html.forour-mobile .mx_SpacePanel {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

body.mobile-room-active [data-testid="left-panel"] {
  display: none !important;
}

body.mobile-room-active .mx_LeftPanel,
body.mobile-room-active .mx_LeftPanel_wrapper,
body.mobile-room-active .mx_LeftPanel_roomListWrapper,
body.mobile-room-active .mx_LeftPanel_roomListContainer,
body.mobile-room-active .mx_RoomListPanel,
body.mobile-room-active .mx_RoomList {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}

body.mobile-room-active [data-panel="true"]:not(:has([data-testid="left-panel"])):not([data-testid="left-panel"]) {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
}

body.mobile-room-active .mx_RoomView_wrapper,
body.mobile-room-active .mx_RoomView,
body.mobile-room-active .mx_RoomView_body,
body.mobile-room-active .mx_MainSplit_timeline {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.mobile-room-active .mx_RoomView,
body.mobile-room-active .mx_RoomView_body,
body.mobile-room-active .mx_MainSplit_timeline {
  flex-direction: column !important;
}

body.mobile-list-active [data-panel="true"]:not(:has([data-testid="left-panel"])):not([data-testid="left-panel"]) {
  display: none !important;
}

body.mobile-list-active .mx_RoomView_wrapper,
body.mobile-list-active .mx_RoomView,
body.mobile-list-active .mx_MainSplit_timeline {
  display: none !important;
}

body.mobile-list-active [data-testid="left-panel"],
body.mobile-list-active .mx_LeftPanel {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  margin: 0 !important;
  left: 0 !important;
}

html.forour-mobile .mx_MatrixChat,
html.forour-mobile .mx_MainSplit {
  width: 100% !important;
  max-width: 100% !important;
}

/* User menu slot in room list header row */
html.forour-mobile .forour-user-menu-slot {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin-right: 4px !important;
}

html.forour-mobile .forour-user-menu-slot .mx_UserMenu,
html.forour-mobile .forour-user-menu-slot .mx_UserMenu button {
  width: var(--forour-touch) !important;
  height: var(--forour-touch) !important;
  min-width: var(--forour-touch) !important;
  min-height: var(--forour-touch) !important;
  max-width: var(--forour-touch) !important;
  max-height: var(--forour-touch) !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.mx_Separator {
  display: none !important;
}

/* Space rail expand tab — desktop only; gray handle is useless on mobile */
html.forour-mobile .mx_SpacePanel_toggleCollapse {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Room list */
.mx_LeftPanel,
.mx_RoomListHeader,
.mx_RoomSublist {
  min-width: 0 !important;
  max-width: 100% !important;
}

.mx_RoomTile {
  min-height: 48px !important;
  margin: 2px var(--forour-pad) !important;
  border-radius: var(--forour-radius) !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.mx_RoomTile .mx_BaseAvatar,
.mx_RoomTile .mx_DecoratedRoomAvatar {
  width: var(--forour-avatar) !important;
  height: var(--forour-avatar) !important;
  min-width: var(--forour-avatar) !important;
  min-height: var(--forour-avatar) !important;
  flex-shrink: 0 !important;
}

.mx_RoomListHeader,
.mx_LeftPanel_filterContainer {
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: var(--forour-pad) !important;
  padding-right: var(--forour-pad) !important;
  box-sizing: border-box !important;
  gap: 4px !important;
}

/* Room list filters — hide desktop “expand filters” chip, scroll pills instead */
html.forour-mobile [class*='_roomListPrimaryFilters_'] {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 var(--forour-pad) !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}

html.forour-mobile [class*='_roomListPrimaryFilters_'] > [class*='_iconButton_'],
html.forour-mobile button[aria-label='Раскрыть список фильтров'] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.forour-mobile [class*='_roomListPrimaryFilters_'] [role='listbox'] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  gap: 8px !important;
  scrollbar-width: none;
}

html.forour-mobile [class*='_roomListPrimaryFilters_'] [role='listbox']::-webkit-scrollbar {
  display: none;
}

html.forour-mobile [class*='_roomListPrimaryFilters_'] [role='option'],
html.forour-mobile [class*='_chat-filter_'] {
  flex-shrink: 0 !important;
}

.mx_RoomListHeader .mx_AccessibleButton,
.mx_LeftPanel_filterContainer .mx_AccessibleButton,
.mx_SpaceButton,
.mx_QuickSettingsButton,
.mx_ThreadsActivityCentreButton {
  width: var(--forour-touch) !important;
  height: var(--forour-touch) !important;
  min-width: var(--forour-touch) !important;
  min-height: var(--forour-touch) !important;
  max-width: var(--forour-touch) !important;
  max-height: var(--forour-touch) !important;
  padding: 4px !important;
  flex: 0 0 var(--forour-touch) !important;
}

.mx_RoomListHeader svg,
.mx_LeftPanel_filterContainer svg,
.mx_SpaceButton svg,
.mx_QuickSettingsButton svg,
.mx_ThreadsActivityCentreButton svg {
  width: var(--forour-icon) !important;
  height: var(--forour-icon) !important;
  max-width: var(--forour-icon) !important;
  max-height: var(--forour-icon) !important;
}

.mx_RoomTile_title {
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}

.mx_RoomTile_subtitle,
.mx_RoomTile_messagePreview {
  font-size: 0.8rem !important;
}

/* Room view */
.mx_RoomHeader {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  max-height: 52px !important;
  padding: calc(2px + var(--forour-safe-top)) var(--forour-pad) 2px
    calc(var(--forour-pad) + var(--forour-safe-left)) !important;
  box-sizing: border-box !important;
  gap: 2px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.mx_RoomHeader_info {
  padding-right: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
}

.mx_RoomHeader_infoWrapper {
  gap: 4px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.mx_RoomHeader_name,
.mx_RoomHeader_heading {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: var(--forour-text-lg) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

/* Статус «В сети» / «Не в сети» / FacePile — компактно */
.mx_PresenceLabel,
.mx_RoomHeader .mx_PresenceLabel,
.mx_RoomHeader_subtitle,
.mx_RoomHeader .mx_TextualPresence {
  font-size: var(--forour-text-xs) !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  opacity: 0.72 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mx_RoomHeader .mx_FacePile {
  font-size: var(--forour-text-xs) !important;
  line-height: 1.1 !important;
  padding: 1px 5px !important;
  gap: 3px !important;
  max-width: min(38vw, 140px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
}

.mx_RoomHeader .mx_FacePile .mx_BaseAvatar,
.mx_RoomHeader .mx_BaseAvatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.mx_RoomHeader .mx_FacePile .mx_BaseAvatar {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

/* Online dot — fixed 10px, bottom-right of avatar (never use % — parent can be full header width) */
.mx_WithPresenceIndicator,
.mx_PresenceIndicator {
  position: relative !important;
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}

.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon,
.mx_PresenceIndicator .mx_WithPresenceIndicator_icon,
.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon[style],
.mx_PresenceIndicator .mx_WithPresenceIndicator_icon[style] {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon::before,
.mx_PresenceIndicator .mx_WithPresenceIndicator_icon::before {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

/* Room list — only presence decoration, not notification/call badges */
.mx_RoomAvatarView .mx_RoomAvatarView_PresenceDecoration {
  left: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
}

.mx_RoomHeader_buttons {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(46vw, 200px) !important;
  gap: 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mx_RoomHeader_buttons::-webkit-scrollbar {
  display: none;
}

.mx_RoomHeader_wrapper,
.mx_RoomHeader_info {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.mx_RoomView_body,
.mx_RoomView_messagePanel,
.mx_RoomView_messageListWrapper {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.mx_EventTile {
  max-width: 100% !important;
  padding-left: var(--forour-pad) !important;
  padding-right: var(--forour-pad) !important;
}

.mx_EventTile_line {
  max-width: 100% !important;
  margin-right: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

.mx_EventTile img,
.mx_EventTile video,
.mx_MImageBody img,
.mx_MVideoBody video {
  max-width: 100% !important;
  height: auto !important;
}

/* Composer */
.mx_MessageComposer {
  min-width: 0 !important;
  width: 100% !important;
  padding-bottom: var(--forour-safe-bottom) !important;
  box-sizing: border-box !important;
}

.mx_MessageComposer_row {
  padding: 6px var(--forour-pad) !important;
  gap: 6px !important;
}

.mx_MessageComposer_input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 1rem !important;
}

/* Header back (injected by JS) */
.forour-mobile-back {
  width: var(--forour-touch) !important;
  height: var(--forour-touch) !important;
  min-width: var(--forour-touch) !important;
  min-height: var(--forour-touch) !important;
  margin: 0 2px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--cpd-color-bg-subtle-secondary, rgba(0, 0, 0, 0.06)) !important;
  color: var(--cpd-color-text-primary, #2d3748) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Touch targets — small visuals, tappable area via padding */
.mx_RoomHeader_buttons .mx_AccessibleButton,
.mx_RoomHeader [class*='_icon-button_'],
.mx_MessageComposer_button,
.mx_MessageComposer_sendMessage,
html.forour-mobile [class*='_IconButton_'],
html.forour-mobile button[class*='_button_'][data-size] {
  width: var(--forour-touch) !important;
  height: var(--forour-touch) !important;
  min-width: var(--forour-touch) !important;
  min-height: var(--forour-touch) !important;
  max-width: var(--forour-touch) !important;
  max-height: var(--forour-touch) !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  flex: 0 0 var(--forour-touch) !important;
}

/* Empty state CTA — full-width labeled buttons, not icon-only squares */
html.forour-mobile [class*='_genericPlaceholder_'] button[class*='_button_'],
html.forour-mobile [class*='_defaultPlaceholder_'] button[class*='_button_'] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px 16px !important;
  flex: 1 1 auto !important;
  white-space: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html.forour-mobile [class*='_defaultPlaceholder_'] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 var(--forour-pad) !important;
  box-sizing: border-box !important;
}

html.forour-mobile [class*='_genericPlaceholder_'] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 24px var(--forour-pad) !important;
  box-sizing: border-box !important;
}

.mx_RoomHeader_buttons .mx_AccessibleButton svg,
.mx_RoomHeader_buttons .mx_AccessibleButton img,
.mx_MessageComposer_button svg,
.mx_MessageComposer_button img,
.mx_RoomHeader [class*='_icon_']:not([class*='WithPresenceIndicator_icon'])::before,
.mx_MessageComposer_button::before,
html.forour-mobile .mx_RoomHeader svg:not(.mx_WithPresenceIndicator svg),
html.forour-mobile .mx_MessageComposer_row svg,
html.forour-mobile .mx_LeftPanel svg:not(.mx_BaseAvatar svg):not(.mx_WithPresenceIndicator svg) {
  width: var(--forour-icon) !important;
  height: var(--forour-icon) !important;
  max-width: var(--forour-icon) !important;
  max-height: var(--forour-icon) !important;
  background-size: var(--forour-icon) var(--forour-icon) !important;
  mask-size: var(--forour-icon) var(--forour-icon) !important;
  -webkit-mask-size: var(--forour-icon) var(--forour-icon) !important;
}

/* Dialogs — full-screen settings, centered modals */
.mx_Dialog_wrapper {
  align-items: center !important;
  justify-content: center !important;
  padding: var(--forour-safe-top) var(--forour-safe-right) var(--forour-safe-bottom)
    var(--forour-safe-left) !important;
  box-sizing: border-box !important;
}

.mx_Dialog {
  width: calc(100% - 2 * var(--forour-pad)) !important;
  max-width: calc(100% - 2 * var(--forour-pad)) !important;
  min-width: 0 !important;
  max-height: calc(100dvh - var(--forour-safe-top) - var(--forour-safe-bottom) - 2 * var(--forour-pad)) !important;
  margin: 0 auto !important;
  border-radius: var(--forour-radius) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.forour-mobile #mx_Dialog_StaticContainer {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: var(--forour-safe-top) 0 var(--forour-safe-bottom) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 300 !important;
  display: flex !important;
  flex-direction: column !important;
  pointer-events: none !important;
}

html.forour-mobile #mx_Dialog_StaticContainer > div {
  pointer-events: auto !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_wrapper,
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_border,
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog,
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_fixedWidth,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsDialog,
html.forour-mobile #mx_Dialog_StaticContainer .mx_UserSettingsDialog {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_border {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--forour-bg) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsDialog_content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Base theme forces 580px tab panel — breaks phone settings/sessions */
.mx_UserSettingsDialog,
.mx_UserSettingsDialog.mx_SettingsDialog {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

.mx_UserSettingsDialog .mx_TabbedView,
.mx_SettingsDialog .mx_TabbedView {
  top: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab,
.mx_SettingsDialog .mx_TabbedView .mx_SettingsTab,
.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
.mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: var(--forour-pad) !important;
  padding-bottom: calc(72px + var(--forour-safe-bottom)) !important;
  box-sizing: border-box !important;
}

/* Settings tabs: fixed left rail breaks on phone → top scrollable bar */
html.forour-mobile .mx_UserSettingsDialog .mx_TabbedView,
html.forour-mobile .mx_SettingsDialog .mx_TabbedView,
html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  top: auto !important;
  left: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.forour-mobile .mx_TabbedView_tabsOnLeft {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

html.forour-mobile .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels,
html.forour-mobile .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabels {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  scrollbar-width: none;
}

html.forour-mobile .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels::-webkit-scrollbar {
  display: none;
}

html.forour-mobile .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel,
html.forour-mobile .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabPanel {
  margin-left: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html.forour-mobile .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel_text {
  display: inline !important;
}

html.forour-mobile .mx_TabbedView_tabLabel {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  padding: 6px 10px !important;
  min-height: 34px !important;
  border-radius: 9999px !important;
  font-size: var(--forour-text-md) !important;
  line-height: 1.15 !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel {
  padding-inline: 10px !important;
  justify-content: flex-start !important;
}

html.forour-mobile .mx_TabbedView_tabLabel_icon,
html.forour-mobile .mx_TabbedView_tabLabel svg,
html.forour-mobile .mx_TabbedView_tabLabel img {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

html.forour-mobile .mx_TabbedView_tabLabel_text {
  font-size: var(--forour-text-md) !important;
  line-height: 1.15 !important;
}

.mx_SettingsDialog,
.mx_SettingsDialog .mx_Dialog {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsDialog_content,
html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView,
html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView_tabPanel {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView_tabPanel {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView_tabPanel,
html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView_tabPanelContent,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab_sections {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_title {
  min-height: 46px !important;
  margin: 0 !important;
  padding: 10px 56px 6px 14px !important;
  box-sizing: border-box !important;
  font-size: 18px !important;
  line-height: 21px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_title *,
html.forour-mobile #mx_Dialog_StaticContainer h1.mx_Dialog_title,
html.forour-mobile #mx_Dialog_StaticContainer .mx_UserSettingsDialog_title {
  font-size: 18px !important;
  line-height: 21px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_cancelButton {
  position: fixed !important;
  top: calc(var(--forour-safe-top) + 8px) !important;
  right: calc(var(--forour-safe-right) + 8px) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 9999px !important;
  background: var(--forour-surface-2) !important;
  z-index: 4 !important;
}

.mx_SettingsDialog .mx_TabbedView {
  flex-direction: column !important;
  min-width: 0 !important;
}

.mx_ContextualMenu,
.mx_GenericDropdownMenu,
.mx_Autocomplete {
  max-width: calc(100vw - 2 * var(--forour-pad)) !important;
  box-sizing: border-box !important;
}

.mx_SpotlightDialog_wrapper .mx_Dialog {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Spotlight / global search — full screen on mobile */
html.forour-mobile .mx_SpotlightDialog_wrapper {
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: var(--forour-safe-top) 0 var(--forour-safe-bottom) !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_SpotlightDialog_wrapper .mx_Dialog,
html.forour-mobile .mx_SpotlightDialog {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: calc(100dvh - var(--forour-safe-top) - var(--forour-safe-bottom)) !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
html.forour-mobile .mx_SpotlightDialog [class*='_searchBox_'] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--forour-pad) !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
html.forour-mobile .mx_SpotlightDialog [class*='_searchBox_'] input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

html.forour-mobile .mx_SpotlightDialog .forour-spotlight-back {
  flex: 0 0 var(--forour-touch) !important;
}

.mx_SettingsDialog_content {
  padding: 8px 10px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
}

.mx_TabbedView {
  min-width: 0 !important;
  max-width: 100% !important;
}

.mx_TabbedView_tabPanel {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.mx_AccessibleButton {
  min-height: 36px !important;
}

/* Modal dialogs (#mx_Dialog_Container) — session verify, confirmations */
html.forour-mobile #mx_Dialog_Container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--forour-safe-top) var(--forour-pad) var(--forour-safe-bottom) !important;
  box-sizing: border-box !important;
}

html.forour-mobile #mx_Dialog_Container .mx_Dialog,
html.forour-mobile #mx_Dialog_Container .mx_Dialog_fixedWidth {
  width: calc(100% - 2 * var(--forour-pad)) !important;
  max-width: min(100%, 420px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html.forour-mobile #mx_Dialog_Container .mx_Dialog_body,
html.forour-mobile #mx_Dialog_Container .mx_Dialog_content,
html.forour-mobile .mx_SettingsDialog .mx_SettingsDialog_content {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.forour-mobile .mx_Dialog h1,
html.forour-mobile .mx_Dialog h2,
html.forour-mobile .mx_Dialog p,
html.forour-mobile .mx_Dialog .mx_Dialog_title,
html.forour-mobile .mx_SettingsDialog p,
html.forour-mobile .mx_SettingsDialog span,
html.forour-mobile .mx_SettingsDialog label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}

html.forour-mobile .mx_SettingsDialog .mx_Field label,
html.forour-mobile .mx_Dialog .mx_Field label,
html.forour-mobile .mx_Dialog label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.35 !important;
}

/* Settings toggles / «Позже» toast buttons — base theme caps label width */
html.forour-mobile .mx_SettingsFlag,
html.forour-mobile .mx_SettingsFlag_label,
html.forour-mobile .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.forour-mobile .mx_SettingsFlag {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 8px 12px !important;
}

html.forour-mobile .mx_SettingsDialog_toastContainer,
html.forour-mobile .mx_SettingsDialog_toastContainer .mx_ToastContainer {
  left: var(--forour-pad) !important;
  right: var(--forour-pad) !important;
  width: auto !important;
  max-width: calc(100% - 2 * var(--forour-pad)) !important;
}

html.forour-mobile .mx_SettingsDialog_toastContainer .mx_Toast_buttons,
html.forour-mobile .mx_SettingsDialog_toastContainer .mx_Toast_buttons button,
html.forour-mobile .mx_SettingsDialog_toastContainer .mx_Toast_buttons [class*='_button_'] {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
}

/* Toggle + label rows (шифрование / сессии) */
html.forour-mobile .mx_Dialog [class*='Toggle'],
html.forour-mobile .mx_SettingsDialog [class*='Toggle'],
html.forour-mobile .mx_Dialog label:has([role='switch']),
html.forour-mobile .mx_SettingsDialog label:has([role='switch']) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_Dialog [role='switch'],
html.forour-mobile .mx_SettingsDialog [role='switch'] {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

html.forour-mobile .mx_Dialog .mx_Dialog_buttons,
html.forour-mobile .mx_Dialog .mx_Dialog_buttonGroup {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}

html.forour-mobile .mx_Dialog .mx_Dialog_buttons .mx_AccessibleButton,
html.forour-mobile .mx_Dialog .mx_Dialog_buttonGroup .mx_AccessibleButton {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
}

/* Settings / encryption: Compound buttons must stay full-width (not icon-only squares) */
html.forour-mobile #mx_Dialog_StaticContainer button[class*='_button_'][data-size],
html.forour-mobile #mx_Dialog_Container button[class*='_button_'][data-size],
html.forour-mobile .mx_SettingsTab button[class*='_button_'][data-size],
html.forour-mobile .mx_EncryptionUserSettingsTab button[class*='_button_'][data-size],
html.forour-mobile .mx_SecurityUserSettingsTab button[class*='_button_'][data-size] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px 16px !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  white-space: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;
  border-radius: 9999px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer button[class*='_button_'][data-size] > svg,
html.forour-mobile #mx_Dialog_Container button[class*='_button_'][data-size] > svg,
html.forour-mobile .mx_SettingsTab button[class*='_button_'][data-size] > svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex: 0 0 auto !important;
}

/* Encryption settings tab — overflow + session details */
html.forour-mobile .mx_EncryptionUserSettingsTab,
html.forour-mobile .mx_EncryptionUserSettingsTab .mx_SettingsTab_sections,
html.forour-mobile .mx_EncryptionUserSettingsTab .mx_SettingsSection,
html.forour-mobile .mx_EncryptionUserSettingsTab .mx_SettingsSection_header,
html.forour-mobile .mx_EncryptionUserSettingsTab .mx_EncryptionDetails,
html.forour-mobile .mx_EncryptionUserSettingsTab .mx_EncryptionDetails_session {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_SettingsTab {
  min-width: 0 !important;
  padding: 10px 14px calc(104px + var(--forour-safe-bottom)) !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_SettingsTab h1,
html.forour-mobile .mx_SettingsTab h2,
html.forour-mobile .mx_SettingsTab .mx_Heading_h1,
html.forour-mobile .mx_SettingsTab .mx_Heading_h2,
html.forour-mobile .mx_SettingsSection h1,
html.forour-mobile .mx_SettingsSection h2 {
  font-size: 1.25rem !important;
  line-height: 1.18 !important;
  margin: 18px 0 8px !important;
}

html.forour-mobile .mx_SettingsTab h3,
html.forour-mobile .mx_SettingsSection h3,
html.forour-mobile .mx_SettingsSubsectionText {
  font-size: var(--forour-text-lg) !important;
  line-height: 1.22 !important;
}

html.forour-mobile .mx_SettingsTab p,
html.forour-mobile .mx_SettingsSection p,
html.forour-mobile .mx_SettingsTab label,
html.forour-mobile .mx_SettingsTab input,
html.forour-mobile .mx_SettingsTab textarea {
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
}

html.forour-mobile .mx_AvatarSetting {
  margin: 14px 0 18px !important;
}

html.forour-mobile .mx_AvatarSetting_avatarDisplay,
html.forour-mobile .mx_AvatarSetting_avatarDisplay .mx_BaseAvatar,
html.forour-mobile .mx_AvatarSetting_avatarDisplay img {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
}

html.forour-mobile .mx_AvatarSetting_uploadButton {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

html.forour-mobile .mx_EncryptionDetails_session > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.forour-mobile .mx_EncryptionDetails_session > div > span {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
}

html.forour-mobile .mx_EncryptionDetails_buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.forour-mobile .mx_EncryptionDetails_buttons > * {
  width: 100% !important;
  max-width: 100% !important;
}

html.forour-mobile .mx_SecurityUserSettingsTab_bulkOptions {
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html.forour-mobile .mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton,
html.forour-mobile .mx_SecurityUserSettingsTab_bulkOptions button {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
}

html.forour-mobile .mx_SetupEncryptionBody,
html.forour-mobile .mx_CreateSecretStorageDialog,
html.forour-mobile .mx_CreateCrossSigningDialog,
html.forour-mobile #mx_Dialog_Container .mx_CreateSecretStorageDialog,
html.forour-mobile #mx_Dialog_Container .mx_CreateCrossSigningDialog {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_CreateSecretStorageDialog_recoveryKey,
html.forour-mobile .mx_RestoreKeyBackupDialog_recoveryKeyInput,
html.forour-mobile .mx_CreateSecretStorageDialog_passPhraseMatch {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html.forour-mobile .mx_CreateSecretStorageDialog_passPhraseContainer {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

html.forour-mobile .mx_CreateSecretStorageDialog_recoveryKeyButtons {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

html.forour-mobile .mx_DeviceSecurityCard {
  flex-direction: column !important;
  align-items: stretch !important;
}

html.forour-mobile .mx_DeviceSecurityCard_icon {
  margin-right: 0 !important;
  margin-bottom: 12px !important;
}

/* Opaque backdrop under fullscreen settings */
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_background,
html.forour-mobile .mx_Dialog_wrapper .mx_Dialog_background {
  opacity: 1 !important;
  background-color: var(--forour-bg) !important;
}

/* Settings fullscreen: hide room list peeking behind */
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_SettingsDialog) .mx_SpacePanel,
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_UserSettingsDialog) .mx_SpacePanel,
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_SettingsDialog) [data-testid='left-panel'],
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_UserSettingsDialog) [data-testid='left-panel'],
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_SettingsDialog) [data-panel='true']:not(:has([data-testid='left-panel'])):not([data-testid='left-panel']),
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_UserSettingsDialog) [data-panel='true']:not(:has([data-testid='left-panel'])):not([data-testid='left-panel']),
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_SettingsDialog) .mx_MatrixChat,
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_UserSettingsDialog) .mx_MainSplit {
  display: none !important;
}

html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_SettingsDialog) #mx_Dialog_StaticContainer,
html.forour-mobile:has(#mx_Dialog_StaticContainer .mx_UserSettingsDialog) #mx_Dialog_StaticContainer {
  background-color: var(--forour-bg) !important;
}

/* Overlays */
.mx_RightPanel_ResizeWrapper,
.mx_RightPanel_wrapper,
.mx_RightPanel,
.mx_ThreadPanel {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  z-index: 200 !important;
  padding-top: var(--forour-safe-top) !important;
  padding-bottom: var(--forour-safe-bottom) !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_RoomPreviewBar,
html.forour-mobile .mx_RoomPreviewBar_dialog,
html.forour-mobile .mx_RoomPreviewBar_Loading {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--forour-pad) !important;
  padding-right: var(--forour-pad) !important;
  box-sizing: border-box !important;
}

/* Auth / Welcome — влезает на узкий экран, без desktop-ширин */
.mx_AuthPage,
.mx_AuthPage_modal,
.mx_AuthPage_modalContent,
._glass_sepwu_8,
.mx_Welcome,
.mx_DefaultWelcome {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.mx_AuthPage,
.mx_AuthPage[style] {
  background: var(--forour-bg) !important;
  background-image: none !important;
  background-size: auto !important;
  background-attachment: scroll !important;
  min-height: 100dvh !important;
  padding: calc(var(--forour-safe-top) + 8px) var(--forour-pad) var(--forour-safe-bottom) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.mx_AuthPage_modal,
.mx_AuthPage_modal_withBlur,
.mx_AuthPage_modalContent,
.mx_AuthPage_modalBlur,
._glass_sepwu_8 {
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: var(--forour-pad) !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  background-image: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.mx_AuthPage_modalBlur {
  display: none !important;
}

html.forour-mobile .mx_AuthPage::before,
html.forour-mobile .mx_AuthPage::after,
html.forour-mobile .mx_AuthPage_modal::before,
html.forour-mobile .mx_AuthPage_modal::after,
html.forour-mobile .mx_AuthPage_modalContent::before,
html.forour-mobile .mx_AuthPage_modalContent::after,
html.forour-mobile .mx_AuthPage_modalBlur::before,
html.forour-mobile .mx_AuthPage_modalBlur::after,
html.forour-mobile ._glass_sepwu_8::before,
html.forour-mobile ._glass_sepwu_8::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mx_AuthHeader,
.mx_AuthHeaderLogo,
.mx_AuthPage .mx_AuthHeaderLogo {
  display: none !important;
}

body[class*='Liquid'] .mx_AuthPage,
body[class*='Liquid'] .mx_AuthPage_modal,
body[class*='Liquid'] .mx_AuthPage_modalContent,
body[class*='Liquid'] ._glass_sepwu_8,
body[class*='Liquid'] .mx_Welcome {
  background: var(--forour-bg) !important;
  background-image: none !important;
}

.mx_AuthBody,
.mx_Login,
.mx_Register {
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 0 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-size: var(--forour-text-sm) !important;
}

.mx_AuthBody h1,
.mx_AuthPage h1 {
  font-size: 1.125rem !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}

.mx_AuthBody h2 {
  font-size: var(--forour-text-sm) !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}

/* Сервер фиксирован в config — компактная строка */
.mx_ServerPicker {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
  font-size: var(--forour-text-xs) !important;
  gap: 2px !important;
}

.mx_ServerPicker > h2 {
  font-size: var(--forour-text-sm) !important;
  margin: 0 0 4px !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.mx_ServerPicker .mx_ServerPicker_server {
  font-size: var(--forour-text-sm) !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mx_ServerPicker .mx_ServerPicker_change,
.mx_ServerPicker .mx_ServerPicker_help,
.mx_ServerPicker .mx_ServerPicker_desc {
  display: none !important;
}

/* Пароль + подтверждение — столбиком, не в ряд */
.mx_AuthBody_fieldRow {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}

.mx_AuthBody_fieldRow > .mx_Field {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}

.mx_Field {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 12px !important;
  box-sizing: border-box !important;
}

.mx_AuthPage .mx_Field label,
.mx_Login .mx_Field label,
.mx_Register .mx_Field label {
  font-size: var(--forour-text-xs) !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mx_Field input,
.mx_Field select,
.mx_Field textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: var(--forour-text-md) !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
}

.mx_Field input::placeholder,
.mx_Field textarea::placeholder {
  color: transparent !important;
}

.mx_Field input:focus,
.mx_Field textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.45) !important;
}

.mx_AuthBody .mx_AuthBody_icon {
  width: 32px !important;
  height: 32px !important;
}

.mx_Login_forgot,
.mx_AuthBody a {
  font-size: var(--forour-text-sm) !important;
}

.mx_AuthBody form,
.mx_Register_mainContent form,
.mx_Login form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.mx_Login_submit,
.mx_AuthBody .mx_AccessibleButton,
.mx_Register .mx_AccessibleButton,
.mx_AuthBody form button,
.mx_Register_mainContent form button,
.mx_Login form button,
.mx_AuthBody [class*='_button_'],
.mx_Register_mainContent [class*='_button_'],
.mx_DefaultWelcome .mx_DefaultWelcome_buttons a,
.mx_DefaultWelcome .mx_DefaultWelcome_buttons ._button_1nw83_8,
html.forour-mobile #matrixchat .mx_AuthBody [class*='_button_'],
html.forour-mobile #matrixchat .mx_Register_mainContent [class*='_button_'] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  min-height: 44px !important;
  white-space: normal !important;
  text-align: center !important;
}

html.forour-mobile .mx_AuthBody [data-kind='primary'],
html.forour-mobile .mx_Register_mainContent [data-kind='primary'] {
  color: #fff !important;
  background-color: var(--cpd-color-bg-action-primary-rest, #8e959e) !important;
}

html.forour-mobile .mx_AuthBody button:disabled,
html.forour-mobile .mx_AuthBody [aria-disabled='true'],
html.forour-mobile .mx_AuthBody [disabled],
html.forour-mobile .mx_Register_mainContent button:disabled,
html.forour-mobile .mx_Register_mainContent [aria-disabled='true'],
html.forour-mobile .mx_Login button:disabled,
html.forour-mobile .mx_Login [aria-disabled='true'] {
  color: var(--forour-muted) !important;
  background: var(--forour-surface-2) !important;
  border: 1px solid var(--forour-border) !important;
  opacity: 1 !important;
  cursor: default !important;
}

/* Toast / settings primary — base dark theme sets light gray bg; force accent + white text */
html.forour-mobile .mx_Toast_buttons [data-kind='primary'],
html.forour-mobile .mx_ToastContainer [data-kind='primary'][class*='_button_'],
html.forour-mobile #mx_Dialog_StaticContainer [data-kind='primary'][class*='_button_'],
html.forour-mobile #mx_Dialog_Container [data-kind='primary'][class*='_button_'],
html.forour-mobile .mx_SettingsTab [data-kind='primary'][class*='_button_'],
html.forour-mobile .mx_EncryptionUserSettingsTab [data-kind='primary'][class*='_button_'] {
  color: #ffffff !important;
  background-color: var(--accent-color, #0dbd8b) !important;
  border-color: var(--accent-color, #0dbd8b) !important;
}

html.forour-mobile .mx_Toast_buttons [data-kind='primary'] > svg,
html.forour-mobile .mx_ToastContainer [data-kind='primary'][class*='_button_'] > svg,
html.forour-mobile .mx_SettingsTab [data-kind='primary'][class*='_button_'] > svg {
  color: #ffffff !important;
}

html.forour-mobile .mx_AuthBody [data-kind='secondary'],
html.forour-mobile .mx_Toast_buttons [data-kind='secondary'],
html.forour-mobile .mx_ToastContainer [data-kind='secondary'][class*='_button_'],
html.forour-mobile #mx_Dialog_StaticContainer [data-kind='secondary'][class*='_button_'],
html.forour-mobile .mx_SettingsTab [data-kind='secondary'][class*='_button_'] {
  color: var(--cpd-color-text-primary, #ebeef2) !important;
  background-color: var(--cpd-color-bg-subtle-secondary, #2a3038) !important;
  border: 1px solid var(--cpd-color-border-interactive-secondary, #5a6578) !important;
}

/* Toasts — кнопки на всю ширину */
html.forour-mobile .mx_ToastContainer {
  left: var(--forour-pad) !important;
  right: var(--forour-pad) !important;
  width: auto !important;
  max-width: calc(100% - 2 * var(--forour-pad)) !important;
  top: calc(var(--forour-safe-top) + 8px) !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_ToastContainer .mx_Toast_toast {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_ToastContainer .mx_Toast_title,
html.forour-mobile .mx_ToastContainer .mx_Toast_body,
html.forour-mobile .mx_ToastContainer .mx_Toast_description {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html.forour-mobile .mx_ToastContainer .mx_Toast_buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}

html.forour-mobile .mx_ToastContainer .mx_Toast_buttons button,
html.forour-mobile .mx_ToastContainer .mx_Toast_buttons [class*='_button_'] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  white-space: normal !important;
}

.mx_Welcome,
.mx_DefaultWelcome {
  text-align: center !important;
  padding: 16px var(--forour-pad) !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: calc(100dvh - var(--forour-safe-top) - var(--forour-safe-bottom) - 24px) !important;
}

.mx_DefaultWelcome .mx_DefaultWelcome_logo img {
  height: 40px !important;
  width: auto !important;
  max-width: 80px !important;
}

.mx_DefaultWelcome h1,
.mx_DefaultWelcome [class*='_font-heading-md'] {
  font-size: 1.125rem !important;
  line-height: 1.25 !important;
  margin: 10px 0 6px !important;
}

.mx_DefaultWelcome .mx_DefaultWelcome_buttons {
  margin: 16px 0 8px !important;
  padding-bottom: 8px !important;
  width: 100% !important;
}

.mx_DefaultWelcome .mx_DefaultWelcome_buttons a {
  margin-bottom: 10px !important;
}

.mx_AuthFooter,
.mx_DefaultWelcome_buttons_register {
  display: none !important;
}

.mx_Register_footerActions {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  font-size: var(--forour-text-sm) !important;
}

body[class*='Liquid'] .mx_AuthPage,
body[class*='Liquid'] .mx_AuthPage_modal {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--forour-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Calls */
.mx_CallView,
.mx_VideoFeed,
.mx_LegacyCallView,
.mx_LegacyCallView_belowWidget {
  max-width: 100% !important;
}

html.forour-mobile .mx_CallView,
html.forour-mobile .mx_LegacyCallView {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 500 !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_IncomingCallToast,
html.forour-mobile .mx_IncomingLegacyCallToast {
  z-index: 600 !important;
  max-width: calc(100% - 2 * var(--forour-pad)) !important;
  left: var(--forour-pad) !important;
  right: var(--forour-pad) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Answer / decline — not 32px icon squares */
html.forour-mobile .mx_IncomingCallToast button[class*='_button_'][data-size],
html.forour-mobile .mx_IncomingCallToast .mx_AccessibleButton,
html.forour-mobile .mx_IncomingCallToast_actionButton,
html.forour-mobile .mx_IncomingLegacyCallToast button[class*='_button_'][data-size],
html.forour-mobile .mx_IncomingLegacyCallToast .mx_AccessibleButton,
html.forour-mobile .mx_LegacyCallViewButtons button[class*='_button_'][data-size],
html.forour-mobile .mx_CallEvent_button {
  width: auto !important;
  min-width: 44px !important;
  max-width: none !important;
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  flex: 0 1 auto !important;
  padding: 8px 14px !important;
}

html.forour-mobile .mx_IncomingCallToast_buttons,
html.forour-mobile .mx_IncomingLegacyCallToast_buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

/* ForOur Call widget (fullscreen / PiP) */
html.forour-mobile .mx_MainSplit_maximisedWidget,
html.forour-mobile .mx_LegacyCallView_belowWidget {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 500 !important;
  margin: 0 !important;
  padding: var(--forour-safe-top) 0 var(--forour-safe-bottom) !important;
  box-sizing: border-box !important;
  background: #000 !important;
}

html.forour-mobile .mx_MainSplit_maximisedWidget iframe,
html.forour-mobile .mx_LegacyCallView_belowWidget iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: none !important;
}

/* Active call highlight in list */
.mx_RoomTile:has(.mx_DecoratedRoomAvatar_icon_call),
.mx_RoomTile:has([class*="icon_call"]) {
  border-left: 3px solid #27ae60 !important;
  background-color: rgba(39, 174, 96, 0.12) !important;
}

/* Very small phones */
@media (max-width: 390px) {
  :root {
    --forour-touch: 32px;
    --forour-icon: 16px;
    --forour-avatar: 36px;
  }

  .mx_RoomHeader_buttons {
    max-width: min(48vw, 180px) !important;
  }

  .mx_EventTile_line {
    max-width: 86vw !important;
  }
}

/* Landscape — keep composer visible */
@media (orientation: landscape) and (max-height: 500px) {
  .mx_RoomHeader {
    padding-top: 4px !important;
  }
  .mx_MessageComposer {
    padding-bottom: max(4px, var(--forour-safe-bottom)) !important;
  }
}

/* Compound typography — уменьшить заголовки/подписи в приложении */
html.forour-mobile #matrixchat [class*='_font-heading-lg'] {
  font-size: 1.0625rem !important;
  line-height: 1.2 !important;
}

html.forour-mobile #matrixchat [class*='_font-heading-xl'],
html.forour-mobile #matrixchat [class*='_font-heading-2xl'] {
  font-size: 1.5rem !important;
  line-height: 1.12 !important;
}

html.forour-mobile #matrixchat [class*='_font-heading-md'] {
  font-size: var(--forour-text-lg) !important;
  line-height: 1.2 !important;
}

html.forour-mobile #matrixchat [class*='_font-body-lg'] {
  font-size: var(--forour-text-md) !important;
  line-height: 1.25 !important;
}

html.forour-mobile #matrixchat [class*='_font-body-md'] {
  font-size: var(--forour-text-sm) !important;
  line-height: 1.25 !important;
}

html.forour-mobile #matrixchat [class*='_font-body-sm'] {
  font-size: var(--forour-text-xs) !important;
  line-height: 1.15 !important;
}

html.forour-mobile .mx_LeftPanel .mx_PresenceLabel,
html.forour-mobile .mx_UserInfo .mx_PresenceLabel,
html.forour-mobile .mx_MemberInfo .mx_PresenceLabel,
html.forour-mobile .mx_RoomTile .mx_PresenceLabel {
  font-size: var(--forour-text-xs) !important;
  line-height: 1.1 !important;
}

html.forour-mobile .mx_RoomTile .mx_DecoratedRoomAvatar,
html.forour-mobile .mx_RoomTile .mx_BaseAvatar {
  width: var(--forour-avatar) !important;
  height: var(--forour-avatar) !important;
}

html.forour-mobile .mx_NotificationBadge {
  font-size: 0.625rem !important;
  min-width: 15px !important;
  height: 15px !important;
  line-height: 15px !important;
}

html.forour-mobile .mx_Pill {
  font-size: var(--forour-text-xs) !important;
  padding: 1px 5px !important;
  max-width: 100% !important;
}

html.forour-mobile .mx_ContextualMenu,
html.forour-mobile .mx_GenericDropdownMenu {
  font-size: var(--forour-text-sm) !important;
  max-width: calc(100% - 2 * var(--forour-pad)) !important;
}

/* Message/action menus: on mobile they must behave like a bottom sheet, not a floating desktop popover. */
html.forour-mobile #mx_ContextualMenu_Container {
  pointer-events: none !important;
}

html.forour-mobile #mx_ContextualMenu_Container:has(> .mx_ContextualMenu),
html.forour-mobile #mx_ContextualMenu_Container:has(> .mx_IconizedContextMenu),
html.forour-mobile #mx_ContextualMenu_Container:has(> .mx_ContextualMenu_wrapper),
html.forour-mobile .mx_ContextualMenu_wrapper {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1500 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: calc(var(--forour-safe-top) + 8px) var(--forour-pad)
    calc(var(--forour-safe-bottom) + var(--forour-pad)) !important;
  background: rgba(7, 10, 14, 0.38) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  pointer-events: auto !important;
}

html.forour-mobile .mx_ContextualMenu_wrapper .mx_ContextualMenu,
html.forour-mobile .mx_ContextualMenu_wrapper .mx_IconizedContextMenu,
html.forour-mobile #mx_ContextualMenu_Container > .mx_ContextualMenu,
html.forour-mobile #mx_ContextualMenu_Container > .mx_IconizedContextMenu {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: calc(100dvh - var(--forour-safe-top) - var(--forour-safe-bottom) - 2 * var(--forour-pad) - 8px) !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 20px !important;
  border: 1px solid var(--forour-hairline-strong) !important;
  background: var(--forour-surface) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35) !important;
}

html.forour-mobile .mx_ContextualMenu_wrapper .mx_ContextualMenu_background,
html.forour-mobile #mx_ContextualMenu_Container .mx_ContextualMenu_background {
  display: none !important;
}

html.forour-mobile .mx_ContextualMenu_wrapper :is([role='menu'], [role='presentation']),
html.forour-mobile #mx_ContextualMenu_Container :is([role='menu'], [role='presentation']) {
  max-width: 100% !important;
  min-width: 0 !important;
}

html.forour-mobile .mx_ContextualMenu_wrapper :is([role='menuitem'], .mx_AccessibleButton, button, a),
html.forour-mobile #mx_ContextualMenu_Container :is([role='menuitem'], .mx_AccessibleButton, button, a) {
  min-height: 44px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  line-height: 18px !important;
  text-align: left !important;
  white-space: normal !important;
}

html.forour-mobile .mx_ContextualMenu_wrapper :is([role='menuitem'], .mx_AccessibleButton, button, a) > *,
html.forour-mobile #mx_ContextualMenu_Container :is([role='menuitem'], .mx_AccessibleButton, button, a) > * {
  min-width: 0 !important;
}

html.forour-mobile .mx_ContextualMenu_wrapper [role='menuitem']:is(:focus, :focus-visible),
html.forour-mobile #mx_ContextualMenu_Container [role='menuitem']:is(:focus, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  background: var(--forour-pressed) !important;
}

html.forour-mobile .mx_ContextualMenu_wrapper :is([role='separator'], .mx_ContextualMenu_separator, hr),
html.forour-mobile #mx_ContextualMenu_Container :is([role='separator'], .mx_ContextualMenu_separator, hr) {
  margin: 6px 12px !important;
  opacity: 0.9 !important;
}

html.forour-mobile .mx_UserInfo_profileStatus,
html.forour-mobile .mx_UserInfo_statusMessage {
  font-size: var(--forour-text-sm) !important;
  line-height: 1.2 !important;
}

/* Instant tap — no “first tap = hover”, second tap = click */
html.forour-mobile button,
html.forour-mobile a,
html.forour-mobile label,
html.forour-mobile [role='button'],
html.forour-mobile [role='tab'],
html.forour-mobile [role='menuitem'],
html.forour-mobile [role='option'],
html.forour-mobile .mx_AccessibleButton,
html.forour-mobile .mx_RoomTile,
html.forour-mobile .mx_EventTile,
html.forour-mobile .mx_SpaceButton,
html.forour-mobile .mx_LeftPanel_filterContainer button,
html.forour-mobile summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none), (pointer: coarse) {
  html.forour-mobile body[class*='Liquid'] .mx_RoomTile:hover:not(.mx_RoomTile_selected),
  html.forour-mobile .mx_RoomTile:hover:not(.mx_RoomTile_selected),
  html.forour-mobile .mx_SpaceButton:hover,
  html.forour-mobile .mx_AccessibleButton:hover:not(:active):not([aria-expanded='true']),
  html.forour-mobile .mx_EventTile:hover .mx_EventTile_line,
  html.forour-mobile .mx_QuickSettingsButton:not(.expanded):hover,
  html.forour-mobile .mx_ThreadsActivityCentreButton:not(.expanded):hover {
    background: inherit !important;
    background-color: inherit !important;
    filter: none !important;
  }

  html.forour-mobile body[class*='Liquid'] .mx_RoomTile:active:not(.mx_RoomTile_selected),
  html.forour-mobile .mx_RoomTile:active:not(.mx_RoomTile_selected) {
    background: rgba(255, 255, 255, 0.5) !important;
  }

  html.forour-mobile .mx_AccessibleButton:active {
    opacity: 0.85;
  }
}

html.forour-mobile.forour-touching *:hover {
  transition-duration: 0s !important;
}

/* Keyboard shortcuts — disabled on mobile (touch-only UX) */
html.forour-mobile kbd,
html.forour-mobile .mx_RoomSearch_shortcutPrompt,
html.forour-mobile #mx_SpotlightDialog_keyboardPrompt,
html.forour-mobile .mx_KeyboardShortcut,
html.forour-mobile [class*='KeyboardShortcut'] {
  display: none !important;
  visibility: hidden !important;
}

html.forour-mobile .mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt {
  display: none !important;
}

/* Mobile polish layer — cohesive app feel without replacing base components */
html.forour-mobile {
  --forour-radius-xs: 8px;
  --forour-radius-sm: 10px;
  --forour-radius-md: 14px;
  --forour-radius-lg: 18px;
  --forour-radius-xl: 22px;
  --forour-hairline: rgba(148, 163, 184, 0.22);
  --forour-hairline-strong: rgba(203, 213, 225, 0.34);
  --forour-pressed: rgba(255, 255, 255, 0.08);
  --forour-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --forour-fast: 150ms var(--forour-ease);
  --forour-slow: 260ms var(--forour-ease);
  background: var(--forour-bg) !important;
  color-scheme: dark;
  scrollbar-color: rgba(148, 163, 184, 0.42) transparent;
}

html.forour-mobile body,
html.forour-mobile #matrixchat,
html.forour-mobile .mx_MatrixChat,
html.forour-mobile .mx_MainSplit,
html.forour-mobile .mx_LeftPanel,
html.forour-mobile .mx_RoomView,
html.forour-mobile .mx_RoomView_wrapper {
  background: var(--forour-bg) !important;
}

html.forour-mobile :is(button, a, [role='button'], [role='tab'], [role='menuitem'], [role='option'], .mx_AccessibleButton, .mx_RoomTile, input, textarea) {
  transition:
    background-color var(--forour-fast),
    border-color var(--forour-fast),
    color var(--forour-fast),
    opacity var(--forour-fast),
    transform var(--forour-fast),
    box-shadow var(--forour-fast) !important;
}

html.forour-mobile :is(button, a, [role='button'], [role='tab'], [role='menuitem'], [role='option'], .mx_AccessibleButton):active {
  transform: scale(0.985);
}

html.forour-mobile :is(button, a, [role='button'], [role='tab'], [role='menuitem'], [role='option'], .mx_AccessibleButton):focus-visible,
html.forour-mobile :is(input, textarea, [contenteditable]:not([contenteditable='false'])):focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px var(--forour-bg),
    0 0 0 4px color-mix(in srgb, var(--accent-color, #0dbd8b) 64%, transparent) !important;
}

html.forour-mobile .mx_RoomListHeader,
html.forour-mobile .mx_LeftPanel_filterContainer,
html.forour-mobile .mx_RoomHeader,
html.forour-mobile .mx_MessageComposer,
html.forour-mobile .mx_SpotlightDialog_searchBox,
html.forour-mobile .mx_Dialog_header {
  background: color-mix(in srgb, var(--forour-bg) 94%, #ffffff 6%) !important;
  border-color: var(--forour-hairline) !important;
}

html.forour-mobile .mx_RoomHeader {
  border-bottom: 1px solid var(--forour-hairline) !important;
}

html.forour-mobile .mx_MessageComposer {
  border-top: 1px solid var(--forour-hairline) !important;
}

html.forour-mobile .mx_RoomTile {
  border-radius: var(--forour-radius-md) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

html.forour-mobile .mx_RoomTile_selected,
html.forour-mobile .mx_RoomTile[aria-selected='true'],
html.forour-mobile .mx_RoomTile:active {
  background: var(--forour-surface-2) !important;
  border-color: var(--forour-hairline) !important;
}

html.forour-mobile [class*='_chat-filter_'],
html.forour-mobile .mx_TabbedView_tabLabel {
  background: transparent !important;
  border: 1px solid var(--forour-hairline) !important;
  color: var(--cpd-color-text-secondary, #9aa4b2) !important;
}

html.forour-mobile [class*='_chat-filter_'][aria-selected='true'],
html.forour-mobile [class*='_chat-filter_'][data-active='true'],
html.forour-mobile .mx_TabbedView_tabLabel_active {
  background: var(--forour-surface-2) !important;
  border-color: var(--forour-hairline-strong) !important;
  color: var(--cpd-color-text-primary, #f2f5f8) !important;
}

html.forour-mobile .mx_TabbedView_tabLabels {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
}

html.forour-mobile :is(.mx_Field input, .mx_Field textarea, .mx_Field select, input, textarea):not([type='checkbox']):not([type='radio']) {
  border-radius: var(--forour-radius-md) !important;
  border: 1px solid var(--forour-hairline-strong) !important;
  background: color-mix(in srgb, var(--forour-bg) 92%, #ffffff 8%) !important;
  color: var(--cpd-color-text-primary, #eef2f6) !important;
}

html.forour-mobile :is(.mx_Field input, .mx_Field textarea, .mx_Field select, input, textarea):not([type='checkbox']):not([type='radio']):focus {
  border-color: color-mix(in srgb, var(--accent-color, #0dbd8b) 58%, #ffffff 12%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #0dbd8b) 28%, transparent) !important;
}

html.forour-mobile :is(.mx_Field input, .mx_Field textarea, input, textarea)::placeholder {
  color: var(--forour-muted) !important;
  opacity: 0.9 !important;
}

html.forour-mobile [class*='_button_'],
html.forour-mobile .mx_AccessibleButton_hasKind,
html.forour-mobile .mx_Dialog_buttons .mx_AccessibleButton,
html.forour-mobile .mx_Dialog_buttonGroup .mx_AccessibleButton,
html.forour-mobile .mx_Login_submit,
html.forour-mobile .mx_DefaultWelcome_buttons a {
  border-radius: var(--forour-radius-lg) !important;
}

html.forour-mobile .mx_RoomHeader_buttons .mx_AccessibleButton,
html.forour-mobile .mx_RoomListHeader .mx_AccessibleButton,
html.forour-mobile .mx_LeftPanel_filterContainer .mx_AccessibleButton,
html.forour-mobile .mx_MessageComposer_button,
html.forour-mobile [class*='_icon-button_'],
html.forour-mobile [class*='_icon-only_'],
html.forour-mobile .forour-mobile-back {
  border-radius: 50% !important;
  background: transparent !important;
}

html.forour-mobile .mx_RoomHeader_buttons .mx_AccessibleButton:active,
html.forour-mobile .mx_RoomListHeader .mx_AccessibleButton:active,
html.forour-mobile .mx_LeftPanel_filterContainer .mx_AccessibleButton:active,
html.forour-mobile .mx_MessageComposer_button:active,
html.forour-mobile [class*='_icon-button_']:active,
html.forour-mobile [class*='_icon-only_']:active,
html.forour-mobile .forour-mobile-back:active {
  background: var(--forour-pressed) !important;
}

html.forour-mobile .mx_Dialog:not(.mx_UserSettingsDialog),
html.forour-mobile #mx_Dialog_Container .mx_Dialog,
html.forour-mobile .mx_ContextualMenu,
html.forour-mobile .mx_GenericDropdownMenu,
html.forour-mobile .mx_Autocomplete,
html.forour-mobile .mx_Toast_toast {
  border-radius: var(--forour-radius-lg) !important;
  border: 1px solid var(--forour-hairline) !important;
  background: var(--forour-surface) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28) !important;
}

html.forour-mobile .mx_SpotlightDialog,
html.forour-mobile .mx_UserSettingsDialog,
html.forour-mobile .mx_SettingsDialog {
  background: var(--forour-bg) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog:has(.mx_UserSettingsDialog),
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog:has(.mx_SettingsDialog),
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_border:has(.mx_UserSettingsDialog),
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_border:has(.mx_SettingsDialog) {
  background: var(--forour-bg) !important;
  border: none !important;
  box-shadow: none !important;
}

html.forour-mobile .mx_Toast_toast {
  overflow: hidden !important;
}

html.forour-mobile .mx_AuthBody,
html.forour-mobile .mx_Login,
html.forour-mobile .mx_Register {
  max-width: 430px !important;
  align-self: center !important;
}

html.forour-mobile .mx_AuthBody h1,
html.forour-mobile .mx_AuthPage h1 {
  font-size: clamp(1.35rem, 7vw, 1.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  margin-bottom: 18px !important;
}

html.forour-mobile .mx_AuthBody form button,
html.forour-mobile .mx_Register_mainContent form button,
html.forour-mobile .mx_Login form button,
html.forour-mobile .mx_DefaultWelcome_buttons a {
  border-radius: 9999px !important;
}

html.forour-mobile .mx_ServerPicker {
  border-bottom: 1px solid var(--forour-hairline) !important;
}

html.forour-mobile .mx_DefaultWelcome {
  justify-content: flex-start !important;
  padding-top: min(18dvh, 128px) !important;
}

html.forour-mobile .mx_DefaultWelcome h1,
html.forour-mobile .mx_DefaultWelcome [class*='_font-heading-md'] {
  font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
  line-height: 1.08 !important;
}

html.forour-mobile .mx_EventTile_line,
html.forour-mobile .mx_MTextBody,
html.forour-mobile .mx_MNoticeBody {
  line-height: 1.42 !important;
}

html.forour-mobile .mx_EventTile_line {
  border-radius: var(--forour-radius-sm) !important;
}

html.forour-mobile .mx_EventTile_bad .mx_EventTile_line {
  padding-bottom: 0 !important;
}

html.forour-mobile .mx_EventTile_bad .mx_DecryptionFailureBody,
html.forour-mobile .mx_EventTile_bad .mx_EventTile_content {
  max-width: 100% !important;
  margin-right: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html.forour-mobile .mx_EventTile_bad .mx_DecryptionFailureBody {
  color: var(--forour-muted) !important;
}

html.forour-mobile .mx_GenericEventListSummary,
html.forour-mobile .mx_NewRoomIntro {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html.forour-mobile .mx_NewRoomIntro {
  margin-top: 24px !important;
  margin-bottom: 28px !important;
}

html.forour-mobile .mx_MessageComposer_row {
  background: transparent !important;
}

html.forour-mobile .mx_MessageComposer {
  padding: 8px max(8px, var(--forour-safe-left)) calc(8px + var(--forour-safe-bottom))
    max(8px, var(--forour-safe-right)) !important;
  background: color-mix(in srgb, var(--forour-bg) 88%, #ffffff 8%) !important;
  border-top: 1px solid var(--forour-hairline) !important;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.18) !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_MessageComposer_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_MessageComposer_row {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  align-items: flex-end !important;
  padding: 0 !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_MessageComposer_input,
html.forour-mobile .mx_BasicMessageComposer {
  border-radius: 9999px !important;
}

html.forour-mobile .mx_BasicMessageComposer {
  min-height: 42px !important;
  max-height: 128px !important;
  padding: 0 14px !important;
  align-items: center !important;
  background: color-mix(in srgb, var(--forour-bg) 82%, #ffffff 10%) !important;
  border: 1px solid var(--forour-hairline-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_BasicMessageComposer:focus-within {
  border-color: color-mix(in srgb, var(--accent-color, #0dbd8b) 48%, var(--forour-hairline-strong)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-color, #0dbd8b) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html.forour-mobile .mx_BasicMessageComposer .mx_BasicMessageComposer_input,
html.forour-mobile .mx_MessageComposer .mx_MessageComposer_input {
  flex: 1 1 auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  max-height: 112px !important;
  padding: 9px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 20px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

html.forour-mobile .mx_MessageComposer :is(input, textarea, [contenteditable]:not([contenteditable='false'])):focus,
html.forour-mobile .mx_MessageComposer :is(input, textarea, [contenteditable]:not([contenteditable='false'])):focus-visible,
html.forour-mobile .mx_MessageComposer :is(.mx_BasicMessageComposer_input, .mx_MessageComposer_input):focus,
html.forour-mobile .mx_MessageComposer :is(.mx_BasicMessageComposer_input, .mx_MessageComposer_input):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

html.forour-mobile .mx_MessageComposer_button,
html.forour-mobile .mx_MessageComposer_sendMessage,
html.forour-mobile .mx_MessageComposer_row > button,
html.forour-mobile .mx_MessageComposer_row > .mx_AccessibleButton {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--forour-muted) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;
}

html.forour-mobile .mx_MessageComposer_button:active,
html.forour-mobile .mx_MessageComposer_sendMessage:active,
html.forour-mobile .mx_MessageComposer_row > button:active,
html.forour-mobile .mx_MessageComposer_row > .mx_AccessibleButton:active {
  background: var(--forour-pressed) !important;
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  html.forour-mobile *,
  html.forour-mobile *::before,
  html.forour-mobile *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile redesign pass — make the client feel like a phone app, not compressed desktop */
html.forour-mobile .mx_LeftPanel_roomListContainer,
html.forour-mobile .mx_LeftPanel_wrapper,
html.forour-mobile .mx_LeftPanel,
html.forour-mobile .mx_RoomListPanel {
  background: var(--forour-bg) !important;
}

html.forour-mobile .mx_RoomListPanel > [class*='_view_'] {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 6px 12px !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--forour-hairline) !important;
  box-sizing: border-box !important;
}

html.forour-mobile .forour-user-menu-slot,
html.forour-mobile .forour-user-menu-slot .mx_UserMenu,
html.forour-mobile .forour-user-menu-slot .mx_UserMenu button,
html.forour-mobile .forour-user-menu-slot [class*='_wrapper_'],
html.forour-mobile .forour-user-menu-slot [class*='_triggerButton_'] {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
}

html.forour-mobile .forour-user-menu-slot .mx_BaseAvatar,
html.forour-mobile .forour-user-menu-slot [class*='_avatar_'] {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  font-size: 20px !important;
}

html.forour-mobile .mx_RoomListPanel > [class*='_view_'] button[class*='_button_'],
html.forour-mobile .mx_RoomListPanel > [class*='_view_'] [class*='_icon-only_'] {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid var(--forour-hairline) !important;
  background: var(--forour-surface) !important;
}

html.forour-mobile .mx_RoomListPanel > header[class*='_header_'] {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 12px !important;
  border-bottom: 0 !important;
}

html.forour-mobile .mx_RoomListPanel > header[class*='_header_'] [class*='_container_'] {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  align-items: center !important;
}

html.forour-mobile .mx_RoomListPanel > header[class*='_header_'] h1 {
  font-size: 18px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
}

html.forour-mobile .mx_RoomListPanel > header[class*='_header_'] [class*='_icon-button_'] {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  background: transparent !important;
}

html.forour-mobile [class*='_roomListPrimaryFilters_'] {
  padding: 0 10px 8px !important;
}

html.forour-mobile [class*='_roomListPrimaryFilters_'] [role='listbox'] {
  gap: 6px !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
}

html.forour-mobile [class*='_chat-filter_'] {
  min-height: 28px !important;
  height: 28px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  line-height: 16px !important;
  background: var(--forour-surface) !important;
  border-color: var(--forour-hairline) !important;
}

html.forour-mobile [class*='_genericPlaceholder_'] {
  width: auto !important;
  margin: 18px 12px 0 !important;
  padding: 24px 14px !important;
  border: 1px solid var(--forour-hairline) !important;
  border-radius: var(--forour-radius-xl) !important;
  background: color-mix(in srgb, var(--forour-bg) 86%, #ffffff 14%) !important;
}

html.forour-mobile [class*='_genericPlaceholder_'] [class*='_title_'] {
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 720 !important;
}

html.forour-mobile [class*='_genericPlaceholder_'] [class*='_description_'] {
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--forour-muted) !important;
  max-width: 30ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.forour-mobile [class*='_defaultPlaceholder_'] {
  padding: 0 !important;
  margin-top: 18px !important;
  gap: 10px !important;
}

html.forour-mobile [class*='_defaultPlaceholder_'] button[class*='_button_'],
html.forour-mobile [class*='_genericPlaceholder_'] button[class*='_button_'] {
  min-height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid var(--forour-hairline) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

html.forour-mobile [class*='_defaultPlaceholder_'] button[class*='_button_']:first-child {
  background: var(--accent-color, #0dbd8b) !important;
  border-color: var(--accent-color, #0dbd8b) !important;
  color: #ffffff !important;
}

html.forour-mobile [class*='_defaultPlaceholder_'] button[class*='_button_']:not(:first-child) {
  background: var(--forour-surface-2) !important;
  color: var(--cpd-color-text-primary, #eef2f6) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsDialog_content {
  padding: 0 !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView {
  gap: 0 !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView_tabLabels {
  height: 44px !important;
  min-height: 44px !important;
  padding: 5px 10px !important;
  border-top: 1px solid var(--forour-hairline) !important;
  border-bottom: 1px solid var(--forour-hairline) !important;
  background: var(--forour-bg) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView_tabLabel {
  height: 32px !important;
  min-height: 32px !important;
  padding: 5px 10px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_TabbedView_tabPanel {
  padding-top: 0 !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab {
  padding: 12px 12px calc(112px + var(--forour-safe-bottom)) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab_sections {
  gap: 18px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection {
  padding: 14px 0 0 !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection h2,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab h2 {
  font-size: 22px !important;
  line-height: 26px !important;
  margin: 0 0 10px !important;
}

html.forour-mobile .mx_UserProfileSettings_profile {
  min-height: 0 !important;
  margin-top: 14px !important;
  gap: 14px !important;
}

html.forour-mobile .mx_UserProfileSettings_profile .mx_AvatarSetting_avatar,
html.forour-mobile .mx_UserProfileSettings_profile .mx_AccessibleButton.mx_AvatarSetting_avatarDisplay,
html.forour-mobile .mx_UserProfileSettings_profile .mx_AccessibleButton.mx_AvatarSetting_avatarDisplay .mx_BaseAvatar {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
}

html.forour-mobile .mx_UserProfileSettings_profile .mx_AvatarSetting_uploadButton {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  background: var(--forour-surface-2) !important;
  border: 1px solid var(--forour-hairline) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection_subSections,
html.forour-mobile #mx_Dialog_StaticContainer .mx_UserProfileSettings {
  gap: 14px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab input,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab textarea {
  min-height: 48px !important;
}

/* Corrections after visual audit */
html.forour-mobile .mx_RoomListPanel > [class*='_view_'] button[class*='_button_'] {
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

html.forour-mobile .mx_RoomListPanel > [class*='_view_'] button[class*='_button_'] :is(svg, img, [class*='_icon_'], [class*='icon']) {
  text-indent: 0 !important;
  font-size: 16px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection_subSections,
html.forour-mobile #mx_Dialog_StaticContainer .mx_UserProfileSettings {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection h2,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab h2 {
  font-size: 19px !important;
  line-height: 23px !important;
  margin: 0 0 8px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab h3,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection h3 {
  font-size: 16px !important;
  line-height: 21px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab p,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection p,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab label,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab input,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab textarea,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab span {
  font-size: 14px !important;
  line-height: 20px !important;
}

html.forour-mobile .mx_UserProfileSettings_profile {
  margin-top: 10px !important;
  gap: 10px !important;
}

html.forour-mobile .mx_UserProfileSettings_profile .mx_AvatarSetting_avatar,
html.forour-mobile .mx_UserProfileSettings_profile .mx_AccessibleButton.mx_AvatarSetting_avatarDisplay,
html.forour-mobile .mx_UserProfileSettings_profile .mx_AccessibleButton.mx_AvatarSetting_avatarDisplay .mx_BaseAvatar {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
}

html.forour-mobile .mx_UserProfileSettings_profile .mx_AvatarSetting_uploadButton {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab input,
html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsTab textarea {
  min-height: 44px !important;
  padding: 10px 12px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_SettingsSection {
  padding-top: 10px !important;
}

html.forour-mobile .mx_TabbedView_tabLabel[aria-label='Labs'],
html.forour-mobile .mx_TabbedView_tabLabel[aria-label='Лаборатория'],
html.forour-mobile .mx_TabbedView_tabLabel[title='Labs'],
html.forour-mobile .mx_TabbedView_tabLabel[title='Лаборатория'] {
  display: none !important;
}

/* Start chat / invite dialog — replace stretched desktop layout with mobile sheet */
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog:has(.mx_InviteDialog_other),
html.forour-mobile #mx_Dialog_StaticContainer .mx_Dialog_border:has(.mx_InviteDialog_other),
html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_flexWrapper .mx_Dialog {
  background: var(--forour-bg) !important;
  border: none !important;
  box-shadow: none !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_other {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--forour-bg) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_other .mx_Dialog_header {
  flex: 0 0 auto !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 58px 0 14px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--forour-hairline) !important;
  background: color-mix(in srgb, var(--forour-bg) 94%, #ffffff 6%) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_other .mx_Dialog_title,
html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_other .mx_Dialog_title * {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 22px !important;
  font-weight: 720 !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_other .mx_InviteDialog_content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px 14px calc(18px + var(--forour-safe-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_helpText {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--forour-muted) !important;
  overflow-wrap: anywhere !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_addressBar {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_editor,
html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_editor [contenteditable],
html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_editor input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  border-radius: 16px !important;
  background: var(--forour-surface-2) !important;
  border: 1px solid var(--forour-hairline-strong) !important;
  box-sizing: border-box !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_editor [contenteditable],
html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_editor input {
  min-height: 44px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_goButton {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 680 !important;
  box-sizing: border-box !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_goButton.mx_AccessibleButton_disabled,
html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_goButton[aria-disabled='true'] {
  opacity: 1 !important;
  color: var(--forour-muted) !important;
  background: var(--forour-surface-2) !important;
  border: 1px solid var(--forour-hairline) !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_userSections {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: 30dvh !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_section_hidden_suggestions_disclaimer {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--forour-bg) 86%, #ffffff 14%) !important;
  border: 1px solid var(--forour-hairline) !important;
  box-sizing: border-box !important;
  color: var(--forour-muted) !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_section_hidden_suggestions_disclaimer strong,
html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_section_hidden_suggestions_disclaimer b {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--cpd-color-text-primary, #eef2f6) !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_footer {
  flex: 0 0 auto !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  background: transparent !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_footer > div:first-child,
html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_footer_label {
  margin: 0 0 8px !important;
  color: var(--forour-muted) !important;
  font-size: 11px !important;
  line-height: 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_footer .mx_CopyableText {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  align-items: center !important;
  border-radius: 16px !important;
  border: 1px solid var(--forour-hairline-strong) !important;
  background: var(--forour-surface-2) !important;
  overflow: hidden !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_footer_link {
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

html.forour-mobile #mx_Dialog_StaticContainer .mx_InviteDialog_footer .mx_CopyableText_copyButton {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-left: 1px solid var(--forour-hairline) !important;
}

/* Animations */
body.mobile-room-active [data-panel="true"]:not(:has([data-testid="left-panel"])):not([data-testid="left-panel"]) {
  animation: forour-slide-in-right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

body.mobile-list-active [data-testid="left-panel"],
body.mobile-list-active .mx_LeftPanel {
  animation: forour-slide-in-left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

html.forour-mobile .mx_Dialog_wrapper .mx_Dialog_background {
  animation: forour-fade-in 0.2s ease-out forwards !important;
}

html.forour-mobile .mx_Dialog_wrapper .mx_Dialog,
html.forour-mobile .mx_SpotlightDialog_wrapper .mx_SpotlightDialog {
  animation: forour-scale-up 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

html.forour-mobile .mx_ContextualMenu_wrapper .mx_ContextualMenu,
html.forour-mobile .mx_IconizedContextMenu {
  animation: forour-fade-in 0.15s ease-out forwards, forour-slide-up 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
  transform-origin: top center !important;
}

@keyframes forour-slide-in-right {
  from { transform: translateX(30%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes forour-slide-in-left {
  from { transform: translateX(-30%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes forour-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes forour-scale-up {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes forour-slide-up {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}

/* Modern closing animations via allow-discrete and @starting-style */
html.forour-mobile .mx_Dialog_wrapper .mx_Dialog_background,
html.forour-mobile .mx_Dialog_wrapper .mx_Dialog,
html.forour-mobile .mx_SpotlightDialog_wrapper .mx_SpotlightDialog,
html.forour-mobile .mx_ContextualMenu_wrapper .mx_ContextualMenu,
html.forour-mobile .mx_IconizedContextMenu {
  transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete !important;
}

@starting-style {
  html.forour-mobile .mx_Dialog_wrapper .mx_Dialog_background {
    opacity: 0 !important;
  }
  html.forour-mobile .mx_Dialog_wrapper .mx_Dialog,
  html.forour-mobile .mx_SpotlightDialog_wrapper .mx_SpotlightDialog {
    opacity: 0 !important;
    transform: scale(0.95) !important;
  }
  html.forour-mobile .mx_ContextualMenu_wrapper .mx_ContextualMenu,
  html.forour-mobile .mx_IconizedContextMenu {
    opacity: 0 !important;
    transform: translateY(12px) !important;
  }
}