/* ========================================================================
   screens.css · CCD-20261007-ck-screens-preview
   Слой поверх app.css + app_v2.css для презентационных экранов:
   карточка обращения (досье, светофор квалификации, маршрутный лист) и
   дашборд руководителя (вкладки, плашка норматива, «термометры» плана).
   Правило app_v2 сохраняется: в компонентах нет hex — только var(...).
   Светофор: Emerald (--ok) · Amber (--warn) · Red (--danger) · Slate (--text-3).
   Откат — убрать <link> в index.html.
   ======================================================================== */

/* ---------- Общие мелочи: иконки внутри кнопок, пунктов меню, подписей ---------- */
.menu-item { display: flex; align-items: center; gap: 8px; }
.menu-item .ico { color: var(--text-3); }
.menu-item.on .ico { color: var(--accent-strong); }
.history-toggle.on { background: var(--accent-weak); color: var(--accent-strong); }
.history-ico { display: inline-flex; color: var(--text-3); padding-top: 2px; }
.tk-farmer { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.tk-farmer .ico { color: var(--text-3); }
.stat-label { display: flex; align-items: center; gap: 6px; }
.stat-label .ico { color: var(--text-3); }

/* «Назад» в карточке — только мобайл (app.css §2.2). app_v2 `.btn{display:inline-flex}`
   грузится позже и перебивал `.tk-back{display:none}` — кнопка вылезала на десктопе. */
.btn.tk-back { display: none; }
@media (max-width: 639px) { .btn.tk-back { display: inline-flex; } }
.tk-card-foot > .muted { flex: none; white-space: nowrap; }
.tk-farmer > span { overflow: hidden; text-overflow: ellipsis; }

/* ══════════ Рабочее место обращения: «Сплит» чат + ИИ-со-пилот (#queue/:id) ══════════ */

/* Режим фокуса (body.tk-focus ставят #queue, #kb, #planner): рабочая область — во всю высоту окна,
   колонки скроллятся независимо. CK-SIDEBAR-POLISH (16.10): принудительная рельса сайдбара 56px
   снята — сворачивает меню только сам пользователь (body.sb-collapsed, app.css), переходы без рывков. */
@media (min-width: 1024px) {
  body.tk-focus .main {
    height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow: hidden;
    display: flex; flex-direction: column; padding: 10px;
  }
  /* CCD-20261007 polish: три колонки-карточки с зазором 8px; реестр — компакт 280 / широкий 420 / полоса 40. */
  body.tk-focus .queue-wrap {
    flex: 1; min-height: 0; gap: 8px; align-items: stretch;
    grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    transition: grid-template-columns .22s cubic-bezier(.2, .7, .2, 1);
  }
  body.tk-focus .queue-wrap[data-list="wide"] { grid-template-columns: 420px minmax(0, 1fr); }
  body.tk-focus .queue-wrap[data-list="collapsed"] { grid-template-columns: 40px minmax(0, 1fr); }
  body.tk-focus .q-col-list {
    min-height: 0; overflow: hidden; gap: 0; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow-1);
  }
  body.tk-focus .q-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
  body.tk-focus .queue-wrap[data-list="collapsed"] .q-col-list { display: none; }
  body.tk-focus .queue-wrap[data-list="collapsed"] .q-rail { display: flex; }
  body.tk-focus .q-col-ticket { min-height: 0; }
  body.tk-focus .tk-split { height: 100%; }
  body.tk-focus .tk-chat-feed { max-height: none; }
}
.q-head-tools { display: inline-flex; gap: 2px; }
.q-rail {
  display: none; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--shadow-1);
  color: var(--text-2); font: inherit; cursor: pointer; transition: border-color .15s, color .15s;
}
.q-rail:hover { border-color: var(--accent); color: var(--accent-strong); }
.q-rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.q-rail-badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full); background: var(--accent-strong);
  color: var(--on-accent); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* Сплит: 50/50 по умолчанию; [⛶] в шапке колонки — 70/30 для чтения, повторно — обратно. */
.tk-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
@media (min-width: 1024px) {
  .tk-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    align-items: stretch; transition: grid-template-columns .25s ease;
  }
  .tk-split[data-focus="chat"] { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .tk-split[data-focus="ai"] { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
}
.tk-chat-col, .tk-side-col {
  min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow-1);
}
.tk-max.on { background: var(--accent-weak); color: var(--accent-strong); }

