/* Reynard. Стили экранов. */

/* ---------- Обзор ---------- */
.wk-card { display: flex; flex-direction: column; }
.wk-card .card-title { font-size: 22px; line-height: 30px; }
.wk-card .card-head.flash .card-title { animation: rise var(--t-panel) var(--ease) both; }
.wk-stats { display: flex; gap: 56px; flex-wrap: wrap; margin-top: 26px; }
.wk-bars {
  margin-top: 28px;
  height: 210px;
  flex: 1;
  min-height: 210px;
  display: grid;
  grid-template-columns: repeat(35, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  cursor: pointer;
}
.wk-bar {
  display: block;
  height: var(--h);
  border-radius: var(--r-full);
  background: var(--track);
  transform-origin: bottom;
  animation: grow-y 600ms var(--ease) both;
  animation-delay: calc(var(--i) * 14ms);
  transition: background-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.wk-bar.hl { background: linear-gradient(to bottom, var(--fox) 0%, var(--fox) 46%, rgba(240, 90, 26, .38) 80%, rgba(240, 90, 26, .06) 100%); }
.wk-bars:hover .wk-bar:not(.hl) { opacity: .85; }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 14px; }
.wk-day { text-align: left; font-size: 15px; line-height: 20px; color: var(--ink-muted); padding: 2px 0; border-radius: 6px; width: max-content; }
.wk-day:hover { color: var(--ink); }
.wk-range { position: relative; height: 44px; margin-top: 18px; border-radius: var(--r-full); background: var(--sunken); cursor: pointer; touch-action: none; }
.wk-sel {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--r-full);
  background: var(--fox);
  cursor: grab;
  transition: left var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.wk-sel.dragging { cursor: grabbing; transition: none; }
.wk-h { position: absolute; top: -8px; bottom: -8px; width: 16px; cursor: ew-resize; }
.wk-h::after { content: ''; position: absolute; top: 0; bottom: 0; left: 7px; width: 2.5px; border-radius: 2px; background: var(--ink); }
.wk-h.l { left: -8px; }
.wk-h.r { right: -8px; }

.deliv-card { display: grid; justify-items: center; gap: 22px; padding-top: 26px; padding-bottom: 30px; }
.deliv-title { font-size: 24px; line-height: 30px; font-weight: 400; letter-spacing: -.01em; }
.status-list { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; }
.status-list .badge { height: 34px; padding: 0 14px; font-size: 14px; }

.live-card { display: block; padding: 22px 24px; }
.live-card.swap .live-in { animation: rise var(--t-panel) var(--ease) both; }
.live-name { font-size: 18px; line-height: 24px; font-weight: 500; }
.live-sub { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.live-status { margin-top: 12px; }

.ch-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; flex: none; color: var(--ink); }
.ch-dot .i { width: 16px; height: 16px; }
.when { display: flex; flex-direction: column; width: 58px; flex: none; font-size: 13px; line-height: 17px; color: var(--ink-muted); }
.when b { color: var(--ink); font-weight: 600; font-size: 14px; }
.review-mini { display: flex; flex-direction: column; gap: 18px; }
.review-mini .card-head + * { margin-top: 2px; }
.review-mini .btn { margin-top: auto; }

.journal { display: flex; flex-direction: column; }
.jr { display: grid; grid-template-columns: 48px 38px 1fr; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.jr:last-child { border-bottom: 0; }
.jr-at { font-size: 13px; color: var(--ink-muted); }
.jr-text { font-size: 15px; line-height: 21px; }
.jr.fresh { animation: rise var(--t-panel) var(--ease) both; }
.jr.fresh .card-icon { background: var(--fox-soft); color: var(--fox-ink); }

.camp-mini { display: flex; flex-direction: column; gap: 14px; }
.camp-mini .t-subtitle { min-height: 56px; }

/* ---------- Лиды ---------- */
.seg a {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; color: var(--ink-muted); white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg a .i { width: 16px; height: 16px; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-sm); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar-l, .toolbar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.toolbar-l .input-wrap { width: 300px; }
.toolbar-l .select { width: auto; min-width: 190px; }

.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  margin: 0 -2px;
  scroll-snap-type: x proximity;
  align-items: start;
}
.kcol {
  border-radius: var(--r-xl);
  background: var(--sunken);
  padding: 12px;
  min-height: 220px;
  scroll-snap-align: start;
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.kcol.over { box-shadow: inset 0 0 0 2px var(--fox); background: var(--fox-soft); }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; cursor: help; }
.kcol-n { width: 22px; height: 22px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; flex: none; }
.kcol-name { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcol-count { font-size: 13px; color: var(--ink-muted); font-weight: 600; }
.kcol-body { display: flex; flex-direction: column; gap: 10px; }
.kcol-empty { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: 22px 12px; text-align: center; font-size: 13px; color: var(--ink-muted); }
.kcol-more { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); border-radius: 8px; }
.kcol-more:hover { color: var(--ink); }
.kcol-more .i { width: 14px; height: 14px; }
.kcard {
  background: var(--raised);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: grab;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.kcard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kcard.dragging { opacity: .45; transform: rotate(-1.5deg); }
.kcard.just-moved { animation: rise var(--t-panel) var(--ease) both; box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.kc-top { display: flex; gap: 10px; align-items: flex-start; }
.kc-name { font-size: 15px; line-height: 20px; font-weight: 600; }
.kc-co { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; }
.kc-status { display: flex; }
/* Задача, по которой ведётся лид. Мелкая строка, чтобы не спорить с именем. */
.kc-task { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.kc-task > .i { width: 13px; height: 13px; flex: none; }
.kc-task > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-why { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.kc-foot { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.kc-ch { display: flex; gap: 6px; }
.kc-last { flex: 1; font-size: 12px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-row { display: grid; grid-template-columns: 18px 22px 1fr auto; gap: 10px; align-items: center; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px 2px; }

/* Поиск лидов */
.search-log { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; margin-top: 20px; border-radius: var(--r-lg); background: var(--bg); }
.search-log ol { display: flex; flex-direction: column; gap: 6px; }
.search-log li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-muted); animation: rise var(--t-panel) var(--ease) both; }
.search-log li .i { color: var(--success); }
.found-list { display: flex; flex-direction: column; margin-top: 18px; }
.found { padding: 16px 0; border-bottom: 1px solid var(--line); animation: rise var(--t-panel) var(--ease) both; animation-delay: var(--d, 0ms); }
.found:first-child { padding-top: 4px; }
.found.blocked .found-main > *:not(.found-side) { opacity: .62; }
.found-main { display: flex; gap: 16px; align-items: flex-start; }
.found-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; min-width: 120px; }
.found-prob { font-size: 30px; line-height: 34px; font-weight: 300; letter-spacing: -.03em; }
.vf { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 8px 3px 6px; border-radius: var(--r-full); background: var(--sunken); }
.vf.ok { color: var(--success); }
.vf.no { color: var(--ink-muted); text-decoration: line-through; }
.vf.unk { color: var(--ink-muted); }
.found-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.found-pick input { width: 16px; height: 16px; accent-color: var(--fox); }
.found-why { margin: 10px 0 0 64px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.found-why summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); font-size: 13px; }
.found-why summary::-webkit-details-marker { display: none; }
.found-why[open] summary .i { transform: rotate(180deg); }
.found-why p { margin-top: 8px; max-width: 620px; }
.search-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; }

/* Кампании */
.camp-card { display: flex; flex-direction: column; gap: 16px; }
/* Задачи (живой кабинет): строка задачи в списке ведёт на её экран; цель задачи показана сохранённой. */
.task-row { display: flex; align-items: center; gap: 28px; color: inherit; text-decoration: none; transition: border-color var(--t-fast, .15s) var(--ease), background var(--t-fast, .15s) var(--ease); }
.task-row:hover { border-color: var(--line-strong); background: var(--raised); }
.task-row:focus-visible { outline: 2px solid var(--fox); outline-offset: 2px; }
.tr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-name { font-size: 17px; font-weight: 600; line-height: 24px; }
.tr-goal { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.tr-now { font-size: 14px; line-height: 20px; color: var(--ink); }
/* Группа задач: входящие и исходящие, с подписью о том, что агент по ним делает. */
.task-group { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.task-group .field-hint { flex: 1; min-width: 200px; }
.tr-stats { display: flex; gap: 28px; flex: none; }
.tr-stats .stat { min-width: 64px; }
.tr-go { color: var(--ink-muted); flex: none; display: grid; place-items: center; }
.task-row:hover .tr-go { color: var(--ink); }
@media (max-width: 760px) {
  .task-row { flex-wrap: wrap; gap: 16px; }
  .tr-stats { width: 100%; gap: 20px; }
  .tr-go { display: none; }
}
.goal-fixed { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.goal-ok { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--success-soft); color: var(--success); }
.goal-text { font-size: 18px; font-weight: 600; line-height: 26px; margin-bottom: 6px; overflow-wrap: anywhere; }
.goal-aim { font-size: 15px; line-height: 22px; margin: -2px 0 6px; overflow-wrap: anywhere; }
/* Сужение канала входящей задачи до ящика или аккаунта. */
.acc-chips { margin-top: 8px; }
/* Каналы задачи одним списком: подключённые переключателями, остальные строкой с кнопкой. Отступы общие,
   иначе строки слипаются. */
.ch-list > .switch-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ch-list > .switch-row:first-child { padding-top: 0; }
.ch-list > .switch-row:last-child { border-bottom: 0; padding-bottom: 0; }
.act-row { color: inherit; text-decoration: none; }
.act-row:hover .li-title { text-decoration: underline; }
.camp-name { font-size: 24px; line-height: 30px; font-weight: 400; letter-spacing: -.015em; }
.camp-name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.seq { display: flex; flex-direction: column; position: relative; }
.seq-step { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.seq-step:last-child { border-bottom: 0; }
.seq-n { width: 32px; height: 32px; border-radius: 50%; background: var(--inverse); color: var(--on-inverse); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.seq-step.end .seq-n { background: var(--sunken); color: var(--ink); }

/* Мастера по шагам */
.wz-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.wz-dots span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; color: var(--ink-muted); background: var(--sunken); }
.wz-dots i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; line-height: 1; background: var(--raised); }
.wz-dots span.on { background: var(--inverse); color: var(--on-inverse); }
.wz-dots span.on i { background: var(--fox); color: var(--on-fox); }
.wz-dots span.done { color: var(--ink); }
.wz-dots span.done i { background: var(--success); color: #FFFFFF; }
.wz-dots span.done i .i { width: 12px; height: 12px; }
.wz-body { animation: rise var(--t-panel) var(--ease) both; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card.src, .card.src-basis { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.card.src:hover, .card.src-basis:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.card.src.selected, .card.src-basis.selected { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.card.src[disabled] { opacity: .55; cursor: default; }
.card.src[disabled]:hover { box-shadow: inset 0 0 0 1px var(--line); }
.file-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-lg); background: var(--bg); }
.file-row .grow { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Карточка лида ---------- */
.lead-title { display: inline-flex; align-items: center; }
.page-head .ph-actions .select { width: auto; min-width: 230px; }
.feed-card { display: flex; flex-direction: column; gap: 16px; }
.feed-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.feed { display: flex; flex-direction: column; gap: 14px; }
.ev { display: flex; flex-direction: column; gap: 8px; }
.ev.fresh { animation: rise var(--t-panel) var(--ease) both; }
.ev-stage, .ev-note {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  padding: 2px 4px;
}
.ev-stage span, .ev-note span { flex: 1; min-width: 0; }
.ev-stage span.st-dot { flex: none; margin: 0 4px 0 4px; }
.ev-stage .i { color: var(--info); flex: none; }
.ev time, .msg-head time { font-size: 12px; color: var(--ink-muted); white-space: nowrap; margin-left: auto; }
.ev-meet, .ev-esc { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--bg); font-size: 15px; font-weight: 500; }
.ev-meet { box-shadow: inset 0 0 0 1px var(--success); }
.ev-meet .card-icon { background: var(--success); color: #FFFFFF; }
:root[data-theme="dark"] .ev-meet .card-icon { color: #15120F; }
.ev-esc { background: var(--bg); box-shadow: inset 0 0 0 1px var(--fox); }
.msg-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msg-who { font-size: 14px; font-weight: 600; white-space: nowrap; }
.msg-ch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.msg-body { margin-left: 42px; padding: 14px 16px; border-radius: 6px 20px 20px 20px; background: var(--bg); max-width: 640px; }
/* Сообщение как в мессенджере: шапка с временем и пузырь одной ширины, по тексту, а не по всей ленте, иначе на широком
   экране время уезжает к краю ленты. Лид слева, мы (агент и сотрудники) справа. */
.ev-msg { align-self: flex-start; max-width: min(720px, 86%); min-width: min(300px, 100%); }
.ev-msg .msg-body { max-width: none; }
.ev-msg:has(.textarea) { width: min(720px, 86%); }
.ev-msg.agent, .ev-msg.manager { align-self: flex-end; }
.ev-msg.agent .msg-head, .ev-msg.manager .msg-head { flex-direction: row-reverse; }
.ev-msg.agent .msg-head time, .ev-msg.manager .msg-head time { margin-left: 0; margin-right: auto; }
.ev-msg.agent .msg-body, .ev-msg.manager .msg-body { margin-left: 0; margin-right: 42px; border-radius: 20px 6px 20px 20px; }
.ev-msg.lead .msg-body { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.ev-msg.manager .msg-body { background: var(--sunken); }
.msg-subj { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.msg-text { font-size: 15px; line-height: 23px; white-space: pre-line; }
/* Ссылки и почта в текстах сообщений (R.linkify): видно, что по ним можно перейти, длинный адрес переносится. */
.msg-text a, .cm-bubble a, .rv-text a, .rv-ctx a, .ex-a a, .tr a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.msg-text a:hover, .cm-bubble a:hover, .rv-text a:hover, .rv-ctx a:hover, .ex-a a:hover, .tr a:hover { color: var(--fox-ink); }
.msg-subj { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); margin-bottom: 6px; }
.tr { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.tr > span { display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hide-tr .tr { display: none; }
.ev-typing { flex-direction: row; align-items: center; gap: 10px; }
.call-box { margin-left: 42px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--bg); max-width: 640px; }
.wave { flex: 1; height: 34px; display: flex; align-items: center; gap: 3px; }
.wave i { flex: 1; height: var(--h); min-height: 3px; border-radius: 2px; background: var(--track); transition: background-color var(--t-fast) var(--ease); }
.call-box.playing .wave i:nth-child(-n+18) { background: var(--fox); }
.call-sum { margin-left: 42px; font-size: 14px; line-height: 21px; max-width: 640px; }
.call-tr { margin-left: 42px; font-size: 14px; max-width: 640px; }
.call-tr summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.call-tr summary::-webkit-details-marker { display: none; }
.call-tr[open] summary .i { transform: rotate(180deg); }
.call-tr .stack { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--bg); }
.tr-line { font-size: 14px; line-height: 21px; }
.tr-line .tr { margin-top: 2px; padding-top: 0; border-top: 0; }
.composer { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.comp-row { display: flex; gap: 10px; align-items: flex-end; }
.comp-row .textarea { min-height: 52px; }
.composer .select { width: auto; }
.sum { display: grid; gap: 4px; margin: 0; }
.sum dt { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); margin-top: 10px; }
.sum dt:first-child { margin-top: 0; }
.sum dd { margin: 0; font-size: 15px; line-height: 22px; }
.meet-big { display: flex; flex-direction: column; margin-top: 14px; }
.meet-big .t-title { font-weight: 300; font-size: 30px; line-height: 36px; letter-spacing: -.02em; }
.src-list { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.hist { display: flex; flex-direction: column; }
.hist li { display: grid; grid-template-columns: 90px 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.hist li:last-child { border-bottom: 0; }
.hist time { font-size: 12px; color: var(--ink-muted); grid-row: span 2; }

/* ---------- Диалоги ---------- */
.inbox { display: grid; grid-template-columns: 336px minmax(0, 1fr) 300px; min-height: 0; overflow: hidden; }
.inbox.no-side { grid-template-columns: 336px minmax(0, 1fr); }
.inbox.no-side .inbox-side { display: none; }
.inbox-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.inbox-tools { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.inbox-tools .chip { height: 30px; font-size: 13px; padding: 0 10px; }
/* Фильтров девять, колонка узкая: плашки переносятся на вторую строку, а не сжимаются в ничто. */
.inbox-tools .chips { flex-wrap: wrap; gap: 6px; }
.inbox-tools .chip { flex: none; }
.inbox-tools .chip.icon-only { width: 32px; padding: 0; justify-content: center; }
.inbox-tools .chip.icon-only .i { width: 16px; height: 16px; }
.conv-list { overflow-y: auto; flex: 1; padding: 8px; }
.conv { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-lg); transition: background-color var(--t-fast) var(--ease); }
.conv:hover { background: var(--bg); }
.conv.on { background: var(--sunken); }
.conv-av { position: relative; flex: none; }
.conv-ch { position: absolute; right: -7px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conv-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.conv-top b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-top time { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.conv-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conv.needs .conv-sub { color: var(--ink); }
.conv-dot { position: absolute; right: 12px; bottom: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--fox); }
.inbox-thread { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; min-height: 0; min-width: 0; }
.thread-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.thread-feed { flex: 1; overflow-y: auto; padding-right: 6px; min-height: 0; }
.thread-empty { flex: 1; display: grid; place-items: center; }
.inbox-side { border-left: 1px solid var(--line); padding: 22px 20px; overflow-y: auto; }
.sugg { display: flex; flex-direction: column; gap: 8px; }
.sugg-item { text-align: left; padding: 10px 14px; border-radius: var(--r-lg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 20px; transition: box-shadow var(--t-fast) var(--ease); }
.sugg-item:hover { box-shadow: inset 0 0 0 1.5px var(--fox); }
.sugg-item .tr { display: block; }

/* Очередь на вычитку */
.rv-list { display: flex; flex-direction: column; gap: var(--gap); }
.rv { display: flex; flex-direction: column; gap: 16px; transition: height var(--t-panel) var(--ease), opacity var(--t-panel) var(--ease), padding var(--t-panel) var(--ease), margin var(--t-panel) var(--ease); }
.rv.rv-leave { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; margin-bottom: calc(var(--gap) * -1); overflow: hidden; }
.rv.rv-new { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.rv-head { display: flex; gap: 14px; align-items: center; }
.rv-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-ctx { padding: 12px 16px; border-left: 3px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.rv-ctx .tr { margin-top: 2px; padding-top: 0; border-top: 0; }
.rv-draft { padding: 16px 18px; border-radius: var(--r-lg); background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.rv-text { font-size: 16px; line-height: 24px; white-space: pre-line; }
.rv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rw-box { display: flex; flex-direction: column; gap: 10px; width: 100%; animation: rise var(--t-panel) var(--ease) both; }
.rw-box .comp-row { align-items: center; }

@media (max-width: 1280px) {
  .inbox, .inbox.no-side { grid-template-columns: 300px minmax(0, 1fr); }
  .inbox-side, .side-btn { display: none; }
}
@media (max-width: 860px) {
  .inbox, .inbox.no-side { grid-template-columns: minmax(0, 1fr); }
  .inbox.has-thread .inbox-list { display: none; }
  .inbox.auto-pick .inbox-thread { display: none; }
  .inbox-list { border-right: 0; }
  .inbox .only-m { display: inline-grid; }
  .inbox-thread { padding: 14px 14px 12px; }
}

/* ---------- Встречи ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.mgr-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mgr-dot.javier { background: var(--inverse); }
.mgr-dot.lucia { background: var(--info); }
.cal { display: grid; grid-template-columns: 52px repeat(var(--days, 5), minmax(0, 1fr)); gap: 0 8px; overflow-x: auto; }
.cal-times { display: flex; flex-direction: column; padding-top: 34px; }
.cal-times span { height: 64px; font-size: 12px; color: var(--ink-muted); transform: translateY(-8px); }
.cal-day { min-width: 110px; }
.cal-dname { height: 34px; font-size: 14px; font-weight: 600; display: flex; align-items: flex-start; }
.cal-day.today .cal-dname { color: var(--fox-ink); }
/* overflow: встречи и занятость обрезаются по колонке и не наезжают на названия дней. */
.cal-col { position: relative; height: 640px; border-radius: var(--r-md); background: var(--bg); overflow: hidden; }
.cal-col > i { display: block; height: 64px; border-top: 1px solid var(--line); }
.cal-col > i:first-child { border-top: 0; }
.cal-day.holiday .cal-col { background: repeating-linear-gradient(135deg, var(--sunken) 0 10px, var(--bg) 10px 20px); }
.cal-hol { position: absolute; left: 8px; right: 8px; top: 12px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--r-md); background: var(--raised); font-size: 12px; line-height: 16px; color: var(--ink-muted); box-shadow: var(--shadow-sm); }
.mt {
  position: absolute;
  left: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 8px 5px 11px;
  border-radius: 10px;
  background: var(--raised);
  box-shadow: var(--shadow-sm);
  text-align: left;
  overflow: hidden;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  animation: rise var(--t-panel) var(--ease) both;
}
.mt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--inverse); }
.mt.lucia::before { background: var(--info); }
.mt:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); z-index: 2; }
.mt-time { font-size: 11px; line-height: 14px; color: var(--ink-muted); font-weight: 600; }
.mt-name { font-size: 13px; line-height: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mt-name b { font-weight: 600; color: var(--ink-muted); margin-right: 2px; }
.mt-co { font-size: 12px; line-height: 15px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mt-oc { position: absolute; right: 6px; top: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-full); background: var(--sunken); }
.obar { display: flex; gap: 4px; height: 56px; border-radius: var(--r-lg); overflow: hidden; }
.obar-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; background: var(--sunken); min-width: 0; animation: grow-x 700ms var(--ease) both; transform-origin: left; }
.obar-seg b { font-size: 20px; line-height: 22px; font-weight: 400; }
.obar-seg span { font-size: 12px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obar-seg.deal { background: var(--fox); }
.obar-seg.deal b, .obar-seg.deal span { color: var(--on-fox); }
.tg { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 6px 20px 20px 20px; background: var(--bg); font-size: 14px; line-height: 20px; }
.mm { display: flex; gap: 22px; align-items: flex-start; }
.mm-when { display: flex; flex-direction: column; width: 84px; flex: none; }
.mm-time { font-size: 34px; line-height: 40px; font-weight: 300; letter-spacing: -.03em; }
.mm-sum p { margin-top: 4px; }
.pm .li-main { min-width: 0; }

/* ---------- Агент: анкеты ---------- */
.form-card { display: flex; flex-direction: column; }
.saved { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--success); }
.saved .dots { color: var(--ink-muted); }
.saved .dots i { width: 5px; height: 5px; }
.qs { display: flex; flex-direction: column; gap: 26px; margin-top: 24px; }
.q { display: flex; flex-direction: column; gap: 12px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.q:last-child { border-bottom: 0; padding-bottom: 0; }
.q-label { font-size: 17px; line-height: 24px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.q-ex { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.q-ex span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.clar { display: flex; gap: 12px; align-items: flex-start; animation: rise var(--t-panel) var(--ease) both; }
.clar-bubble { display: inline-block; padding: 12px 14px; border-radius: 6px 18px 18px 18px; background: var(--fox-soft); font-size: 15px; line-height: 22px; max-width: 620px; }
.clar-bubble.you { background: var(--sunken); margin-bottom: 8px; border-radius: 18px 6px 18px 18px; }
.clar .grow { display: flex; flex-direction: column; align-items: flex-start; }
.biz { gap: 26px 32px; }

/* Книга продаж */
.book-toc .card { position: sticky; top: 104px; }
.toc { display: flex; flex-direction: column; gap: 2px; }
.toc a { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); font-size: 15px; font-weight: 500; }
.toc a:hover { background: var(--sunken); }
.book { display: flex; flex-direction: column; gap: 16px; }
.book-h { font-size: 26px; line-height: 32px; font-weight: 300; letter-spacing: -.02em; margin-bottom: 8px; }
.facts { display: flex; flex-direction: column; }
.fact { position: relative; padding: 14px 40px 14px 0; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact.fresh { animation: rise var(--t-panel) var(--ease) both; }
.fact-text { font-size: 16px; line-height: 24px; }
.fact-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ink-muted); }
.fact-meta .badge { margin-left: 4px; }
.fact-edit { position: absolute; right: 0; top: 12px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.fact:hover .fact-edit, .fact-edit:focus-visible { opacity: 1; }
.vers { display: flex; flex-direction: column; }
.ver { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ver:last-child { border-bottom: 0; }
.ver.cur b { color: var(--success); }

/* Исследование ниши */
.seg-card { display: flex; flex-direction: column; gap: 16px; }
.seg-list ul { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.seg-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; font-size: 14px; line-height: 20px; padding: 4px 0 4px 14px; position: relative; }
.seg-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--track); }
.seg-list li .icon-btn { opacity: 0; margin-top: -4px; }
.seg-list li:hover .icon-btn, .seg-list li .icon-btn:focus-visible { opacity: 1; }
.seg-list li.edited span { color: var(--fox-ink); }
.src-ol { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; list-style: decimal; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.res-progress { display: flex; flex-direction: column; gap: 18px; }
.res-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.res-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); font-size: 14px; color: var(--ink-muted); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.res-steps li .i { color: var(--track); }
.res-steps li.run { background: var(--fox-soft); color: var(--fox-ink); }
.res-steps li.run .i { color: var(--fox); }
.res-steps li.ok { color: var(--ink); }
.res-steps li.ok .i { color: var(--success); }

/* Режимы и модели */
.mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.mode-card:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.mode-card.selected { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.stop-card { box-shadow: inset 0 0 0 1.5px var(--danger), var(--shadow-sm); }
.qdots { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.qdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--track); }
.qdots i.on { background: var(--ink); }
.qdots b { margin-left: 6px; font-size: 13px; font-weight: 600; }
.models-t .select { min-width: 200px; }
.models-t .select:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Обучение ---------- */
.tracks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.card.track { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.card.track:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.card.track.selected { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.train-panel { min-height: 520px; }
.kbq.answered .clar-bubble { background: var(--sunken); }
.kbq-a { margin-top: 10px; }
.chat-sim { display: flex; flex-direction: column; gap: 14px; }
.chat-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
/* Кто пишет лидам: ИИ-ассистент или сотрудник, один переключатель в обучении, онбординге и стоп-листах. */
.disc-switch { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.disc-switch .seg { max-width: 100%; }
.chat-body { display: flex; flex-direction: column; gap: 12px; max-height: 440px; overflow-y: auto; padding: 4px 4px 4px 0; }
.cm { display: flex; flex-direction: column; animation: rise var(--t-panel) var(--ease) both; }
/* Как в «Диалогах»: клиент слева, агент (мы) справа. */
.cm.c { align-items: flex-start; }
.cm.a { align-items: flex-end; }
.cm-bubble { max-width: 78%; padding: 12px 15px; border-radius: 18px; font-size: 15px; line-height: 22px; }
.cm.c .cm-bubble { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); border-bottom-left-radius: 6px; }
.cm.a .cm-bubble { background: var(--bg); border-bottom-right-radius: 6px; }
.cm.edited .cm-bubble { box-shadow: inset 0 0 0 1.5px var(--success); }
.cm-tools { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.cm-tools .icon-btn.picked { background: var(--inverse); color: var(--on-inverse); }
.chat-hints .chip { height: 30px; font-size: 13px; }
#chatOwn[hidden] { display: none; }
/* Плохой ответ: что не так одной кнопкой, потом вариант агента принять или поправить. */
.cm-fix { display: flex; flex-direction: column; gap: 8px; width: min(560px, 100%); margin-top: 8px; padding: 12px 14px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); animation: rise var(--t-panel) var(--ease) both; }
.cm-fix .chips { gap: 6px; }
.cm-fix .chip { height: 30px; font-size: 13px; }
.cm-fix .cm-bubble.sugg { max-width: none; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--success); border-radius: 18px 18px 6px 18px; }
/* Правка ответа агента: пузырь во всю ширину чата, поле растёт по тексту. */
.cm.editing { align-items: stretch; }
.cm.editing .cm-bubble { max-width: none; width: 100%; }
.cm.editing .cm-bubble .textarea { width: 100%; min-height: 150px; font-size: 15px; line-height: 22px; resize: vertical; }
.cm.editing .cm-tools, .cm.editing .cm-fix { display: none; }
/* Письмо вместо пузыря: тема, от кого и подпись ящика, как в живой почте (панель «Написать агенту»). */
.cm.mail .cm-bubble { max-width: 92%; border-radius: var(--r-lg); }
.letter-head { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 19px; }
.letter-head .l-k { color: var(--ink-muted); }
.letter-head .l-v { overflow-wrap: anywhere; }
.letter-sign { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 13px; line-height: 19px; white-space: pre-line; }

/* Панель «Написать агенту»: переключатели сверху, переписка посередине, поле снизу. */
/* Невысокий экран: переписке оставляем минимум, остальное прокручивает сама панель. */
.drawer.sb-drawer { display: flex; flex-direction: column; overflow: auto; }
.drawer.sb-drawer .modal-body { display: flex; flex: 1 1 auto; min-height: 0; }
/* height: 100%, а не flex: растянуться по строке flex недостаточно, высоту задаёт самый высокий элемент. */
.sb { display: flex; flex-direction: column; height: 100%; min-height: 320px; gap: 14px; width: 100%; }
.sb-top { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sb-ch .chip { height: 32px; font-size: 13px; }
.sb-ch .chip.dim { opacity: .6; }
.sb .chat-body { flex: 1 1 auto; min-height: 150px; max-height: none; }
.sb-foot { display: flex; flex-direction: column; gap: 10px; }
/* «Пусть клиент напишет сам» это другое действие, чем готовые фразы: своя строка с чертой по бокам. */
.sb-or { display: flex; align-items: center; gap: 12px; }
.sb-or::before, .sb-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sb-hints { display: flex; flex-direction: column; gap: 6px; }
/* Пометка, что это проверка: видно сразу, но внимания не отнимает. */
.sb-safe { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--sunken); color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.sb-safe > .i { width: 14px; height: 14px; }
.sb-start { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
.sb-start .cm-bubble.past { background: var(--sunken); color: var(--ink-muted); }
.sb .cm-fix { width: 100%; }
/* Проверка голосом: что сказали в звонке, и итог разговора под лентой. */
.cm.call .cm-bubble { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.sb-call { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.sb-call-end { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink-muted); font-size: 13px; line-height: 19px; }
@media (max-width: 700px) {
  .overlay.side.sb-ov { padding: 0; }
  .overlay.side.sb-ov .drawer { height: 100%; border-radius: 0; }
}
.ex-prev { color: var(--ink-muted); margin-bottom: 4px; padding-left: 10px; border-left: 2px solid var(--line); }
.ex-prev > span:first-child { font-weight: 600; }
.ex-miss { margin-top: 4px; padding-left: 18px; list-style: disc; color: var(--danger); }
.personas { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.persona { display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.persona .row.between { flex-wrap: wrap; row-gap: 8px; }
.persona .stars b { white-space: nowrap; }
.persona .btn { margin-top: auto; }
.persona.todo { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.stars { display: inline-flex; align-items: center; gap: 3px; }
.stars i { width: 10px; height: 10px; border-radius: 3px; background: var(--track); transform: rotate(45deg); }
.stars i.on { background: var(--fox); }
.stars b { margin-left: 8px; font-size: 13px; }
.sim-stage { display: flex; flex-direction: column; gap: 14px; animation: rise var(--t-panel) var(--ease) both; }
.sim-stage .cm.a .cm-bubble { background: var(--raised); }
.sim-stage .cm.c .cm-bubble { background: var(--bg); }
/* Ошибки трудных разговоров на шаге «Экзамен»: реплики перед ошибкой, ответ агента, что не так, исправление. */
.hard-errs { display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 0 0 1.5px var(--fox); }
.hard-item { display: flex; flex-direction: column; gap: 8px; }
.hard-ctx { max-height: none; overflow: visible; }
.hard-errs .cm.a .cm-bubble { background: var(--raised); }
.hard-errs .cm.c .cm-bubble { background: var(--bg); }
.hard-errs .cm-bubble.hard-bad { box-shadow: inset 0 0 0 1.5px var(--danger); }
.hard-fix { width: 100%; }
.hard-fix .textarea { width: 100%; min-height: 130px; font-size: 15px; line-height: 22px; resize: vertical; }
.call-live { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: var(--r-xl); background: var(--bg); animation: rise var(--t-panel) var(--ease) both; }
.call-who { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.call-who > div { flex: 1; }
.call-lines { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; }
.call-lines li { font-size: 15px; line-height: 22px; animation: rise var(--t-panel) var(--ease) both; }
.call-lines li .tr { margin-top: 2px; padding-top: 0; border-top: 0; }
.call-sim .notice { margin-top: 16px; }
.exam { display: flex; flex-direction: column; }
.exam li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: background-color var(--t-fast) var(--ease); }
.exam li:last-child { border-bottom: 0; }
.ex-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); font-size: 12px; font-weight: 700; line-height: 1; flex: none; }
.exam li.ok .ex-n { background: var(--success); color: #FFFFFF; }
:root[data-theme="dark"] .exam li.ok .ex-n { color: #15120F; }
.exam li.run .ex-n { background: var(--fox); color: var(--on-fox); }
.ex-a { color: var(--ink-muted); margin-top: 4px; min-height: 20px; }
.tone { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tone .q-ex { margin-top: 8px; color: var(--ink); }
.tpl { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg); cursor: pointer; }
.tpl input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.tpl .grow { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1100px) { .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .res-steps { grid-template-columns: 1fr; } }

/* ---------- База знаний ---------- */
.layers { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.layer { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--r-xl); background: var(--bg); }
.layer.core { box-shadow: inset 0 0 0 1.5px var(--fox); background: color-mix(in srgb, var(--fox-soft) 45%, var(--bg)); }
.layer .stat-value { font-size: 40px; line-height: 46px; }
.layer .stat-value .unit { font-size: 16px; }
.layer-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.layer-arrow .i { width: 22px; height: 22px; color: var(--ink); }
.frags { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.frags li { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--shadow-sm); animation: rise var(--t-panel) var(--ease) both; }
.frags li:nth-child(2) { animation-delay: 60ms; }
.frags li:nth-child(3) { animation-delay: 120ms; }
.conflict { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.conflict:last-child { border-bottom: 0; padding-bottom: 0; }
.cf-opt .t-subtitle { font-weight: 400; }
.diff { display: flex; flex-direction: column; }
.diff li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 22px; }
.diff li:last-child { border-bottom: 0; }
.diff-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sunken); }
.diff li.add .diff-ico { background: var(--success); color: #FFFFFF; }
.diff li.edit .diff-ico { background: var(--info); color: #FFFFFF; }
:root[data-theme="dark"] .diff li.add .diff-ico, :root[data-theme="dark"] .diff li.edit .diff-ico { color: #15120F; }
.diff li.del { color: var(--ink-muted); }
.diff li.del .grow > div:first-child { text-decoration: line-through; }
.st-prog { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
/* Ход обработки файла: полоса едет ровно между опросами (live-knowledge.js, GLIDE). */
.progress.glide > i { transition: width 1200ms linear; }
.fresh-row td { animation: rise var(--t-panel) var(--ease) both; }
@media (max-width: 1100px) { .layers { grid-template-columns: 1fr; } .layer-arrow { flex-direction: row; } .layer-arrow .i { transform: rotate(90deg); } }

/* ---------- Каналы ---------- */
.acc { display: flex; flex-direction: column; gap: 16px; }
.warm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; height: 170px; align-items: end; }
.warm-col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.warm-bar { width: 100%; max-width: 44px; height: var(--h); border-radius: 12px; background: var(--track); transform-origin: bottom; animation: grow-y 600ms var(--ease) both; }
.warm-col.cur .warm-bar { background: var(--fox); }
.warm-col b { font-size: 15px; font-weight: 600; }
.warm-col span:last-child { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.oauth { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 10px 0; }
.dns { display: flex; flex-direction: column; gap: 10px; }
.dns li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); font-size: 15px; color: var(--ink-muted); }
.dns li .i { color: var(--track); }
.dns li.run { background: var(--fox-soft); color: var(--fox-ink); }
.dns li.ok { color: var(--ink); }
.dns li.ok .i { color: var(--success); }

.browser { border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); background: var(--raised); }
.br-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--sunken); }
.br-dots { display: flex; gap: 6px; }
.br-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--track); }
.br-url { flex: 1; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-full); background: var(--raised); font-size: 13px; color: var(--ink-muted); }
.br-app { display: grid; grid-template-columns: 240px 1fr; height: 360px; }
.br-list { border-right: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.br-chat { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; font-size: 13px; }
.br-chat div { display: flex; flex-direction: column; min-width: 0; }
.br-chat span { color: var(--ink-muted); font-size: 12px; }
.br-chat.on { background: var(--bg); }
.br-conv { display: flex; flex-direction: column; background: var(--bg); }
.br-msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.br-m { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 20px; background: var(--raised); box-shadow: var(--shadow-sm); }
.br-m.out { align-self: flex-end; background: var(--inverse); color: var(--on-inverse); animation: rise var(--t-panel) var(--ease) both; }
.br-input { display: flex; align-items: center; margin: 12px; min-height: 44px; padding: 10px 16px; border-radius: var(--r-full); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.br-caret { display: inline-block; width: 1.5px; height: 18px; background: var(--ink); margin-left: 1px; }
.voice { gap: 6px; }
.voice-wave { min-height: 28px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 48px; width: 120px; }
.spark i { flex: 1; height: var(--h); border-radius: 2px; background: color-mix(in srgb, var(--success) 78%, var(--raised)); transform-origin: bottom; animation: grow-y 500ms var(--ease) both; animation-delay: calc(var(--i) * 20ms); }
.spark i.warn { background: var(--fox); }
.spark i.bad { background: var(--danger); }
/* Здоровье по уровням: норма зелёная, пустые места это дни до подключения аккаунта. */
.spark i.lv-ok, .hchart > i.lv-ok { background: color-mix(in srgb, var(--success) 78%, var(--raised)); }
.spark i.lv-warn { background: var(--fox); }
.spark i.lv-risk { background: color-mix(in srgb, var(--danger) 55%, var(--raised)); }
.spark i.lv-danger { background: var(--danger); }
.spark i.none, .hchart > i.none { height: 3px; background: var(--line); animation: none; }
.health .gauge { margin-bottom: 4px; }
.hchart { position: relative; height: 200px; display: flex; align-items: flex-end; gap: 4px; padding-right: 30px; }
.hchart > i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--success) 78%, var(--raised)); transform-origin: bottom; animation: grow-y 600ms var(--ease) both; animation-delay: calc(var(--i) * 12ms); }
.hchart > i.warn { background: var(--fox); }
.hchart > i.bad { background: var(--danger); }
.hline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-strong); }
.hline b { position: absolute; right: 0; top: -9px; font-size: 11px; color: var(--ink-muted); background: var(--raised); padding-left: 4px; }
.ladder { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.ladder-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ladder-step { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-lg); background: var(--bg); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ladder-step b { font-size: 14px; color: var(--ink); }
.ladder-step.done { box-shadow: inset 0 0 0 1px var(--success); }
.ladder-step.cur { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); background: var(--raised); }
@media (max-width: 1100px) { .ladder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .br-app { grid-template-columns: 1fr; } .br-list { display: none; } }

/* ---------- Аналитика ---------- */
.view-part.swap { animation: rise var(--t-panel) var(--ease) both; }
.view-part { display: flex; flex-direction: column; gap: var(--gap); }
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hb-row { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; }
.hb-l { display: flex; align-items: center; gap: 6px; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-track { height: 12px; border-radius: var(--r-full); background: var(--sunken); overflow: hidden; }
.hb-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--track); transform-origin: left; animation: grow-x 700ms var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.hb-row.hl .hb-track i { background: var(--fox); }
.hb-v { text-align: right; font-weight: 600; }
.funnel { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.fn-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px 64px; gap: 14px; align-items: center; font-size: 15px; }
.fn-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-track { height: 38px; border-radius: 12px; background: var(--bg); overflow: hidden; }
.fn-track i { display: block; height: 100%; width: var(--w); min-width: 6px; border-radius: 12px; background: var(--track); transform-origin: left; animation: grow-x 800ms var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.fn-row.hl .fn-track i { background: var(--fox); }
.fn-v { text-align: right; font-weight: 600; }
.fn-c { text-align: right; font-size: 13px; color: var(--ink-muted); }
.fn-row.hl .fn-c { color: var(--fox-ink); font-weight: 600; }
.mini-bar { width: 90px; height: 8px; border-radius: var(--r-full); background: var(--sunken); overflow: hidden; }
.mini-bar i { display: block; height: 100%; width: var(--w); background: var(--track); border-radius: inherit; }
.mini-bar i.hl { background: var(--fox); }
.ab { display: flex; flex-direction: column; gap: 12px; }
.ab-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg); }
.ab-row.win { box-shadow: inset 0 0 0 1.5px var(--fox); }
.trend { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 8px; height: 190px; align-items: end; margin-top: 8px; }
.tr-col { height: 100%; display: flex; align-items: flex-end; }
.tr-col i { display: block; width: 100%; height: var(--h); border-radius: var(--r-full); background: var(--track); transform-origin: bottom; animation: grow-y 600ms var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.tr-col.hl i { background: var(--fox); }
@media (max-width: 760px) { .fn-row { grid-template-columns: 110px minmax(0, 1fr) 54px; } .fn-c { display: none; } .hb-row { grid-template-columns: 110px minmax(0, 1fr) 54px; } }

/* ---------- Тариф и настройки ---------- */
.usage { position: relative; margin-top: 10px; }
.usage .mark { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink); border-radius: 2px; }
.usage .mark b { position: absolute; top: 22px; left: -12px; font-size: 11px; color: var(--ink-muted); }
.plan { display: flex; flex-direction: column; gap: 14px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price span:first-child { font-size: 38px; line-height: 44px; font-weight: 300; letter-spacing: -.03em; }
.plan-f { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-f li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; }
.plan-f .i { color: var(--success); margin-top: 2px; }
/* Сетка тарифов: платные в ряд на широком экране (число колонок в --plans, живой кабинет ставит его по тарифам из API),
   по три на ноутбуке, по два на планшете, один на телефоне. На шаге «Тариф» онбординга колонка узкая: там по два,
   а последняя карточка при нечётном числе тарифов идёт во всю ширину, чтобы не висела одна в углу. */
.plan-grid { display: grid; grid-template-columns: repeat(var(--plans, 5), minmax(0, 1fr)); gap: var(--gap); }
.plan-grid.onb-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-grid.onb-plans > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.plan-grid .plan-price { flex-wrap: wrap; row-gap: 2px; }
.plan .kv-row { font-size: 14px; gap: 10px; }
.plan .kv-row .k { flex: 0 1 auto; min-width: 0; }
.plan .kv-row .v { flex: none; white-space: nowrap; }
@media (max-width: 1360px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .plan-grid, .plan-grid.onb-plans { grid-template-columns: minmax(0, 1fr); } }
.notif-t td.c, .notif-t th.c { text-align: center; }
.notif-t .switch { display: inline-block; }
.notif-t .nt-soon { margin-top: 4px; font-weight: 400; }
.ntf-qr { width: 120px; height: 120px; border-radius: var(--r-md); background: #fff; padding: 6px; flex: none; }
.key { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; }

/* ---------- Вход и первый запуск ---------- */
.view.bare { gap: 0; }
.view.bare > * { animation: none; }
.auth { display: grid; grid-template-columns: minmax(420px, 560px) 1fr; min-height: 100vh; }
.auth-side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 36px 56px; background: var(--bg); position: relative; z-index: 1; }
.auth-logo { display: inline-flex; border-radius: 8px; }
.auth-logo svg { height: 40px; width: auto; }
.auth-form { display: flex; flex-direction: column; gap: 24px; max-width: 420px; width: 100%; animation: rise var(--t-panel) var(--ease) both; }
.auth-form.swap { animation: rise var(--t-panel) var(--ease) both; }
.auth-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-foot .brand-type { font-size: 15px; }
/* Ссылки на условия сервиса и политику конфиденциальности: подвал входа, меню человека. */
.legal-links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.legal-links a { text-decoration: none; }
.legal-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.menu-legal { padding: 10px 10px 4px; }
.auth-form p.t-caption a.fox-text, .legal-note a.fox-text { text-decoration: underline; text-underline-offset: 2px; }
.legal-note { margin-top: 14px; }
.code-again { min-height: 22px; display: flex; align-items: center; }
.auth-visual { position: relative; overflow: hidden; background: var(--sunken); border-radius: 32px; margin: 16px; }
.auth-visual .glow { animation: fade 900ms var(--ease) both; }
.line-sq { position: absolute; border: 1.5px solid rgba(21, 18, 15, .22); border-radius: 46px; }
:root[data-theme="dark"] .line-sq { border-color: rgba(244, 241, 237, .2); }
.line-sq.a { width: 300px; height: 300px; right: 140px; top: 120px; transform: rotate(-9deg); }
.line-sq.b { width: 300px; height: 300px; right: 90px; top: 170px; transform: rotate(6deg); }
.auth-glass { position: absolute; display: flex; align-items: center; gap: 16px; padding: 18px 24px 18px 18px; animation: rise 500ms var(--ease) both; }
.auth-glass.one { left: 10%; top: 50%; animation-delay: 200ms; }
.auth-glass.two { right: 10%; top: 18%; flex-direction: column; align-items: flex-start; gap: 0; padding: 20px 26px; animation-delay: 350ms; }
.auth-tag { position: absolute; left: 10%; bottom: 9%; right: 8%; display: flex; flex-direction: column; gap: 16px; }
.auth-tag .t-display { font-size: 56px; line-height: 60px; }
.otp { display: flex; gap: 10px; }
.otp-c { width: 56px; height: 64px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--raised); text-align: center; font-size: 26px; font-weight: 300; }
.otp-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.welcome { max-width: 1240px; margin: 0 auto; padding: 28px var(--page-x) 72px; display: flex; flex-direction: column; gap: 28px; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; }
.welcome-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; min-height: 360px; padding: 48px; border-radius: 32px; background: var(--sunken); }
.welcome-txt { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.welcome-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 24px 18px 18px; }
.welcome-step { display: flex; flex-direction: column; gap: 14px; }
.welcome-step .btn { align-self: flex-start; margin-top: auto; }
.step-n { font-size: 44px; line-height: 48px; font-weight: 300; letter-spacing: -.03em; color: var(--fox); }
.welcome-demo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .auth { grid-template-columns: 1fr; }
  .auth-visual { min-height: 420px; order: -1; margin: 12px 12px 0; }
  .auth-side { padding: 28px 24px; }
  .auth-tag .t-display { font-size: 38px; line-height: 42px; }
  .auth-glass.two { display: none; }
}
@media (max-width: 760px) {
  .welcome-hero { padding: 28px 22px; min-height: 0; }
  .welcome .t-display { font-size: 40px; line-height: 44px; }
  .otp-c { width: 44px; height: 54px; }
}

/* ---------- Администратор ---------- */
.mod { display: flex; flex-direction: column; gap: 10px; transition: height var(--t-panel) var(--ease), opacity var(--t-panel) var(--ease), padding var(--t-panel) var(--ease); }
.mod.rv-leave { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; overflow: hidden; }
/* Выводы на модерации и в нише общей базы: текст слева, решения справа. */
.mod-list { display: flex; flex-direction: column; }
.mod-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.mod-list .mod-item:first-child { border-top: 0; }
.mod-item .t-body { margin: 4px 0 0; }
.mod-item .sum { margin-top: 6px; }
.mod-item .row.g4 { flex: none; }
.page-head .ph-actions .input-wrap { width: 280px; }
.comp-row > .input-wrap, .comp-row > .input, .comp-row > .textarea { flex: 1; min-width: 0; }
.acc > .btn-link, .stack > .btn-link, .card > .btn-link, .col > .btn-link, .stack > .btn-primary { align-self: flex-start; }

/* ---------- Узкие экраны ---------- */
@media (max-width: 760px) {
  .wk-stats { gap: 18px 28px; margin-top: 18px; }
  .wk-stats .stat-value { font-size: 34px; line-height: 40px; }
  .wk-bars { gap: 3px; height: 170px; min-height: 170px; margin-top: 20px; }
  .wk-card .card-title { font-size: 19px; line-height: 26px; }
  .msg-body, .call-box, .call-sum, .call-tr { margin-left: 0; }
  .ev-msg.agent .msg-body, .ev-msg.manager .msg-body { margin-right: 0; }
  .ev-msg { max-width: 94%; }
  .ev-msg:has(.textarea) { width: 94%; }
  .found-main { flex-wrap: wrap; }
  .found-side { flex-direction: row; align-items: center; min-width: 0; width: 100%; justify-content: flex-start; }
  .found-why { margin-left: 0; }
  .kanban { grid-auto-columns: minmax(250px, 82vw); }
  .toolbar-l .input-wrap, .toolbar-l .select { width: 100%; }
  .mm { flex-direction: column; gap: 8px; }
  .cal { grid-template-columns: 44px repeat(var(--days, 5), minmax(110px, 1fr)); }
  .comp-row { flex-wrap: wrap; }
  .comp-row > .btn { flex: 1; }
  .layers { padding: 18px; }
  .hist li { grid-template-columns: 1fr; }
  .page-head .ph-actions .select { min-width: 0; width: 100%; }
}

/* ---------- Язык ---------- */
.lang-seg button { min-width: 44px; justify-content: center; letter-spacing: .04em; }
.lang-seg.sm { padding: 3px; }
.lang-seg.sm button { height: 28px; padding: 0 9px; font-size: 12px; min-width: 36px; }
.menu-item.lang-row { cursor: default; }
.menu-item.lang-row:hover { background: transparent; }

/* ---------- Онбординг компании ---------- */
.onb { width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px var(--page-x) 72px; display: flex; flex-direction: column; gap: 24px; }
.onb-top { display: flex; align-items: center; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.onb-top .auth-logo svg { height: 36px; }
.onb-prog { flex: 1; max-width: 460px; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.onb-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.onb-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.onb-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; animation: rise var(--t-panel) var(--ease) both; }
.onb-h { font-size: 40px; line-height: 46px; font-weight: 300; letter-spacing: -.03em; }
.onb-lead { font-size: 17px; line-height: 26px; color: var(--ink-muted); max-width: 760px; margin-top: -8px; }
.onb-fields { gap: 20px 24px; }
/* Живой «Обзор» рисуется внутри своей обёртки: тот же шаг между шапкой и блоками, что у .view. */
.ov-box { display: flex; flex-direction: column; gap: var(--gap); }
/* Реквизиты, уже введённые при создании компании: краткая карточка вместо полей. */
.onb-co { display: grid; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); }
.onb-co-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; margin: 0; }
.onb-co-facts dt { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.onb-co-facts dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.onb-or { display: flex; align-items: center; gap: 14px; color: var(--ink-muted); font-size: 13px; }
.onb-or::before, .onb-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.onb-box { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-xl); background: var(--bg); }
.onb-box .tpl { background: var(--raised); }
.tpl.need { box-shadow: inset 0 0 0 1.5px var(--fox); animation: rise var(--t-panel) var(--ease) both; }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); }
.onb-files { display: flex; flex-direction: column; gap: 8px; }
.onb-file { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--bg); }
.onb-file .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.onb-file.done { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.onb-chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.onb-ch { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-xl); background: var(--bg); transition: box-shadow var(--t-fast) var(--ease); }
.onb-ch.ok { background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--success); }
.onb-ch.just-moved { animation: rise var(--t-panel) var(--ease) both; }
.onb-dns li { background: var(--raised); }
.onb-inv { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 10px; animation: rise var(--t-panel) var(--ease) both; }
.onb-chat { padding: 16px; border-radius: var(--r-xl); background: var(--bg); }
.onb-chat .cm.a .cm-bubble { background: var(--raised); }
.onb-chat .cm.c .cm-bubble { background: var(--sunken); box-shadow: none; }
.onb-plans { gap: 12px; }
.card.onb-plan { text-align: left; align-items: stretch; box-shadow: inset 0 0 0 1px var(--line); }
.card.onb-plan:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.card.onb-plan.selected { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.onb-plan .plan-price span:first-child { font-size: 30px; line-height: 36px; }
.onb-launch { position: relative; overflow: hidden; margin: -28px -28px 0; padding: 40px 28px 28px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--sunken); }
.onb-launch-in { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.onb-sum { display: flex; flex-direction: column; min-width: 280px; }
.onb-sum li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.onb-sum li:last-child { border-bottom: 0; }
.onb-sum li > span:first-child { flex: 1; min-width: 0; }
.onb-sum li > :last-child { flex: none; }
.onb-research { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-xl); background: var(--raised); box-shadow: var(--shadow-sm); animation: rise var(--t-panel) var(--ease) both; }
.onb-research .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.onb-research b { font-size: 14px; font-weight: 600; }
.onb-research span { font-size: 13px; color: var(--ink-muted); }
.onb-research.ok > .i { color: var(--success); width: 22px; height: 22px; }
.onb-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 52px 48px; border-radius: 32px; background: var(--sunken); }
.onb-hero-in { position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.onb-hero-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 24px 18px 18px; }
.onb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.onb-tile { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.onb-tile.done { box-shadow: inset 0 0 0 1.5px var(--success), var(--shadow-sm); }
.step-n-sm { font-size: 28px; line-height: 32px; font-weight: 300; letter-spacing: -.03em; color: var(--fox); }
/* Живой онбординг (live-onboarding.js): шаги будущих модулей как пример без действий, подсказки
   по материалам, незаполненный обязательный вопрос. */
.onb-demo { opacity: .55; pointer-events: none; user-select: none; display: flex; flex-direction: column; gap: 22px; }
.onb-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.q.need .q-in .textarea { box-shadow: inset 0 0 0 1.5px var(--fox); }
/* Шаг «Каналы»: ящики, номера и люди внутри карточки канала; почта, без которой шаг не пройти. */
.onb-ch .onb-file { padding: 10px 12px; background: var(--raised); }
.onb-ch.ok .onb-file { background: var(--bg); }
.onb-ch .onb-file > :not(.grow):last-child { flex: none; }
.onb-ch .onb-file .t-label { overflow-wrap: anywhere; }
.onb-ch .onb-file .grow > .row { margin-top: 2px; }
.onb-ch .onb-file .grow > .row .btn-link { height: auto; padding: 2px 0; }
.onb-ch.need { box-shadow: inset 0 0 0 1.5px var(--fox); animation: rise var(--t-panel) var(--ease) both; }
@media (max-width: 560px) {
  .onb-ch > .row > .card-icon, .onb-ch .onb-file > :first-child:not(.grow) { display: none; }
  .onb-ch .onb-file { flex-wrap: wrap; }
  .onb-ch .onb-file > .grow { flex: 1 1 150px; }
}
@media (max-width: 1100px) {
  .onb-body { grid-template-columns: minmax(0, 1fr); }
  .onb-side { position: static; }
  .onb-side .steps { flex-direction: row; overflow-x: auto; }
  .onb-side .step { flex: none; width: auto; }
  .onb-side .step-sub { display: none; }
  .onb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onb-chs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .onb-hero { padding: 28px 22px; }
  .onb-hero .t-display { font-size: 38px; line-height: 42px; }
  .onb-h { font-size: 30px; line-height: 36px; }
  .onb-inv { grid-template-columns: 1fr; }
  .onb-kinds { grid-template-columns: 1fr; }
  .onb-launch { margin: -20px -20px 0; padding: 28px 20px 20px; }
  .onb-prog { order: 3; max-width: none; flex-basis: 100%; }
}

/* Подпись у кольца в две строки на любом языке */
.ring-lbl { max-width: 104px; line-height: 1.3; }


/* ---------- Плашки графиков и пояснения показателей ---------- */
.tipbox { position: fixed; z-index: 400; left: 0; top: 0; max-width: 270px; padding: 10px 13px; border-radius: 14px; background: var(--inverse); color: var(--on-inverse); box-shadow: var(--shadow-md); font-size: 13px; line-height: 18px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 120ms var(--ease), transform 120ms var(--ease); display: flex; flex-direction: column; gap: 2px; }
.tipbox.on { opacity: 1; transform: none; }
.tipbox b { font-size: 16px; line-height: 22px; font-weight: 600; }
.tipbox span { opacity: .78; }
.tipbox em { font-style: normal; opacity: .92; margin-top: 2px; }
.tipbox.note-only em { opacity: 1; margin-top: 0; }
[data-tip] { cursor: pointer; }
[data-tip]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tipping [data-tip]:not(.tip-on) { opacity: .45; }
.hb-track i, .fn-track i, .tr-col i, .wk-bar, .spark i, .hchart > i, .obar-seg { transition: opacity var(--t-fast) var(--ease); }
.with-i { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.info-i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--ink-muted); flex: none; vertical-align: middle; }
.info-i:hover, .info-i.tip-on { color: var(--ink); background: var(--sunken); }
.info-i .i { width: 15px; height: 15px; }
.stat-label .info-i { margin-left: 2px; }
.insight { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--ink); }
.insight .i { width: 15px; height: 15px; margin-top: 2px; color: var(--ink-muted); }
.insight.flash { animation: rise var(--t-panel) var(--ease) both; }

/* ---------- Цвета этапов. Чем ближе к встрече, тем насыщеннее. Диалог зелёный. ---------- */
.st-found { --st-c: var(--line-strong); --st-bg: var(--sunken); --st-fg: var(--ink-muted); }
.st-contact { --st-c: var(--info); --st-bg: var(--sunken); --st-fg: var(--info); }
.st-qualified { --st-c: var(--info); --st-bg: var(--info-soft); --st-fg: var(--info); }
.st-dialog { --st-c: var(--success); --st-bg: var(--success-soft); --st-fg: var(--success); }
.st-booked { --st-c: var(--on-success); --st-bg: var(--success); --st-fg: var(--on-success); }
.st-manager { --st-c: var(--on-inverse); --st-bg: var(--inverse); --st-fg: var(--on-inverse); }
/* «Нужно внимание»: эскалация ждёт человека, единственный этап в цвете акцента. «Успех» и «Отказ» контуром. */
.st-escalated { --st-c: var(--fox); --st-bg: var(--fox-soft); --st-fg: var(--fox-ink); }
.st-closed { --st-c: var(--line-strong); --st-bg: transparent; --st-fg: var(--ink-muted); }
.st-won { --st-c: var(--success); --st-bg: transparent; --st-fg: var(--success); }
.st-custom { --st-c: var(--ink); --st-bg: var(--sunken); --st-fg: var(--ink); }
.badge.st { background: var(--st-bg); color: var(--st-fg); }
.badge.st .dot { background: var(--st-c); }
.badge.st-contact .dot, .badge.st-closed .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-c); }
.badge.st-closed { box-shadow: inset 0 0 0 1px var(--line); }
.badge.st-dialog .dot { animation: st-pulse 2.4s var(--ease) infinite; }
@keyframes st-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
  70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .badge.st-dialog .dot { animation: none !important; } }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-c); flex: none; display: inline-block; margin-right: 2px; }
