/* MXMA /support: оформление чата поверх штатной страницы тикетов.
 *
 * Всё заскоуплено под html[data-mx-support]: атрибут ставит mx/support.js только когда нашёл
 * ожидаемые узлы страницы. Без него действует обычная штатная вёрстка.
 * Цвета только токенами кабинета (--color-*), без своих hex.
 *
 * Телефон (< 1024px) — два экрана: список обращений и переписка (html[data-mx-view]).
 * Десктоп (>= 1024px) — две колонки в высоту окна, страница не скроллится.
 */

/* ---- общее: страница не скроллится, скролл только внутри ленты и списка ---- */
html[data-mx-support],
html[data-mx-support] body {
  overflow: hidden;
  overscroll-behavior: none;
}

html[data-mx-support] [data-mx-role="main"] {
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html[data-mx-support] [data-mx-role="page"] {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* отступы space-y-* штатной вёрстки не нужны: расстояния задаёт gap */
html[data-mx-support] [data-mx-role="page"] > *,
html[data-mx-support] [data-mx-role="feed"] > *,
html[data-mx-support] [data-mx-role="inner"] > *,
html[data-mx-support] [data-mx-role="newform"] > *,
html[data-mx-support] [data-mx-role="list"] > div > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* шапка страницы: заголовок и кнопка «новое обращение» */
html[data-mx-support] [data-mx-role="extra"] {
  display: none;
}
html[data-mx-support] [data-mx-role="head"] {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html[data-mx-support] [data-mx-role="head"] h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* сетка: на десктопе две колонки */
html[data-mx-support] [data-mx-role="grid"] {
  flex: 1 1 auto;
  min-height: 0;
  gap: 16px;
}

/* карточки */
html[data-mx-support] [data-mx-role="list"],
html[data-mx-support] [data-mx-role="detail"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  grid-column: auto;
  padding: 16px;
}
html[data-mx-support] [data-mx-role="detail"] > * {
  flex: 1 1 auto;
  min-height: 0;
}

/* список обращений: свой скролл */
html[data-mx-support] [data-mx-role="list"] h2 {
  flex: 0 0 auto;
  margin: 0 0 12px;
}
html[data-mx-support] [data-mx-role="list"] > div > * {
  flex: 0 0 auto;
}
html[data-mx-support] [data-mx-role="list"] > div {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- переписка ---- */
html[data-mx-support] [data-mx-role="conv"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* шапка переписки: одна строка (тема с обрезкой и статус) */
html[data-mx-support] [data-mx-role="chead"],
html[data-mx-support] [data-mx-role="newroot"] > h2 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(var(--color-dark-700), 0.4);
}
html[data-mx-support] [data-mx-role="newroot"] > h2 {
  font-size: 1rem;
  line-height: 1.4;
}
html[data-mx-support] [data-mx-role="chead"] > div {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
html[data-mx-support] [data-mx-role="chead"] h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* строка «статус + дата создания»: остаётся только статус */
html[data-mx-support] [data-mx-role="chead"] > div > div {
  display: contents;
}
html[data-mx-support] [data-mx-role="chead"] > div > div > span {
  flex: 0 0 auto;
  white-space: nowrap;
}
html[data-mx-support] [data-mx-role="chead"] > div > div > span:not([class*="badge-"]) {
  display: none;
}

/* лента */
html[data-mx-support] [data-mx-role="feed"] {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* сообщения: пользователь справа с акцентным оттенком, оператор слева */
html[data-mx-support] [data-mx-role="feed"] > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(85%, 36rem);
  min-width: 0;
  margin: 0;   /* штатные отступы сообщений: края пузырей по краям поля ввода */
  padding: 8px 12px;
  border-radius: 18px;
  align-self: flex-start;
  overflow-wrap: anywhere;
  word-break: break-word;
  order: 0;
}
html[data-mx-support] [data-mx-role="feed"] > [data-mx-who="me"] {
  align-self: flex-end;
  border-color: rgba(var(--color-accent-500), 0.4);
  background: rgba(var(--color-accent-500), 0.1);
  border-bottom-right-radius: 6px;
}
html[data-mx-support] [data-mx-role="feed"] > [data-mx-who="op"] {
  align-self: flex-start;
  border-color: rgba(var(--color-dark-700), 0.6);
  background: rgba(0, 0, 0, 0.3);   /* темнее фона страницы: светлый текст читается контрастнее */
  border-bottom-left-radius: 6px;
}
/* текст обеих сторон самый светлый: на цветном фоне штатный серый читается хуже */
html[data-mx-support] [data-mx-role="feed"] > [data-mx-who] > .text-dark-200 {
  color: rgb(var(--color-dark-100));
}
/* строка «автор + время» разбирается на части: автор сверху, время под текстом */
html[data-mx-support] [data-mx-role="feed"] > div > div:first-child {
  display: contents;
}
html[data-mx-support] [data-mx-role="feed"] > div > * {
  order: 1;
  min-width: 0;
  max-width: 100%;
}
html[data-mx-support] [data-mx-role="feed"] > div > div:first-child > span:first-child {
  order: 0;
  font-size: 0.6875rem;
  line-height: 1rem;
}
html[data-mx-support] [data-mx-role="feed"] > [data-mx-who="me"] > div:first-child > span:first-child {
  display: none;
}
html[data-mx-support] [data-mx-role="feed"] > div > div:first-child > span:last-child {
  order: 2;
  align-self: flex-end;
  font-size: 0.625rem;
  line-height: 1rem;
  white-space: nowrap;
  opacity: 0.85;
}
html[data-mx-support] [data-mx-role="feed"] > div > div:not(:first-child) {
  font-size: 0.9375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* вложения: компактная сетка, а не квадрат во всю ширину */
html[data-mx-support] [data-mx-role="feed"] > div > div:not(:first-child):not([class*="whitespace"]) {
  width: 12rem;
  max-width: 100%;
  margin: 4px 0 0;
}
html[data-mx-support] [data-mx-role="feed"] a {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ---- поле ввода: скрепка, текст и отправка в одном поле ---- */
html[data-mx-support] [data-mx-role="form"] {
  flex: 0 0 auto;
  position: relative;
  margin: 0;
  padding: 8px 0 0;
  border-top: 0;
}
html[data-mx-support] [data-mx-role="inner"] {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas:
    "prev prev prev"
    "attach field send";
  align-items: end;
  padding: 4px;
  border: 1px solid rgba(var(--color-dark-700), 0.6);
  border-radius: 24px;
  background: rgba(var(--color-dark-800), 0.5);
  transition: border-color 0.2s;
}
html[data-mx-support] [data-mx-role="inner"]:focus-within {
  border-color: rgba(var(--color-accent-500), 0.5);
}
html[data-mx-support] [data-mx-role="inner"] > :nth-child(1) {
  grid-area: field;
  min-width: 0;
}
html[data-mx-support] [data-mx-role="inner"] > :nth-child(2) {
  grid-area: prev;
  min-width: 0;
}
html[data-mx-support] [data-mx-role="inner"] > :nth-child(2):has(> :not(input)) {
  padding: 4px 8px 8px;
}
html[data-mx-support] [data-mx-role="inner"] > :nth-child(3) {
  display: contents;
}
html[data-mx-support] [data-mx-role="inner"] textarea {
  min-height: 40px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  resize: none;
  font-size: 1rem;           /* не меньше 16px, иначе iOS приближает страницу */
  line-height: 1.5rem;
  overflow-y: hidden;
}
html[data-mx-support] [data-mx-role="inner"] textarea:focus {
  box-shadow: none;
  outline: none;
}
/* скрепка: только иконка */
html[data-mx-support] [data-mx-role="inner"] > :nth-child(3) > button[type="button"] {
  grid-area: attach;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  border-radius: 9999px;
}
html[data-mx-support] [data-mx-role="inner"] > :nth-child(3) > button[type="button"] svg {
  width: 22px;
  height: 22px;
}
/* отправка: круглая кнопка, лоадер штатный (Button loading) */
html[data-mx-support] [data-mx-role="inner"] > :nth-child(3) > button[type="submit"] {
  grid-area: send;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 9999px;
}
/* идёт отправка: кнопка остаётся яркой, вместо иконки штатный лоадер */
html[data-mx-support] form button[type="submit"]:has(.animate-spin) {
  opacity: 1;
  border-color: rgb(var(--color-accent-500));
  background-color: rgb(var(--color-accent-500));
  color: rgb(var(--color-on-accent));
}
html[data-mx-support] form button[type="submit"] .animate-spin {
  border-color: rgba(var(--color-on-accent), 0.25);
  border-top-color: rgb(var(--color-on-accent));
}
/* ошибка отправки поверх ленты: не сдвигает вёрстку */
html[data-mx-support] [data-mx-role="inner"] > :nth-child(n + 4) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 3;
  background-color: rgb(var(--color-dark-900));
  background-image: linear-gradient(rgba(var(--color-error-500), 0.12), rgba(var(--color-error-500), 0.12));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
html[data-mx-support] [data-mx-role="note"] {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 0 0;
  border-top: 0;
}

/* ---- новое обращение ---- */
html[data-mx-support] [data-mx-role="newroot"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
html[data-mx-support] [data-mx-role="newform"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  overflow-y: auto;
}
html[data-mx-support] [data-mx-role="newform"] > * {
  flex: 0 0 auto;
}
/* поле сообщения занимает всю свободную высоту */
html[data-mx-support] [data-mx-role="newform"] > :nth-child(2) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 136px;
}
html[data-mx-support] [data-mx-role="newform"] > :nth-child(2) textarea {
  flex: 1 1 auto;
  min-height: 96px;
  resize: none;
}
html[data-mx-support] [data-mx-role="newform"] .input {
  font-size: 1rem;
}

/* кнопка «назад» (единственный узел, которого нет у штатной страницы) */
html[data-mx-support] [data-mx-role="back"] {
  display: none;
}

/* ---- телефон: два экрана ---- */
@media (max-width: 1023.98px) {
  html[data-mx-support] [data-mx-role="main"] {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mx-top, 4rem);
    height: var(--mx-h, calc(100dvh - 9rem));
    padding: 8px 16px 0;   /* поля как у нижней навигации и шапки кабинета */
  }
  html[data-mx-support] [data-mx-role="head"] h1 {
    font-size: 1.375rem;
  }
  /* «+» справа без текста */
  html[data-mx-support] [data-mx-role="head"] button {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  html[data-mx-support] [data-mx-role="head"] button span {
    display: none;
  }
  html[data-mx-support] [data-mx-role="grid"] {
    display: block;
  }
  /* карточки плоские: нужен каждый пиксель */
  html[data-mx-support] [data-mx-role="list"],
  html[data-mx-support] [data-mx-role="detail"] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  html[data-mx-support] [data-mx-role="list"] h2 {
    display: none;
  }
  html[data-mx-support][data-mx-view="list"] [data-mx-role="detail"],
  html[data-mx-support][data-mx-view="chat"] [data-mx-role="list"],
  html[data-mx-support][data-mx-view="chat"] [data-mx-role="head"] {
    display: none;
  }
  /* под стрелку «назад» */
  html[data-mx-support] [data-mx-role="chead"],
  html[data-mx-support] [data-mx-role="newroot"] > h2 {
    padding-left: 44px;
  }
  html[data-mx-support][data-mx-view="chat"] [data-mx-role="back"] {
    display: flex;
    position: absolute;
    top: 10px;
    left: 16px;   /* край кнопки по общему полю */
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    z-index: 2;
  }
  /* клавиатура открыта: нижняя навигация прячется */
  html[data-mx-support][data-mx-kb] [data-mx-role="nav"] {
    display: none !important;
  }
}

/* ---- десктоп: две колонки в высоту окна ---- */
@media (min-width: 1024px) {
  html[data-mx-support] [data-mx-role="main"] {
    height: var(--mx-h, calc(100dvh - 3.5rem));
    padding-top: 16px;
    padding-bottom: 20px;
  }
  html[data-mx-support] [data-mx-role="grid"] {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  html[data-mx-support] [data-mx-role="feed"] > div {
    max-width: min(70%, 36rem);
  }
}
/* кнопка 36 px, а зона нажатия 44 px */
@media (max-width: 1023.98px) {
  html[data-mx-support] [data-mx-role="back"]::after {
    content: "";
    position: absolute;
    inset: -4px;
  }
}