/* ===== Unistaff · публичное демо «поговори с сотрудником» (DESIGN-SM §7.9) · только токены из cabinet/tokens.css ===== */
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--gutter); max-width: var(--content-max); margin: 0 auto; }
.demo-top__brand { font-family: var(--font-voice); font-weight: 600; font-size: var(--fs-24); color: var(--bone); }
.demo-top__nav { display: flex; gap: var(--s-3); align-items: center; }
.lang { display: inline-flex; border: 1px solid var(--hairline-2); border-radius: var(--r-ctl); overflow: hidden; }
.lang button { height: 36px; min-width: 44px; padding: 0 var(--s-3); border: 0; background: transparent; color: var(--bone-70); font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.lang button[aria-pressed="true"] { background: var(--steel-dim); color: var(--steel); }

.demo { max-width: var(--content-max); margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-16); display: grid; gap: var(--s-12); }
.demo-hero { display: grid; gap: var(--s-5); }
.demo-h1 { font-size: var(--fs-48); line-height: var(--lh-tight); max-width: 26ch; }
.demo-h1 .line { display: block; overflow: hidden; }
/* хореография входа — в demo.js (Web Animations, fill: backwards): базовое состояние здесь финальное, поэтому
   пересчёт стилей (снимок всей страницы, смена размера окна) не оставляет заголовок под маской */
.demo-h1 .line > span { display: block; }
.demo-voice { max-width: 60ch; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

.demo-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-8); align-items: start; }
.demo-grid > * { min-width: 0; }
.demo-left .row__meta .chip, .emp-card .chip, .chat__badge .chip { white-space: normal; height: auto; min-height: 24px; line-height: 1.25; padding-top: 2px; padding-bottom: 2px; }
.demo-left { display: grid; gap: var(--s-5); }
.demo-left h2 { margin-top: 0; }
.demo-left .row { padding: var(--s-3); grid-template-columns: 28px minmax(0, 1fr); }
.demo-left .row__chips { margin-top: var(--s-2); gap: var(--s-1); }
.demo-left .row[data-state]:not([data-state="on_line"]) .row__title { color: var(--bone-70); }
.avatar--28 { width: 28px; height: 28px; font-size: var(--fs-13); }
.chip--real { border-color: var(--hairline-2); color: var(--bone); }
.demo-left .row__sub { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.demo-right { display: grid; gap: var(--s-6); }

.emp-card { background: var(--plate); border-radius: var(--r-plate); padding: var(--s-5); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-8); align-items: center; }
.emp-card[hidden] { display: none; }
.emp-card__facts { display: grid; gap: var(--s-2); justify-items: start; }
.emp-card__head { display: flex; gap: var(--s-4); align-items: center; }
.emp-card__name { font-family: var(--font-voice); font-weight: 600; font-size: var(--fs-30); line-height: 1.1; }
.emp-card__role { color: var(--bone-70); font-size: var(--fs-15); }
.emp-card__line { margin: 0; font-family: var(--font-voice); font-size: var(--fs-17); line-height: 1.5; color: var(--bone); }
.chat__empty--invite { max-width: 46ch; justify-self: center; text-align: center; }

