/* ==========================================================================
   «Свод-новый» (chatSvod2) — полностью новый интерфейс Свод-Чата.
   Живёт рядом со старым разделом (#chatSvodTab), ничего из него не переиспользует:
   все классы в собственном неймспейсе .cs2-*, иконки — Iconsax (без эмодзи).
   Разметку целиком строит chat-svod2.js.
   ========================================================================== */

.cs2 {
    /* палитра раздела: собственные токены поверх глобальной темы CRM */
    --cs2-accent: #6366f1;
    --cs2-accent-soft: rgba(99, 102, 241, .10);
    --cs2-accent-line: rgba(99, 102, 241, .28);
    --cs2-red: #ef4444;
    --cs2-red-soft: rgba(239, 68, 68, .10);
    --cs2-amber: #f59e0b;
    --cs2-amber-soft: rgba(245, 158, 11, .12);
    --cs2-green: #10b981;
    --cs2-green-soft: rgba(16, 185, 129, .12);
    --cs2-slate: #64748b;
    --cs2-slate-soft: rgba(100, 116, 139, .12);
    --cs2-ink: #0f172a;

    --cs2-surface: #ffffff;
    --cs2-surface-2: #f6f7fb;
    --cs2-surface-3: #eef0f6;
    --cs2-line: #e6e8f0;
    --cs2-line-soft: #eff1f6;
    --cs2-text: #16192b;
    --cs2-text-2: #5a6178;
    --cs2-text-3: #8b91a6;
    --cs2-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --cs2-shadow-md: 0 6px 20px rgba(16, 24, 40, .07);
    --cs2-r: 12px;
    --cs2-r-lg: 16px;

    flex: 1;
    min-height: 0;
    display: flex;
    gap: 14px;
    font-size: 13.5px;
    color: var(--cs2-text);
}

body[data-theme="dark"] .cs2 {
    --cs2-accent: #818cf8;
    --cs2-accent-soft: rgba(129, 140, 248, .14);
    --cs2-accent-line: rgba(129, 140, 248, .34);
    --cs2-red: #f87171;
    --cs2-red-soft: rgba(248, 113, 113, .14);
    --cs2-amber: #fbbf24;
    --cs2-amber-soft: rgba(251, 191, 36, .14);
    --cs2-green: #34d399;
    --cs2-green-soft: rgba(52, 211, 153, .14);
    --cs2-slate: #94a3b8;
    --cs2-slate-soft: rgba(148, 163, 184, .14);
    --cs2-ink: #e2e8f0;

    --cs2-surface: #1b2231;
    --cs2-surface-2: #161c28;
    --cs2-surface-3: #232c3d;
    --cs2-line: #2c3547;
    --cs2-line-soft: #242d3d;
    --cs2-text: #e6e9f2;
    --cs2-text-2: #a3abc0;
    --cs2-text-3: #7c8499;
    --cs2-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --cs2-shadow-md: 0 8px 26px rgba(0, 0, 0, .4);
}

.cs2 *, .cs2 *::before, .cs2 *::after { box-sizing: border-box; }
.cs2 svg { flex-shrink: 0; }
.cs2 button { font-family: inherit; font-size: inherit; }
.cs2 .cs2-caret { display: inline-flex; transition: transform .16s ease; }
/* счётчик рядом с заголовком (карточка / группа / тема) */
.cs2 .cs2-count {
    min-width: 22px; height: 20px; padding: 0 7px;
    border-radius: 10px; background: var(--cs2-surface-3); color: var(--cs2-text-2);
    font-size: 11px; font-weight: 700; display: inline-grid; place-items: center;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------- рельс */
.cs2-rail {
    width: 234px;
    flex-shrink: 0;
    background: var(--cs2-surface);
    border: 1px solid var(--cs2-line);
    border-radius: var(--cs2-r-lg);
    box-shadow: var(--cs2-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cs2-rail-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--cs2-line-soft);
}
.cs2-logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--cs2-accent), #a855f7);
    color: #fff;
    flex-shrink: 0;
}
.cs2-logo-t { font-weight: 700; font-size: 14px; letter-spacing: -.01em; line-height: 1.2; }
.cs2-logo-s { font-size: 11px; color: var(--cs2-text-3); line-height: 1.3; }

.cs2-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }

