/* v2-68h.css — волна 68, срез H: переписка «Я веду» (вариант A), «Быстрые ответы», «Подсказать ответ»,
   десктоп-переписка без колонки «Кратко» (68J). Макеты: docs/design-68/handoff-*, quick-*, desk-2-conv.
   Только токены tokens.css, иконки — из icons.js, hover — только в @media (hover: hover). */

[hidden].v2b-take, [hidden].v2b-reply, [hidden].v2b-handbar, [hidden].v2b-ainote, [hidden].v2b-aitools { display: none !important; }

/* ── Нижняя панель: «Я веду» вместо поля ввода ── */
.v2b-take { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.v2b-take__btn {
  height: 52px; border: 0; border-radius: var(--radius-md); background: var(--text); color: var(--surface);
  font: inherit; font-size: var(--text-headline); font-weight: var(--weight-semibold); cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.v2b-take__btn:active { transform: scale(0.98); }
.v2b-take__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.v2b-take__sub { margin: 0; text-align: center; font-size: var(--text-footnote); color: var(--text-muted); }
@media (min-width: 1024px) {
  .v2b-take { align-items: center; }
  .v2b-take__btn { width: 100%; max-width: 360px; }
}

/* ── Плашка «Ведёте вы — бот молчит» ── */
.v2b-handbar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px;
  border-radius: var(--radius-lg); background: var(--warn-soft); border: 1px solid var(--why-border);
}
.v2b-handbar__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2b-handbar__title { font-size: var(--text-callout); font-weight: var(--weight-semibold); color: var(--text); }
.v2b-handbar__sub { font-size: var(--text-footnote); color: var(--text-muted); line-height: 1.35; }
.v2b-handbar__back {
  flex: none; min-height: 44px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-callout); font-weight: var(--weight-semibold);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.v2b-handbar__back:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.v2b-ibc .v2b-handbar { margin: 12px 12px 0; }
.v2b-ib-chat > .v2b-dlg > .v2b-handbar { flex: none; }

/* ── Ряд быстрых ответов и «Подсказать ответ» ── */
.v2b-reply { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v2b-qr { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.v2b-qr::-webkit-scrollbar { display: none; }
.v2b-ibc .v2b-qr { margin: 0 -12px; padding: 2px 12px; }
.v2b-qr__chip, .v2b-qr__ai {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-callout);
  font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.v2b-qr__chip .icon, .v2b-qr__ai .icon { width: 16px; height: 16px; }
.v2b-qr__ai { border-color: var(--text); font-weight: var(--weight-semibold); }
.v2b-qr__ai.is-on { background: var(--text); color: var(--surface); }
.v2b-qr__ai:disabled { opacity: 0.6; cursor: default; }
.v2b-qr__edit { padding: 0 12px; color: var(--text-muted); }
.v2b-qr__chip:focus-visible, .v2b-qr__ai:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (min-width: 1024px) { .v2b-qr { flex-wrap: wrap; overflow: visible; } }
@media (hover: hover) and (pointer: fine) {
  .v2b-qr__chip:hover { background: var(--surface-hover); }
  .v2b-qr__ai:not(.is-on):hover { background: var(--surface-hover); }
}
.v2b-ainote { margin: 2px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-footnote); line-height: 1.4; color: var(--text-muted); }
.v2b-ainote .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.v2b-ainote b { color: var(--text); font-weight: var(--weight-semibold); }
.v2b-aitools { display: flex; gap: 14px; flex-wrap: wrap; }
.v2b-aitools__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-muted);
  font: inherit; font-size: var(--text-callout); font-weight: var(--weight-medium); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.v2b-aitools__btn .icon { width: 16px; height: 16px; }
.v2b-aitools__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) { .v2b-aitools__btn:hover { color: var(--text); } }

/* ── Вложение клиента (поле media): голосовое, фото, файл ── */
.v2b-msg--media { max-width: 78%; }
.v2b-media {
  display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 12px 14px; border-radius: var(--radius-lg);
  border-bottom-left-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.v2b-media__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--text); color: var(--surface); display: grid; place-items: center; }
.v2b-media__ic .icon { width: 20px; height: 20px; }
.v2b-media__bars { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.v2b-media__bars i { display: block; width: 3px; border-radius: 2px; background: var(--border-strong); }
.v2b-media__label { font-size: var(--text-body); font-weight: var(--weight-medium); }
.v2b-media__cap { margin-top: 2px; }
.v2b-dlg-medianote { align-self: center; max-width: 92%; margin: 4px 0 0; text-align: center; font-size: var(--text-footnote); line-height: 1.4; color: var(--text-muted); }

/* ── Статус режима в шапке (вместо сегмента) ── */
.v2b-hstate { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-footnote); color: var(--text-muted); white-space: nowrap; }
.v2b-hstate__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.v2b-hstate[data-mode="human"] .v2b-hstate__dot { background: var(--warn); }
.v2b-hstate__main { font-weight: var(--weight-semibold); color: var(--text); }
.v2b-hstate.is-line { padding: 0 2px; font-size: var(--text-callout); white-space: normal; }
.v2b-hstate.is-line .v2b-hstate__dot { margin-right: 2px; }

