/* Встроенная поддержка: чат пользователь ↔ администратор (#screen-support) и список
   обращений в админке (#admin-support). Пузыри-сообщения, композер над матовым
   доком, строки тредов. Материалы/радиусы/акцент — из токенов. */

/* Чат заполняет экран: сообщения скроллятся, композер закреплён снизу. */
#screen-support .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.chat__scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px var(--gutter) 12px;
  overscroll-behavior: contain;
}
.chat__scroll::-webkit-scrollbar { display: none; }

.msg { display: flex; flex-direction: column; max-width: 82%; }
.msg--me { align-self: flex-end; align-items: flex-end; }
.msg--them { align-self: flex-start; align-items: flex-start; }
.msg__bubble {
  padding: 9px 13px; border-radius: 18px;
  font-size: 15px; line-height: 1.4; color: var(--t1);
  background: var(--surface-2); overflow-wrap: anywhere;
}
.msg--me .msg__bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.msg--them .msg__bubble { border-bottom-left-radius: 6px; box-shadow: var(--shadow-1); }
.msg__time { font-size: 11px; color: var(--t4); margin: 3px 6px 0; }

/* Пустое состояние центрируем в ленте (margin:auto в flex-колонке). */
.chat__empty { margin: auto; max-width: 280px; padding: 28px var(--gutter); text-align: center; color: var(--t3); font-size: 14px; line-height: 1.55; }

.composer {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px var(--gutter) calc(10px + var(--safe-b));
  background: var(--surface-1);
  box-shadow: 0 -1px 0 var(--line);
}
.composer__input {
  flex: 1; resize: none; max-height: 140px;
  padding: 10px 14px; border-radius: 20px;
  background: var(--surface-2); color: var(--t1);
  font-size: 16px; line-height: 1.35;   /* 16px — иначе iOS зумит поле при фокусе */
}
.composer__input::placeholder { color: var(--t4); }
.composer__send {
  flex: none; width: 40px; height: 40px; border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  transition: transform var(--dur-press) var(--ease), background var(--dur) var(--ease);
}
.composer__send:active { transform: scale(0.92); background: var(--accent-deep); }

/* Мобайл: композер садится НАД матовым доком (мини-плеер + таб-бар — оверлей). */
@media (max-width: 767px) {
  .composer { margin-bottom: calc(var(--tabbar-h) + var(--minicard-h) + var(--safe-b)); padding-bottom: 10px; }
}

/* Список обращений в админке. */
#admin-support { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.threadrow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: var(--r-card);
  background: var(--surface-1); color: var(--t1); text-align: left;
  box-shadow: var(--shadow-1);
  transition: background var(--dur) var(--ease), transform var(--dur-press) var(--ease);
}
.threadrow:active { background: var(--surface-2); transform: scale(0.99); }
.threadrow__text { flex: 1; min-width: 0; }
.threadrow__name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.threadrow__last { font-size: 13px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

@media (prefers-contrast: more) {
  .msg--them .msg__bubble, .threadrow { background: var(--surface-2); }
}