.st-dot.st-booked { background: var(--success); }
.st-dot.st-manager { background: var(--inverse); }
.st-dot.st-contact, .st-dot.st-closed { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-c); }
.chip.pick.on .st-dot.st-manager { background: var(--on-inverse); }
.kcol-n.st-found { background: var(--raised); color: var(--ink-muted); }
.kcol-n.st-contact { background: var(--raised); color: var(--info); box-shadow: inset 0 0 0 1.5px var(--info); }
.kcol-n.st-qualified { background: var(--info); color: #FFFFFF; }
.kcol-n.st-dialog { background: var(--success-soft); color: var(--success); box-shadow: inset 0 0 0 1.5px var(--success); }
.kcol-n.st-booked { background: var(--success); color: var(--on-success); }
.kcol-n.st-manager { background: var(--inverse); color: var(--on-inverse); }
.kcol-n.st-escalated { background: var(--fox-soft); color: var(--fox-ink); box-shadow: inset 0 0 0 1.5px var(--fox); }
.kcol-n.st-closed { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.kcol-n.st-won { background: transparent; color: var(--success); box-shadow: inset 0 0 0 1.5px var(--success); }
.st-dot.st-won { background: transparent; box-shadow: inset 0 0 0 1.5px var(--success); }
.badge.st-won { box-shadow: inset 0 0 0 1px var(--success); }
.kcol-n.st-custom { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
:root[data-theme="dark"] .kcol-n.st-qualified { color: #15120F; }
.kcol-head[data-tip] { cursor: help; border-radius: var(--r-md); }
.stage-ed { border-radius: var(--r-lg); background: var(--bg); }
.stage-ed > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.stage-ed > summary::-webkit-details-marker { display: none; }
.stage-ed > summary .grow { display: flex; flex-direction: column; min-width: 0; }
.stage-ed[open] > summary .i { transform: rotate(180deg); }
.stage-ed .se-body { padding: 4px 14px 16px; }

/* ---------- Каналы иконками и мелкие элементы ---------- */
.ch-ico { display: inline-grid; place-items: center; color: inherit; }
.ch-icons { display: inline-flex; align-items: center; gap: 8px; }
.kc-ch .ch-icons { gap: 6px; }
.chip.icon-only { width: 36px; padding: 0; justify-content: center; }
.chip.file-chip { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.chip.file-chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--fox-soft); color: var(--fox-ink); font-size: 11px; font-weight: 700; line-height: 1; display: inline-grid; place-items: center; margin-left: 4px; }
.chip.pick.on .count { background: var(--fox); color: var(--on-fox); }
.count-pill { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-full); background: var(--fox-soft); color: var(--fox-ink); font-size: 12px; font-weight: 700; line-height: 1; display: inline-grid; place-items: center; flex: none; }

/* ---------- Шапка: компании, уведомления ---------- */
.topbar { gap: 16px; }
.topbar-l { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
.co-switch { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 5px; border-radius: var(--r-full); background: var(--raised); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 600; transition: box-shadow var(--t-fast) var(--ease); min-width: 0; }
.co-switch:hover { box-shadow: var(--shadow-md); }
.co-name { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-ini { width: 34px; height: 34px; border-radius: 50%; background: var(--inverse); color: var(--on-inverse); display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; }
.co-ini.lg { width: 36px; height: 36px; }
/* Логотип компании вместо букв. */
.co-ini.has-logo { background: var(--sunken); overflow: hidden; }
.co-ini.has-logo img { width: 100%; height: 100%; object-fit: cover; }
.popover.wide { width: min(440px, calc(100vw - 24px)); }
.notif-pop { display: flex; flex-direction: column; gap: 6px; max-height: min(72vh, 680px); overflow-y: auto; overscroll-behavior: contain; }
.nt-group { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-top: 1px solid var(--line); }
.nt-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.nt-head .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--fox-soft); color: var(--fox-ink); font-size: 11px; letter-spacing: 0; line-height: 1; display: inline-grid; place-items: center; }
.nt { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: var(--r-md); }
/* «Прочитано» и «Открыть» рядом, кнопка отметки появляется только у непрочитанного. */
.nt-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.nt:hover { background: var(--bg); }
.nt .grow { min-width: 0; }
.nt-title { font-size: 14px; line-height: 20px; font-weight: 600; }
.nt.unread .nt-title::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fox); margin-left: 8px; vertical-align: middle; }
.nt-text { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nt-at { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin-top: 3px; }
.nt .btn { flex: none; margin-top: 2px; }
.nt-empty { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 14px; color: var(--ink-muted); }
.nt-other { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--r-md); background: var(--sunken); font-size: 14px; text-align: left; }
.nt-other:hover { background: var(--line); }
.mco { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mco-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg); font-size: 16px; font-weight: 600; text-align: left; }
.mco-item.on { background: var(--sunken); }
.mnav a .grow { flex: 1; }
.toast.has-act { padding-right: 8px; }
.toast .grow { flex: 1; min-width: 0; }
.toast .t-act { flex: none; padding: 6px 12px; border-radius: var(--r-full); background: rgba(255, 255, 255, .16); font-weight: 600; white-space: nowrap; }
:root[data-theme="dark"] .toast .t-act { background: rgba(0, 0, 0, .12); }
@media (max-width: 1500px) { .agent-chip .ac-txt { display: none; } .agent-chip { gap: 6px; } }
@media (max-width: 1400px) { .co-name { display: none; } .co-switch { padding-right: 8px; gap: 4px; } }
@media (max-width: 560px) { .co-switch { display: none; } }

