/* CRM 2.0 — вид как у Helper v2 («тихий Linear», PO 03.11): шрифт Golos Text, тёплая светлая палитра, тонкие линии,
   узкое меню. Подключается последним: старые токены --ds-* переназначены на палитру Helper (--hx-*). */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/golos-text-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/golos-text-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-21FF, U+2212, U+2215, U+2318, U+FEFF, U+FFFD; }

/* ---------- токены ---------- */
body {
  --hx-font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hx-bg: #FBFBFA; --hx-surface: #FFFFFF; --hx-sidebar: #F5F5F3; --hx-raised: #F6F6F4;
  --hx-line: #ECECE9; --hx-line-strong: #E1E1DD;
  --hx-text: #18181B; --hx-text-2: #5E5E66; --hx-text-3: #94949C;
  --hx-accent: #5160D6; --hx-accent-2: #8B5CF6; --hx-accent-soft: #EEF0FC; --hx-accent-text: #3F4CB8;
  --hx-hover: #F0F0ED; --hx-selected: #F2F2EF;
  --hx-bubble-in: #F3F3F1; --hx-bubble-bot: #EEF0FC; --hx-me: #ECECEA;
  --hx-ok: #2F8F55; --hx-ok-soft: #EAF5EE; --hx-warn: #C9761C; --hx-warn-soft: #FCF3E6;
  --hx-danger: #CC4B4B; --hx-danger-soft: #FCEEEE; --hx-move: #8462D4; --hx-idle: #A0A0A6;
  --hx-shadow-pop: 0 8px 28px rgba(20,20,30,.10), 0 1px 3px rgba(20,20,30,.06);

  --ds-bg: var(--hx-bg); --ds-bg-elev: var(--hx-surface); --ds-card: var(--hx-surface); --ds-card-muted: var(--hx-raised);
  --ds-text: var(--hx-text); --ds-text-muted: var(--hx-text-2); --ds-text-faint: var(--hx-text-3);
  --ds-border: var(--hx-line); --ds-border-strong: var(--hx-line-strong); --ds-divider: var(--hx-line);
  --ds-primary: var(--hx-accent); --ds-primary-600: var(--hx-accent-text); --ds-primary-soft: var(--hx-accent-soft);
  --ds-success: var(--hx-ok); --ds-success-soft: var(--hx-ok-soft); --ds-success-text: var(--hx-ok);
  --ds-warn: var(--hx-warn); --ds-warn-soft: var(--hx-warn-soft); --ds-warn-text: var(--hx-warn);
  --ds-danger: var(--hx-danger); --ds-danger-soft: var(--hx-danger-soft); --ds-danger-text: var(--hx-danger);
  --ds-neutral-soft: var(--hx-raised); --ds-neutral-text: var(--hx-text-2);
  --ds-font-sans: 'Golos Text', system-ui, sans-serif !important;
  margin: 0; background: var(--hx-bg); color: var(--hx-text); font-family: var(--hx-font); font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}
html body, html body .ds-page, html body .ds-page *, html body .ds-app, html body .ds-sidebar, html body .ds-main,
.c2-drawer, .c2-drawer * { font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: 0; }
.c2-mono, .c2-mono-area, .c2-json, .c2-out-k, .c2-diff-path, .c2-diff pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }

/* ---------- меню ---------- */
.hp.ds-app { background: var(--hx-bg); }
.ds-page .ds-sidebar, .ds-sidebar { width: 216px; background: var(--hx-sidebar); border-right: 1px solid var(--hx-line); }
.ds-sidebar-logo.hp-sidebar-logo { padding: 14px 12px 14px 14px; gap: 9px; justify-content: flex-start; }
.c2-mark { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--hx-accent), var(--hx-accent-2)); }
.c2-mark svg { width: 15px; height: 15px; }
.hp-logo-full { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-logo-full small { display: block; font-size: 11.5px; font-weight: 400; color: var(--hx-text-3); }
.hp-collapse { margin-left: auto; color: var(--hx-text-3); }
.ds-sidebar-nav { padding: 0 8px; gap: 1px; }
.c2-nav-section { padding: 14px 8px 4px; font-size: 11.5px; color: var(--hx-text-3); font-weight: 500; }
.ds-page .ds-nav-item, .ds-nav-item { gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 13.5px; font-weight: 400; color: var(--hx-text-2); }
.ds-nav-item svg, .ds-nav-item [data-lucide] { width: 16px !important; height: 16px !important; }
.ds-nav-item:hover { background: var(--hx-hover); color: var(--hx-text); }
.ds-nav-item.active, .ds-page .ds-nav-item.active { background: var(--hx-hover) !important; color: var(--hx-text) !important; font-weight: 500; border-radius: 7px; }
.ds-nav-item.active svg { color: var(--hx-text) !important; }
.ds-nav-badge { margin-left: auto; background: var(--hx-danger); color: #fff; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px;
  border-radius: 999px; display: inline-grid; place-items: center; padding: 0 5px; }
.ds-nav-divider { height: 1px; background: var(--hx-line); margin: 8px 8px; }
.ds-sidebar-footer { border-top: 0; padding: 8px; }
.c2-me { padding: 6px 8px; }
.c2-me-inner { gap: 8px; }
.c2-me-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--hx-accent-soft);
  color: var(--hx-accent-text); font-weight: 600; font-size: 11px; flex: none; }