.cs2-navbtn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: 10px;
    cursor: pointer;
    color: var(--cs2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    transition: background .14s ease, color .14s ease;
}
.cs2-navbtn:hover { background: var(--cs2-surface-2); color: var(--cs2-text); }
.cs2-navbtn.active { background: var(--cs2-accent-soft); color: var(--cs2-accent); font-weight: 600; }
.cs2-navbtn.active::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 0 3px 3px 0;
    background: var(--cs2-accent);
}
.cs2-navbtn .cs2-navtx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-navbadge {
    min-width: 20px; height: 19px; padding: 0 6px;
    border-radius: 9px;
    background: var(--cs2-surface-3);
    color: var(--cs2-text-2);
    font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
}
.cs2-navbtn.active .cs2-navbadge { background: var(--cs2-accent); color: #fff; }
.cs2-navbadge.hot { background: var(--cs2-red); color: #fff; }
.cs2-navbadge.warm { background: var(--cs2-amber); color: #fff; }

.cs2-rail-foot {
    border-top: 1px solid var(--cs2-line-soft);
    padding: 10px 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11.5px; color: var(--cs2-text-3);
}
.cs2-rail-foot .cs2-iconbtn { color: var(--cs2-text-2); }

/* ----------------------------------------------------------------- главная */
.cs2-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--cs2-surface);
    border: 1px solid var(--cs2-line);
    border-radius: var(--cs2-r-lg);
    box-shadow: var(--cs2-shadow);
    overflow: hidden;
}

.cs2-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cs2-line-soft);
    flex-wrap: wrap;
    flex-shrink: 0;
    background: var(--cs2-surface);
}
.cs2-head-l { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cs2-head-l h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--cs2-text); }
.cs2-head-hint { font-size: 12px; color: var(--cs2-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs2-head-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs2-ctl, .cs2-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* поиск — компактный, встроен в шапку (отдельная широкая строка убрана) */
.cs2-search {
    display: flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 10px;
    border: 1px solid var(--cs2-line);
    border-radius: 10px;
    background: var(--cs2-surface-2);
    color: var(--cs2-text-3);
    width: 220px;
    transition: width .18s ease, border-color .14s ease, background .14s ease;
}
.cs2-search:focus-within { width: 290px; border-color: var(--cs2-accent-line); background: var(--cs2-surface); }
.cs2-search input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: none;
    font: inherit; font-size: 13px;
    color: var(--cs2-text);
}
.cs2-search input::placeholder { color: var(--cs2-text-3); }
.cs2-search-x { border: none; background: none; padding: 0; cursor: pointer; color: var(--cs2-text-3); display: none; }
.cs2-search.has-q .cs2-search-x { display: block; }
.cs2-search-x:hover { color: var(--cs2-red); }

/* тело раздела */
.cs2-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    background: var(--cs2-surface-2);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* блоки раздела — колонка flex; без этого длинный список сжимается и «наезжает» сам на себя */
.cs2-body > * { flex-shrink: 0; }

/* ---------------------------------------------------------------- кнопки */
.cs2-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--cs2-line);
    background: var(--cs2-surface);
    color: var(--cs2-text);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