/* ---------- Обзор ---------- */
.wk-bar.future { background: repeating-linear-gradient(135deg, var(--track) 0 3px, transparent 3px 6px); }
.wk-day.on { color: var(--ink); font-weight: 600; }
.deliv-card { gap: 18px; }
.deliv-title .with-i { font-size: 24px; line-height: 30px; font-weight: 400; }
.deliv-note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink); text-align: center; }
.deliv-note .i { color: var(--fox-ink); }
.status-list { gap: 4px; align-items: stretch; margin-top: 4px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px; border-radius: var(--r-md); }
.status-row:hover { background: var(--bg); }
.status-row b { font-size: 18px; font-weight: 500; }
.status-list .status-row .badge { height: 26px; padding: 0 10px; font-size: 13px; }
.till { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; line-height: 20px; font-weight: 600; flex-wrap: wrap; }
.till .i { color: var(--ink-muted); }
.till.lg { font-size: 17px; margin-top: 18px; }
.till.lg .muted { font-weight: 400; font-size: 14px; }
.till + .field-hint { margin-top: 4px; }
.setup-list { display: flex; flex-direction: column; margin-top: 18px; }
/* Подготовка к запуску во всю ширину экрана «Обзор»: шаги идут в две колонки, пока места хватает. */
@media (min-width: 900px) {
  .setup-list.cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .setup-list.cols li:nth-last-child(2):nth-child(odd) a { border-bottom: 0; }
}
.setup-list li a { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.setup-list li:last-child a { border-bottom: 0; }
.setup-list li a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.setup-list .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-list .grow > span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.setup-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--ink-muted); flex: none; }
.setup-list li.ok .setup-mark { background: var(--success); color: var(--on-success); }

