/* Компактный вид Connector по умолчанию (реестр: docs/CORE-MODS.md).
   Подмешивается реверс-прокси, образ Element не тронут.
   Убирается одной строкой в Caddyfile. */
/* Компактность больше НЕ через css-zoom: он смещает всплывающие
   подсказки и меню (координаты считаются без учёта масштаба).
   Теперь масштаб задаёт ярлык Connector.cmd (--force-device-scale-factor)
   или сам человек: Ctrl и минус - браузер запоминает на сайт. */

/* Раскладка композера как в Telegram: скрепка слева от поля ввода */
.mx_MessageComposer_row {
  position: relative;
}
.mx_MessageComposer_row [aria-label="Вложение"],
.mx_MessageComposer_row [aria-label="Attachment"] {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}
.mx_MessageComposer_row .mx_BasicMessageComposer {
  margin-left: 40px;
}

/* Порядок левой панели как в Telegram: заголовок, ПОД ним поиск,
   фильтры, список. Классы у Element хешированные - матчим по кускам,
   при обновлении Element проверяется скрином (реестр CORE-MODS.md) */
.mx_RoomListPanel > [class*="_header_"] { order: 1; }
.mx_RoomListPanel > div:has([class*="_search_"]) { order: 2; }
.mx_RoomListPanel > div:has([class*="roomListPrimaryFilters"]) { order: 3; }
.mx_RoomListPanel > [class*="_list_"] { order: 4; }

/* Удалённые исчезают бесследно, как в Telegram (вместе с
   hideRedactions в element-config.json). CSS добивает краевой случай
   Element: нерасшифрованное удалённое событие рисует надгробие мимо
   настройки. Треды не используем, потери доступа к ним нет. */
.mx_EventTile:has(.mx_RedactedBody) { display: none; }

/* ------- Телеграм-вид (слой connector-design, реестр CORE-MODS.md) -- */

/* Пузыри сообщений: округление 16px, как в Telegram; у последнего
   в группе - маленький уголок-«хвостик» со стороны отправителя.
   Опоры на внутренности Element: data-layout="bubble" и data-self
   на плитке (покрыто автотестом smoke/design-check.mjs). */
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
  border-radius: 16px !important;
}
.mx_EventTile[data-layout="bubble"][data-self="true"]:not(:has(+ .mx_EventTile_continuation)) .mx_EventTile_line {
  border-bottom-right-radius: 6px !important;
}
.mx_EventTile[data-layout="bubble"][data-self="false"]:not(:has(+ .mx_EventTile_continuation)) .mx_EventTile_line {
  border-bottom-left-radius: 6px !important;
}

/* Реплай-цитата компактная, как в Telegram: цветная полоска слева,
   имя и ОДНА строка текста. Заодно чинит наложение: длинная или
   нерасшифрованная цитата больше не вылезает из пузыря. */