/* Левая колонка — живой чат */
.tk-chat-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tk-chat-head .tk-ava { width: 36px; height: 36px; font-size: 13px; }
.tk-chat-head .tk-head-title { gap: 6px; }
.tk-who { font-weight: 700; font-size: 15px; color: var(--text); }
.tk-chat-head .tk-no { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.tk-chat-head .tk-head-meta { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-chat-tags { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.tk-chat-tags .history-toggle { margin-left: auto; }
.tk-chat-col .history-panel { flex: none; margin: 8px 12px 0; max-height: 34%; }
.tk-chat-feed {
  flex: 1; min-height: 0; max-height: 60vh; overflow-y: auto; gap: 10px; padding: 14px 16px; scrollbar-width: thin;
  background-color: var(--chat-bg);
  background-image: radial-gradient(var(--chat-dots) 1px, transparent 1px); background-size: 16px 16px;
}
.tk-day {
  align-self: center; font-size: 11px; font-weight: 600; color: var(--text-2);
  background: var(--surface); border-radius: var(--r-full); padding: 2px 10px;
}
.tk-chat-feed .bubble { max-width: 82%; box-shadow: 0 1px 1px rgba(15, 23, 42, .05); }
.tk-chat-feed .bubble-user { background: var(--surface); border-radius: 14px 14px 14px 4px; }
.tk-chat-feed .bubble-staff { background: var(--accent-weak); border-color: var(--accent-ring); border-radius: 14px 14px 4px 14px; }
.tk-chat-feed .bubble-system { background: var(--info-weak); border-color: var(--info-border); border-radius: 10px; }
.tk-composer { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.tk-reply-input {
  display: block; width: 100%; min-height: 76px; max-height: 168px; overflow-y: auto; resize: none;
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.45;
  transition: border-color .15s, box-shadow .15s;
}
.tk-reply-input::placeholder { color: var(--text-3); }
.tk-reply-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Правая колонка — вкладки «ИИ-черновик» / «Досье и аудит» */
.tk-side-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tk-side-tabs {
  flex: 1; min-width: 0; display: flex; gap: 3px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.tk-side-tab {
  flex: 1; min-width: 0; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: 7px; background: transparent; color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.tk-side-tab:hover { color: var(--text); }
.tk-side-tab.on { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.tk-side-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--warn-weak); color: var(--warn); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tk-side-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.tk-side-pane { display: none; flex-direction: column; gap: 12px; padding: 12px 14px 16px; }
.tk-side-pane.on { display: flex; animation: tk-pane-in .18s ease; }
@keyframes tk-pane-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.tk-side-pane .ai-panel { border: none; box-shadow: none; padding: 0; background: transparent; gap: 10px; }
.tk-side-pane .ai-panel-head { display: none; }   /* заголовок дублировал вкладку */
.tk-side-pane .ai-draft-text { min-height: 240px; border-radius: 8px; }

/* ---------- Карточка обращения ---------- */
.tk-main { gap: 14px; }
.tk-head-title .tk-no { font-weight: 700; }
.tk-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tk-block-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; color: var(--text); }
.tk-block-title .ico { color: var(--text-3); }
.tk-block { display: flex; flex-direction: column; gap: 10px; }
.tk-block .chat { max-height: 34vh; }

/* Досье заявителя */
.tk-dossier {
  border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface-2);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.tk-dossier-head { display: flex; align-items: center; gap: 12px; }
.tk-ava {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-weak); color: var(--accent-strong); font-weight: 700; font-size: 14px; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}
.tk-dossier-id { flex: 1; min-width: 0; }
.tk-dossier-name { font-weight: 700; font-size: 15px; color: var(--text); }
.tk-dossier-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 16px; margin: 0; }
.tk-fact { min-width: 0; }
.tk-fact dt { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.tk-fact dd { margin: 2px 0 0; font-size: 13px; color: var(--text); line-height: 1.35; }
.tk-ident {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--r-full); font-size: 12px; font-weight: 600;
}

/* Текст обращения */
.tk-question { display: flex; flex-direction: column; gap: 8px; }
.tk-question-text {
  margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 12px; font-weight: 600;
}
.tag-chip .ico { color: var(--text-3); }

/* Светофор квалификации */
.q-pass { --q: var(--ok); --q-weak: var(--ok-weak); }
.q-warn { --q: var(--warn); --q-weak: var(--warn-weak); }
.q-fail { --q: var(--danger); --q-weak: var(--danger-weak); }
.q-unknown { --q: var(--text-3); --q-weak: var(--surface-2); }
.tk-ident.q-pass, .tk-ident.q-warn, .tk-ident.q-fail, .tk-ident.q-unknown { background: var(--q-weak); color: var(--q); }

.tk-qual {
  border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface);
  box-shadow: var(--shadow-1); padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.tk-qual-empty { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; background: var(--surface-2); box-shadow: none; }
.tk-qual-empty .muted { flex: 1; min-width: 220px; }
.tk-qual-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tk-qual-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.q-verdict {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--r-full);
  background: var(--q-weak); color: var(--q); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.tk-qual-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.q-count {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: var(--r-s);
  background: var(--q-weak); color: var(--q); font-size: 12px; font-weight: 600;
}
.q-count b { font-size: 15px; }
.tk-qual-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.q-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-s);
  border: 1px solid var(--border); border-left: 3px solid var(--q); background: var(--surface);
  transition: background-color .15s;
}
.q-row:hover { background: var(--surface-2); }
.q-light {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--q-weak); color: var(--q); cursor: help;
}
.q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.q-label .ico { color: var(--text-3); }
.q-value { font-size: 13.5px; color: var(--text); line-height: 1.4; }
.q-note { font-size: 12px; color: var(--q); font-weight: 600; }
.q-hint {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; padding: 6px 9px; border-radius: 6px;
  background: var(--q-weak); color: var(--text); font-size: 12.5px; line-height: 1.4;
}
.q-hint .ico { color: var(--q); transform: scaleX(-1); margin-top: 2px; }
.tk-qual-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Композер и выбор маршрутного листа */
.composer-bar { flex-wrap: wrap; }
.cl-row { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-s); text-align: left; }
.cl-row + .cl-row { margin-top: 6px; }
.cl-row.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.cl-row .ico { margin-top: 2px; }
.cl-row-main { min-width: 0; }
.cl-row-title { font-weight: 600; color: var(--text); }