/* ---------- Диалоги на весь экран ---------- */
.full-view .app { height: 100vh; height: 100dvh; min-height: 0; }
.full-view .main { display: flex; flex-direction: column; min-height: 0; padding-bottom: 16px; }
.full-view .main > .view { flex: 1; min-height: 0; }
.full-view .view > .inbox { flex: 1; min-height: 0; }
.inbox-h { font-size: 28px; line-height: 34px; font-weight: 300; letter-spacing: -.02em; }
.inbox .rv-link { height: 32px; gap: 6px; }
.inbox .only-m { display: none; }
.thread-head { gap: 10px; }
.thread-head .icon-btn.sm { width: 36px; height: 36px; }
.inbox-side .ring-lbl { max-width: 80px; }
.inbox-side .sum dd { font-size: 14px; line-height: 20px; }

/* ---------- Книга продаж ---------- */
.ver-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-muted); }
.ver-line .i { width: 16px; height: 16px; }
.ver-line .btn-link { height: auto; }
.toc a.on { background: var(--sunken); font-weight: 600; }
.notes { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.note { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--bg); }
.note.fresh { box-shadow: inset 0 0 0 1px var(--info); }
.note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-h { font-size: 16px; line-height: 22px; font-weight: 600; flex: 1; min-width: 0; }
.note-text { font-size: 15px; line-height: 23px; }
.note-more { align-self: flex-start; height: auto; padding: 0; }
.note-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.note-meta a, .note-meta > span > span { display: inline-flex; align-items: center; gap: 4px; }
.note-meta a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.note-meta .badge { margin-left: 4px; }
.note-files { gap: 6px; }
.note-full p { font-size: 16px; line-height: 25px; }
.note-full p + p { margin-top: 10px; }
.book-h { margin-bottom: 2px; }