.chat { border: 1px solid var(--hairline); border-radius: var(--r-plate); display: flex; flex-direction: column; min-height: 520px; max-height: 70vh; background: var(--graphite); }
.chat__thread { flex: 1; min-height: 0; overflow: auto; padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.chat__foot { border-top: 1px solid var(--hairline); padding: var(--s-3) var(--s-5) var(--s-4); display: grid; gap: var(--s-3); }
.chat__badge { display: flex; }
.chat__compose { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2); }
.chat__hints .chip--filter { height: 36px; }
.bubble { display: grid; gap: var(--s-1); max-width: 78%; justify-items: start; }
.bubble--client { justify-self: end; justify-items: end; }
.bubble--system { justify-self: center; max-width: 100%; }
.bubble__box { padding: var(--s-3) var(--s-4); border-radius: var(--r-plate); line-height: var(--lh-read); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble--employee .bubble__box { background: var(--plate); border: 1px solid var(--hairline); }
.bubble--employee.is-first .bubble__box { font-family: var(--font-voice); }
.bubble--client .bubble__box { background: var(--plate-2); }
.bubble--human .bubble__box { background: var(--steel-dim); }
.bubble__time { font-size: var(--fs-15); color: var(--bone-70); }
.bubble__sys { font-size: var(--fs-15); color: var(--bone-70); text-align: center; }
.bubble.is-new { animation: appear var(--dur-fast) var(--ease-out); }
.chat__empty { align-self: center; justify-self: center; max-width: 52ch; display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6) var(--s-2); }
.chat__empty-title { margin: 0; font-family: var(--font-voice); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-tight); color: var(--bone); }
.chat__empty-text { margin: 0; color: var(--bone-70); line-height: var(--lh-read); }
.chat[data-ready="0"] .chat__thread { align-content: center; }
.chat[data-ready="0"] .chat__compose { opacity: .6; }
.bubble--note .bubble__box { border: 1px dashed var(--honey); color: var(--bone); background: var(--honey-dim); }

.backstage { display: grid; gap: var(--s-4); }
.backstage h2 { margin-top: 0; font-size: var(--fs-24); }
.backstage h3 { font-family: var(--font-ui); font-size: var(--fs-15); font-weight: 600; color: var(--bone-70); margin: 0 0 var(--s-2); }
.backstage__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.kv-list { display: grid; gap: var(--s-1); }
.kv-list .kv { padding: var(--s-1) 0; }
.kv__v.is-lit { animation: lit 1000ms var(--ease-out); }
@keyframes lit { from { background: var(--steel-dim); } to { background: transparent; } }

.demo-footer { max-width: var(--content-max); margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-12); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; border-top: 1px solid var(--hairline); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
button.chip { background: transparent; cursor: pointer; font-family: inherit; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: baseline; border-bottom: 1px solid var(--hairline); }
.kv__k { color: var(--bone-70); font-size: var(--fs-15); }
.kv__v { text-align: right; }

@media (max-width: 1199px) { .demo-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .demo-h1 { font-size: var(--fs-30); }
  .demo { gap: var(--s-8); padding-top: var(--s-5); }
  .chat { min-height: 440px; max-height: none; }
  .chat__compose { grid-template-columns: minmax(0, 1fr) auto; }
  .chat__compose [data-human] { grid-column: 1 / -1; }
  .backstage__cols { grid-template-columns: 1fr; }
  .emp-card { grid-template-columns: 1fr; }
  .bubble { max-width: 92%; }
}
/* приёмка р.1: кнопка «Поговорить с … · …» в состоянии «готовится» переносится по словам и не выталкивает чат за край на 390 px */
.chat__empty [data-go] { white-space: normal; height: auto; min-height: var(--control-h); max-width: 100%; padding-block: var(--s-2); text-align: left; }

/* fix-ui 09.10: сколько сотрудников на линии — одна честная строка над списком компаний */
.demo-left__live { margin: calc(var(--s-5) * -1 + var(--s-2)) 0 0; color: var(--bone-70); font-size: var(--fs-15); line-height: var(--lh-read); }
.demo-left__live[data-live="0"] { color: var(--honey); }
/* закрытое поле ввода: вместо серой формы — строка с причиной */
.chat__closed { margin: 0; padding: var(--s-3) var(--s-4); border: 1px dashed var(--hairline-2); border-radius: var(--r-ctl); color: var(--bone-70); font-size: var(--fs-15); line-height: var(--lh-read); }
/* шапка на телефоне: «Кабинет руководителя» остаётся, переносится второй строкой под логотип и языки */
@media (max-width: 767px) {
  .demo-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-1); padding-top: var(--s-3); padding-bottom: var(--s-2); }
  .demo-top__nav { display: contents; }
  .demo-top__nav .lang { grid-column: 2; grid-row: 1; }
  .demo-top__nav .btn { grid-column: 1 / -1; grid-row: 2; justify-self: start; padding-inline: 0; min-height: 44px; }
}