/* ============================================
   Улучшенные мобильные стили для Element Web
   ============================================ */

/* Базовые настройки для мобильных */
@media only screen and (max-width: 768px) {
  
  /* Убираем сжатие контента */
  .mx_RoomView_wrapper {
    min-width: 100% !important;
    width: 100% !important;
  }

  .mx_RoomView_body {
    min-width: 100% !important;
    width: 100% !important;
  }

  /* Список комнат - полная ширина на мобильном */
  .mx_LeftPanel {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Панель комнаты - полная ширина */
  .mx_RoomView {
    min-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Временная лента сообщений */
  .mx_RoomView_timeline {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
  }

  /* Сообщения в чате */
  .mx_EventTile {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Текст сообщения */
  .mx_EventTile_line {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Контейнер сообщения */
  .mx_EventTile_msgOption {
    padding-right: 8px !important;
  }

  /* Поле ввода сообщения */
  .mx_MessageComposer {
    padding: 8px !important;
    min-width: 100% !important;
    width: 100% !important;
  }

  .mx_MessageComposer_wrapper {
    width: 100% !important;
    padding: 8px !important;
  }

  /* Кнопки в композере */
  .mx_MessageComposer_actions {
    padding: 4px !important;
  }

  /* Поле ввода текста */
  .mx_SendMessageComposer {
    width: 100% !important;
    min-height: 60px !important;
  }

  /* Заголовок комнаты */
  .mx_RoomHeader {
    padding: 8px 12px !important;
    min-height: 56px !important;
  }

  .mx_RoomHeader_wrapper {
    padding: 8px 12px !important;
  }

  /* Имя комнаты - не сжимать */
  .mx_RoomHeader_name {
    font-size: 16px !important;
    max-width: calc(100vw - 120px) !important;
  }

  /* Информация о комнате */
  .mx_RoomHeader_info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Кнопки в заголовке */
  .mx_RoomHeader_button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
  }

  /* Список участников */
  .mx_RightPanel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Аватары */
  .mx_BaseAvatar {
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .mx_EventTile_avatar {
    flex-shrink: 0 !important;
  }

  /* Время сообщения */
  .mx_MessageTimestamp {
    font-size: 11px !important;
    margin-left: 4px !important;
  }

  /* Реакции */
  .mx_ReactionPicker {
    max-width: calc(100vw - 20px) !important;
  }

  /* Диалоги и модальные окна */
  .mx_Dialog {
    max-width: calc(100vw - 32px) !important;
    margin: 16px !important;
  }

  /* Меню */
  .mx_ContextualMenu {
    max-width: calc(100vw - 32px) !important;
  }

  /* Вложения */
  .mx_MImageBody,
  .mx_MVideoBody,
  .mx_MFileBody {
    max-width: 100% !important;
  }

  /* Изображения в сообщениях */
  .mx_MImageBody_thumbnail {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Кнопки отправки */
  .mx_MessageComposer_sendMessage {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Убираем горизонтальный скролл */
  .mx_MatrixChat {
    overflow-x: hidden !important;
  }

  .mx_RoomView_body {
    overflow-x: hidden !important;
  }

  /* Поиск */
  .mx_SearchBar {
    padding: 8px 12px !important;
  }

  /* Уведомления */
  .mx_Toast_toast {
    max-width: calc(100vw - 32px) !important;
    margin: 8px 16px !important;
  }
}

/* Очень маленькие экраны (< 375px) */
@media only screen and (max-width: 375px) {
  
  .mx_RoomHeader_name {
    font-size: 14px !important;
    max-width: calc(100vw - 100px) !important;
  }

  .mx_EventTile {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .mx_MessageComposer {
    padding: 4px !important;
  }

  .mx_BaseAvatar {
    min-width: 28px !important;
    min-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }
}

/* Альбомная ориентация на мобильном */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  
  .mx_RoomHeader {
    min-height: 48px !important;
    padding: 4px 8px !important;
  }

  .mx_MessageComposer {
    padding: 4px !important;
  }

  .mx_SendMessageComposer {
    min-height: 44px !important;
  }

  /* Скрываем некритичные элементы в landscape */
  .mx_RoomView_auxPanel {
    max-height: 30vh !important;
  }
}

/* Планшеты (768px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  
  .mx_LeftPanel {
    min-width: 280px !important;
    max-width: 320px !important;
  }

  .mx_RoomView {
    width: calc(100% - 280px) !important;
  }

  .mx_EventTile {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Улучшение touch взаимодействий */
@media (hover: none) and (pointer: coarse) {
  
  /* Все кликабельные элементы */
  button,
  a,
  [role="button"],
  .mx_AccessibleButton {
    min-height: 44px !important;
    padding: 8px !important;
    touch-action: manipulation !important;
  }

  /* Активное состояние */
  button:active,
  a:active,
  [role="button"]:active,
  .mx_AccessibleButton:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
  }

  /* Убираем hover эффекты на touch устройствах */
  *:hover {
    background-color: inherit !important;
  }

  /* Но добавляем active эффект */
  .mx_EventTile:active {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }
}

/* Оптимизация производительности */
.mx_RoomView_timeline {
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

.mx_ScrollPanel {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Предотвращение случайного зума */
input,
textarea,
select {
  font-size: 16px !important;
  touch-action: manipulation !important;
}

/* Safe area для iPhone с вырезом */
@supports (padding: env(safe-area-inset-top)) {
  
  .mx_MatrixChat {
    padding-top: env(safe-area-inset-top) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .mx_RoomHeader {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
  }

  .mx_MessageComposer {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

/* Фикс для клавиатуры на iOS */
@supports (-webkit-touch-callout: none) {
  
  .mx_MessageComposer {
    position: sticky !important;
    bottom: 0 !important;
  }

  /* Когда клавиатура открыта */
  .mx_RoomView_timeline {
    padding-bottom: 20px !important;
  }
}

/* Скрыть десктопные элементы на мобильном */
@media only screen and (max-width: 768px) {
  
  /* Скрыть правую панель если она не нужна */
  .mx_RightPanel:not(.mx_RightPanel_shown) {
    display: none !important;
  }

  /* Упростить тулбар */
  .mx_RoomHeader_toolbar {
    flex-wrap: nowrap !important;
  }

  /* Скрыть breadcrumbs на маленьких экранах */
  .mx_RoomBreadcrumbs {
    display: none !important;
  }
}

/* Темная тема оптимизация */
@media only screen and (max-width: 768px) and (prefers-color-scheme: dark) {
  
  /* Снижение яркости для экономии батареи */
  .mx_EventTile {
    background-color: #0a0a0a !important;
  }

  .mx_RoomView {
    background-color: #000000 !important;
  }
}

/* Accessibility - увеличенный шрифт */
@media only screen and (max-width: 768px) {
  
  .mx_EventTile_content {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Имя отправителя */
  .mx_EventTile_sender {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
}

/* Фикс для длинных сообщений */
@media only screen and (max-width: 768px) {
  
  .mx_EventTile_body {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Длинные ссылки */
  .mx_EventTile_body a {
    word-break: break-all !important;
  }

  /* Код блоки */
  .mx_EventTile_pre_container {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }
}