/* ---------- Исследование ниши ---------- */
.res-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; text-align: left; font-size: 14px; line-height: 20px; }
.res-item .i { width: 14px; height: 14px; color: var(--ink-muted); opacity: 0; flex: none; margin-top: 3px; transition: opacity var(--t-fast) var(--ease); }
.res-item:hover { background: var(--sunken); }
.res-item:hover .i, .res-item:focus-visible .i { opacity: 1; }
.seg-list li { padding: 0 0 0 14px; }
.seg-list li::before { top: 11px; }
.seg-list .row.between .icon-btn { margin-right: -6px; }
.src-ol li .res-item { margin-left: 0; }
/* Источник со ссылкой: правка слева, открыть страницу справа. */
.src-li { display: flex; align-items: flex-start; gap: 4px; }
.src-li .res-item { flex: 1; min-width: 0; }
.src-li .res-item span { overflow-wrap: anywhere; }
.src-open { display: inline-flex; padding: 6px; border-radius: 8px; color: var(--ink-muted); }
.src-open:hover { background: var(--sunken); color: var(--ink); }
/* Наблюдатель видит выводы исследования без кнопок правки (живой кабинет). */
.res-ro button[data-act^="res-"]:not(.res-item), .res-ro .res-item .i { display: none; }
.res-ro .res-item, .res-ro tr[data-act^="res-"] { pointer-events: none; }