/* ИИ-панель */
.ai-panel-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ai-panel-head .ico { color: var(--accent-strong); }
.ai-panel-sub { font-weight: 500; }
.ai-source-kb { display: inline-flex; color: var(--text-3); margin-right: 4px; vertical-align: -2px; }
.ai-source-item { display: flex; align-items: flex-start; gap: 4px; font-size: 12px; line-height: 1.4; }
.ai-source-item + .ai-source-item { margin-top: 4px; }
.ai-failed-title { display: flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 600; }
.mic-btn { gap: 4px; }
.ai-rag-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-rag-scope .segmented-item { padding: 4px 9px; font-size: 12px; }

/* ---------- Дашборд руководителя ---------- */
.dash-tabs { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }
.dash-tab {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; min-width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  color: var(--text-2); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-1);
  transition: border-color .15s, background-color .15s, color .15s;
}
.dash-tab:hover { border-color: var(--border-strong); color: var(--text); }
.dash-tab.on { border-color: var(--accent); background: var(--accent-weak); color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
.dash-tab-ico {
  width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--surface-2); color: inherit;
}
.dash-tab.on .dash-tab-ico { background: var(--surface); }
.dash-tab-txt { display: flex; flex-direction: column; line-height: 1.3; }
.dash-tab-txt b { font-size: 14px; color: var(--text); }
.dash-tab.on .dash-tab-txt b { color: var(--accent-strong); }
.dash-tab-txt span { font-size: 12px; }
.dash-body { opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease; }
.dash-body.dash-in { opacity: 1; transform: none; }
.dash-h2 { font-size: 15px; font-weight: 700; margin: 22px 0 10px; color: var(--text); }
.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat-val.ok { color: var(--accent-strong); }