.cs2-btn:hover { background: var(--cs2-surface-3); border-color: var(--cs2-accent-line); }
.cs2-btn:active { transform: translateY(1px); }
.cs2-btn-sm { height: 28px; padding: 0 9px; font-size: 12px; border-radius: 8px; }
.cs2-btn-primary { background: var(--cs2-accent); border-color: var(--cs2-accent); color: #fff; }
.cs2-btn-primary:hover { background: var(--cs2-accent); filter: brightness(1.08); border-color: var(--cs2-accent); }
.cs2-btn-ok { color: var(--cs2-green); border-color: rgba(16, 185, 129, .35); background: var(--cs2-green-soft); }
.cs2-btn-ok:hover { background: var(--cs2-green); color: #fff; border-color: var(--cs2-green); }
.cs2-btn-danger { color: var(--cs2-red); border-color: rgba(239, 68, 68, .3); background: var(--cs2-red-soft); }
.cs2-btn-danger:hover { background: var(--cs2-red); color: #fff; border-color: var(--cs2-red); }
.cs2-btn-ghost { background: none; border-color: transparent; color: var(--cs2-text-2); }
.cs2-btn-ghost:hover { background: var(--cs2-surface-3); border-color: transparent; color: var(--cs2-text); }
.cs2-btn.is-done { background: var(--cs2-accent-soft); border-color: var(--cs2-accent-line); color: var(--cs2-accent); }
.cs2-btn[disabled] { opacity: .5; pointer-events: none; }

.cs2-iconbtn {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    border-radius: 9px;
    border: 1px solid transparent;
    background: none;
    color: var(--cs2-text-2);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.cs2-iconbtn:hover { background: var(--cs2-surface-3); color: var(--cs2-text); }
.cs2-iconbtn.active { background: var(--cs2-accent-soft); color: var(--cs2-accent); }

/* сегментированный переключатель */
.cs2-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--cs2-surface-2);
    border: 1px solid var(--cs2-line);
    border-radius: 11px;
}
.cs2-seg button {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px;
    border: none; background: none;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600;
    color: var(--cs2-text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s ease, color .14s ease;
}
.cs2-seg button:hover { color: var(--cs2-text); }
.cs2-seg button.active { background: var(--cs2-surface); color: var(--cs2-accent); box-shadow: var(--cs2-shadow); }
body[data-theme="dark"] .cs2-seg button.active { background: var(--cs2-surface-3); }
.cs2-seg .cs2-segn { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }

/* навигация по дням */
.cs2-daynav { display: inline-flex; align-items: center; gap: 4px; }
.cs2-daynav .cs2-date {
    height: 34px; padding: 0 10px;
    border: 1px solid var(--cs2-line);
    border-radius: 10px;
    background: var(--cs2-surface);
    color: var(--cs2-text);
    font: inherit; font-size: 12.5px; font-weight: 600;
    width: 128px;
}
.cs2-daynav .cs2-date.flatpickr-input + .form-control,
.cs2-daynav .flatpickr-input.form-control { width: 128px; }
.cs2-daylabel { font-size: 12px; color: var(--cs2-text-3); margin-left: 4px; white-space: nowrap; }

/* ------------------------------------------------------------------ KPI */
.cs2-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 10px;
}
.cs2-kpi {
    position: relative;
    background: var(--cs2-surface);
    border: 1px solid var(--cs2-line);
    border-radius: var(--cs2-r);
    padding: 11px 13px;
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden;
}
.cs2-kpi.clickable { cursor: pointer; transition: border-color .14s ease, transform .12s ease, box-shadow .14s ease; }
.cs2-kpi.clickable:hover { border-color: var(--cs2-accent-line); transform: translateY(-1px); box-shadow: var(--cs2-shadow-md); }
.cs2-kpi.active { border-color: var(--cs2-accent); background: var(--cs2-accent-soft); }
.cs2-kpi-t { font-size: 11.5px; color: var(--cs2-text-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cs2-kpi-t svg { width: 14px; height: 14px; }
.cs2-kpi-v { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cs2-kpi-s { font-size: 11.5px; color: var(--cs2-text-3); line-height: 1.35; }
.cs2-kpi.tone-red .cs2-kpi-v, .cs2-kpi.tone-red .cs2-kpi-t { color: var(--cs2-red); }
.cs2-kpi.tone-amber .cs2-kpi-v, .cs2-kpi.tone-amber .cs2-kpi-t { color: var(--cs2-amber); }
.cs2-kpi.tone-green .cs2-kpi-v, .cs2-kpi.tone-green .cs2-kpi-t { color: var(--cs2-green); }
.cs2-kpi.tone-slate .cs2-kpi-v, .cs2-kpi.tone-slate .cs2-kpi-t { color: var(--cs2-slate); }
.cs2-kpi.tone-ink .cs2-kpi-v, .cs2-kpi.tone-ink .cs2-kpi-t { color: var(--cs2-ink); }

/* --------------------------------------------------------------- карточки */
.cs2-card {
    background: var(--cs2-surface);
    border: 1px solid var(--cs2-line);
    border-radius: var(--cs2-r);
    overflow: hidden;
}
.cs2-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--cs2-line-soft);
    font-size: 13px; font-weight: 700;
}
.cs2-card-body { padding: 12px 14px; }
.cs2-card-body.flush { padding: 0; }

.cs2-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--cs2-text-3);
    margin: 2px 0 -4px;
}

/* пустое состояние */
.cs2-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    padding: 44px 20px;
    text-align: center;
    color: var(--cs2-text-3);
    font-size: 13px;
}
.cs2-empty .cs2-empty-ic {
    width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--cs2-surface-3);
    color: var(--cs2-text-3);
}
.cs2-empty b { color: var(--cs2-text-2); font-size: 13.5px; font-weight: 600; }
.cs2-empty .cs2-empty-sub { font-size: 12px; max-width: 380px; line-height: 1.5; }
.cs2-empty.tone-green .cs2-empty-ic { background: var(--cs2-green-soft); color: var(--cs2-green); }
/* внутри группы светофора «Пусто» не должно занимать пол-экрана */
.cs2-group-body .cs2-empty, .cs2-mclients .cs2-empty { padding: 16px; }
.cs2-group-body .cs2-empty .cs2-empty-ic, .cs2-mclients .cs2-empty .cs2-empty-ic { width: 32px; height: 32px; border-radius: 10px; }