/* ── Список диалогов: «Ведёте вы» ── */
.v2b-th__flag { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.v2b-th__human { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--warn); }
.v2b-th__human-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

/* ── Десктоп-переписка (68J): очередь · переписка, чипы «Кратко» — в шапке ── */
.v2b-ib-head { align-items: flex-start; }
.v2b-ib-head__main { min-width: 0; }
.v2b-ib-head__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; }
.v2b-ib-head__card { font-size: var(--text-callout); font-weight: var(--weight-semibold); color: var(--link); text-decoration: none; white-space: nowrap; }
.v2b-ib-head__card:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) { .v2b-ib-head__card:hover { color: var(--accent-hover); } }
.v2b-ib-head__chips { margin-top: 2px; align-items: center; row-gap: 6px; }
.v2b-ib-head__note { max-width: 100%; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-footnote); color: var(--text-muted); }
.v2b-ib-head__facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: var(--text-footnote); color: var(--text); }
.v2b-ib-head__fk { color: var(--text-muted); }
.v2b-ib-head__book { font-size: var(--text-footnote); color: var(--text-muted); }
/* подпись канала не ломается по буквам: переносится по словам, не уже своего содержимого */
.v2b-ib-head .v2b-cw-ident { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.v2b-ib-head .v2b-cw-ident__txt { overflow-wrap: break-word; word-break: normal; min-width: 0; }
.v2b-ib-head__name { max-width: 100%; }

/* ссылка «Вся переписка →» в карточке клиента (раньше жила рядом с правилами «Кратко») */
.v2b-ib-brief__link { font-size: var(--text-callout); font-weight: var(--weight-semibold); color: var(--link); text-decoration: none; }
.v2b-ib-brief__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) { .v2b-ib-brief__link:hover { color: var(--accent-hover); } }

/* ── Экран «Быстрые ответы» (#/quick-replies) ── */
.qr-back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 0 -4px; padding: 0 4px; color: var(--text-muted);
  font-size: 15px; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.qr-back .icon { width: 20px; height: 20px; stroke-width: 2; }
.qr-back:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.qr-screen { display: flex; flex-direction: column; gap: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.qr-sub { margin: 0; color: var(--text-muted); font-size: var(--text-callout); line-height: 1.4; }
.qr-note { margin: 0 4px; font-size: var(--text-footnote); color: var(--text-faint); }
.qr-screen .v2-group { margin-left: 0; margin-right: 0; }
.qr-row { align-items: center; }
.qr-row__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.qr-dots {
  flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--text-muted); display: grid;
  place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qr-dots .icon { width: 20px; height: 20px; }
.qr-dots:focus-visible, .qr-add:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }
.qr-add {
  flex: none; min-height: 44px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--text-callout); font-weight: var(--weight-semibold); cursor: pointer;
}
.qr-add:disabled { opacity: 0.5; cursor: default; }
.qr-empty { margin: 0; padding: 16px; color: var(--text-muted); font-size: var(--text-callout); line-height: 1.4; }
.qr-bar.lv-bar {
  display: flex; align-items: center; margin: 0 auto; border-radius: 0; box-shadow: none; background: rgba(255, 255, 255, 0.96); border: 0;
  border-top: 1px solid var(--border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 680px;
}
.qr-bar .lv-btn { min-height: 52px; width: 100%; justify-content: center; }
@media (min-width: 1024px) {
  .qr-screen { max-width: 640px; padding-bottom: 12px; }
  .qr-bar.lv-bar { position: static; max-width: 640px; margin: 0; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .qr-bar .lv-btn { width: auto; padding: 0 24px; }
}
.qr-sheet { display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 8px; }
.qr-sheet .sheet__title { margin: 0; }
.qr-field { display: flex; flex-direction: column; gap: 6px; }
.qr-field__label { font-size: var(--text-footnote); font-weight: var(--weight-medium); color: var(--text-muted); }
.qr-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-input); line-height: 22px;
}
.qr-input--area { min-height: 120px; resize: vertical; }
.qr-input:focus { outline: none; border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.qr-hint { margin: 0; font-size: var(--text-footnote); color: var(--text-faint); }
.qr-save { width: 100%; min-height: 52px; }
.qr-menu { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 8px; }
.qr-menu .sheet__title { margin: 0; }
.more-item--danger .more-item__title, .more-item--danger .more-item__icon { color: var(--danger); }
.more-item:disabled { opacity: 0.4; cursor: default; }

/* поле ответа: рамку фокуса рисует сам композер (без второй внутри) */
.v2b-dlg-input:focus, .v2b-dlg-input:focus-visible { outline: none; box-shadow: none; }