/* Плашка норматива цифровых услуг */
.norm-banner {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 16px;
  border-radius: var(--r-l); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-1);
  border-left: 4px solid var(--ok);
}
.norm-banner.is-bad { border-left-color: var(--danger); }
.norm-ico {
  width: 48px; height: 48px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ok-weak); color: var(--ok);
}
.norm-banner.is-bad .norm-ico { background: var(--danger-weak); color: var(--danger); }
.norm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.norm-title { font-size: 16px; color: var(--text); }
.norm-title b { font-size: 22px; color: var(--accent-strong); letter-spacing: -.01em; }
.norm-banner.is-bad .norm-title b { color: var(--danger); }
.norm-sub { font-size: 12.5px; color: var(--text-2); }
.norm-bar { position: relative; height: 8px; margin-top: 6px; border-radius: var(--r-full); background: var(--surface-2); max-width: 520px; }
.norm-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--ok); transition: width .6s ease; }
.norm-banner.is-bad .norm-fill { background: var(--danger); }
.norm-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; cursor: help; }
.norm-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 12px; border-radius: var(--r-full);
  background: var(--ok-weak); color: var(--accent-strong); font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.norm-banner.is-bad .norm-badge { background: var(--danger-weak); color: var(--danger); }

/* План по № 861-р */
.plan-hero { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 20px; }
.plan-hero-main { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 8px; }
.plan-hero-label { font-size: 12.5px; font-weight: 600; }
.plan-hero-val b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.plan-hero-val span { font-size: 16px; color: var(--text-2); font-weight: 600; }
.plan-hero-note { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.plan-hero-side { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.plan-hero-side .btn { white-space: normal; text-align: left; justify-content: flex-start; line-height: 1.3; padding: 10px 14px; }
.plan-list { padding: 6px 18px; }
.plan-row { padding: 12px 0; display: flex; flex-direction: column; gap: 7px; }
.plan-row + .plan-row { border-top: 1px solid var(--border); }
.plan-row-head { display: flex; align-items: baseline; gap: 12px; }
.plan-row-title { flex: 1; min-width: 0; font-weight: 600; color: var(--text); }
.plan-row-num b { font-size: 15px; }
.plan-state {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.plan-state.is-ok { background: var(--ok-weak); color: var(--accent-strong); }
.plan-state.is-warn { background: var(--warn-weak); color: var(--warn); }
.plan-state.is-bad { background: var(--danger-weak); color: var(--danger); }
.thermo { position: relative; height: 10px; border-radius: var(--r-full); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.thermo-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; transition: width .7s cubic-bezier(.2, .7, .2, 1); }
.thermo.is-ok .thermo-fill { background: var(--ok); }
.thermo.is-warn .thermo-fill { background: var(--warn); }
.thermo.is-bad .thermo-fill { background: var(--danger); }
.thermo-pace { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: .75; cursor: help; }
.plan-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 2px 0; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--q, var(--text-3)); }
.lg-ok { --q: var(--ok); } .lg-warn { --q: var(--warn); } .lg-bad { --q: var(--danger); }
.lg-pace::before { width: 2px; height: 12px; border-radius: 1px; background: var(--text); }

@media (max-width: 639px) {
  .dash-tab { min-width: 0; flex: 1 1 100%; }
  .norm-banner { flex-wrap: wrap; }
  .plan-hero-main { min-width: 0; }
  .tk-facts { grid-template-columns: 1fr 1fr; }
}


/* ══════════ CCD-20261007 polish: реестр · SLA · воронка · «База знаний» · «В Базу Знаний» ══════════
   Только var(...) и color-mix поверх токенов: обе темы получают одну и ту же геометрию. */

/* ---------- Реестр: шапка в три плотные строки (заголовок · статусы · поиск+темы) ---------- */
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px 8px 14px; }
.q-head h1 { margin: 0; }   /* размер/начертание — единое правило H1 в polish.css */
.q-desk-only { display: none; }
@media (min-width: 1024px) { body.tk-focus .q-desk-only { display: inline-flex; } }
#qWidthBtn.on { background: var(--accent-weak); color: var(--accent-strong); }

.q-status {
  display: flex; gap: 1px; padding: 3px; margin: 0 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.q-seg {
  flex: 1 1 auto; min-width: 0; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 5px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2);
  font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.q-seg:hover { color: var(--text); }
.q-seg:focus-visible, .q-topics-btn:focus-visible, .q-pop-item:focus-visible, .kbp-chip:focus-visible, .kbs-vis-opt:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.q-seg.on { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.q-seg-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--text-3) 16%, transparent); color: var(--text-2); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.q-seg.on .q-seg-n { background: var(--accent-weak); color: var(--accent-strong); }

.q-overdue {
  margin: 8px 10px 0; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); background: var(--danger-weak); color: var(--danger);
  font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .15s;
}
.q-overdue:hover, .q-overdue.on { border-color: var(--danger); }
.q-overdue-act { margin-left: auto; text-decoration: underline; text-underline-offset: 2px; }