/* скелетон загрузки */
.cs2-skeleton { display: flex; flex-direction: column; gap: 10px; }
.cs2-sk {
    height: 62px; border-radius: var(--cs2-r);
    background: linear-gradient(90deg, var(--cs2-surface) 25%, var(--cs2-surface-3) 37%, var(--cs2-surface) 63%);
    background-size: 400% 100%;
    animation: cs2shimmer 1.3s ease infinite;
    border: 1px solid var(--cs2-line);
}
@keyframes cs2shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* чипы */
.cs2-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 21px; padding: 0 8px;
    border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    background: var(--cs2-surface-3); color: var(--cs2-text-2);
    white-space: nowrap;
}
.cs2-chip svg { width: 13px; height: 13px; }
.cs2-chip.red { background: var(--cs2-red-soft); color: var(--cs2-red); }
.cs2-chip.amber { background: var(--cs2-amber-soft); color: var(--cs2-amber); }
.cs2-chip.green { background: var(--cs2-green-soft); color: var(--cs2-green); }
.cs2-chip.accent { background: var(--cs2-accent-soft); color: var(--cs2-accent); }
.cs2-chip.slate { background: var(--cs2-slate-soft); color: var(--cs2-slate); }

/* точка-светофор */
.cs2-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.cs2-dot.black { background: #1f2937; box-shadow: 0 0 0 3px rgba(31, 41, 55, .13); }
body[data-theme="dark"] .cs2-dot.black { background: #cbd5e1; box-shadow: 0 0 0 3px rgba(203, 213, 225, .16); }
.cs2-dot.red { background: var(--cs2-red); box-shadow: 0 0 0 3px var(--cs2-red-soft); }
.cs2-dot.yellow { background: var(--cs2-amber); box-shadow: 0 0 0 3px var(--cs2-amber-soft); }
.cs2-dot.green { background: var(--cs2-green); box-shadow: 0 0 0 3px var(--cs2-green-soft); }
.cs2-dot.gray { background: var(--cs2-slate); box-shadow: 0 0 0 3px var(--cs2-slate-soft); }
.cs2-dot.none { background: var(--cs2-line); }

/* ================================================================ КОНТРОЛЬ */
.cs2-hero {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px;
    border-radius: var(--cs2-r);
    background: linear-gradient(135deg, var(--cs2-accent-soft), transparent 70%), var(--cs2-surface);
    border: 1px solid var(--cs2-accent-line);
}
.cs2-hero-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--cs2-accent); color: #fff; }
.cs2-hero-tx { font-size: 13px; color: var(--cs2-text-2); line-height: 1.45; }
.cs2-hero-tx b { color: var(--cs2-text); font-weight: 700; }

.cs2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.cs2-tile {
    position: relative;
    display: flex; align-items: center; gap: 13px;
    padding: 14px 15px;
    border-radius: var(--cs2-r);
    border: 1px solid var(--cs2-line);
    background: var(--cs2-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.cs2-tile:hover { transform: translateY(-1px); box-shadow: var(--cs2-shadow-md); }
.cs2-tile-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.cs2-tile-tx { flex: 1; min-width: 0; }
.cs2-tile-n { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--cs2-text); }
.cs2-tile-t { display: block; font-size: 13px; font-weight: 700; margin-top: 1px; color: var(--cs2-text); }
.cs2-tile-s { display: block; font-size: 11.5px; color: var(--cs2-text-3); margin-top: 2px; line-height: 1.4; font-weight: 500; }
.cs2-tile-go { color: var(--cs2-text-3); transition: transform .14s ease; }
.cs2-tile:hover .cs2-tile-go { transform: translateX(2px); color: var(--cs2-accent); }
.cs2-tile.urgent .cs2-tile-ic { background: var(--cs2-red-soft); color: var(--cs2-red); }
.cs2-tile.urgent .cs2-tile-n { color: var(--cs2-red); }
.cs2-tile.urgent.active { border-color: var(--cs2-red); box-shadow: 0 0 0 3px var(--cs2-red-soft); }
.cs2-tile.working .cs2-tile-ic { background: var(--cs2-amber-soft); color: var(--cs2-amber); }
.cs2-tile.working .cs2-tile-n { color: var(--cs2-amber); }
.cs2-tile.working.active { border-color: var(--cs2-amber); box-shadow: 0 0 0 3px var(--cs2-amber-soft); }
.cs2-tile.calm .cs2-tile-ic { background: var(--cs2-green-soft); color: var(--cs2-green); }
.cs2-tile.calm .cs2-tile-n { color: var(--cs2-green); }
.cs2-tile.calm.active { border-color: var(--cs2-green); box-shadow: 0 0 0 3px var(--cs2-green-soft); }

/* строка клиента в «Контроле» */
.cs2-rows { display: flex; flex-direction: column; }
.cs2-row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--cs2-line-soft);
    transition: background .12s ease;
}
.cs2-row:last-child { border-bottom: none; }
.cs2-row:hover { background: var(--cs2-surface-2); }
.cs2-row-main { flex: 1; min-width: 0; }
.cs2-row-name {
    font-weight: 600; font-size: 13.5px; color: var(--cs2-text);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
}
.cs2-row-name:hover { color: var(--cs2-accent); text-decoration: underline; text-underline-offset: 2px; }
.cs2-row-why { font-size: 12px; color: var(--cs2-text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cs2-row-age { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--cs2-surface-3); color: var(--cs2-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs2-row-age.red { background: var(--cs2-red-soft); color: var(--cs2-red); }
.cs2-row-age.amber { background: var(--cs2-amber-soft); color: var(--cs2-amber); }
.cs2-row-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* карточка чата в подробном светофоре */
.cs2-lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; padding: 12px 14px; }
.cs2-lcard {
    border: 1px solid var(--cs2-line);
    border-left: 3px solid var(--cs2-slate);
    border-radius: var(--cs2-r);
    background: var(--cs2-surface);
    padding: 11px 13px;
    display: flex; flex-direction: column; gap: 8px;
}
.cs2-lcard.black { border-left-color: #1f2937; }
body[data-theme="dark"] .cs2-lcard.black { border-left-color: #cbd5e1; }
.cs2-lcard.red { border-left-color: var(--cs2-red); }
.cs2-lcard.yellow { border-left-color: var(--cs2-amber); }
.cs2-lcard.green { border-left-color: var(--cs2-green); }
.cs2-lcard-head { display: flex; align-items: center; gap: 8px; }
.cs2-lcard-head .cs2-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cs2-lcard-reason { font-size: 12px; color: var(--cs2-text-2); line-height: 1.45; }
.cs2-lcard-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* вопрос внутри карточки */
.cs2-q {
    background: var(--cs2-surface-2);
    border: 1px solid var(--cs2-line-soft);
    border-radius: 10px;
    padding: 9px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.cs2-q-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cs2-q-topic { font-weight: 600; font-size: 12.5px; }
.cs2-q-meta { font-size: 11.5px; color: var(--cs2-text-3); }
.cs2-q-acts { display: flex; gap: 5px; flex-wrap: wrap; }

/* группы подробного светофора */
.cs2-group { border: 1px solid var(--cs2-line); border-radius: var(--cs2-r); background: var(--cs2-surface); overflow: hidden; }
.cs2-group-head {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px; font-weight: 700;
    transition: background .12s ease;
}
.cs2-group-head:hover { background: var(--cs2-surface-2); }
.cs2-group-head .cs2-group-t { flex: 1; min-width: 0; }
.cs2-group-head .cs2-group-sub { font-weight: 500; font-size: 11.5px; color: var(--cs2-text-3); display: block; margin-top: 1px; }
.cs2-group-head .cs2-caret { color: var(--cs2-text-3); transition: transform .16s ease; }
.cs2-group.open .cs2-caret { transform: rotate(180deg); }
.cs2-group-body { border-top: 1px solid var(--cs2-line-soft); }
.cs2-group-empty { display: flex; align-items: center; gap: 7px; padding: 11px 14px; font-size: 12px; color: var(--cs2-text-3); }

/* журнал проблем */
.cs2-prob {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--cs2-line-soft);
}
.cs2-prob:last-child { border-bottom: none; }
.cs2-prob.reviewed { opacity: .6; }
.cs2-prob-main { flex: 1; min-width: 0; }
.cs2-prob-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs2-prob-when { font-size: 11.5px; color: var(--cs2-text-3); }
.cs2-prob-reason { font-size: 12px; color: var(--cs2-text-2); margin-top: 3px; line-height: 1.45; }
.cs2-prob-note { font-size: 11.5px; color: var(--cs2-green); margin-top: 4px; display: flex; align-items: center; gap: 5px; }

.cs2-ctrl-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1240px) { .cs2-ctrl-split { grid-template-columns: 1fr; } }
.cs2-groups { display: flex; flex-direction: column; gap: 10px; }

/* ==================================================================== ЛЕНТА */
.cs2-daysep {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--cs2-text-3);
    margin: 6px 0 2px;
}
.cs2-daysep::after { content: ''; flex: 1; height: 1px; background: var(--cs2-line); }

.cs2-feed { display: flex; flex-direction: column; gap: 8px; }
.cs2-fitem {
    display: flex; gap: 11px;
    padding: 11px 13px;
    background: var(--cs2-surface);
    border: 1px solid var(--cs2-line);
    border-radius: var(--cs2-r);
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.cs2-fitem:hover { border-color: var(--cs2-accent-line); box-shadow: var(--cs2-shadow-md); transform: translateX(2px); }
.cs2-fic {
    width: 32px; height: 32px; border-radius: 10px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--cs2-accent-soft); color: var(--cs2-accent);
}
.cs2-fitem.reminder .cs2-fic { background: var(--cs2-amber-soft); color: var(--cs2-amber); }
.cs2-fitem.suggestion .cs2-fic { background: var(--cs2-green-soft); color: var(--cs2-green); }
.cs2-fitem.client .cs2-fic { background: var(--cs2-slate-soft); color: var(--cs2-slate); }
.cs2-fbody { flex: 1; min-width: 0; }
.cs2-fline { display: flex; align-items: baseline; gap: 8px; }
.cs2-fname { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-ftime { margin-left: auto; font-size: 11.5px; color: var(--cs2-text-3); white-space: nowrap; flex-shrink: 0; }
.cs2-ftext { font-size: 13px; color: var(--cs2-text-2); line-height: 1.5; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.cs2-fchips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.cs2-facts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* =================================================================== КЕЙСЫ */
.cs2-case { background: var(--cs2-surface); border: 1px solid var(--cs2-line); border-radius: var(--cs2-r); overflow: hidden; }
.cs2-case + .cs2-case { margin-top: 8px; }
.cs2-case-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer; transition: background .12s ease; }
.cs2-case-head:hover { background: var(--cs2-surface-2); }
.cs2-case-main { flex: 1; min-width: 0; }
.cs2-case-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs2-case-name { font-weight: 700; font-size: 13.5px; }
.cs2-case-meta { font-size: 11.5px; color: var(--cs2-text-3); }
.cs2-case-prev { font-size: 12px; color: var(--cs2-text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-case-topics { display: flex; gap: 5px; flex-wrap: wrap; max-width: 40%; justify-content: flex-end; }
.cs2-case-body { border-top: 1px solid var(--cs2-line-soft); padding: 10px 12px; background: var(--cs2-surface-2); display: flex; flex-direction: column; gap: 8px; }

/* =============================================================== МЕНЕДЖЕРЫ */
.cs2-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)); gap: 12px; }
@media (max-width: 900px) { .cs2-mgrid { grid-template-columns: 1fr; } }
.cs2-mcard { background: var(--cs2-surface); border: 1px solid var(--cs2-line); border-radius: var(--cs2-r); overflow: hidden; display: flex; flex-direction: column; }
/* раскрытая карточка занимает всю ширину — переписка и вопросы читаются нормально */
.cs2-mcard.expanded { grid-column: 1 / -1; }
.cs2-mcard.expanded .cs2-msg { max-width: 62%; }
.cs2-mhead { display: flex; align-items: center; gap: 11px; padding: 13px 14px 11px; }
.cs2-ava { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; letter-spacing: .02em; }
.cs2-mwho { flex: 1; min-width: 0; }
.cs2-mname { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-mrole { font-size: 11.5px; color: var(--cs2-text-3); }
.cs2-monline { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cs2-mstatus { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; }
.cs2-mstatus.on { background: var(--cs2-green-soft); color: var(--cs2-green); }
.cs2-mstatus.idle { background: var(--cs2-amber-soft); color: var(--cs2-amber); }
.cs2-mstatus.off { background: var(--cs2-slate-soft); color: var(--cs2-slate); }
.cs2-mstatus.none { background: var(--cs2-surface-3); color: var(--cs2-text-3); }
.cs2-mstatus .cs2-dot { width: 7px; height: 7px; box-shadow: none; }
.cs2-mspan { font-size: 11px; color: var(--cs2-text-3); font-variant-numeric: tabular-nums; }

.cs2-mstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--cs2-line-soft); border-top: 1px solid var(--cs2-line-soft); border-bottom: 1px solid var(--cs2-line-soft); }
.cs2-mstat { background: var(--cs2-surface); padding: 9px 8px; text-align: center; }
.cs2-mstat-v { font-size: 15px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cs2-mstat-l { font-size: 10.5px; color: var(--cs2-text-3); margin-top: 1px; }
.cs2-mstat-v .ok { color: var(--cs2-green); }
.cs2-mstat-v .wait { color: var(--cs2-amber); }
.cs2-mstat-v .dism { color: var(--cs2-text-3); }

.cs2-mnote { display: flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 12px; }
.cs2-mnote.warn { background: var(--cs2-red-soft); color: var(--cs2-red); }
.cs2-mnote.score { color: var(--cs2-text-2); border-top: 1px solid var(--cs2-line-soft); }

.cs2-hours { display: flex; align-items: flex-end; gap: 2px; height: 34px; padding: 8px 14px 0; }
.cs2-hcol { flex: 1; height: 26px; display: flex; align-items: flex-end; }
.cs2-hfill { width: 100%; border-radius: 2px 2px 0 0; background: var(--cs2-accent); opacity: .75; }
.cs2-hfill.zero { background: var(--cs2-line); opacity: 1; }
.cs2-haxis { display: flex; justify-content: space-between; padding: 2px 14px 8px; font-size: 10px; color: var(--cs2-text-3); }

.cs2-mexpand { margin: 0; border: none; border-top: 1px solid var(--cs2-line-soft); background: none; padding: 9px; width: 100%; cursor: pointer; color: var(--cs2-accent); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cs2-mexpand:hover { background: var(--cs2-accent-soft); }
.cs2-mclients { border-top: 1px solid var(--cs2-line-soft); background: var(--cs2-surface-2); }
.cs2-mclient { border-bottom: 1px solid var(--cs2-line-soft); }
.cs2-mclient:last-child { border-bottom: none; }
.cs2-mclient-row { display: flex; align-items: center; gap: 9px; padding: 9px 14px; cursor: pointer; }
.cs2-mclient-row:hover { background: var(--cs2-surface-3); }
.cs2-mclient-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-mclient-num { font-size: 11.5px; color: var(--cs2-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs2-mclient-detail { padding: 10px 14px 12px; background: var(--cs2-surface); display: flex; flex-direction: column; gap: 10px; }
.cs2-mqs { background: var(--cs2-surface-2); border: 1px solid var(--cs2-line-soft); border-radius: 10px; padding: 9px 11px; }
.cs2-mqs .cs2-rv-cell-t { margin-bottom: 6px; }
.cs2-mq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; border-top: 1px dashed var(--cs2-line); }
.cs2-mq:first-of-type { border-top: none; }
.cs2-mq-topic { flex: 1; min-width: 140px; font-size: 12.5px; font-weight: 600; }
.cs2-mq-flags { display: flex; gap: 5px; flex-wrap: wrap; }

.cs2-thread { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.cs2-msg { max-width: 82%; padding: 7px 10px; border-radius: 11px; font-size: 12.5px; line-height: 1.45; }
.cs2-msg.in { align-self: flex-start; background: var(--cs2-surface-3); border-bottom-left-radius: 4px; }
.cs2-msg.out { align-self: flex-end; background: var(--cs2-accent-soft); border-bottom-right-radius: 4px; }
.cs2-msg-who { font-size: 10.5px; font-weight: 700; color: var(--cs2-accent); margin-bottom: 2px; }
.cs2-msg-media { font-size: 11.5px; color: var(--cs2-text-3); display: flex; align-items: center; gap: 5px; }
.cs2-msg-time { font-size: 10px; color: var(--cs2-text-3); text-align: right; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* =================================================================== ПО ДНЯМ */
.cs2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1050px) { .cs2-cols { grid-template-columns: 1fr; } }
.cs2-collist { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.cs2-dcard {
    background: var(--cs2-surface); border: 1px solid var(--cs2-line); border-radius: var(--cs2-r);
    padding: 11px 13px; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.cs2-dcard:hover { border-color: var(--cs2-accent-line); box-shadow: var(--cs2-shadow-md); }
.cs2-dcard.noreply { border-left: 3px solid var(--cs2-red); }
.cs2-dcard-head { display: flex; align-items: center; gap: 7px; }
.cs2-dcard-name { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-dcard-time { font-size: 11.5px; color: var(--cs2-text-3); font-variant-numeric: tabular-nums; }
.cs2-dcard-topic { font-size: 12.5px; color: var(--cs2-text); line-height: 1.45; }
.cs2-dcard-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs2-dcard-res { font-size: 12px; color: var(--cs2-text-2); background: var(--cs2-surface-2); border-radius: 8px; padding: 7px 9px; line-height: 1.45; }
.cs2-dcard-coach { font-size: 12px; color: var(--cs2-accent); background: var(--cs2-accent-soft); border-radius: 8px; padding: 7px 9px; line-height: 1.45; display: flex; gap: 6px; }
.cs2-dcard-note { font-size: 12px; color: var(--cs2-green); display: flex; gap: 6px; align-items: flex-start; }

.cs2-mstrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; }
.cs2-mstrip-card { min-width: 140px; background: var(--cs2-surface); border: 1px solid var(--cs2-line); border-radius: var(--cs2-r); padding: 9px 11px; flex-shrink: 0; }
.cs2-mstrip-n { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-mstrip-v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.cs2-mstrip-s { font-size: 11px; color: var(--cs2-text-3); }

/* ================================================================ ОБРАЩЕНИЯ */
.cs2-table-wrap { overflow-x: auto; }
.cs2-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cs2-table th {
    text-align: left; padding: 9px 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cs2-text-3);
    background: var(--cs2-surface-2);
    border-bottom: 1px solid var(--cs2-line);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.cs2-table td { padding: 10px 12px; border-bottom: 1px solid var(--cs2-line-soft); vertical-align: middle; }
.cs2-table tbody tr { cursor: pointer; transition: background .12s ease; }
.cs2-table tbody tr:hover { background: var(--cs2-surface-2); }
.cs2-table tbody tr:last-child td { border-bottom: none; }
.cs2-td-name { font-weight: 600; }
.cs2-td-muted { color: var(--cs2-text-3); }
.cs2-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================ БАЗА ОТВЕТОВ */
.cs2-banner {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px;
    border-radius: var(--cs2-r);
    background: var(--cs2-amber-soft);
    border: 1px solid rgba(245, 158, 11, .3);
    color: var(--cs2-text-2);
    font-size: 12.5px;
    line-height: 1.45;
}
.cs2-banner b { color: var(--cs2-text); }
.cs2-banner .cs2-banner-ic { color: var(--cs2-amber); }

.cs2-scores { display: flex; flex-direction: column; }
.cs2-score-row { display: grid; grid-template-columns: 88px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--cs2-line-soft); font-size: 12.5px; }
.cs2-score-row:last-child { border-bottom: none; }
.cs2-score-day { color: var(--cs2-text-3); font-variant-numeric: tabular-nums; }
.cs2-score-mgr { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs2-score-v { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cs2-topic-group { display: flex; flex-direction: column; gap: 10px; }
.cs2-topic-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700;
    color: var(--cs2-text-2);
    padding: 4px 0;
}
.cs2-review { background: var(--cs2-surface); border: 1px solid var(--cs2-line); border-radius: var(--cs2-r); overflow: hidden; }
.cs2-review + .cs2-review { margin-top: 8px; }
.cs2-rv-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cs2-line-soft); flex-wrap: wrap; }
.cs2-rv-score { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 7px; background: var(--cs2-surface-3); color: var(--cs2-text-2); font-variant-numeric: tabular-nums; }
.cs2-rv-topic { font-weight: 700; font-size: 13px; }
.cs2-rv-meta { margin-left: auto; font-size: 11.5px; color: var(--cs2-text-3); }
.cs2-rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--cs2-line-soft); }
.cs2-rv-cell { background: var(--cs2-surface); padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; }
.cs2-rv-cell-t { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cs2-text-3); display: flex; align-items: center; gap: 5px; }
.cs2-rv-cell-x { font-size: 12.5px; line-height: 1.5; color: var(--cs2-text); white-space: pre-wrap; word-break: break-word; }
.cs2-rv-cell-x.muted { color: var(--cs2-text-3); font-style: italic; }
.cs2-rv-cell.pinned { background: var(--cs2-green-soft); }
.cs2-rv-pin-acts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.cs2-rv-law { padding: 11px 13px; border-top: 1px solid var(--cs2-line-soft); background: var(--cs2-surface-2); font-size: 12.5px; line-height: 1.5; }
.cs2-rv-law-refs { font-size: 11.5px; color: var(--cs2-text-3); margin-top: 5px; }
.cs2-rv-remarks { padding: 10px 13px; border-top: 1px solid var(--cs2-line-soft); font-size: 12.5px; color: var(--cs2-text-2); display: flex; gap: 7px; }
.cs2-rv-committee { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-top: 1px solid var(--cs2-line-soft); flex-wrap: wrap; background: var(--cs2-surface-2); }
.cs2-rv-committee-note { font-size: 12px; color: var(--cs2-text-2); font-style: italic; }
.cs2-law-ok { color: var(--cs2-green); font-weight: 700; }
.cs2-law-doubt { color: var(--cs2-amber); font-weight: 700; }
.cs2-law-bad { color: var(--cs2-red); font-weight: 700; }

/* --------------------------------------------------------------- адаптив */
@media (max-width: 1080px) {
    .cs2 { flex-direction: column; gap: 10px; }
    .cs2-rail { width: 100%; flex-direction: row; align-items: center; overflow: visible; }
    .cs2-rail-top, .cs2-rail-foot { display: none; }
    .cs2-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px; gap: 4px; }
    .cs2-navbtn { width: auto; flex-shrink: 0; }
    .cs2-navbtn.active::before { display: none; }
}
@media (max-width: 720px) {
    .cs2-head { padding: 9px 11px; }
    .cs2-head-r { width: 100%; margin-left: 0; }
    .cs2-search { width: 100%; }
    .cs2-search:focus-within { width: 100%; }
    .cs2-body { padding: 11px; }
    .cs2-mstats { grid-template-columns: repeat(2, 1fr); }
}