.chat-list-page .chat-list-item { gap:12px; padding:16px; }

.chat-list-link { display:flex; flex:1; min-width:0; gap:16px; align-items:center; color:var(--text); text-decoration:none; }

.chat-list-link .chat-list-main { flex:1; min-width:0; }

.chat-list-link .chat-list-title { overflow-wrap:anywhere; }

.chat-list-link .chat-list-last { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

.chat-list-order { color:var(--text-muted); font-size:12px; margin:4px 0; }

.chat-list-page .chat-list-meta { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

.chat-list-item.is-pinned { border-color:var(--border-strong); }

html.embedded-order-chat body.chat-detail-route .chat-detail-page { padding:16px 20px 20px; height:100dvh; box-sizing:border-box; gap:12px; }

html.embedded-order-chat .chat-detail-page > .breadcrumb { display:none; }

html.embedded-order-chat .chat-detail-page > .row-sb { margin:0; }

html.embedded-order-chat .chat-detail-page .page-title { font-size:18px; line-height:1.35; overflow-wrap:anywhere; }

html.embedded-order-chat .chat-context { margin:0; max-height:28vh; overflow:auto; flex-shrink:0; }

html.embedded-order-chat .chat-window { min-height:100px; }

html.embedded-order-chat .chat-composer { padding-bottom:env(safe-area-inset-bottom,0px); }

@media (max-width:600px) {
.chat-list-page .chat-list-item { padding:12px; gap:8px; align-items:flex-start; }

.chat-list-link { flex-direction:column; align-items:stretch; gap:10px; }

.chat-list-page .chat-list-meta { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; }

html.embedded-order-chat body.chat-detail-route .chat-detail-page { padding:12px; gap:8px; }

html.embedded-order-chat .chat-context { max-height:24vh; }

html.embedded-order-chat .chat-context-notices { font-size:11px; }

}
/* Органы закрепления строки — ПОСЛЕ ссылки-выбора чата (порядок детей задаёт
   renderItem; карточка #71579882, п. 4): главная зона строки слева остаётся
   клику «выбрать чат», закрепление снимается только булавкой. */
.chat-pin-controls {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:2px;
}
/* Булавка и ручка — иконочные кнопки кита `.btn.btn-ghost.btn-sm.btn-icon`
   (32×32, закон 5, решение интегратора 2 от 11-10): размер, фон по наведению и
   иконку 14 px задаёт components.css. Здесь — только цвет покоя и состояние.
   Закреплено — акцентная иконка БЕЗ подложки: `--accent-note` сам
   темизируется (6,2:1 на светлой поверхности, 11,6:1 на тёмной); пастель под
   иконкой — «плашка», от которой владелец просил уйти. Состояние несёт
   `aria-pressed`, `.is-active` — его зеркало для облика. */
.chat-pin-toggle,
.chat-pin-handle { color:var(--text-muted); }
.chat-pin-toggle.is-active,
.chat-pin-toggle[aria-pressed="true"] { color:var(--accent-note); }
.chat-pin-toggle:focus-visible,
.chat-pin-handle:focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:1px;
  box-shadow:none;
}
.chat-pin-handle:not(:disabled) { cursor:grab; touch-action:none; }
.chat-pin-handle:not(:disabled):active { cursor:grabbing; }
.chat-pin-handle:disabled { opacity:.32; cursor:default; }
.is-chat-pin-drag-source { opacity:0; }
[data-chat-pin-item].is-chat-pin-shifting {
  transform:translateY(var(--chat-pin-shift,0));
  transition:transform .16s ease;
}
@media (prefers-reduced-motion:reduce) {
  [data-chat-pin-item].is-chat-pin-shifting { transition:none; }
}
@media (max-width:600px) {
  /* Булавка — справа, сразу за строкой меты (статус, счётчик непрочитанных,
     время), а не колонкой на всю левую кромку, как было. Строка на телефоне —
     та же строка «аватар слева, текст справа» (chat.css, ревью bus#2474 п. 6),
     поэтому контролы остаются строкой и центрируются по высоте, как в ките
     (`.sort-item`); колоночная раскладка прежнего блока снята. */
  .chat-list-page .chat-list-item { align-items:center; }
  .chat-pin-controls { flex-direction:row; }
}