.q-filter-row { position: relative; display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.q-search-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-3); cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.q-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.q-search { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
.q-search::placeholder { color: var(--text-3); }
.q-topics-btn {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 7px 0 9px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s;
}
.q-topics-btn:hover { border-color: var(--accent); color: var(--text); }
.q-topics-btn.on { border-color: var(--accent); background: var(--accent-weak); color: var(--accent-strong); }
.q-topics-btn[aria-expanded="true"] .ico:last-child { transform: rotate(180deg); }
.q-topics-btn .ico:last-child { transition: transform .15s; }
.q-topics-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-strong); color: var(--surface); font-size: 11px; font-weight: 700;
}
.q-pop {
  position: absolute; z-index: 30; top: calc(100% - 4px); right: 10px; width: 264px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--shadow-2);
  animation: tk-pane-in .14s ease;
}
.q-pop-head {
  display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px 8px;
  font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em;
}
.q-pop-reset {
  border: 0; background: none; padding: 3px 6px; border-radius: 5px; color: var(--accent-strong);
  font: inherit; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.q-pop-reset:hover { background: var(--accent-weak); }
.q-pop-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.q-pop-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.q-pop-item:hover { background: var(--surface-2); }
.q-check {
  width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; color: var(--surface);
  transition: background-color .12s, border-color .12s;
}
.q-check .ico { stroke-width: 3; }
.q-pop-item.on .q-check { background: var(--accent); border-color: var(--accent); }
.q-pop-label { flex: 1; min-width: 0; }
.q-pop-n { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.q-pop-foot { margin-top: 4px; padding: 6px 2px 2px; border-top: 1px solid var(--border); }
.q-list-empty { padding: 20px 8px; text-align: center; font-size: 13px; }
.q-empty { height: 100%; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }

/* ---------- Карточки реестра ---------- */
.q-list { gap: 6px; }
.tk-card { padding: 10px 11px; gap: 5px; box-shadow: none; transition: border-color .15s, background-color .15s; }
.tk-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.tk-card.selected { border-color: var(--accent); background: var(--accent-weak); box-shadow: inset 3px 0 0 var(--accent); }
.tk-card.overdue { border-left-color: var(--danger); }
.tk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tk-card-top { flex-wrap: nowrap; }
.sla-time {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sla-time.sla-ok { background: var(--surface-2); color: var(--text-2); }
.tk-card.selected .sla-time.sla-ok { background: var(--surface); }
.sla-time.sla-warn { background: var(--warn-weak); color: var(--warn); }
.sla-time.sla-overdue { background: var(--danger-weak); color: var(--danger); }
.tk-card-tags, .tk-card-contacts { display: none; }
.tk-card-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 11px; font-weight: 600;
}
.tk-card-contacts > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.tk-card-contacts .ico { color: var(--text-3); flex: none; }
@media (min-width: 1024px) {
  body.tk-focus .queue-wrap[data-list="wide"] .tk-q {
    display: block; -webkit-line-clamp: unset; overflow: visible; color: var(--text); font-size: 13px; line-height: 1.45;
  }
  body.tk-focus .queue-wrap[data-list="wide"] .tk-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  body.tk-focus .queue-wrap[data-list="wide"] .tk-card-contacts { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12px; color: var(--text-2); }
  body.tk-focus .queue-wrap[data-list="wide"] .tk-card { padding: 12px 13px; gap: 7px; }
}
.q-rail { border-radius: var(--r-l); }

/* ---------- Чат: воронка «Путь клиента», бабблы, композер ---------- */
.tk-chat-col, .tk-side-col { container-type: inline-size; }
.tk-funnel {
  flex: none; list-style: none; margin: 0; padding: 7px 12px; display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}
/* Хотфикс: шаги — автономные пилюли без соединительных линий. */
.tk-step {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; height: 26px; padding: 0 10px 0 4px;
  border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface);
  font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap;
}
.tk-step + .tk-step::before { content: none; display: none; }
.tk-step-dot {
  width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-3);
}
.tk-step-dot .ico { stroke-width: 2.5; }
.tk-step.is-next .tk-step-dot .ico { display: none; }
.tk-step.is-done { color: var(--accent-strong); background: var(--accent-weak); border-color: transparent; }
.tk-step.is-done .tk-step-dot { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.tk-step.is-now { color: var(--accent-strong); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.tk-step.is-now .tk-step-dot { border-color: var(--accent); color: var(--accent); }
.tk-step.is-now .tk-step-dot circle:first-child { stroke: none; }
.tk-step-label { overflow: hidden; text-overflow: ellipsis; }
.tk-step-short { display: none; }
@container (max-width: 640px) {
  .tk-step:not(.is-now) .tk-step-full { display: none; }
  .tk-step:not(.is-now) .tk-step-short { display: inline; }
}
@container (max-width: 400px) {
  .tk-step:not(.is-now) .tk-step-label { display: none; }
}
.tk-head-sla { display: inline-flex; align-items: center; gap: 4px; }
.tk-chat-head .tk-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }

.tk-chat-feed .bubble-user { background: var(--surface); border: 1px solid var(--border); }
.tk-chat-feed .bubble-staff {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.tk-chat-feed .bubble-who { display: flex; align-items: center; gap: 6px; }
.bubble-ch {
  display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2); font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
}
.bubble-ch .ico { color: var(--text-3); }
.tk-composer .composer-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.composer-spacer { flex: 1; }
@container (max-width: 520px) { .tk-kbd { display: none; } }

/* ---------- Правая колонка: три вкладки ---------- */
.tk-side-tab { padding: 0 8px; }
@container (max-width: 480px) {
  .tk-side-tab:not(.on) .tk-side-tab-label { display: none; }
  .tk-side-tab:not(.on) { flex: 0 0 42px; }
}

/* ---------- «База знаний и нормативка»: мгновенный поиск + ИИ-эксперт по кнопке ---------- */
.kbp-search { position: sticky; top: -12px; z-index: 2; margin: -12px -14px 0; padding: 12px 14px 8px; background: var(--surface); box-shadow: 0 1px 0 var(--border); }
.kbp-inp:focus, .kbp-inp:focus-visible, .q-search:focus, .q-search:focus-visible { outline: none; box-shadow: none; border: 0; }
.kbp-field {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; cursor: text;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-3);
  transition: border-color .15s, box-shadow .15s;
}
.kbp-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); color: var(--accent-strong); }
.kbp-inp { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.kbp-inp::placeholder { color: var(--text-3); }
.kbp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kbp-bar .segmented-item { padding: 4px 9px; font-size: 12px; }
.kbp-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--accent-strong); font-variant-numeric: tabular-nums; cursor: help; }
.kbp-suggest { display: flex; gap: 6px; flex-wrap: wrap; }
.kbp-chip {
  height: 26px; padding: 0 10px; border-radius: var(--r-full); border: 1px dashed var(--border-strong); background: transparent;
  color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s;
}
.kbp-chip:hover { border-style: solid; border-color: var(--accent); color: var(--accent-strong); background: var(--accent-weak); }
.kbp-head { display: flex; flex-direction: column; gap: 6px; }
.kbp-head-title { font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.kbp-miss { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; border-radius: 8px; background: var(--info-weak); color: var(--info); font-size: 12.5px; line-height: 1.4; }
.kbp-miss .ico { margin-top: 2px; flex: none; }
.kbp-results { display: flex; flex-direction: column; gap: 8px; }
.kbp-card {
  display: flex; flex-direction: column; gap: 7px; padding: 11px 12px; border-radius: var(--r-m);
  border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.kbp-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.kbp-card-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.kbp-scope { width: 24px; height: 24px; flex: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.kbp-scope.is-fed { background: var(--info-weak); color: var(--info); }
.kbp-scope.is-reg { background: var(--warn-weak); color: var(--warn); }
.kbp-doc { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; }
.kbp-art {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-2); font-size: 11.5px; font-weight: 600;
}
.kbp-rel { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent-strong); cursor: help; }
.kbp-rel b { font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.kbp-rel-bar { width: 38px; height: 5px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.kbp-rel-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.kbp-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); }
.kbp-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-full);
  background: var(--warn-weak); color: var(--warn); font-size: 11px; font-weight: 600;
}
.kbp-quote {
  margin: 0; padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  background: var(--surface-2); color: var(--text-2); font-size: 12.5px; line-height: 1.5;
}
.kbp-quote mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
.kbp-card-foot { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 -6px -4px; }
.kbp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px; text-align: center; color: var(--text-2); }
.kbp-empty .ico { color: var(--text-3); }
.kbp-ai {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-m);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.kbp-ai-head { display: flex; gap: 10px; align-items: flex-start; }
.kbp-ai-head b { font-size: 13.5px; color: var(--text); }
.kbp-ai-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-weak); color: var(--accent-strong); }
.kbp-ai > .btn { align-self: flex-start; }
.kbp-ai-out:empty { display: none; }
.kbp-ai-out { display: flex; flex-direction: column; gap: 8px; }
.kbp-ai-answer { white-space: pre-wrap; font-size: 13px; line-height: 1.5; color: var(--text); padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.kbp-ai-src { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-2); }
.kbp-ai-src li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; }
.kbp-ai-src li > * { display: inline-block; vertical-align: -2px; }
.kbp-ai-src .ico { color: var(--text-3); margin-right: 5px; }
.kbp-ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kbp-doc-list { display: flex; flex-direction: column; gap: 10px; }
.kbp-doc-item { padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.kbp-doc-item.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.kbp-doc-item-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--text); }
.kbp-doc-text { white-space: pre-wrap; font-size: 13px; line-height: 1.55; color: var(--text-2); }