/* свернутое меню — узкая полоса иконок, как у Helper */
.ds-app--collapsed .ds-sidebar { width: 50px; }
.ds-app--collapsed .ds-sidebar-logo.hp-sidebar-logo { flex-direction: column; padding: 12px 0; gap: 10px; justify-content: center; }
.ds-app--collapsed .hp-collapse { margin: 0; }
.ds-app--collapsed .ds-sidebar-nav { padding: 0 6px; }
.ds-app--collapsed .c2-nav-section { display: none; }
.ds-app--collapsed .ds-nav-item { position: relative; padding: 8px 0; }
.ds-app--collapsed .ds-nav-badge { position: absolute; top: 3px; right: 6px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
.ds-app--collapsed .c2-me { display: flex; justify-content: center; padding: 6px 0; }
.ds-app--collapsed .c2-me-inner span:not(.c2-me-av) { display: none; }
.ds-app--collapsed .ds-sidebar-footer { padding: 8px 6px; }

/* ---------- рабочая область, карточки, поля ---------- */
.hp .ds-workspace-content { padding: 20px 24px 40px; max-width: none; }
.ds-page .ds-card, .ds-card, .c2-drawer .ds-card { background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 12px; box-shadow: none; }
.ds-page .ds-card--clickable:hover { border-color: var(--hx-line-strong); box-shadow: none; transform: none; }
.c2-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.c2-sub { color: var(--hx-text-3); font-size: 12.5px; }
.hp-block-head { font-size: 13.5px; font-weight: 600; color: var(--hx-text); }
.ds-page .ds-input, .ds-page .ds-select, .c2-drawer .ds-input, .c2-drawer .ds-select {
  border: 1px solid var(--hx-line-strong); border-radius: 8px; background: var(--hx-surface); font-size: 13.5px; color: var(--hx-text); box-shadow: none; }
.ds-page .ds-input:focus, .ds-page .ds-select:focus { outline: none; border-color: var(--hx-accent); box-shadow: 0 0 0 3px var(--hx-accent-soft); }
.ds-page .ds-btn, .c2-drawer .ds-btn { height: 32px; border-radius: 8px; font-size: 13px; font-weight: 500; border: 1px solid var(--hx-line-strong);
  background: var(--hx-surface); color: var(--hx-text); box-shadow: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.ds-page .ds-btn:hover { background: var(--hx-hover); }
.ds-page .ds-btn--primary, .c2-drawer .ds-btn--primary { background: var(--hx-accent) !important; border-color: var(--hx-accent) !important; color: #fff !important; }
.ds-page .ds-btn--primary:hover { filter: brightness(.95); }
.ds-page .ds-btn--soft { background: var(--hx-accent-soft); border-color: color-mix(in srgb, var(--hx-accent) 35%, transparent); color: var(--hx-accent-text); }
.ds-page .ds-btn--soft:hover { background: color-mix(in srgb, var(--hx-accent) 16%, #fff); }
.ds-page .ds-btn--danger { color: var(--hx-danger); border-color: color-mix(in srgb, var(--hx-danger) 45%, transparent); background: var(--hx-surface); }
.ds-page .ds-btn--ghost:hover { background: var(--hx-hover); }
.c2-table th { background: transparent; color: var(--hx-text-3); font-weight: 500; font-size: 12px; border-bottom: 1px solid var(--hx-line); }
.c2-table td { border-bottom: 1px solid var(--hx-line); }
.c2-click:hover td { background: var(--hx-hover); }
.c2-overdue td { background: color-mix(in srgb, var(--hx-danger-soft) 60%, #fff); }
.c2-table a { color: var(--hx-accent-text); }
.c2-tabs .is-active { box-shadow: none; border: 1px solid var(--hx-line-strong); }
.c2-toast { background: var(--hx-text); border-radius: 12px; box-shadow: var(--hx-shadow-pop); }
.c2-toast--ok { background: #1F5F3A; } .c2-toast--err { background: #8A2E2E; } .c2-toast--warn { background: #7A4A12; }

/* ---------- пилюли этапов (как статусы в Helper: точка + мягкая заливка) ---------- */
.c2-st { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 500; line-height: 1; white-space: nowrap; color: var(--c, var(--hx-accent-text)); background: var(--b, var(--hx-accent-soft)); }
.c2-st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.c2-st--work { --c: var(--hx-accent-text); --b: var(--hx-accent-soft); }
.c2-st--late { --c: var(--hx-move); --b: color-mix(in srgb, var(--hx-move) 14%, transparent); }
.c2-st--service { --c: var(--hx-warn); --b: var(--hx-warn-soft); }
.c2-st--won { --c: var(--hx-ok); --b: var(--hx-ok-soft); }
.c2-st--lost { --c: var(--hx-danger); --b: var(--hx-danger-soft); }
.c2-st--plain { --c: var(--hx-text-2); --b: var(--hx-raised); }
.c2-chip { background: var(--hx-raised); color: var(--hx-text-2); font-size: 11.5px; }
.c2-chip--primary { background: var(--hx-accent-soft); color: var(--hx-accent-text); }

/* аватар бота: буквы и цвет; оранжевая точка — ведёт менеджер */
.c2-av { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff;
  font: 700 12px/1 var(--hx-font); background: var(--c, #BE185D); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #BE185D) 16%, transparent); }
.c2-av.is-mgr::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--hx-warn); border: 2px solid var(--hx-surface); }

/* ---------- верхняя панель экрана (поиск + чипы) ---------- */
.c2-top { position: sticky; top: 0; z-index: 20; background: var(--hx-surface); border-bottom: 1px solid var(--hx-line); padding: 10px 16px 10px; }
.c2-top-row { display: flex; align-items: center; gap: 10px; }
.c2-top-title { font-weight: 600; font-size: 15px; white-space: nowrap; }
.c2-top-search { flex: 1; position: relative; min-width: 0; }
.c2-top-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--hx-text-3); }
.ds-page .c2-top-search .ds-input { width: 100%; padding-left: 32px; height: 34px; background: var(--hx-surface); }
.c2-top-found { font-size: 12.5px; color: var(--hx-text-3); white-space: nowrap; }
.c2-top-found b { color: var(--hx-text); font-weight: 600; }
.c2-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.c2-fchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hx-line-strong);
  background: var(--hx-surface); color: var(--hx-text); font: 500 12.5px var(--hx-font); cursor: pointer; white-space: nowrap; }
.c2-fchip:hover { background: var(--hx-hover); }
.c2-fchip b { font-weight: 500; color: var(--hx-text-3); }
.c2-fchip.is-on { background: var(--hx-text); border-color: var(--hx-text); color: #fff; }
.c2-fchip.is-on b { color: rgba(255,255,255,.7); }
.c2-fchip--warn b { color: var(--hx-warn); }
.c2-seg { display: inline-flex; border: 1px solid var(--hx-line-strong); border-radius: 8px; overflow: hidden; flex: none; }
.c2-seg a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13px; color: var(--hx-text-2); text-decoration: none; }
.c2-seg a + a { border-left: 1px solid var(--hx-line-strong); }
.c2-seg a.is-on { background: var(--hx-hover); color: var(--hx-text); font-weight: 500; }
.c2-seg svg { width: 15px; height: 15px; }

/* экраны «во всю высоту» (Диалоги, Воронка): без отступов рабочей области */
#view.c2-bleed { padding: 0 !important; }
.c2-bleed-wrap { display: flex; flex-direction: column; height: 100vh; min-height: 0; }

/* ---------- Диалоги: список слева, переписка, карточка ---------- */
.c2-dlg { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--hx-surface); }
.c2-dlg.has-side { grid-template-columns: 300px minmax(0, 1fr) 300px; }
.c2-dlist { border-right: 1px solid var(--hx-line); overflow-y: auto; min-height: 0; }
.c2-r { position: relative; display: block; padding: 11px 14px 11px 56px; border-bottom: 1px solid var(--hx-line); color: inherit; text-decoration: none; }
.c2-r:hover { background: var(--hx-hover); }
.c2-r.is-sel { background: var(--hx-selected); box-shadow: inset 2px 0 0 var(--hx-accent); }
.c2-r .c2-av { position: absolute; left: 14px; top: 13px; }
.c2-r__top { display: flex; align-items: baseline; gap: 8px; }
.c2-r__name { flex: 1; min-width: 0; font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-r__name.is-named { font-weight: 600; }
.c2-r__time { font-size: 11.5px; color: var(--hx-text-3); white-space: nowrap; }
.c2-r__task { display: inline-grid; place-items: center; min-width: 20px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--hx-warn);
  color: #fff; font-size: 10.5px; font-weight: 700; }
.c2-r__task.is-late { background: var(--hx-danger); }
.c2-r__meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12.5px; color: var(--hx-text-2); white-space: nowrap; overflow: hidden; }
.c2-r__bot { font-weight: 600; color: var(--c, #BE185D); }
.c2-r__dot { color: var(--hx-text-3); }
.c2-r__last { margin-top: 4px; font-size: 12.5px; color: var(--hx-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-r__last.is-in { color: var(--hx-text-2); }
.c2-dlist-empty { padding: 40px 16px; text-align: center; color: var(--hx-text-3); font-size: 13px; }

.c2-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.c2-pane-empty { flex: 1; display: grid; place-items: start center; padding-top: 30px; color: var(--hx-text-2); font-size: 13px; }
.c2-th { padding: 14px 20px 12px; border-bottom: 1px solid var(--hx-line); display: flex; gap: 12px; align-items: flex-start; }
.c2-th__main { flex: 1; min-width: 0; }
.c2-th__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.c2-th__phone { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--hx-raised);
  font-size: 12.5px; font-weight: 500; }
.c2-th__phone svg { width: 13px; height: 13px; color: var(--hx-text-3); }
.c2-th__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--hx-text-2); }
.c2-th__meta svg { width: 13px; height: 13px; color: var(--hx-text-3); }
.c2-th__meta span { display: inline-flex; align-items: center; gap: 4px; }
.c2-th__day { color: var(--hx-accent-text); background: var(--hx-accent-soft); padding: 0 8px; height: 19px; border-radius: 999px; font-weight: 500; }
.c2-th__btns { display: flex; gap: 8px; align-items: center; flex: none; }
.c2-th__btns .ds-btn.is-on { background: var(--hx-hover); }
.c2-banner { margin: 10px 16px 0; padding: 9px 12px; border-radius: 10px; background: var(--hx-warn-soft); display: flex; gap: 10px; align-items: center;
  font-size: 13px; }
.c2-banner.is-late { background: var(--hx-danger-soft); }
.c2-banner > svg { width: 16px; height: 16px; color: var(--hx-warn); flex: none; }
.c2-banner.is-late > svg { color: var(--hx-danger); }
.c2-banner__text { flex: 1; min-width: 0; }
.c2-banner__text b { font-weight: 600; }
.c2-banner__q { color: var(--hx-text-2); }
.ds-page .c2-banner .ds-btn { height: 28px; }

.c2-msgs { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.c2-m { max-width: min(72%, 760px); display: flex; flex-direction: column; margin-bottom: 8px; }
.c2-m--in { align-self: flex-start; align-items: flex-start; }
.c2-m--bot, .c2-m--mgr { align-self: flex-end; align-items: flex-end; }
.c2-m__b { padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.c2-m--in .c2-m__b { background: var(--hx-bubble-in); }
.c2-m--bot .c2-m__b { background: var(--hx-bubble-bot); }
.c2-m--mgr .c2-m__b { background: var(--hx-me); }
.c2-m__meta { font-size: 11px; color: var(--hx-text-3); margin-top: 3px; display: flex; gap: 6px; }
.c2-m__meta .c2-ticks--read { color: var(--hx-accent); }
.c2-sys { align-self: center; margin: 4px 0 10px; padding: 3px 10px; border-radius: 999px; background: var(--hx-raised); color: var(--hx-text-2); font-size: 11.5px; }
.c2-sys--warn { background: var(--hx-warn-soft); color: var(--hx-warn); }
.c2-day { align-self: center; font-size: 11.5px; color: var(--hx-text-3); margin: 6px 0 10px; }

.c2-comp { margin: 0 16px 14px; border: 1px solid var(--hx-line-strong); border-radius: 12px; background: var(--hx-surface); display: flex; align-items: flex-end;
  gap: 8px; padding: 6px 6px 6px 14px; }
.c2-comp:focus-within { border-color: var(--hx-accent); box-shadow: 0 0 0 3px var(--hx-accent-soft); }
.c2-comp textarea { flex: 1; border: 0; outline: none; resize: none; font: 13.5px/1.45 var(--hx-font); color: var(--hx-text); padding: 7px 0; min-height: 22px;
  max-height: 160px; background: transparent; }
.c2-comp__hint { font-size: 11px; color: var(--hx-text-3); white-space: nowrap; padding-bottom: 9px; }
.c2-closed { margin: 0 16px 14px; padding: 10px 14px; border-radius: 12px; background: var(--hx-raised); color: var(--hx-text-2); font-size: 13px; }

.c2-side2 { border-left: 1px solid var(--hx-line); overflow-y: auto; min-height: 0; }
.c2-sec { padding: 14px 16px; border-bottom: 1px solid var(--hx-line); }
.c2-sec__h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--hx-text-3);
  margin-bottom: 8px; }
.c2-f { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 13px; }
.c2-f__k { color: var(--hx-text-3); }
.c2-f__v { color: var(--hx-text); word-wrap: break-word; }
.c2-f__v.is-empty { color: var(--hx-text-3); }
.c2-side2 .ds-select, .c2-side2 .ds-input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.c2-side2 .c2-row .ds-select { flex: 1; width: auto; margin-bottom: 0; }
.c2-side2 .ds-btn--danger { width: 100%; justify-content: center; }
.c2-tk { display: flex; gap: 8px; padding: 6px 0; font-size: 13px; }
.c2-tk svg { width: 15px; height: 15px; color: var(--hx-warn); flex: none; margin-top: 2px; }
.c2-tk.is-done { color: var(--hx-text-3); }
.c2-tk.is-done svg { color: var(--hx-ok); }

/* ---------- Воронка: колонки ---------- */
.c2-kan { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 16px; display: flex; gap: 10px; align-items: flex-start; background: var(--hx-bg); }
.c2-kcol { flex: 0 0 264px; width: 264px; min-width: 0; display: flex; flex-direction: column; max-height: 100%; min-height: 0; background: var(--hx-raised); border-radius: 12px; }
.c2-kcol--service { background: color-mix(in srgb, var(--hx-warn-soft) 70%, var(--hx-raised)); }
.c2-kcol--fold { flex-basis: 210px; width: 210px; }
.c2-kcol__h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; font-size: 13px; font-weight: 600; }
.c2-kcol__h i, .c2-kcol__h .c2-kdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--hx-accent)); flex: none; }
.c2-kcol__n { margin-left: auto; color: var(--hx-text-3); font-weight: 500; font-size: 12px; }
.c2-kcol--work .c2-kdot { --c: var(--hx-accent); }
.c2-kcol--service .c2-kdot { --c: var(--hx-warn); }
.c2-kcol__b { padding: 0 8px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.c2-kcol__empty { color: var(--hx-text-3); font-size: 12px; text-align: center; padding: 12px 0 6px; }
.c2-kc { display: block; background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 10px; padding: 10px 11px; text-decoration: none; color: inherit; }
.c2-kc:hover { border-color: var(--hx-line-strong); box-shadow: 0 1px 3px rgba(20,20,30,.05); }
.c2-kc__top { display: flex; align-items: center; gap: 8px; }
.c2-kc .c2-av { width: 22px; height: 22px; font-size: 9.5px; box-shadow: none; }
.c2-kc .c2-av.is-mgr::after { width: 8px; height: 8px; }
.c2-kc__name { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-kc__time { font-size: 11px; color: var(--hx-text-3); white-space: nowrap; }
.c2-kc__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: 12px; color: var(--hx-text-2); }
.c2-kc__meta span { display: inline-flex; align-items: center; gap: 4px; }
.c2-kc__meta svg { width: 12px; height: 12px; color: var(--hx-text-3); }
.c2-kc__last { margin-top: 6px; font-size: 12.5px; color: var(--hx-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c2-kc__last.is-in { color: var(--hx-text); }
.c2-kfold { display: flex; justify-content: space-between; padding: 5px 12px; font-size: 12.5px; color: var(--hx-text-2); }
.c2-kfold b { font-weight: 500; color: var(--hx-text); }

/* ---------- вход ---------- */
.c2-login-mode, .c2-login-mode .ds-main { background: var(--hx-bg); }
.c2-login { border-radius: 16px; box-shadow: var(--hx-shadow-pop); border: 1px solid var(--hx-line); }
.c2-login-ic { color: var(--hx-accent); }

/* ---------- телефон ---------- */
@media (max-width: 1023.98px) {
  .c2-bleed-wrap { height: calc(100vh - 56px); }
  #view.c2-bleed { padding-top: 56px !important; }
  .c2-dlg, .c2-dlg.has-side { grid-template-columns: minmax(0, 1fr); }
  .c2-dlg.is-open .c2-dlist { display: none; }
  .c2-dlg:not(.is-open) .c2-pane, .c2-dlg:not(.is-open) .c2-side2 { display: none; }
  .c2-dlg.has-side .c2-side2 { border-left: 0; border-top: 1px solid var(--hx-line); }
  .c2-dlg.is-open { overflow-y: auto; }
  .c2-dlg.is-open .c2-pane { min-height: calc(100vh - 56px); }
  .c2-top-found { display: none; }
  .c2-top { padding: 8px 12px; }
  .ds-sidebar, .ds-page .ds-sidebar, .ds-app--collapsed .ds-sidebar { width: 260px; }
  .ds-app--collapsed .c2-nav-section { display: block; }
  .ds-app--collapsed .ds-nav-item { padding: 6px 8px; justify-content: flex-start; }
  .ds-app--collapsed .ds-nav-badge { position: static; width: auto; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
  .ds-app--collapsed .ds-sidebar-logo.hp-sidebar-logo { flex-direction: row; padding: 14px 12px 14px 14px; justify-content: flex-start; }
  .ds-app--collapsed .c2-me { justify-content: flex-start; padding: 6px 8px; }
  .ds-app--collapsed .c2-me-inner span:not(.c2-me-av) { display: inline; }
  .c2-top-title { display: none; }
  .c2-seg a { padding: 0 9px; }
  .c2-chips { flex-wrap: nowrap; overflow-x: auto; margin: 8px -12px 0; padding: 0 12px 2px; scrollbar-width: none; }
  .c2-chips::-webkit-scrollbar { display: none; }
  .c2-th { flex-direction: column; gap: 10px; }
  .c2-th__name { font-size: 15px; }
  .c2-back { display: inline-grid !important; }
  .c2-banner { margin: 8px 12px 0; flex-wrap: wrap; }
  .c2-comp { margin: 0 12px 12px; }
  .c2-m { max-width: 88%; }
  .c2-msgs { padding: 12px; }
  .c2-th { flex-wrap: wrap; padding: 12px; }
  .c2-kcol { flex-basis: 82vw; }
  .c2-comp__hint { display: none; }
}

/* цвета ботов (C2.botClass) */
.c2-bc-0 { --c: #BE185D; } .c2-bc-1 { --c: #0284C7; } .c2-bc-2 { --c: #7C3AED; } .c2-bc-3 { --c: #0D9488; } .c2-bc-4 { --c: #D97706; }
.c2-bc-5 { --c: #C026D3; } .c2-bc-6 { --c: #4D7C0F; } .c2-bc-7 { --c: #2563EB; } .c2-bc-8 { --c: #EA580C; }
.c2-r__meta > .c2-st { flex: none; }
.c2-r__meta > span:not(.c2-st):not(.c2-r__bot):not(.c2-r__dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.c2-back { display: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--hx-text-2); margin-left: -4px; }
.c2-back:hover { background: var(--hx-hover); }
.c2-back svg { width: 18px; height: 18px; }
.c2-dlg, .c2-bleed-wrap, #view.c2-bleed { max-width: 100vw; overflow-x: hidden; }

/* первый вход */
.c2-steps { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--hx-text-2); line-height: 1.6; }
.c2-qr { display: flex; justify-content: center; margin: 4px 0 8px; }
.c2-qr svg { width: 180px; height: 180px; }
.c2-secret { text-align: center; margin-bottom: 12px; }
.c2-secret code { font-family: ui-monospace, Menlo, monospace !important; font-size: 13px; letter-spacing: .04em; user-select: all; }