/*
  region MODULE_CONTRACT [DOMAIN(8): UI; CONCEPT(9): DesignSystem; TECH(6): CSS]
  @purpose Дизайн-система продакт-чата БГУ: токены из фирменных цветов лого (navy #102048 + teal #50A890), раскладка чата, гейт-модалка, плавные анимации. Тон — официально, но тёплый.
  @scope :root токены, базовый сброс, topbar, chat, composer, modal, анимации, адаптив, prefers-reduced-motion
  @invariants
  - Цвета — только из бренда (navy/teal) и нейтрали; никакой посторонней палитры
  - Анимации отключаются при prefers-reduced-motion
  @modulemap tokens · base · topbar · chat · composer · modal · motion · responsive
  endregion
  GREP_SUMMARY: design system, tokens, navy teal, chat ui, modal gate, animations, БГУ
*/

/* ░░ tokens ░░ */
:root{
  --c-primary:#102048; --c-primary-700:#0B1738; --c-primary-300:#2E4170;
  --c-accent:#50A890;  --c-accent-600:#3E9079;  --c-accent-100:#E6F2EE;
  --c-bg:#FBFCFD; --c-surface:#FFFFFF; --c-surface-2:#F3F6F9; --c-border:#E2E8F0;
  --c-ink:#102048; --c-ink-2:#5B6472; --c-danger:#C0392B;
  --radius:16px; --radius-sm:10px;
  --shadow:0 8px 30px rgba(16,32,72,.10);
  --shadow-lg:0 24px 60px rgba(16,32,72,.22);
  --grad-head:linear-gradient(135deg,#102048,#1A2C5A);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ░░ base ░░ */
*{box-sizing:border-box}
/* hidden-атрибут должен побеждать любые display-правила (иначе .backdrop{display:flex} не даёт скрыть гейт) */
[hidden]{display:none !important}
html,body{height:100%}
/* Страница НЕ скроллится: единственный скролл — внутри ленты чата (.chat__log).
   Убирает «второй ползунок» (десктопные поля карточки давали ~16px к высоте body)
   и гасит любое горизонтальное переполнение, чтобы .app оставался центрированным. */
body{
  margin:0; font-family:var(--font); color:var(--c-ink); overflow:hidden;
  background:var(--c-bg); -webkit-font-smoothing:antialiased; line-height:1.5;
}
button{font-family:inherit}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  border:none; border-radius:999px; padding:.7rem 1.25rem; font-size:.95rem;
  font-weight:600; cursor:pointer; transition:transform .15s var(--ease),
  background .15s var(--ease), box-shadow .15s var(--ease), opacity .15s;
}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn:not(:disabled):hover{transform:translateY(-1px)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--c-accent-100),0 0 0 4px var(--c-accent)}
.btn--primary{background:var(--c-primary); color:#fff}
.btn--primary:not(:disabled):hover{background:var(--c-primary-700)}
.btn--ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
.btn--ghost:not(:disabled):hover{background:rgba(255,255,255,.12)}

/* фирменный мотив «двойного квадрата» из лого (navy + teal) */
.motif{display:inline-block; width:34px; height:18px; position:relative; flex:0 0 auto}
.motif::before,.motif::after{content:""; position:absolute; top:0; width:16px; height:18px; border-radius:3px}
.motif::before{left:0; background:var(--c-primary)}
.motif::after{right:0; background:var(--c-accent)}

/* ░░ app shell ░░ */
.app{display:flex; flex-direction:column; height:100dvh; max-width:860px; margin:0 auto;
  background:var(--c-surface); box-shadow:var(--shadow)}
@media (min-width:880px){ .app{height:calc(100dvh - 32px); margin:16px auto; border-radius:var(--radius); overflow:hidden} }

/* topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; background:var(--grad-head); color:#fff;
  border-bottom:3px solid var(--c-accent)}
.topbar__brand{display:flex; align-items:center; gap:.8rem; min-width:0}
.topbar__logo{height:34px; width:auto; background:#fff; padding:5px 8px; border-radius:8px}
.topbar__titles{min-width:0}
.topbar__title{margin:0; font-weight:600; font-size:1.02rem; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__subtitle{margin:.1rem 0 0; font-size:.78rem; color:#B9C3DA}

/* ░░ chat ░░ */
.chat{flex:1; overflow:hidden; background:var(--c-surface-2)}
.chat__log{height:100%; overflow:hidden auto; padding:1.2rem; display:flex; flex-direction:column; gap:.85rem; scroll-behavior:smooth}

.msg{max-width:80%; min-width:0; padding:.7rem .95rem; border-radius:14px; font-size:.97rem;
  white-space:pre-wrap; word-wrap:break-word; animation:msg-in .22s var(--ease) both}
.msg--bot{align-self:flex-start; background:var(--c-surface); color:var(--c-ink); max-width:92%;
  border:1px solid var(--c-border); border-left:3px solid var(--c-accent);
  border-top-left-radius:4px; box-shadow:0 2px 8px rgba(16,32,72,.05)}
.msg--user{align-self:flex-end; background:var(--c-accent-100); color:var(--c-primary-700);
  border-top-right-radius:4px}
.msg--bot strong{color:var(--c-primary)}
.msg--bot a{color:var(--c-accent-600)}

/* ░░ markdown в ответах помощника (marked + DOMPurify) ░░ */
.msg--bot > *:first-child{margin-top:0}
.msg--bot > *:last-child{margin-bottom:0}
.msg--bot p{margin:.45rem 0}
.msg--bot h1,.msg--bot h2,.msg--bot h3,.msg--bot h4{margin:.75rem 0 .35rem; color:var(--c-primary); line-height:1.25; font-weight:600}
.msg--bot h1{font-size:1.15rem} .msg--bot h2{font-size:1.08rem}
.msg--bot h3{font-size:1rem} .msg--bot h4{font-size:.94rem}
.msg--bot ul,.msg--bot ol{margin:.45rem 0; padding-left:1.35rem}
.msg--bot li{margin:.18rem 0}
.msg--bot li > p{margin:.15rem 0}
.msg--bot hr{border:none; border-top:1px solid var(--c-border); margin:.8rem 0}
.msg--bot blockquote{margin:.45rem 0; padding:.1rem .8rem; border-left:3px solid var(--c-accent-100); color:var(--c-ink-2)}
.msg--bot code{background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:5px;
  padding:.05rem .32rem; font-size:.88em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.msg--bot pre{background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:8px; padding:.7rem; overflow-x:auto}
.msg--bot pre code{border:none; background:none; padding:0}
/* таблицы — профессионально, с горизонтальным скроллом на узких экранах */
.msg--bot .md-table-wrap{overflow-x:auto; margin:.55rem 0; border-radius:8px}
.msg--bot table{border-collapse:collapse; font-size:.9rem; width:100%}
.msg--bot th,.msg--bot td{border:1px solid var(--c-border); padding:.45rem .65rem; text-align:left; vertical-align:top}
.msg--bot thead th{background:var(--c-surface-2); color:var(--c-primary); font-weight:600; white-space:nowrap}
.msg--bot tbody tr:nth-child(even){background:#fafbfd}
.msg__role{display:block; font-size:.7rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; margin-bottom:.2rem; color:var(--c-ink-2)}

/* индикатор «бот печатает» */
.typing{align-self:flex-start; display:inline-flex; gap:5px; padding:.85rem 1rem;
  background:var(--c-surface); border:1px solid var(--c-border); border-left:3px solid var(--c-accent);
  border-radius:14px; border-top-left-radius:4px; animation:msg-in .22s var(--ease) both}
.typing span{width:7px; height:7px; border-radius:50%; background:var(--c-accent); animation:dot 1.2s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}

/* пустое состояние */
.empty{margin:auto; text-align:center; color:var(--c-ink-2); max-width:440px; padding:2rem 1rem; animation:msg-in .3s var(--ease) both}
.empty .motif{width:54px; height:30px; margin:0 auto 1rem}
.empty .motif::before,.empty .motif::after{width:25px; height:30px; border-radius:5px}
.empty h2{margin:.2rem 0; color:var(--c-primary); font-size:1.25rem}
.empty p{margin:.3rem 0 0; font-size:.95rem}

/* ░░ composer ░░ */
.composer{padding:.7rem 1.1rem 1rem; background:var(--c-surface); border-top:1px solid var(--c-border)}
.examples{display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.6rem; scrollbar-width:thin}
.example-chip{flex:0 0 auto; border:1px solid var(--c-border); background:var(--c-surface-2);
  color:var(--c-primary-300); border-radius:999px; padding:.4rem .8rem; font-size:.84rem;
  cursor:pointer; transition:.15s var(--ease)}
.example-chip:hover{border-color:var(--c-accent); color:var(--c-accent-600); background:var(--c-accent-100)}
.example-chip:focus-visible{outline:none; box-shadow:0 0 0 3px var(--c-accent-100)}

.composer__form{display:flex; gap:.6rem; align-items:flex-end}
.composer__input{flex:1; resize:none; max-height:140px; border:1px solid var(--c-border);
  border-radius:14px; padding:.75rem .9rem; font-size:1rem; color:var(--c-ink);
  background:var(--c-surface); transition:border-color .15s, box-shadow .15s; outline:none}
.composer__input:focus{border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-100)}
.composer__input:disabled{background:var(--c-surface-2); cursor:not-allowed}
.composer__send{width:46px; height:46px; padding:0; border-radius:50%; flex:0 0 auto; font-size:1.05rem}
.composer__note{margin:.6rem 0 0; font-size:.74rem; color:var(--c-ink-2); text-align:center}

/* ░░ modal gate ░░ */
.backdrop{position:fixed; inset:0; background:rgba(11,23,56,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem; z-index:50;
  animation:fade .2s var(--ease) both}
.modal{background:var(--c-surface); border-radius:var(--radius); width:min(640px,100%);
  max-height:90dvh; display:flex; flex-direction:column; padding:1.4rem; box-shadow:var(--shadow-lg);
  animation:pop .24s var(--ease) both}
.modal__head{display:flex; align-items:center; gap:.7rem; margin-bottom:.4rem}
.modal__title{margin:0; font-size:1.3rem; color:var(--c-primary)}
.modal__intro{margin:.2rem 0 .8rem; color:var(--c-ink-2); font-size:.95rem}
.modal__text{overflow-y:auto; border:1px solid var(--c-border); border-radius:var(--radius-sm);
  padding:1rem 1.1rem; background:var(--c-surface-2); flex:1 1 auto; min-height:160px}
.modal__text:focus-visible{outline:none; box-shadow:0 0 0 3px var(--c-accent-100)}
.modal__text h3{margin:1.1rem 0 .35rem; font-size:.98rem; color:var(--c-primary)}
.modal__text h3:first-child{margin-top:0}
.modal__text p{margin:.3rem 0; font-size:.88rem; color:#33405A; line-height:1.55}
.modal__text p.li{padding-left:.9rem}
.checkbox{display:flex; align-items:flex-start; gap:.6rem; margin:1rem 0 .3rem;
  font-size:.92rem; cursor:pointer; user-select:none}
.checkbox input{width:20px; height:20px; margin-top:1px; accent-color:var(--c-accent); cursor:pointer; flex:0 0 auto}
.modal__actions{display:flex; justify-content:flex-end; margin-top:.6rem}
.modal__version{margin:.7rem 0 0; font-size:.74rem; color:var(--c-ink-2); text-align:right}

/* ░░ cabinet (приёмная комиссия) + эскалация ░░ */
.btn--sm{padding:.4rem .8rem; font-size:.85rem}
.btn--dark{color:var(--c-primary); border:1px solid var(--c-border); background:transparent}
.btn--dark:hover{background:var(--c-surface-2)}
.cab{flex:1; overflow-y:auto; padding:1.2rem; background:var(--c-surface-2)}
.cab__view{max-width:760px; margin:0 auto}
.cab__card{background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); text-align:center}
.cab__card .motif{width:46px; height:26px; margin:0 auto .8rem}
.cab__card h2{color:var(--c-primary); margin:.2rem 0 .4rem}
.cab__muted{color:var(--c-ink-2); font-size:.9rem}
.cab__form{display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; justify-content:center}
.cab__form .composer__input{flex:1; min-width:220px}
.cab__msg{margin-top:.9rem; font-size:.9rem; color:var(--c-accent-600)}
.cab__msg a{color:var(--c-accent-600)}
.cab__bar{margin-bottom:1rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.cab__keyform{display:flex; gap:.6rem; flex:1; min-width:240px}
.cab__keyform .composer__input{flex:1}
.cab__dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c-border); margin-right:.55rem; vertical-align:middle}
.cab__dot--live{background:#2bb673; box-shadow:0 0 0 3px rgba(43,182,115,.18)}
.cab__preview{vertical-align:middle}
.cab__esc{color:var(--c-accent-600); font-weight:600}
#reestr-status{font-size:.82rem}
.cab__tablewrap{background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); overflow:auto}
.cab__table{width:100%; border-collapse:collapse; font-size:.9rem; table-layout:fixed}
.cab__table th,.cab__table td{padding:.7rem .9rem; text-align:left; border-bottom:1px solid var(--c-border); white-space:nowrap}
/* Фикс-раскладка: столбец «Диалог» (первый) занимает остаток и усекается многоточием, остальные — фикс. */
.cab__table th:nth-child(2),.cab__table td:nth-child(2){width:148px}
.cab__table th:nth-child(3),.cab__table td:nth-child(3){width:62px}
.cab__table th:nth-child(4),.cab__table td:nth-child(4){width:118px}
.cab__table th:nth-child(5),.cab__table td:nth-child(5){width:104px}
.cab__table td:first-child{overflow:hidden; text-overflow:ellipsis}
.cab__table th{background:var(--c-surface-2); color:var(--c-ink-2); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.02em}
.cab__table tr:last-child td{border-bottom:none}
.cab__tickethead h2{color:var(--c-primary); margin:.6rem 0 .2rem}
.cab__disclaimer{margin-top:.6rem; padding:.6rem .8rem; background:var(--c-accent-100); border-radius:var(--radius-sm); font-size:.82rem; color:var(--c-primary-700)}
.cab__log{height:auto; max-height:none; background:transparent; padding:.6rem 0}
.cab__log .msg--user .msg__role{color:var(--c-accent-600)}

.composer__escalate{display:block; margin:.5rem auto 0; background:transparent; color:var(--c-accent-600);
  border:1px solid var(--c-border); font-size:.82rem; padding:.35rem .85rem; font-weight:500}
.composer__escalate:not(:disabled):hover{background:var(--c-accent-100); border-color:var(--c-accent)}
.escalation{align-self:stretch; background:var(--c-surface); border:1px solid var(--c-accent);
  border-radius:14px; padding:1rem; box-shadow:var(--shadow); animation:msg-in .22s var(--ease) both}
.escalation h3{margin:0 0 .4rem; color:var(--c-primary); font-size:1.02rem}
.escalation p{margin:.2rem 0; font-size:.92rem}
.escalation__key{display:flex; gap:.5rem; align-items:center; margin:.6rem 0; flex-wrap:wrap}
.escalation__key code{font-size:1.05rem; font-weight:600; letter-spacing:.04em; background:var(--c-surface-2);
  border:1px solid var(--c-border); border-radius:8px; padding:.35rem .6rem; color:var(--c-primary)}
.escalation a.btn{text-decoration:none}
.escalation__contacts{font-size:.85rem; color:var(--c-ink-2); margin-top:.6rem; line-height:1.6}
.escalation__contacts a{color:var(--c-accent-600)}

/* ░░ motion ░░ */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0; transform:scale(.96) translateY(6px)}to{opacity:1; transform:none}}
@keyframes msg-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes dot{0%,60%,100%{transform:translateY(0); opacity:.4}30%{transform:translateY(-5px); opacity:1}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .chat__log{scroll-behavior:auto}
}

/* ░░ responsive ░░ */
@media (max-width:520px){
  .topbar__subtitle{display:none}
  /* шапка: полное название мелким шрифтом, перенос в 2 строки (без обрезки) + сброс иконкой */
  .topbar__title{white-space:normal; font-size:.74rem; line-height:1.18;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .topbar .btn-label{display:none}
  #reset-btn{padding:.5rem .65rem; font-size:1.05rem; gap:0}
  .msg{max-width:88%}
  .chat__log{padding:.9rem}
  .modal{padding:1.1rem}
  .cab{padding:.8rem}
  /* реестр: даём колонкам переноситься и ужимаем — чтобы 5 столбцов влезали без гориз. скролла */
  .cab__table th,.cab__table td{white-space:normal; padding:.5rem .5rem; font-size:.8rem}
  .cab__table th{font-size:.66rem; letter-spacing:0}
  .btn--sm{padding:.35rem .6rem; font-size:.78rem}
}