/* ---------- «В Базу Знаний»: маска ПДн и область видимости ---------- */
.kbs-ta { resize: vertical; min-height: 64px; line-height: 1.45; }
.kbs-pii {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.4;
}
.kbs-pii b { color: var(--text); font-size: 13px; }
.kbs-pii .ico { flex: none; margin-top: 1px; color: var(--text-3); }
.kbs-pii.is-hit { background: var(--ok-weak); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.kbs-pii.is-hit .ico { color: var(--ok); }
.kbs-pii.is-warn { background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.kbs-pii.is-warn .ico { color: var(--warn); }
.kbs-vis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kbs-vis-opt {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px; text-align: left;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.kbs-vis-opt:hover { border-color: var(--accent); }
.kbs-vis-opt.on { border-color: var(--accent); background: var(--accent-weak); box-shadow: 0 0 0 3px var(--accent-ring); }
.kbs-vis-ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); }
.kbs-vis-opt.on .kbs-vis-ico { background: var(--surface); color: var(--accent-strong); }
.kbs-vis-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 18px; }
.kbs-vis-txt b { font-size: 13px; }
.kbs-vis-txt span { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.kbs-check { position: absolute; top: 12px; right: 12px; background: var(--surface); }
.kbs-vis-opt.on .kbs-check { background: var(--accent); border-color: var(--accent); }
@media (max-width: 639px) { .kbs-vis { grid-template-columns: 1fr; } }


/* ══════════ CCD-20261007 hotfix: рельса справа · поповеры · [⋯] · «База знаний» с режимом сверху ══════════ */

/* ---------- Правая колонка: одна кнопка [◧] → рельса 40px ---------- */
.tk-side-close { display: none; }
.tk-side-rail { display: none; }
@media (min-width: 1024px) {
  .tk-side-close { display: inline-flex; }
  .tk-split[data-side="collapsed"] { grid-template-columns: minmax(0, 1fr) 40px; }
  .tk-split[data-side="collapsed"] .tk-side-col { display: none; }
  .tk-split[data-side="collapsed"] .tk-side-rail { display: flex; }
}
.tk-side-rail {
  flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; min-height: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--shadow-1);
}
.tk-side-rail .icon-btn { width: 30px; height: 30px; position: relative; }
.tk-side-rail-sep { width: 20px; height: 1px; margin: 4px 0; background: var(--border); }
.tk-side-rail-tab .tk-side-badge { position: absolute; top: -3px; right: -4px; min-width: 15px; height: 15px; font-size: 9.5px; padding: 0 3px; }