/* ---------- Раскрытие ИИ, режимы, стоп-листы ---------- */
.disc { display: flex; flex-direction: column; gap: 16px; }
.disc-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.disc-opt b { font-size: 14px; line-height: 20px; }
.mode-explain { margin-top: 14px; font-size: 15px; line-height: 22px; }
.own-n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-full); background: var(--sunken); font-weight: 600; }
.esc-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.esc-sum .input-wrap { width: 130px; }
@media (max-width: 760px) { .disc-opts { grid-template-columns: 1fr; } }

/* ---------- База знаний ---------- */
.src-link { display: inline-flex; align-items: center; gap: 6px; }
.src-link .i { width: 14px; height: 14px; color: var(--ink-muted); }
.src-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cf-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-src a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); }
.cf-src a:hover { color: var(--ink); }
.cf-src .i { width: 12px; height: 12px; }
.frag-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 3px; }
.conflict.fresh { animation: rise var(--t-panel) var(--ease) both; }

/* ---------- Каналы и здоровье аккаунтов ---------- */
.dns-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--success); white-space: nowrap; }
.table tbody tr.link.on td { background: var(--bg); }
.hc { display: flex; flex-direction: column; gap: 12px; }
.hc-legend { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: 12px; line-height: 16px; }
.hc-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.hc-legend i { width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--success) 78%, var(--raised)); }
.hc-legend .lg-warn i { background: var(--fox); }
.hc-legend .lg-risk i { background: color-mix(in srgb, var(--danger) 55%, var(--raised)); }
.hc-legend .lg-danger i { background: var(--danger); }
.hc-plot { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
.hc-y { position: relative; height: 200px; font-size: 11px; color: var(--ink-muted); }
.hc-y span { position: absolute; right: 0; transform: translateY(50%); }
.hchart { padding-right: 0; }
.hchart > i.lv-warn { background: var(--fox); }
.hchart > i.lv-risk { background: color-mix(in srgb, var(--danger) 55%, var(--raised)); }
.hchart > i.lv-danger { background: var(--danger); }
.hline { pointer-events: none; }
.hline.lg-ok { border-top-color: var(--success); }
.hline.lg-warn { border-top-color: var(--fox); }
.hline.lg-risk { border-top-color: var(--danger); }
.hc-x { position: relative; height: 16px; margin-left: 38px; font-size: 11px; color: var(--ink-muted); }
.hc-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.hc-x span:first-child { transform: none; }
.hc-x span:last-child { transform: translateX(-100%); }
.hc .insight { margin-top: 4px; }
.hc-reason { max-width: 150px; text-align: right; }
/* Выбор аккаунта и панель выбранного (js/live-health.js). */
/* Пока грузится панель другого аккаунта, прежняя гаснет, а не пропадает. */
#hDetail.loading { opacity: .55; transition: opacity var(--t-fast) var(--ease); }
.h-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); }
.card.h-acc { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-fast) var(--ease); }
.card.h-acc:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.card.h-acc.selected { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.h-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-score { font-size: 34px; line-height: 38px; font-weight: 300; letter-spacing: -.02em; }
.h-gauge { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.h-probs { display: flex; flex-direction: column; gap: 10px; }
.h-prob { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--fox-soft); }
.h-prob > .i { color: var(--fox); flex: none; margin-top: 2px; }
.h-prob > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }


