/* ============================================================================
   «Сборник» – чат по статье (страница статьи и выезжающая панель редактора).
   Чат небольшой и второстепенный: шапка в одну строку, плотные пузыри без
   кружков с инициалами, картинки – миниатюрами, поле ввода в одну строку
   со скрепкой и стрелкой «Отправить сообщение» по краям.
   Каркас карточки – .sb-chat / .sb-chat-head / .sb-chat-list / .sb-chat-form
   в theme.css; здесь – размеры и сообщения, которые рисует app.js (initChat):
   .chat-msg(.mine, .is-note, .cont, .deleted, .is-pending, .is-failed),
   .chat-event, .chat-day, .chat-new, .chat-file, .chat-img, .chat-tools …
   На странице статьи чат лежит в #chat-dock (.sb-chat-dock.offcanvas-xl):
   от 1200 px – узкая колонка справа, высота по сообщениям; уже – выезжающая панель.
   ========================================================================== */

/* шапка: «Чат по статье» одной строкой */
.sb-chat-head { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .375rem .5rem .375rem .875rem; }
.sb-chat-head h2 { flex: 1; min-width: 0; margin: 0; font-size: .9375rem; }
.sb-chat-head .sb-close { flex: none; width: 36px; height: 36px; margin: -.25rem 0; }

/* лента */
.sb-chat-list { padding: .625rem .75rem; gap: .5rem; }
.chat-empty { margin: auto; padding: 1rem .5rem; text-align: center; font-size: .8125rem; color: var(--sb-muted); }
.chat-empty[hidden] { display: none; }

/* день, события, «новые» */
.chat-day { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--sb-muted); }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--sb-line); }
.chat-event { align-self: center; max-width: 96%; text-align: center; font-size: .8125rem; line-height: 1.4; color: var(--sb-muted); }
.chat-event b { font-weight: 600; color: var(--sb-ink-2); }
.chat-new { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--sb-brand-700); }
.chat-new::before, .chat-new::after { content: ""; flex: 1; height: 1px; background: var(--sb-brand-200); }

