/* ========================================================================
   harmony.css · CK-UI-HARMONY (17.10.2026) — Этап 1 UI/UX рабочего места ЦК АПК
   Слой поверх всех стилей ЛК v2 (подключён последним): единый бренд ServerLLM, постоянный 3-колоночный Пульт,
   архивный верстак, календарь обращений и общий «воздушный» стиль трёх календарей (Пульт · БЗ · Информирование),
   раздельные квоты подвала БЗ, аватарка бота и safe-area в смартфоне Студии. Только var(...) токенов app_v2.css.
   Откат — убрать <link> в index.html.
   ======================================================================== */

/* ---------- ServerLLM: статусная плашка ---------- */
.llm-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 9px; flex: none;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--r-full);
  background: var(--accent-weak); color: var(--accent-strong); font-size: 12px; line-height: 1; white-space: nowrap;
}
.llm-chip .ico { flex: none; }
.llm-chip-name { font-weight: 700; letter-spacing: .01em; }
.llm-chip-sub { color: var(--text-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.llm-chip.is-compact { height: 22px; padding: 0 8px; font-size: 11.5px; }
/* #dbMeta над черновиком показывает бренд на любой ширине верстака */
.db-meta { display: inline-flex; align-items: center; }
@container (max-width: 470px) { .db-meta { display: inline-flex; } }
@container (max-width: 400px) { .db-meta { display: inline-flex; } .db-meta .llm-chip-name { font-size: 11px; } }

/* ---------- Пульт: заглушки постоянного каркаса Кол 2 / Кол 3 ---------- */
.tk-ph { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.tk-ph-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 32px 24px; text-align: center; min-height: 240px;
}
.tk-ph-body.is-loading { align-items: stretch; justify-content: flex-start; padding: 20px; }
.tk-ph-body .empty-state-ico { color: var(--text-3); opacity: .75; }
.tk-ph-body .empty-state-title { font-size: 15px; font-weight: 700; color: var(--text-2); }
.tk-ph-body .muted { max-width: 300px; line-height: 1.45; }
.tk-ph-body .llm-chip { margin-top: 6px; }
@media (min-width: 1024px) {
  body.tk-focus .tk-side-col.tk-ph { border-left: 0; }
}

/* ---------- Пульт: верстак архивного обращения ---------- */
.db-fail { flex: none; margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--danger-weak); color: var(--danger); font-size: 12px; }
.db-archive-note {
  flex: none; display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-2); font-size: 12px; line-height: 1.45;
}
.db-archive-note .ico { flex: none; margin-top: 1px; color: var(--text-3); }
.db-actions.is-archive { align-items: center; }
.db-actions.is-archive .btn-primary { flex: 0 1 auto; }
.db-actions .th-spacer { flex: 1; }
.btn.db-del { color: var(--danger); }
.btn.db-del:hover { background: var(--danger-weak); color: var(--danger); }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger:hover { background: var(--danger-weak); }

/* ---------- Верстак: шапка «Внешние источники» ---------- */
.web-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 2px 2px 8px; color: var(--text); font-size: 13px; }
.web-head .ico { align-self: center; color: var(--accent-strong); flex: none; }

/* ---------- Пульт: [Реестр | Календарь] ---------- */
/* Фильтры и [Реестр | Календарь] — один блок; линия-разделитель ПОД переключателем отделяет его от месяца и ленты */
.q-filter-row { border-bottom: 0; padding-bottom: 0; }
.q-view-row { display: flex; padding: 6px 10px 8px; border-bottom: 1px solid var(--border); }
.q-view-row .segmented { flex: 1; }
.q-view-row .segmented-item { flex: 1; justify-content: center; height: 28px; font-size: 12.5px; }
/* Общий скролл-контейнер под фильтрами: календарь + карточки едут одной лентой (сетка уходит вверх за край) */
.q-scroll { display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 640px) {
  body.tk-focus .q-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-3) 45%, transparent) transparent; }
  body.tk-focus .q-scroll > .q-list { flex: none; min-height: auto; overflow: visible; }
}
.q-scroll::-webkit-scrollbar { width: 5px; }
.q-scroll::-webkit-scrollbar-thumb { border-radius: 4px; background: color-mix(in srgb, var(--text-3) 40%, transparent); }
.q-cal { flex: none; padding: 8px 10px 4px; border-bottom: 1px solid var(--border); }
.q-cal.hidden { display: none; }
.q-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.q-cal-nav .icon-btn { width: 28px; height: 28px; }
.q-cal-period {
  border: 0; background: none; padding: 4px 8px; border-radius: 6px; font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--text); cursor: pointer;
}
.q-cal-period:hover { background: var(--surface-2); color: var(--accent-strong); }
.q-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.q-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 26px; padding: 4px 2px 0; }
.q-cal-reset { border: 0; background: none; padding: 2px 6px; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-strong); cursor: pointer; }
.q-cal-reset:hover { background: var(--accent-weak); }
.q-cal-badge {
  min-width: 16px; height: 15px; padding: 0 4px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-weak); color: var(--accent-strong); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.q-cal-day.on .q-cal-badge { background: var(--accent-strong); color: var(--on-accent); }

/* ---------- Единый «воздушный» календарь: Пульт · База знаний · Информирование ----------
   Ячейка без постоянной рамки (прозрачная, подсветка при наведении), верхняя половина — число дня
   (12px, tabular-nums, цвет var(--text) во всех трёх), нижняя — место под точки или бейджи.
   Сегодня — рамка по контуру всей ячейки (как в БЗ), число без кружка; выбранный день — акцентная рамка и мягкий фон. */