.mx_ReplyChain {
  margin: 0 0 4px !important;
  padding: 2px 8px !important;
  border-left-width: 3px !important;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.045);
  font-size: 13px;
  overflow: hidden;
}
.mx_ReplyChain .mx_ReplyTile {
  max-height: 40px;
  overflow: hidden;
}
.mx_ReplyChain .mx_ReplyTile_sender {
  font-weight: 600;
  margin-bottom: 0 !important;
}
/* в цитате только имя, без мини-аватарки - как в Telegram */
.mx_ReplyChain .mx_ReplyTile_sender .mx_BaseAvatar { display: none; }
.mx_ReplyChain .mx_EventTile_body,
.mx_ReplyChain .mx_EventTile_content {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Значок шифрования (замочек/предупреждение) не сидит на углу пузыря.
   Линия пузыря - flex-ряд с переносом: в высоком пузыре (с цитатой)
   значок попадал в собственный flex-ряд наверху и висел на скруглённом
   углу. У СВОИХ сообщений слева от пузыря всегда пусто - выносим значок
   туда и центрируем по вертикали (линия уже position: relative - в ней
   абсолютно позиционировано время). У чужих оставляем в потоке: там
   слева аватарка, а значок и так рисуется в строке с текстом.
   Значок остаётся видимым: это индикатор безопасности, прятать нельзя. */
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line > .mx_EventTile_e2eIcon {
  align-self: center;
  top: 0;
  transform: none;
}
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line > .mx_EventTile_e2eIcon {
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
}

/* Плавность, как в Telegram: мягкие ховеры кнопок и плиток (0.15s) */
/* плитки чатов - это button role="option" в [data-testid="room-list"],
   их кроет общее правило по button */
button,
[role="option"],
[role="menuitem"],
[role="treeitem"],
.mx_AccessibleButton {
  transition: background-color 0.15s ease, border-color 0.15s ease,
    opacity 0.15s ease, box-shadow 0.15s ease;
}
/* появление нового сообщения - мягкий подъём */
@keyframes cnd-появление {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
  animation: cnd-появление 0.18s ease-out;
}

/* Профиль пользователя (правая панель) в телеграмном виде: крупная
   аватарка сверху, жирное имя, статус, действия списком.
   Опора: классы mx_UserInfo Element (автотест design-check.mjs). */
.mx_UserInfo .mx_UserInfo_avatar { margin-top: 20px; }
.mx_UserInfo .mx_UserInfo_avatar .mx_BaseAvatar {
  --cpd-avatar-size: 120px !important;
}
.mx_UserInfo .mx_UserInfo_profile h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 10px 0 2px;
}
.mx_UserInfo .mx_UserInfo_profileStatus {
  font-size: 13px;
  color: var(--cpd-color-text-secondary, #656d76);
}
.mx_UserInfo .mx_UserInfo_profile_mxid { font-size: 13px; }
.mx_UserInfo .mx_UserInfo_container button[class*="_interactive_"] {
  border-radius: 8px;
}

/* Сводки, где ТОЛЬКО удаления - бесследно прячутся.
   Развёрнутая группа из одних надгробий (сводочной строки нет):
   прячем целиком CSS-ом. Свёрнутую строку «удалил(а) N сообщения(-й)»
   находит по тексту connector-design.js и вешает класс cnd-удаления.
   Комбинированные сводки (с приглашениями/входами) не трогаем. */
li.mx_GenericEventListSummary:not(:has(.mx_GenericEventListSummary_summary)):not(:has(.mx_EventTile:not(:has(.mx_RedactedBody)))) {
  display: none;
}
li.cnd-удаления { display: none !important; }

/* кнопка «назад» - существует в DOM только на мобильном (см. JS),
   но на всякий случай прячем по умолчанию вне мобильного брейкпоинта */
#cnd-назад { display: none; }

/* ===================== Мобильная раскладка (<=780px) =====================
   Родной Element Web НЕ адаптивный: проверено (curl bundle.css) - в нём
   вообще нет ни одного @media (max-width). На узком экране сплит-пейн
   списка чатов и открытой комнаты (библиотека react-resizable-panels)
   не умеет схлопнуться в одну колонку сам - панель списка получает
   flex-basis 0 и рендерится шириной 0, а открытая комната зажата
   в оставшиеся ~300px. Ниже - наш минимальный слой «одна панель разом»:
   список (и рельс пространств при нём) на весь экран, пока комната
   не открыта; открытая комната - на весь экран, список и рельс
   прячем. Взамен рельса - наша кнопка «назад» в шапке открытой
   комнаты (JS: connector-design.js, ведёт на #/home).
   Опоры на внутренности Element (проверять при каждом обновлении):
     - id="left-panel" - собственный, стабильный id Element на панели
       списка внутри сплит-пейна (react-resizable-panels); её сосед по
       группе - панель с открытой комнатой (несёт .mx_RoomView_wrapper)
     - .mx_Separator - ручка ресайза сплит-пейна (не нужна с тачем)
     - header.mx_RoomHeader - шапка открытой комнаты (не хэшированный
       класс, стабилен) - сюда JS вставляет кнопку «назад»
     - .mx_EventTile[data-layout="bubble"] .mx_EventTile_line - родной
       max-width:70% Element - на колонке ~300px даёт пузырь ~175px
       (перенос по одному слову/букве); на мобильном отдаём пузырю
       больше ширины
     - .mx_AuthPage_modal - общая обёртка модалки Element для экрана
       приветствия (.mx_Welcome), формы входа и заверения устройства
       (.mx_CompleteSecurityBody) - у части экранов фиксированная
       ширина в px шире 390px, обёртка .mx_AuthPage только со скроллом
       (overflow-x:auto), из-за чего край обрезан визуально
     - .mx_EncryptionCard (не хэшированный класс) - карточка «Подтвердите
       свою личность»/«Заверьте этот сеанс» ВНУТРИ .mx_CompleteSecurityBody:
       у неё СОБСТВЕННАЯ фиксированная ширина 600px, не связанная с шириной
       родителя - .mx_CompleteSecurityBody мы уже сжимали до 100%, но
       карточка внутри всё равно требовала 600px и вылезала (ground-truth:
       diag-confirm.mjs, right:632 при viewport 390 - заголовок и кнопки
       обрезаны по живому скрину m2-1-confirm-dialog.png)
     - .mx_FacePile (не хэшированный класс) - стопка аватарок «кто в
       чате» в шапке комнаты; на узкой шапке (иконки звонка/тредов/О
       чате уже занимают место) стопка вылезала за правый край
       viewport на ~13px и обрезалась ровно посередине буквы (нашли
       скриптом diag-header2.mjs: right края аватарок 391/403px при
       390px viewport). Кнопка «О чате» рядом даёт тот же список
       участников - на мобильном стопка просто лишняя, прячем
   Автотест: stack2/smoke/mobile-check.mjs */
@media (max-width: 780px) {
  .mx_Separator { display: none !important; }

  /* рельс пространств на мобильном не нужен вовсе (Spaces.allRoomsInHome
     держит все чаты в одном списке) - на однопанельном экране ему
     просто негде быть: и на экране списка съедал ~70px от «во всю
     ширину», и на экране открытой комнаты не сворачивался сам собой.
     Прячем безусловно, на обоих экранах */
  .mx_SpacePanel { display: none !important; }

  #left-panel,
  #left-panel ~ div:not(.mx_Separator) {
    flex: 1 1 100% !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* комната открыта - список прячем, комната на весь экран.
     ВАЖНО: маркер - .mx_RoomView_body (лента+композер), НЕ
     .mx_RoomView_wrapper. Ground-truth (diag-splitpane3.mjs):
     .mx_RoomView_wrapper есть в DOM ДАЖЕ на экране приветствия
     без открытой комнаты (общая обёртка правой панели) - селектор
     на нём считал «комната открыта» всегда, и список чатов был
     недостижим (ровно баг из независимого обзора). .mx_RoomView_body
     рендерится только у реально открытой комнаты - проверено: на
     /#/home его нет, на /#/room/... есть. */
  #left-panel:has(~ div .mx_RoomView_body) { display: none !important; }
  /* комнаты нет - список на весь экран, соседнюю панель (домашний
     экран) прячем: на мобильном список - главная навигация */
  #left-panel:not(:has(~ div .mx_RoomView_body)) ~ div:not(.mx_Separator) {
    display: none !important;
  }

  /* кнопка «назад к списку» в шапке открытой комнаты - вставляет
     connector-design.js; тут только внешний вид */
  #cnd-назад {
    display: flex !important; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; margin-right: 4px;
    border: 0; border-radius: 50%; background: none; cursor: pointer;
    color: var(--cpd-color-icon-primary, #17191c);
  }
  #cnd-назад:hover { background: var(--cpd-color-bg-action-secondary-hovered, #f0f2f5); }

  /* пузырь сообщения шире на узкой колонке - иначе перенос по слову/букве */
  .mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
    max-width: 92% !important;
  }

  /* стопка аватарок «кто в чате» в шапке комнаты вылезала за правый
     край и обрезалась (см. опору выше) - на мобильном прячем, «О
     чате» рядом даёт тот же список участников */
  header.mx_RoomHeader .mx_FacePile {
    display: none !important;
  }

  /* имя чата в шапке ужималось до трёх букв («Те...»), хотя место было.
     Ground-truth (diag-header3/diag-header4.mjs, viewport 390):
     .mx_RoomHeader_info - content-box с padding-right: 52px, то есть
     из 114px обёртки под содержимое остаётся 62px, и строке имени
     достаётся 40px. Эти 52px Element резервирует под стопку аватарок
     (.mx_FacePile), а её мы на мобильном прячем (см. правило выше) -
     место простаивало. Отдаём его имени: замер после правки - строка
     имени 92px вместо 40px. */
  header.mx_RoomHeader .mx_RoomHeader_info {
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  header.mx_RoomHeader .mx_RoomHeader_truncated {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* модалки Element (приветствие/вход/заверение устройства) шире экрана -
     обрезаны справа, доступны только скроллом, которого никто не ждёт */
  .mx_AuthPage_modal,
  .mx_AuthPage_modalContent,
  .mx_AuthPage_modal .mx_Dialog_border,
  .mx_Welcome,
  .mx_CompleteSecurityBody {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .mx_AuthPage { overflow-x: hidden !important; }

  /* карточка внутри модалки заверения устройства - см. опору выше,
     собственная ширина 600px рвёт узкий экран независимо от родителя */
  .mx_EncryptionCard {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* быстрый поиск (Ctrl+K) и подобные плавающие панели - тоже родом
     из десктопной ширины, обрезаны без переноса на узком экране */
  .mx_Dialog_fixedWidth,
  .mx_SpotlightDialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}