/* Ассистент (site/assistant.js) — разговор: шапка, вопросы и ответы, поле ввода. Одна панель — в разделе «Ассистент»
   (site/chats.js: слева список разговоров, как в ChatGPT), другая — окно с круглой кнопки справа снизу на остальных страницах. */

.as-panel { min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 18px 16px 16px; }
.kn-ask-head { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kn-ask-logo { flex: none; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--tint); color: var(--accent-text); }
.kn-ask-logo .ico { width: 20px; height: 20px; }
.kn-ask-title { flex: 1; min-width: 0; }
.kn-ask-title h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.kn-ask-title p { margin: 0; font-size: 12.5px; color: var(--text3); }
.kn-chat { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: 0 -16px; padding: 4px 16px 12px; }
.kn-ask-empty { margin: auto 0; padding: 12px 6px; text-align: center; color: var(--text2); font-size: 14px; line-height: 1.45; }
.kn-ask-empty p { margin: 0 0 8px; }
.kn-q { align-self: flex-end; max-width: 85%; padding: 8px 13px; border-radius: 18px 18px 6px 18px; background: var(--mine);
  font-size: 14px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kn-a { padding: 12px 14px; border-radius: 18px; background: #fff; color: var(--card-text); box-shadow: var(--card-shadow); font-size: 14px; line-height: 19px; }
.kn-a p { margin: 0 0 4px; }
.kn-a.muted { color: var(--card-text2); }
.kn-a.bad { color: #C62828; }
.kn-a .muted { color: var(--card-text2); }
.kn-a-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #1E7D3A; }
.kn-a-label .ico { width: 14px; height: 14px; }
.kn-a-group + .kn-a-group { margin-top: 6px; }
.kn-a-title { margin: 4px 0 2px; font-size: 12px; font-weight: 600; color: var(--card-text2); }
.kn-a-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 6px; margin: 0 -6px; border: 0; border-radius: 10px; background: none;
  color: var(--card-text); text-align: left; }
@media (hover: hover) { .kn-a-row:hover { background: #F1F2F4; } }
.kn-a-row:active { background: #E9EBEE; }
.kn-a-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; line-height: 18px; }
.kn-a-text > span:first-child { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kn-a-sub { font-size: 12px; color: var(--card-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-a-row .chev { color: #8A93A3; }
/* поле ввода: рамка вокруг текста и кнопки; текст растёт до трети экрана и дальше листается внутри рамки —
   полоса прокрутки не залезает на скруглённые углы */
.kn-compose { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px 10px 16px; border-radius: 22px; cursor: text;
  border: 1px solid var(--field-border); background: var(--field);
  background-color: var(--glc-well, var(--field)); border-color: var(--glc-well-top, var(--field-border)) var(--glc-well-side, var(--field-border)) var(--glc-well-bot, var(--field-border));
  box-shadow: var(--glc-well-shade, none); }
.kn-compose:focus-within { border-color: var(--accent-text); }
.kn-compose textarea { display: block; width: 100%; min-height: 42px; max-height: min(34vh, 320px); margin: 0; padding: 0 8px 0 0; border: 0; border-radius: 0;
  background: none; color: var(--text); font: inherit; font-size: 14.5px; line-height: 21px; resize: none; outline: none; box-shadow: none;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--text3) transparent; }
.kn-compose textarea::placeholder { color: var(--text3); }
.kn-compose-bar { display: flex; align-items: center; gap: 10px; cursor: default; }
.kn-compose-hint { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-compose .send-btn { width: 36px; height: 36px; border-radius: 18px; }
.kn-compose .send-btn .ico { width: 18px; height: 18px; }

/* подсказки в пустом разговоре */
.kn-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.kn-examples .chip { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* что сделал ассистент — карточки под ответом */
.kn-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.kn-act { padding: 10px 12px; border-radius: 14px; background: #F6F7F9; display: flex; flex-direction: column; gap: 4px; }
.kn-act-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #1E7D3A; }
.kn-act-head .ico { width: 14px; height: 14px; flex: none; }
.kn-act-text { font-size: 13.5px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.kn-act-text.strong { font-weight: 600; }
.kn-act-sub { font-size: 12.5px; line-height: 17px; color: var(--card-text2); overflow-wrap: anywhere; }
.kn-act-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.kn-act .btn { height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid #D5DAE0; background: #fff; color: var(--card-text);
  font-size: 13px; font-weight: 600; }
@media (hover: hover) { .kn-act .btn:hover { background: #F1F2F4; } }
.kn-act .btn.primary { border-color: transparent; background: var(--accent); color: #fff; }
@media (hover: hover) { .kn-act .btn.primary:hover { background: var(--accent-hover); } }
.kn-a-row.static { cursor: default; }
@media (hover: hover) { .kn-a-row.static:hover { background: none; } }


/* ответ ассистента: текст, источники, совет из интернета со ссылками */
.kn-a-answer { font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 4px; }
.kn-a-label.none { color: var(--card-text2); }
.kn-a-label.web { color: #1F5FAF; }
.kn-a.more { box-shadow: none; background: #F6F7F9; }
.kn-a-wait { display: inline-flex; align-items: center; gap: 8px; }
.kn-a-wait::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #D5DAE0; border-top-color: var(--accent);
  animation: kn-spin .8s linear infinite; }
@keyframes kn-spin { to { transform: rotate(360deg); } }
.kn-a-ico { width: 15px; height: 15px; color: var(--card-text2); }
.kn-a-links { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.kn-a-link { display: flex; align-items: center; gap: 6px; padding: 5px 6px; margin: 0 -6px; border-radius: 8px; color: #1F5FAF;
  font-size: 13px; line-height: 17px; text-decoration: none; }
.kn-a-link .ico { width: 13px; height: 13px; flex: none; }
.kn-a-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .kn-a-link:hover { background: #F1F2F4; text-decoration: underline; } }

@media (max-width: 899px) {
  .kn-compose-hint { display: none; }
  .kn-compose-bar { justify-content: flex-end; }
}
.kn-compose-btns { flex: none; display: flex; align-items: center; gap: 6px; }

/* ---------- голосовые (16.10, «голосовые» в assistant.js) ---------- */
/* микрофон — на месте стрелки, пока поле пустое; идёт запись — вместо текста время и живая волна, слева «Отмена» */
.kn-compose .kn-mic { background: var(--accent); }
.kn-rec, .kn-rec-cancel { display: none; }
.kn-compose.recording { cursor: default; border-color: var(--accent-text); }
.kn-compose.recording > textarea, .kn-compose.recording .kn-compose-hint { display: none; }
.kn-compose.recording .kn-rec { display: flex; align-items: center; gap: 10px; min-height: 42px; padding-right: 8px; }
.kn-compose.recording .kn-rec-cancel { display: inline-flex; }
.kn-compose.recording .kn-compose-bar { justify-content: space-between; }
.kn-rec-dot { flex: none; width: 10px; height: 10px; border-radius: 5px; background: var(--accent); animation: kn-rec-blink 1.6s ease-in-out infinite; }
@keyframes kn-rec-blink { 50% { opacity: .35; } }
.kn-rec-time { flex: none; min-width: 38px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kn-rec-wave { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; overflow: hidden; }
.kn-rec-wave i { flex: 0 0 3px; height: 4px; border-radius: 2px; background: var(--accent-text); transition: height .1s linear; }
.kn-rec-cancel { align-items: center; height: 32px; padding: 0 12px; margin-left: -6px; border: 0; border-radius: 16px; background: none;
  color: var(--text2); font-size: 14px; font-weight: 600; }
@media (hover: hover) { .kn-rec-cancel:hover { background: var(--sub); color: var(--text); } }
.kn-rec-cancel:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }

/* голосовое в разговоре: кнопка, волна, время; под ними — текст, как его поняли */
.kn-q.voice { width: min(340px, 85%); display: flex; flex-direction: column; gap: 6px; padding: 9px 13px 10px 9px; white-space: normal; }
.kn-vrow { display: flex; align-items: center; gap: 10px; }
.kn-vplay { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 17px; background: var(--accent); color: #fff;
  display: grid; place-items: center; cursor: pointer; }
.kn-vplay svg { width: 14px; height: 14px; }
@media (hover: hover) { .kn-vplay:hover { background: var(--accent-hover); } }
.kn-vplay:active { transform: scale(.92); }
.kn-vplay:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.kn-vwave { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.kn-vwave i { flex: 1 1 0; min-width: 2px; max-width: 4px; border-radius: 2px; background: var(--faded); transition: background-color .15s linear; }
.kn-vwave i.on { background: var(--accent-text); }
.kn-vtime { flex: none; font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; }
.kn-vtext { padding-left: 4px; font-size: 14px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kn-vtext.wait { display: inline-flex; align-items: center; gap: 8px; color: var(--text3); }
.kn-vtext.wait::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--faded); border-top-color: var(--accent-text);
  animation: kn-spin .8s linear infinite; }
.kn-vtext.bad { color: var(--danger); }
.kn-vbtns { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 4px; }
.kn-vbtns .btn { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .kn-rec-dot { animation: none; } .kn-rec-wave i { transition: none; } }

/* ---------- кнопка справа снизу и окно ---------- */
/* Окно растёт из угла, где кнопка, и уходит туда же. Открыта задача (панель справа) — кнопка и окно встают левее неё,
   чтобы задачу было видно; на телефоне задача во весь экран — кнопки нет. */
#app { --as-right: 24px; --as-bottom: 24px; }
#app.has-detail { --as-right: 484px; }
#app[data-section="assistant"] > :is(.as-fab, .as-win) { display: none; }

.as-fab { position: fixed; z-index: 34; right: var(--as-right); bottom: var(--as-bottom); width: 56px; height: 56px; padding: 0;
  border: 1px solid var(--glass-border); border-radius: 28px; background: var(--glass-strong); color: var(--accent-text);
  box-shadow: var(--pill-shadow); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  display: grid; place-items: center; cursor: pointer;
  transition: opacity .18s var(--ease-out), transform .2s var(--ease-out), background-color .2s var(--ease-out), right .28s var(--ease-out); }
.as-fab .ico { width: 24px; height: 24px; }
@media (hover: hover) { .as-fab:hover { background: linear-gradient(var(--tint), var(--tint)), var(--glass-strong); } }
.as-fab[aria-expanded="true"] { opacity: 0; transform: scale(.6); pointer-events: none; }

.as-win { position: fixed; z-index: 34; right: var(--as-right); bottom: var(--as-bottom); margin: 0;
  width: min(420px, calc(100vw - var(--as-right) - 24px)); height: min(680px, calc(100dvh - var(--as-bottom) - 24px));
  border-radius: 28px; box-shadow: var(--pill-shadow);
  transform-origin: 100% 100%; visibility: hidden; opacity: 0; transform: translateY(10px) scale(.94);
  transition: opacity .16s var(--ease-out), transform .18s var(--ease-out), visibility 0s linear .18s; }
.as-win.open { visibility: visible; opacity: 1; transform: none;
  transition: opacity .2s var(--ease-out), transform .26s var(--ease-out), visibility 0s; }
.as-win .kn-ask-title h2 { font-size: 17px; }

/* окно узкое, а панель справа уже поверх раздела */
@media (max-width: 1099px) { #app.has-detail { --as-right: calc(min(480px, 100vw - 24px) + 24px); } }
/* телефон: круглой кнопки нет — ассистент во вкладке нижнего меню (кнопка закрывала переключатели внизу разделов, этап 4);
   окно, если его открыли, — почти во весь экран над меню (--tabbar — phone.css) */
@media (max-width: 899px) {
  #app { --as-right: 20px; --as-bottom: 92px; }
  #app > .as-fab { display: none; }
  .as-win { left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top)); bottom: var(--tabbar, 88px); width: auto; height: auto; border-radius: 26px; }
}

/* ---------- окно подтверждения изменений (site/confirm.js) ---------- */
/* Предложения — белыми карточками, как всё содержимое на сайте; было — зачёркнуто серым, стало — жирным */
.pc-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 19px; color: var(--text2); }
.pc-list { display: flex; flex-direction: column; gap: 10px; }
.pc-card { padding: 12px 14px; border-radius: 16px; background: #fff; color: var(--card-text); box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 7px; transition: opacity .2s var(--ease-out); }
.pc-card.off { opacity: .45; }
.pc-head { display: flex; align-items: center; gap: 10px; }
.pc-check { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 7px; border: 1.5px solid #C3C9D1; background: #fff;
  color: transparent; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.pc-check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pc-check .ico { width: 15px; height: 15px; }
.pc-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-title { font-size: 14.5px; line-height: 19px; font-weight: 700; }
.pc-task { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--card-text2); }
.pc-task .ico { width: 14px; height: 14px; flex: none; }
.pc-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-lines { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: 4px 12px; font-size: 13.5px; line-height: 19px; }
.pc-line { display: contents; }
.pc-label { color: var(--card-text2); }
.pc-value { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.pc-before { color: #8A93A3; text-decoration-color: #B4BAC4; }
.pc-arrow { margin: 0 6px; color: var(--card-text2); }
.pc-after { font-weight: 600; }
.pc-note { font-size: 12px; color: #BC450B; }
.pc-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* под ответом в разговоре: что предложено и что с этим стало */
.pc-block { display: flex; flex-direction: column; margin-top: 8px; padding-top: 4px; border-top: 1px solid #EEF0F3; }
.pc-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pc-row + .pc-row { border-top: 1px solid #F3F4F6; }
.pc-row-text { flex: 1; min-width: 0; }
.pc-row .pc-title { font-size: 13.5px; font-weight: 600; }
.pc-sub { font-size: 12.5px; line-height: 17px; color: var(--card-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sub.bad { color: #C62828; white-space: normal; }
.pc-st { flex: none; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center;
  background: #F1F3F5; color: #4B515C; }
.pc-st.proposed { background: #F9EBE3; color: #BC450B; }
.pc-st.done { background: #E6F2EA; color: #1E7D3A; }
.pc-st.failed, .pc-st.gone { background: #FBE9E9; color: #C62828; }
.kn-a .pc-block .btn { flex: none; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid #D5DAE0; background: #fff;
  color: var(--card-text); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.kn-a .pc-block .btn .ico { width: 14px; height: 14px; }
@media (hover: hover) { .kn-a .pc-block .btn:hover { background: #F1F2F4; } }
.kn-a .pc-block .btn.primary { align-self: flex-start; margin-top: 8px; height: 36px; padding: 0 16px; border-radius: 18px; border-color: transparent;
  background: var(--accent); color: #fff; font-size: 13.5px; }
@media (hover: hover) { .kn-a .pc-block .btn.primary:hover { background: var(--accent-hover); } }
@media (max-width: 520px) { .pc-lines { grid-template-columns: minmax(0, 1fr); gap: 0; } .pc-value { margin-bottom: 4px; } }

/* ---------- «Прослушать» у ответа (site/speak.js) ---------- */
/* круглая кнопка в правом верхнем углу карточки ответа; готовит голос — крутится кольцо, звучит — «стоп» и мягкая пульсация */
.kn-a:has(> .kn-speak) { position: relative; padding-right: 48px; }
.kn-speak { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 16px;
  background: #F1F2F4; color: var(--card-text2); display: grid; place-items: center; cursor: pointer;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out); }
.kn-speak svg { width: 16px; height: 16px; }
@media (hover: hover) { .kn-speak:hover { background: #E6E8EC; color: var(--card-text); } }
.kn-speak:active { transform: scale(.92); }
.kn-speak:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kn-speak[data-state="playing"] { background: var(--accent); color: #fff; animation: kn-speak-pulse 1.6s ease-in-out infinite; }
.kn-speak[data-state="loading"] { background: #F1F2F4; color: var(--accent); }
.kn-speak[data-state="loading"]::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--accent); animation: kn-spin .8s linear infinite; }
@keyframes kn-speak-pulse { 50% { box-shadow: 0 0 0 5px rgba(204, 75, 12, .18); } }
@media (prefers-reduced-motion: reduce) { .kn-speak[data-state="playing"] { animation: none; } }

/* вопрос, заданный голосом в прошлый раз: записи уже нет — текст с пометкой */
.kn-q.said .kn-said { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: 11.5px; line-height: 16px; color: var(--text3); }
.kn-said .ico { width: 12px; height: 12px; }

/* ---------- раздел «Ассистент» (site/chats.js): слева разговоры по дням, в середине разговор ---------- */
.as-area { flex: 1 1 auto; min-width: 0; display: flex; gap: 20px; }
.as-side { flex: 0 0 272px; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 10px 10px; }
.as-side-top { flex: none; display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--sep); }
.as-side-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 14px; background: none;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.as-side-btn .ico { width: 18px; height: 18px; color: var(--accent-text); }
@media (hover: hover) { .as-side-btn:hover { background: var(--sub); } }
.as-side-btn:active { background: var(--sub-hover); }
.as-chats { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -10px; padding: 0 10px 8px;
  scrollbar-width: thin; }
.as-group { margin: 14px 12px 4px; font-size: 12px; font-weight: 600; color: var(--text3); }
.as-chat { display: flex; align-items: center; min-height: 38px; border-radius: 12px; }
.as-chat-link { flex: 1; min-width: 0; padding: 9px 4px 9px 12px; color: var(--text2); font-size: 14px; line-height: 18px; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 12px; outline-offset: -2px; }
.as-chat.on { background: var(--tint); }
.as-chat.on .as-chat-link { color: var(--text); font-weight: 600; }
@media (hover: hover) { .as-chat:not(.on):hover { background: var(--sub); } }
.as-chat-more { flex: none; width: 30px; height: 30px; margin-right: 4px; padding: 0; border: 0; border-radius: 10px; background: none;
  color: var(--text3); display: grid; place-items: center; cursor: pointer; opacity: 0; }
.as-chat-more .ico { width: 18px; height: 18px; }
.as-chat:is(:hover, :focus-within, .on) .as-chat-more { opacity: 1; }
@media (hover: none) { .as-chat-more { opacity: 1; } }
@media (hover: hover) { .as-chat-more:hover { background: var(--sub-hover); color: var(--text); } }
.as-chats-note { margin: 14px 12px; font-size: 13px; line-height: 18px; color: var(--text3); }
.sheet-body .as-side-top { margin: 0 -4px 4px; }
.as-chats.in-sheet { margin: 0 -4px; padding: 0; overflow: visible; }
.sheet-body .row.danger { color: var(--danger); }
.as-rename { width: 100%; height: 44px; margin-bottom: 12px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--field-border);
  background: var(--field); color: var(--text); font: inherit; font-size: 15px; outline: none; }
.as-rename:focus { border-color: var(--accent-text); }

/* разговор — колонкой по центру, как в ChatGPT */
.as-main { flex: 1 1 auto; padding: 20px 24px; }
.as-main :is(.kn-ask-head, .kn-compose) { width: 100%; max-width: 820px; margin-inline: auto; }
.as-main .kn-chat { margin: 0 -24px; padding: 4px max(24px, calc((100% - 820px) / 2 + 24px)) 14px; }
.as-list-btn { display: none; }

/* открыта задача, а экран не очень широкий — список уступает место (он — по кнопке в шапке); уже 1100 — всегда по кнопке */
@media (max-width: 1599px) {
  #app.has-detail[data-section="assistant"] .as-side { display: none; }
  #app.has-detail[data-section="assistant"] .as-list-btn { display: inline-grid; }
}
@media (max-width: 1099px) {
  .as-side { display: none; }
  .as-list-btn { display: inline-grid; }
}
@media (max-width: 899px) {
  .as-area { min-height: 0; }
  .as-main { padding: 14px 14px 14px; }
  .as-main .kn-chat { margin: 0 -14px; padding: 4px 14px 12px; }
  :is(.as-main, .as-win) .kn-ask-title p { display: none; }
  /* у поля свой микрофон — круглая «Записать мысль» не закрывает его */
  body:has(#app[data-section="assistant"]) .mic-fab { display: none; }
}

/* «Чаты сотрудников» (site/chat-review.js, 23.10): только чтение — люди, их разговоры (и удалённые), разговор */
.cr-head { flex: none; padding: 4px 12px 8px; }
.cr-head h2 { margin: 0 0 2px; font-size: 16px; line-height: 22px; font-weight: 600; }
.cr-head p { margin: 4px 0 0; font-size: 12.5px; line-height: 17px; color: var(--text3); }
.cr-person .as-chat-link { display: flex; flex-direction: column; gap: 1px; }
.cr-name { overflow: hidden; text-overflow: ellipsis; }
.cr-sub { font-size: 12px; color: var(--text3); }
.cr-deleted { color: var(--text3); font-weight: 400; }
.mtag.cr-pause { display: inline-flex; margin-top: 4px; background: var(--tint); color: var(--accent-text); }
.cr-note, .kn-a-pause { margin: 0; padding: 0 4px; font-size: 12.5px; color: var(--text3); }
.cr-back { display: none; }
@media (max-width: 899px) { .cr-area .cr-main .kn-ask-title p { display: block; } }   /* чей разговор и удалён ли — и на телефоне */
@media (max-width: 1099px) {
  .cr-area .cr-side { display: flex; flex: 1 1 auto; }
  .cr-area .cr-main { display: none; }
  .cr-area.open .cr-side { display: none; }
  .cr-area.open .cr-main { display: flex; }
  .cr-area.open .cr-back { display: inline-grid; }
}