/* ---------- Тариф ---------- */
/* Пакеты токенов: выбор видно сразу, без выпадающего списка. */
.packs { display: flex; flex-wrap: wrap; gap: 8px; }
.pack { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-md); background: var(--sunken); text-align: left; transition: background-color var(--t-fast) var(--ease); }
.pack:hover { background: var(--line); }
.pack b { font-size: 14px; font-weight: 600; }
/* Пакеты токенов строками: объём слева, цена справа, строки одной ширины независимо от длины числа. */
.pack-price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pack-row { cursor: pointer; }
.pack-row:hover .li-title { text-decoration: underline; text-underline-offset: 3px; }
/* Дневной лимит задачи: «Без лимита» по центру поля, тем же шрифтом, что цифра. */
.lim-in .input { text-align: center; }
.lim-in .input::placeholder { font-size: 14px; color: var(--ink-muted); }
.lim-in .input:not(:placeholder-shown) { text-align: left; }
.lims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.lim-row { display: grid; grid-template-columns: 210px minmax(80px, 1fr) 120px; gap: 12px; align-items: center; font-size: 14px; }
.lim-v { text-align: right; }
.lim-name { min-width: 0; }
.lim-v { white-space: nowrap; }
.demo-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; text-align: left; width: 100%; }
.card.demo-row.onb-plan { box-shadow: inset 0 0 0 1px var(--line); }
.card.demo-row.onb-plan.selected { box-shadow: inset 0 0 0 1.5px var(--fox), var(--shadow-warm); }
.adm-plans .input { min-width: 80px; }
.notif-t tr.grp td { padding-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 1100px) { .lims { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lim-row { grid-template-columns: minmax(0, 1fr) auto; } .lim-bar { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Онбординг новой компании ---------- */
.onb-new { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--sunken); font-size: 14px; line-height: 20px; }
.onb-new .i { color: var(--ink-muted); }

/* ---------- Просмотр документа ---------- */
.doc-page { min-height: 100vh; }
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--page-x); max-width: 1240px; margin: 0 auto; }
.doc-top .auth-logo svg { height: 34px; }
.doc-main { max-width: 1240px; margin: 0 auto; padding: 8px var(--page-x) 72px; display: flex; flex-direction: column; gap: 22px; }
.doc-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.doc-head .grow { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.doc-h { font-size: 36px; line-height: 42px; font-weight: 300; letter-spacing: -.025em; overflow-wrap: anywhere; }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.doc-paper { background: var(--raised); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 48px 56px; display: flex; flex-direction: column; gap: 14px; min-height: 520px; font-size: 16px; line-height: 26px; }
.doc-paper h2 { font-size: 24px; line-height: 30px; font-weight: 500; margin-top: 8px; }
.doc-paper p.mark { background: var(--fox-soft); box-shadow: 0 0 0 6px var(--fox-soft); border-radius: 4px; }
.doc-q { margin: 10px 0 0; padding: 12px 14px; border-left: 3px solid var(--fox); background: var(--bg); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 15px; line-height: 22px; }
.doc-side .list .li.on .li-sub { color: var(--ink); font-weight: 500; }
@media (max-width: 1000px) { .doc-grid { grid-template-columns: 1fr; } .doc-paper { padding: 28px 22px; min-height: 0; } }
@media (max-width: 760px) { .doc-h { font-size: 28px; line-height: 34px; } }
@media (max-width: 860px) {
  .inbox .only-m { display: inline-grid; }
  .inbox .composer .comp-row { flex-wrap: nowrap; }
  .inbox .composer .comp-row > .btn { flex: none; }
  .inbox .sugg { max-height: 30vh; overflow-y: auto; }
}

/* ---------- Заявки с сайта ---------- */
.rq-card .chips { margin-bottom: 6px; }
.rq-card .chip .count { background: var(--raised); color: var(--ink-muted); }
.rq-card .chip.pick.on .count { background: var(--raised); color: var(--ink); }
.rq-list { display: flex; flex-direction: column; }
.rq-day { padding: 18px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.rq { display: grid; grid-template-columns: 44px 32px minmax(0, 1fr) minmax(150px, auto); gap: 14px; align-items: center; width: calc(100% + 20px); margin: 0 -10px; padding: 14px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.rq:hover { background: var(--bg); }
.rq:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rq.fresh { animation: rise var(--t-panel) var(--ease) both; }
.rq.live, .rq.ask { box-shadow: inset 3px 0 0 var(--fox); }
.rq-at { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rq-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 15px; line-height: 22px; }
.rq-top b { font-weight: 600; white-space: nowrap; }
.rq-co { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rq-msg { font-size: 14px; line-height: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-src { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-muted); min-width: 0; }
.rq-src i { font-style: normal; }
.rq-src span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; max-width: 240px; min-width: 0; }
.rq-out { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rq-bars .hb-row { grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) 28px; }
.rq-bars .hb-v { font-weight: 600; }
.rq-rules { align-items: start; gap: 28px; }
.rq-rules .seq-step { padding: 12px 0; align-items: flex-start; flex-wrap: nowrap; }
.rq-rules .seq-n { width: 28px; height: 28px; font-size: 12px; }
.rq-rules .seq-step .select { margin-top: 6px; max-width: 100%; }
.rq-who .row .i { margin-top: 2px; flex: none; }
.rq-mode { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); gap: 12px; flex-wrap: wrap; }
.rq-mode:hover { background: var(--sunken); }

/* Карточка заявки */
.rq-sheet section { display: flex; flex-direction: column; gap: 10px; }
.rq-quote { padding: 14px 16px; border-radius: 6px 20px 20px 20px; background: var(--bg); }
.rq-steps { display: flex; flex-direction: column; }
.rq-step { display: grid; grid-template-columns: 56px 38px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rq-step:last-child { border-bottom: 0; }
.rq-step.fresh { animation: rise var(--t-panel) var(--ease) both; }
.rq-step.fresh .card-icon { background: var(--fox-soft); color: var(--fox-ink); }
.rq-t { display: flex; flex-direction: column; gap: 2px; padding-top: 9px; font-size: 13px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rq-t b { font-size: 12px; font-weight: 600; color: var(--fox-ink); }
.rq-x { padding-top: 8px; font-size: 15px; line-height: 22px; min-width: 0; }
.rq-step .avatar.agent { width: 38px; height: 38px; }
.rq-bubble { margin-top: 10px; padding: 12px 14px; border-radius: 6px 18px 18px 18px; background: var(--bg); font-size: 14px; line-height: 21px; }
.rq-bubble.lead { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.rq-bubble .msg-text { font-size: 14px; line-height: 21px; }
.rq-bh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.rq-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.rq-remember input { width: 16px; height: 16px; accent-color: var(--ink); }

/* Событие «заявка» в ленте карточки лида */
.ev-form .msg-head .card-icon { width: 32px; height: 32px; }
.ev-form .msg-body { border-radius: 6px 20px 20px 20px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.ev-form .msg-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-form .msg-ch { font-size: 12px; color: var(--ink-muted); }

/* Форма на сайте заказчика в тестовой заявке */
.site .br-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 28px; background: var(--bg); }
.site-hero { display: flex; flex-direction: column; gap: 12px; }
.site-logo { font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.site-hero h3 { font-size: 30px; line-height: 36px; font-weight: 300; letter-spacing: -.02em; }
.site-hero p { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.site-hero ul { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.site-hero li { display: flex; align-items: center; gap: 8px; }
.site-hero li .i { color: var(--success); }
.site-form { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: var(--raised); box-shadow: var(--shadow-sm); }
.site-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-muted); min-width: 0; }
.site-form .textarea { min-height: 72px; padding: 10px 14px; font-size: 14px; }
.site-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.site-form label.site-check { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); cursor: pointer; }
.site-check input { width: 18px; height: 18px; margin-top: 0; accent-color: var(--ink); flex: none; }
.site-legal { font-size: 11px; line-height: 15px; color: var(--ink-muted); }

@media (max-width: 1100px) { .rq-rules { gap: 20px; } }
@media (max-width: 760px) {
  .rq { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
  .rq-at { display: none; }
  .rq > .avatar { margin-top: 2px; }
  .rq-side { grid-column: 2; align-items: flex-start; text-align: left; max-width: none; flex-direction: row; flex-wrap: wrap; margin-top: 6px; }
  .rq-top { flex-wrap: wrap; row-gap: 0; }
  .rq-co { white-space: normal; }
  .rq-msg { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rq-step { grid-template-columns: 44px 32px minmax(0, 1fr); gap: 10px; }
  .rq-step .card-icon.sm, .rq-step .avatar.agent { width: 32px; height: 32px; }
  .site-body { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .site-hero ul { display: none; }
  .site-hero h3 { font-size: 24px; line-height: 30px; }
  .site-2 { grid-template-columns: 1fr; }
}
.rq-foot { width: 100%; justify-content: flex-end; }
.rq-foot .left { margin-right: auto; }
@media (max-width: 760px) {
  .rq-card .card-head { flex-wrap: wrap; }
  .rq-card .card-head > #rqLive { order: 3; flex-basis: 100%; }
}

/* ---------- Живой кабинет (js/live.js) ---------- */
.auth-err { margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--sunken); color: var(--danger); font-size: 14px; }
.auth-err[hidden], #cosList[hidden] { display: none; }
.qr-row { display: flex; gap: 20px; align-items: flex-start; }
.qr-box { flex: none; width: 168px; height: 168px; padding: 8px; border-radius: var(--r-md); background: #FFFFFF; }
.qr-box svg { display: block; width: 100%; height: 100%; }
.codes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codes-grid code { padding: 10px 12px; border-radius: var(--r-md); background: var(--bg); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px; text-align: center; letter-spacing: .04em; }
@media (max-width: 560px) {
  .qr-row { flex-direction: column; align-items: stretch; }
  .qr-box { align-self: center; }
}

/* ---------- GDPR (js/live-gdpr.js) ---------- */
.onb-box.need { box-shadow: inset 0 0 0 1.5px var(--fox); animation: rise var(--t-panel) var(--ease) both; }
.gd-cols { gap: 24px; }
.dpa-doc { max-height: min(52vh, 520px); overflow: auto; padding: 18px 20px; border-radius: var(--r-lg); background: var(--bg); font-size: 14px; line-height: 21px; overscroll-behavior: contain; }
.dpa-doc h3 { margin: 0 0 4px; font-size: 18px; line-height: 24px; font-weight: 600; }
.dpa-doc h4 { margin: 18px 0 6px; font-size: 15px; line-height: 21px; font-weight: 600; }
.dpa-doc p { margin: 0 0 8px; }
.dpa-doc .dpa-sub { margin-bottom: 12px; color: var(--ink-muted); font-size: 13px; line-height: 19px; }
.dpa-doc .dpa-li { position: relative; padding-left: 16px; }
.dpa-doc .dpa-li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--fox); }
.gd-req .li-main { min-width: 0; }
.gd-req .li-sub, .gd-req .t-caption { overflow-wrap: anywhere; }
.gd-reply { padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg); font-size: 14px; line-height: 21px; user-select: text; }

/* ---------- Данные и удаление (js/live-deletion.js) ---------- */
.del-rows { display: flex; flex-direction: column; }
.del-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.del-row:first-child { border-top: 0; padding-top: 4px; }
.del-row .grow { flex: 1; min-width: 0; }
.del-row .t-label { overflow-wrap: anywhere; }
.del-row > .row { justify-content: flex-end; }
.del-what { margin: 0; padding: 14px 16px 14px 34px; border-radius: var(--r-lg); background: var(--bg); font-size: 14px; line-height: 22px; list-style: disc; }
.del-what li { display: list-item; }
.del-what li::marker { color: var(--danger); }
@media (max-width: 720px) {
  .del-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .del-row > .row { justify-content: flex-start; }
}

/* ---------- Почта (js/live-channels.js) ---------- */
.dns-bad { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fox-ink); white-space: nowrap; }
.dns.live li { align-items: flex-start; color: var(--ink); }
.dns.live li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dns.live li > span > span { overflow-wrap: anywhere; }
.dns.live li.ok .i { color: var(--success); }
.dns.live li.bad { background: var(--fox-soft); }
.dns.live li.bad .i { color: var(--fox); }
/* «Как исправить»: шаги с готовой записью DNS и кнопкой копирования. */
.dns.live li > span.grow { flex: 1; gap: 4px; }
.dns-fix { margin-top: 6px; }
.dns-fix summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--fox-ink); width: fit-content; }
.fix-steps { margin: 10px 0 2px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; list-style: decimal; font-size: 14px; line-height: 21px; color: var(--ink); }
.fix-steps > li { display: list-item; padding: 0; background: none; color: inherit; font-size: inherit; }
.dns-fix .dns-first { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--fox-ink); font-weight: 600; }
.fix-steps a { color: var(--fox-ink); font-weight: 600; white-space: nowrap; }
.dns-rec { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--shadow-sm); }
.dns-rec > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dns-rec small { font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.dns-rec b { font-size: 14px; }
.dns-rec code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; user-select: all; }
.dns-share { margin-top: 12px; align-items: center; }
.dns.live .dns-rec .i, .dns.live .fix-steps .i { color: var(--ink); }
.dns.live li.unk .i { color: var(--ink-muted); }
.mb-adv summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.mb-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); }
.mb-stats b { font-size: 18px; font-weight: 600; }
/* Строка «Проверяем вход»: .row раскладывает её флексом и перебивает hidden, поэтому прячем явно. */
#mbChecking[hidden] { display: none; }
.btn-link.is-danger { color: var(--danger); }