/* сообщение: пузырь; имя – над первым пузырём подряд */
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 92%; position: relative; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.cont { margin-top: -.25rem; }
.chat-ava, .chat-ava-gap { display: none; }
.chat-bubble {
  min-width: 0; max-width: 100%; padding: .3125rem .625rem .25rem; border-radius: var(--sb-radius-lg);
  background: var(--sb-surface-2); border: 1px solid var(--sb-line); overflow-wrap: anywhere;
}
.chat-msg.mine .chat-bubble { background: var(--sb-brand-50); border-color: #c5e3e3; }
.chat-who { font-size: .8125rem; color: var(--sb-muted); }
.chat-who b { color: var(--sb-ink); font-weight: 600; }
.chat-text { line-height: 1.4; }
.chat-text a { overflow-wrap: anywhere; }
.chat-meta { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 .375rem; font-size: .8125rem; line-height: 1.3; color: var(--sb-muted); }
.chat-tick { color: var(--sb-brand-600); font-weight: 700; letter-spacing: -.12em; }

/* замечания руководителя – выделенное сообщение во всю ширину ленты: спокойный белый блок
   с тонкой рамкой, заголовок «Замечания руководителя», имя мелко рядом */
.chat-msg.is-note { align-self: stretch; max-width: 100%; }
.chat-msg.is-note .chat-bubble, .chat-msg.mine.is-note .chat-bubble { width: 100%; padding: .5rem .75rem .375rem; background: #fff; border-color: var(--sb-line-2); }
.chat-note-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; margin-bottom: .125rem; font-size: .8125rem; color: var(--sb-muted); }
.chat-note-head b { font-size: .875rem; font-weight: 700; color: var(--sb-ink); }

/* удалено, отправляется, не отправлено */
.chat-msg.deleted .chat-text { font-style: italic; color: var(--sb-muted); }
.chat-msg.is-pending { opacity: .72; }
.chat-msg.is-failed .chat-bubble { border-color: var(--sb-bad-line); background: var(--sb-bad-bg); }
.chat-msg.is-failed .chat-meta { color: var(--sb-bad-ink); align-items: center; }
.chat-msg.is-failed .sb-link-btn { min-height: 0; color: var(--sb-bad-ink); text-decoration: underline; }

/* файл – строкой, картинка – миниатюрой (открывается целиком по нажатию) */
.chat-file {
  display: flex; align-items: center; gap: .5rem; margin: .25rem 0; padding: .3125rem .5rem .3125rem .3125rem; min-height: 40px;
  border-radius: var(--sb-radius); background: #fff; border: 1px solid var(--sb-line-2); color: var(--sb-ink); text-decoration: none;
}
.chat-file:hover { border-color: var(--sb-field); text-decoration: none; color: var(--sb-ink); }
.chat-file-ico {
  flex: none; min-width: 2.25rem; height: 2rem; padding: 0 .25rem; border-radius: var(--sb-radius); background: var(--sb-brand-50); color: var(--sb-brand-800);
  display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700;
}
.chat-file-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.chat-file-txt b { font-weight: 600; color: var(--sb-brand-700); overflow-wrap: anywhere; }
.chat-file-txt small { font-size: .8125rem; color: var(--sb-muted); }
.chat-img { display: block; margin: .25rem 0; }
.chat-img img { display: block; width: auto; max-width: min(100%, 6.5rem); max-height: 4.5rem; object-fit: cover; border-radius: var(--sb-radius-lg); border: 1px solid var(--sb-line); background: #fff; }
.chat-progress { height: 4px; border-radius: var(--sb-radius); background: var(--sb-line); margin: .375rem 0 .125rem; overflow: hidden; }
.chat-progress > span { display: block; height: 100%; width: 0; background: var(--sb-brand); transition: width .2s; }

/* «Изменить / Удалить» своего сообщения (первые 15 минут) */
.chat-tools { display: flex; gap: 1rem; padding: 0 .25rem; }
.chat-tools .sb-link-btn { min-height: 2rem; font-size: .8125rem; color: var(--sb-muted); font-weight: 500; }
.chat-tools .sb-link-btn:hover { color: var(--sb-brand-700); }
@media (hover: hover) and (pointer: fine) {
  /* с мышью – над пузырём при наведении: ни места под сообщением, ни выхода за узкую колонку */
  .chat-msg.mine .chat-tools {
    position: absolute; right: 0; bottom: 100%; z-index: 2; gap: .75rem; padding: 0 .5rem;
    background: #fff; border: 1px solid var(--sb-line); border-radius: var(--sb-radius); opacity: 0; transition: opacity .12s;
  }
  .chat-msg.mine .chat-tools .sb-link-btn { min-height: 1.75rem; white-space: nowrap; }
  .chat-msg:hover .chat-tools, .chat-msg:focus-within .chat-tools { opacity: 1; }
}
@media (pointer: coarse) { .chat-tools .sb-link-btn { min-height: 44px; } }
.chat-edit { margin-top: .25rem; min-width: min(15rem, 70vw); }
.chat-edit > div { display: flex; gap: .5rem; margin-top: .5rem; justify-content: flex-end; }

/* «Новые сообщения ↓» – над полем ввода, когда лента прокручена вверх */
.chat-jump { align-self: center; position: relative; z-index: 2; margin: -2.75rem auto .5rem; box-shadow: 0 2px 8px rgba(22, 29, 34, .18); }
.chat-stale { padding: .625rem .875rem; background: #fff; border-top: 1px solid var(--sb-line); color: var(--sb-ink); }
.chat-stale .sb-link-btn { min-height: 0; text-decoration: underline; }

/* поле ввода: скрепка – поле в одну строку (растёт по тексту) – стрелка */
.sb-chat-form { padding: .375rem; }
.sb-chat-row { flex-wrap: nowrap; align-items: flex-end; gap: .125rem; margin: 0; }
.sb-chat-form textarea { flex: 1 1 auto; min-width: 0; min-height: 34px; height: 34px; max-height: 10rem; padding: .375rem .625rem; line-height: 1.4; resize: none; }
.sb-chat-ic {
  flex: none; width: 34px; height: 34px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--sb-radius); background: transparent; color: var(--sb-muted); cursor: pointer;
}
/* подсветка – только под мышью: на телефоне после нажатия «Чат» она залипала на скрепке */
@media (hover: hover) {
  .sb-chat-ic:hover { background: var(--sb-surface-2); color: var(--sb-ink); }
  .sb-chat-send:hover { color: var(--sb-brand-800); background: var(--sb-brand-50); }
}
.sb-chat-ic:focus-visible, .sb-chat-ic:has(:focus-visible) { outline: 0; box-shadow: var(--sb-focus); }
.sb-chat-ic > .sb-ic { width: 1.125rem; height: 1.125rem; }
.sb-chat-send { color: var(--sb-brand-700); }
.sb-chat-send:disabled { opacity: .5; }
.chat-status { display: block; margin: 0 .25rem .25rem; font-size: .8125rem; color: var(--sb-muted); }
.chat-status:empty { display: none; }
.chat-status.bad { color: var(--sb-bad-ink); }
.chat.is-drop { outline: 3px dashed var(--sb-brand); outline-offset: -3px; }

/* палец: кнопки и поле не меньше 44 px */
@media (max-width: 991.98px) {
  .sb-chat-ic { width: 44px; height: 44px; }
  .sb-chat-form textarea { min-height: 44px; height: 44px; padding: .5625rem .75rem; }
  .sb-chat-head .sb-close { width: 44px; height: 44px; }
}

/* чат в выезжающей панели редактора – во всю высоту панели */
.offcanvas .chat-in-drawer { height: 100%; border: 0; border-radius: 0; margin: 0; box-shadow: none; }
.offcanvas .chat-in-drawer .sb-chat-list { max-height: none; }
#chat-drawer .offcanvas-body { padding: 0; display: flex; flex-direction: column; }

/* ---- чат на странице статьи (#chat-dock) ---- */
#chat-dock { --bs-offcanvas-width: min(26rem, 100vw); }
.sb-chat-dock > .sb-chat { margin: 0; }
@media (min-width: 1200px) {
  .sb-article-grid { grid-template-columns: minmax(0, 1fr) 19rem; }
  .sb-article-grid > .sb-chat-dock { grid-area: chat; position: sticky; top: calc(var(--sb-header-h) + 1rem); }
  /* высота – по сообщениям, но не больше 60 % экрана */
  .sb-chat-dock > .sb-chat { max-height: min(60vh, calc(100vh - var(--sb-header-h) - 2rem)); }
  .sb-chat-dock .sb-chat-list { max-height: none; }
}
@media (max-width: 1199.98px) {
  .sb-chat-dock > .sb-chat { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .sb-chat-dock .sb-chat-list { max-height: none; }
  .sb-chat-dock .sb-chat-form { padding-bottom: calc(.375rem + env(safe-area-inset-bottom)); }
}