/* ---------- Поповеры: скрепка и меню сообщения ---------- */
.tk-composer .composer-bar { position: relative; }
.tk-pop {
  position: absolute; z-index: 40; min-width: 220px; max-height: 62vh; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--shadow-2);
  animation: tk-pane-in .14s ease;
}
.tk-pop-clip { bottom: calc(100% + 6px); left: 0; width: 310px; }
.tk-pop-msg { top: 30px; right: 6px; width: 210px; }
.tk-pop-msg.up { top: auto; bottom: calc(100% - 22px); }
.tk-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.tk-pop-item .ico { color: var(--text-3); flex: none; }
.tk-pop-item:hover, .tk-pop-item.on { background: var(--surface-2); }
.tk-pop-item:hover .ico, .tk-pop-item.on .ico { color: var(--accent-strong); }
.tk-pop-item:focus-visible, .tk-pop-form:focus-visible, .bubble-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tk-pop-label { flex: 1; min-width: 0; }
.tk-pop-caret { transition: transform .15s; }
.tk-pop-item[aria-expanded="true"] .tk-pop-caret { transform: rotate(180deg); }
.tk-pop-sep { height: 1px; margin: 5px 4px; background: var(--border); }
.tk-pop-sub { margin: 2px 0 2px 14px; padding-left: 8px; border-left: 2px solid var(--accent-ring); display: flex; flex-direction: column; }
.tk-pop-form {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 8px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.tk-pop-form:hover { background: var(--accent-weak); color: var(--accent-strong); }
.tk-pop-form-title { min-width: 0; line-height: 1.35; }
.tk-pop-form-n { flex: none; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tk-clip[aria-expanded="true"] { background: var(--accent-weak); color: var(--accent-strong); }
.att-chip-local { border-style: dashed; }
.tk-copy-buf { position: fixed; left: -9999px; top: 0; }
.att-pick-check { margin-top: 2px; }
.att-pick-row.on .att-pick-check { background: var(--accent); border-color: var(--accent); }

/* ---------- [⋯] на ответе консультанта ---------- */
.tk-chat-feed .bubble { position: relative; }
.bubble-more {
  margin-left: auto; width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer; opacity: .6;
  transition: opacity .15s, background-color .15s, color .15s;
}
.bubble:hover .bubble-more, .bubble-more[aria-expanded="true"] { opacity: 1; }
.bubble-more:hover, .bubble-more[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); }

/* ---------- Реестр: попадание в переписке ---------- */
.tk-card-hit {
  display: flex; align-items: flex-start; gap: 5px; padding: 4px 7px; border-radius: 6px;
  background: var(--info-weak); color: var(--info); font-size: 11.5px; line-height: 1.4;
}
.tk-card-hit .ico { flex: none; margin-top: 2px; }

/* ---------- «База знаний»: режим сразу под строкой, теги одной строкой ---------- */
.kbp-search { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.kbp-field.is-ai:focus-within { border-color: var(--accent); }
.kbp-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.kbp-mode-btn {
  min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 8px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s;
}
.kbp-mode-btn:hover { color: var(--text); }
.kbp-mode-btn.on { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.kbp-mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kbp-mode-label { overflow: hidden; text-overflow: ellipsis; }
.kbp-mode-sub {
  flex: none; padding: 1px 6px; border-radius: var(--r-full); background: color-mix(in srgb, var(--text-3) 14%, transparent);
  color: var(--text-3); font-size: 10.5px; font-weight: 600;
}
.kbp-mode-btn.on .kbp-mode-sub { background: var(--accent-weak); color: var(--accent-strong); }
@container (max-width: 470px) { .kbp-mode-sub { display: none; } }
.kbp-pane { display: none; flex-direction: column; gap: 10px; }
.kbp-pane.on { display: flex; animation: tk-pane-in .16s ease; }
.kbp-suggest { flex-wrap: nowrap; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.kbp-suggest-label { flex: none; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.kbp-tag {
  flex: 0 1 auto; min-width: 0; height: 22px; padding: 0 9px; border: 0; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s;
}
.kbp-tag:hover { background: var(--accent-weak); color: var(--accent-strong); }
.kbp-pane.kbp-ai { padding: 12px; border-radius: var(--r-m); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

/* i39 Ф1 · «Весь документ» из Федеральной базы: полный текст редакции, процитированный пункт подсвечен */
.kbp-law-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.kbp-law-badge { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-ring); padding: 2px 8px; border-radius: 999px; }
.kbp-law-text { display: flex; flex-direction: column; gap: 6px; max-height: 64vh; overflow: auto; padding-right: 6px; }
.kbp-law-p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); padding: 4px 8px; border-radius: var(--r-s, 6px); border-left: 3px solid transparent; }
.kbp-law-p.on { color: var(--text); background: var(--accent-ring); border-left-color: var(--accent); }
.kbp-law-ref { display: inline-block; min-width: 92px; margin-right: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-3, var(--text-2)); }
.kbp-law-note { font-size: 11.5px; color: var(--text-3, var(--text-2)); opacity: .75; padding-left: 108px; }
.kbp-law-heading { font-weight: 700; font-size: 13.5px; color: var(--text); margin-top: 6px; }