/* ---------- Мессенджеры (живой кабинет, live-wa.js) ---------- */
.wa-qr { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; }
.wa-qr-img { width: 240px; height: 240px; display: grid; place-items: center; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.wa-qr-img img { width: 220px; height: 220px; image-rendering: pixelated; }
.wa-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.wa-live .wa-screen { position: relative; aspect-ratio: 1280 / 800; background: var(--sunken); outline: none; }
.wa-live .wa-screen img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.wa-live .wa-screen.held { box-shadow: inset 0 0 0 2px var(--fox); }
.wa-live .wa-screen.held img { cursor: crosshair; }
.wa-shot-wait { position: absolute; inset: 0; display: grid; place-items: center; }
.wa-shot-wait[hidden], .wa-keys[hidden] { display: none; }
.wa-keys { margin-top: 12px; align-items: center; }
/* Экран держит пропорции окна 1280×800 и помещается по высоте: щелчок пересчитывается в точки страницы. */
.wa-live { max-width: min(100%, calc(62vh * 1.6)); margin: 0 auto; }
.wa-card .badge svg { flex: none; }
@media (max-width: 640px) { .wa-qr { grid-template-columns: 1fr; justify-items: center; } }

/* ---------- Живые встречи ---------- */
.mgr-dot.c0, .mt.c0::before { background: var(--inverse); }
.mgr-dot.c1, .mt.c1::before { background: var(--info); }
.mgr-dot.c2, .mt.c2::before { background: var(--success); }
.mgr-dot.c3, .mt.c3::before { background: var(--fox); }
.mgr-dot.c4, .mt.c4::before { background: var(--line-strong); }
.mgr-dot.c5, .mt.c5::before { background: var(--danger); }
.mt.busy { background: repeating-linear-gradient(135deg, var(--sunken) 0 6px, var(--bg) 6px 12px); box-shadow: none; pointer-events: none; animation: none; }
.mt.busy::before { opacity: .35; }
.mt.busy .mt-co { color: var(--ink-muted); }
.mt.off { opacity: .55; }
.mt.off .mt-name { text-decoration: line-through; }
.cal-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); text-align: left; transition: background var(--t-fast) var(--ease); }
.cal-opt:hover { background: var(--line); }
.cal-opt[disabled] { opacity: .6; cursor: default; }
.cal-opt[disabled]:hover { background: var(--sunken); }
.cal-opt b { display: block; font-size: 15px; font-weight: 600; }
.cal-opt .field-hint { display: block; margin-top: 2px; }
.meet-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--sunken); }
.meet-box .meet-when { font-size: 20px; line-height: 26px; font-weight: 400; letter-spacing: -.01em; }
.link-tok { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: var(--r-full); background: var(--info-soft); color: var(--info); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---------- Отступы между блоками ---------- */
/* Тела живых экранов: JS кладёт в них секции одну за другой, а у обычного div отступа между детьми нет.
   Здесь им дан тот же шаг, что у .view. */
#blBox, #rqBox, #lmBody, #mmBody, #leadsBox, #mdBody, #mailBody, #waBody, #healthBody, #setBody, #intBody, #ntfBody, #srBox, #admBox, #padmBox, #campPage, #campBody, #leadRoot { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* Заголовок карточки не прилипает к содержимому, даже если у содержимого свой margin-top. */
.card > .card-head + * { margin-top: 20px; }
.card > .card-head + .card-head { margin-top: 0; }
.review-mini > .card-head + * { margin-top: 2px; }
/* Название и пояснение под ним. */
.card-title + .card-sub, .t-label + .t-small, .t-label + .field-hint, .t-subtitle + .field-hint, .t-subtitle + .t-small, .li-title + .li-sub, .note-h + .note-text { margin-top: 2px; }
.li-title + .progress { margin-top: 8px; }
/* Подпись блока над списком или полями. */
.rq-rules > div > .field-label { margin-bottom: 14px; }
:not(.field, .rq-rules > div) > .field-label + :is(.list, .seq, .stack, .chips, .table-wrap, ol, ul) { margin-top: 12px; }
.rq-who .grow > * + * { margin-top: 6px; }
.table-wrap + .notice, .list + .switch-row { margin-top: 16px; }
/* Списки с подсветкой строки: соседние подсвеченные строки не сливаются. */
.conv-list { display: flex; flex-direction: column; gap: 2px; }
.cm-tools { margin-top: 6px; }
.row.g4.wrap { gap: 6px; }
.wz-dots { gap: 8px; }
.inbox-tools .chips { gap: 8px; }

/* Память агента о лиде под резюме, материалы у сообщений (live-leads.js, live-inbox.js). */
.mem summary { cursor: pointer; color: var(--ink-muted); }
.mem-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.msg-files .chip a { color: inherit; text-decoration: none; }
.msg-files .chip a:hover { text-decoration: underline; }

/* Чат на сайте: экран настройки виджета и его предпросмотр (live-widget.js). Классы wg-* повторяют вид
   самого виджета (app/services/api/src/widget-script.ts): меняя одно, правьте и другое. */
.wg-cols { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
/* Предпросмотр не уезжает вверх, пока слева листают настройки: он виден при любой правке. */
.wg-prev { position: sticky; top: 16px; z-index: 1; }
/* Кружки цвета одного размера: во flex-строке они иначе сплющиваются. */
.wg-dots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.wg-dot { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(21, 18, 15, .14); cursor: pointer; padding: 0; }
.wg-dot.on { border-color: var(--ink); }
.wg-dot.pick { position: relative; overflow: hidden; display: inline-flex; }
.wg-dot.pick input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; }

.wg-stage { position: relative; height: 520px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.wg-stage.dark { background: #121113; }
.wg-stage.phone { display: flex; align-items: center; justify-content: center; background: var(--sunken); }
.wg-stage.phone .wg-site { display: none; }
.wg-stage.phone .wg { position: absolute; width: 320px; height: 470px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 0 0 9px #111, var(--shadow-lg); }
/* На телефоне чат занимает весь экран: ни отступа сбоку (иначе полоса справа), ни кнопки поверх
   поля ввода. Свернуть можно крестиком в шапке чата. */
.wg-stage.phone .wg.right .wg-panel, .wg-stage.phone .wg.left .wg-panel { inset: 0; left: 0; right: 0; width: auto; max-height: none; border-radius: 0; }
.wg-stage.phone .wg.open .wg-anchor { display: none; }
.wg-site { padding: 34px 36px; font-family: var(--font); }
.wg-site .wg-logo { font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: #15120F; }
.wg-site h3 { font-size: 30px; line-height: 36px; font-weight: 300; letter-spacing: -.02em; margin: 18px 0 10px; color: #15120F; }
.wg-site p { font-size: 15px; line-height: 22px; color: #6B635B; max-width: 42ch; }
.wg-stage.dark .wg-site .wg-logo, .wg-stage.dark .wg-site h3 { color: #F4F1ED; }
.wg-stage.dark .wg-site p { color: #A9A097; }

.wg { position: absolute; inset: 0; pointer-events: none; --wg-bg: #fff; --wg-ink: #15120F; --wg-muted: #6B635B; --wg-line: #E7E3DE; --wg-in: #F2F0ED; }
.wg.dark { --wg-bg: #17161A; --wg-ink: #F4F1ED; --wg-muted: #A09AA3; --wg-line: #2B2930; --wg-in: #222128; }
.wg-anchor { position: absolute; bottom: var(--wg-gap); display: flex; flex-direction: column; gap: 10px; }
.wg.right .wg-anchor { right: var(--wg-gap); align-items: flex-end; }
.wg.left .wg-anchor { left: var(--wg-gap); align-items: flex-start; }
.wg-btn { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; min-width: 54px; padding: 0 var(--wg-pad, 0); border: 0; border-radius: 999px; background: var(--wg-accent); color: var(--wg-on); cursor: pointer; box-shadow: 0 8px 24px rgba(21, 18, 15, .18); font-weight: 600; font-size: 14px; }
.wg-btn.lab { padding: 0 20px; }
.wg-tease { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; max-width: 270px; padding: 12px 13px; border-radius: var(--wg-r); background: var(--wg-bg); color: var(--wg-ink); box-shadow: var(--shadow-lg); font-size: 13px; line-height: 18px; }
.wg-who { font-size: 10.5px; font-weight: 700; color: var(--wg-muted); margin-bottom: 3px; }
.wg-av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--wg-accent); color: var(--wg-on); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; overflow: hidden; }
.wg-av img { width: 100%; height: 100%; object-fit: cover; }

.wg-panel { position: absolute; bottom: calc(var(--wg-gap) + 66px); width: 350px; max-height: calc(100% - 100px); display: none; flex-direction: column; overflow: hidden; border-radius: var(--wg-r); background: var(--wg-bg); color: var(--wg-ink); box-shadow: 0 24px 60px rgba(21, 18, 15, .2); pointer-events: auto; }
.wg.right .wg-panel { right: var(--wg-gap); }
.wg.left .wg-panel { left: var(--wg-gap); }
.wg.open .wg-panel { display: flex; }
.wg-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--wg-line); }
.wg-head .wg-av { width: 38px; height: 38px; font-size: 14px; }
.wg-nm { font-size: 14px; font-weight: 700; }
.wg-st { font-size: 11.5px; color: var(--wg-muted); margin-top: 2px; }
.wg-x { width: 30px; height: 30px; border: 0; background: transparent; color: var(--wg-muted); border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; }
.wg-ai { display: flex; gap: 6px; padding: 7px 14px; background: var(--wg-in); color: var(--wg-muted); font-size: 11px; line-height: 15px; }
.wg-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.wg-m { max-width: 86%; padding: 9px 12px; font-size: 13px; line-height: 18px; border-radius: 15px; }
.wg-m.a { align-self: flex-start; background: var(--wg-in); border-bottom-left-radius: 5px; }
.wg-m.y { align-self: flex-end; background: var(--wg-accent); color: var(--wg-on); border-bottom-right-radius: 5px; }
.wg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-chip { border: 1px solid var(--wg-accent); color: var(--wg-accent); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 600; }
.wg-card { border: 1px solid var(--wg-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wg-ct { font-size: 12.5px; font-weight: 700; }
.wg-ci { height: 34px; border: 1px solid var(--wg-line); border-radius: 10px; }
.wg-go { height: 36px; border-radius: 10px; background: var(--wg-accent); color: var(--wg-on); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.wg-foot { border-top: 1px solid var(--wg-line); padding: 9px 12px 0; display: flex; align-items: center; gap: 8px; }
.wg-in { flex: 1; font-size: 13px; color: var(--wg-muted); }
.wg-send { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--wg-accent); color: var(--wg-on); display: flex; align-items: center; justify-content: center; }
.wg-legal { font-size: 10px; line-height: 14px; color: var(--wg-muted); text-align: center; padding: 7px 12px 11px; }

@media (max-width: 1100px) {
  .wg-cols { grid-template-columns: minmax(0, 1fr); }
}