.q-cal-dow, .kb3-cal-dow, .pl3-dow {
  text-align: center; font-size: 10.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .02em; padding: 2px 0 3px;
}
.q-cal-day, .kb3-cal-day, .pl3-mcell {
  position: relative; display: grid; grid-template-rows: 1fr 1fr; justify-items: center; align-items: center; gap: 0;
  padding: 3px 2px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-2); color: var(--text);
  font: inherit; text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.q-cal-day, .kb3-cal-day { aspect-ratio: 1 / .92; min-height: 30px; }
.pl3-mcell { min-height: 46px; }
.q-cal-day:hover, .kb3-cal-day:hover, .pl3-mcell:hover { border-color: var(--border-strong); }
.q-cal-day.is-out, .kb3-cal-day.is-out, .pl3-mcell.is-out { background: transparent; color: var(--text-3); opacity: 1; }
.pl3-mcell.is-out .pl3-mbadges { opacity: .55; }
.pl3-mcell.is-past:not(.is-out) { background: var(--surface-2); color: var(--text); }
.q-cal-day.on, .kb3-cal-day.on, .pl3-mcell.on { border-color: var(--accent); background: var(--accent-weak); box-shadow: none; }
.q-cal-n, .kb3-cal-n, .pl3-mnum {
  align-self: end; justify-self: center; min-width: 21px; height: 21px; padding: 0 3px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.q-cal-n, .kb3-cal-n, .pl3-mnum { color: var(--text); background: transparent; }
.q-cal-day.is-out .q-cal-n, .kb3-cal-day.is-out .kb3-cal-n, .pl3-mcell.is-out .pl3-mnum { color: var(--text-3); }
.q-cal-day.is-today .q-cal-n, .kb3-cal-day.is-today .kb3-cal-n, .pl3-mcell.is-today .pl3-mnum {
  background: transparent; color: var(--accent-strong); font-weight: 700; box-shadow: none;
}
.q-cal-c, .kb3-cal-dots, .pl3-mbadges, .pl3-track-dots { align-self: start; justify-self: center; display: flex; justify-content: center; gap: 2px; min-height: 6px; }
.kb3-cal-dots { margin-top: 3px; }
.pl3-mbadges { flex-wrap: wrap; margin-top: 2px; }
/* Фокус трека в Информировании: своя рамка выпуска остаётся заметной */
.pl3-mcell.has-issue { border-color: color-mix(in srgb, var(--trk) 45%, transparent); }
.is-spot .pl3-mcell:not(.has-issue):hover { border-color: transparent; }

/* ---------- База знаний: плашка ServerLLM в Студии, раздельные квоты подвала ---------- */
.kb3-st-bar .llm-chip { min-width: 0; }
@container kb3studio (max-width: 390px) { .kb3-st-bar .llm-chip-sub { display: none; } }
.kb3-quota-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb3-quota-m { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kb3-quota-lbl {
  display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.kb3-quota-lbl b { color: var(--text); font-weight: 700; }

/* ---------- Смартфон Студии: аватарка бота и поле ввода над Home bar ---------- */
.studio-bot-ava.has-img { padding: 0; overflow: hidden; background: var(--surface-2); }
.kb3-phone .studio-bot-ava.has-img { background: var(--surface-2); }
.studio-bot-ava-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.studio-bot-ava.has-img, .kb3-phone .studio-bot-ava.has-img { padding: 0; overflow: hidden; background: var(--surface-2); }
.kb3-sim-compose { padding: 10px 12px 14px; }
.kb3-phone .phone-home { display: block; margin: 2px auto 8px; opacity: .85; }

/* ---------- Информирование: модель = бренд ServerLLM ---------- */
.pl3-model.is-brand { display: inline-flex; align-items: center; min-width: 0; }
.pl3-model-card.is-brand { cursor: default; }

/* ---------- БЗ: «База знаний» в одну строку рядом с более длинной кнопкой «+ Источник» ---------- */
.kb3-fund-title { gap: 6px; }
.kb3-fund-title h1 { white-space: nowrap; flex: none; }
.kb3-fund-tools { gap: 2px; flex: none; }
.kb3-add { padding: 0 8px 0 6px; gap: 3px; font-size: 12.5px; }
.kb3-fund-tools .icon-btn { width: 26px; min-width: 26px; padding: 0; }
.kb3-fund { container-type: inline-size; container-name: kb3fund; }
@container kb3fund (max-width: 282px) { .kb3-add .ico { display: none; } .kb3-add { padding: 0 9px; } }
@container kb3fund (max-width: 252px) { .kb3-fund-title h1 { font-size: 19px; } }

/* Календарь обращений в узком реестре (≈36px на день): ячейка по содержимому — число сверху, бейдж снизу без наезда */
.q-cal-day { aspect-ratio: auto; min-height: 42px; padding: 3px 1px 4px; grid-template-rows: auto auto; row-gap: 2px; align-content: center; }
.q-cal-day .q-cal-n { align-self: center; min-width: 20px; height: 20px; }
.q-cal-day .q-cal-c { align-self: center; min-height: 15px; }

/* Сегодня во всех трёх календарях — рамка по периметру квадратика дня (radius 8px), фон прозрачный.
   Стоит после :hover, чтобы наведение не гасило акцент. */
.q-cal-day.is-today, .kb3-cal-day.is-today, .pl3-mcell.is-today,
.q-cal-day.is-today:hover, .kb3-cal-day.is-today:hover, .pl3-mcell.is-today:hover {
  border: 1.5px solid var(--accent-strong); border-radius: 8px; background: transparent;
}
.q-cal-day.is-today.on, .kb3-cal-day.is-today.on, .pl3-mcell.is-today.on { background: var(--accent-weak); }