/* ===== Mobile adaptation: risks table cards & sticky first column =====
   Реестр рисков на мобильных превращается в карточки: каждая строка — это
   блок с названием риска сверху и лейбл-значение парами ниже. На планшетах
   (480–960px) включается горизонтальный скролл со sticky первой колонкой. */

/* Планшет: горизонтальный скролл со sticky колонкой «Риск» */
@media (min-width: 481px) and (max-width: 960px) {
    .risks-v2-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .risks-v2-table { min-width: 900px; }
    .risks-v2-table thead th:nth-child(2),
    .risks-v2-table tbody td:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--color-surface);
        box-shadow: 2px 0 4px rgba(15,23,42,0.04);
    }
    .risks-v2-table thead th:nth-child(2) { background: var(--color-gray-50); }
    .plan-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .plan-table thead th:nth-child(2),
    .plan-table tbody td:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--color-surface);
        box-shadow: 2px 0 4px rgba(15,23,42,0.04);
    }
}

/* Мобильный (≤480px): карточный вид для рисков */
@media (max-width: 480px) {
    .risks-v2-table-wrap { overflow: visible; }
    .risks-v2-table,
    .risks-v2-table tbody,
    .risks-v2-table tr { display: block; width: 100%; }
    .risks-v2-table thead { display: none; }

    .risks-v2-table tbody tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .risks-v2-table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 6px 0 !important;
        border: none !important;
        font-size: 12px;
    }
    .risks-v2-table tbody tr td::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-weight: 600;
        flex-shrink: 0;
    }
    /* Название риска — вверху, полноширинно, без лейбла */
    .risks-v2-table tbody tr td:nth-child(2) {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text);
        padding-bottom: 10px !important;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--color-gray-100) !important;
    }
    .risks-v2-table tbody tr td:nth-child(2)::before { display: none; }
    /* № — компактный бейдж в левом верхнем углу карточки */
    .risks-v2-table tbody tr td:nth-child(1) {
        display: inline-block;
        position: absolute;
        top: 10px;
        left: 12px;
        padding: 0 !important;
        font-size: 10px;
    }
    .risks-v2-table tbody tr td:nth-child(1)::before { display: none; }
    .risks-v2-table tbody tr td:nth-child(1) .risk-v2-id {
        background: var(--color-gray-100);
        color: var(--color-text-secondary);
        padding: 2px 6px;
        border-radius: var(--radius-pill);
        font-size: 10px;
        font-weight: 700;
    }
    /* Смещаем заголовок вправо, чтобы бейдж не наезжал */
    .risks-v2-table tbody tr td:nth-child(2) { padding-left: 60px !important; }
    /* Кнопка-действие — в правом верхнем углу */
    .risks-v2-table tbody tr td:last-child {
        position: absolute;
        top: 10px;
        right: 12px;
        padding: 0 !important;
    }
    .risks-v2-table tbody tr td:last-child::before { display: none; }
    .risks-v2-table tbody tr { position: relative; }
}

/* ===== Mind Map: action bar для создания/редактирования узлов =====
   Десктопные хоткеи Tab/Enter/F2 на мобильном не работают, а long-press
   по узлу открывает нативное меню iOS вместо контекстного. Эти кнопки —
   единственный способ создавать/править узлы на телефоне. */
.mind-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.mind-action-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
}
.mind-action-bar.has-selection .mind-action-hint { display: none; }

.mind-action-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mind-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.mind-action-btn:hover { background: var(--color-primary-25); color: var(--color-primary); }
.mind-action-btn:active { transform: translateY(1px); }
.mind-action-btn--danger { color: var(--color-danger-600); }
.mind-action-btn--danger:hover { background: var(--color-danger-50); color: var(--color-danger-700); }
.mind-action-icon { font-size: 14px; line-height: 1; font-weight: 700; }

/* Mind map container: touch-friendly */
.mindmap-frame-wrap { overflow: hidden; background: var(--color-bg-tint); }

/* Варианты schema-v2-btn-save — перенесли из inline-стилей */
.schema-v2-btn-secondary { background: #64748b !important; }
.schema-v2-btn-secondary:hover { background: #475569 !important; }
.schema-v2-btn-danger { background: var(--color-danger-600) !important; }
.schema-v2-btn-danger:hover { background: var(--color-danger-700) !important; }

@media (max-width: 640px) {
    /* На узком экране: только иконки, без подписей */
    .mind-action-label { display: none; }
    .mind-action-btn { padding: 9px 11px; }
    .mind-action-icon { font-size: 16px; }
    .mind-action-bar {
        padding: 6px 10px;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 5;
    }
    .mind-action-hint { font-size: 11px; }
}

/* ===== Унифицированные размеры toolbar-кнопок =====
   Все кнопки в тулбарах (риски, дорожная карта) приводим к единому размеру:
   padding 7/14, font 12, radius md. Визуальная разница между primary и
   secondary остаётся — только через цвет, не через размер. */
.risks-v2-btn-add,
.risks-v2-btn-sort,
.toolbar .btn-toolbar-add,
.toolbar .btn-add-phase,
.toolbar .btn-expand,
.toolbar .btn-collapse {
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    line-height: 1.25 !important;
    height: auto;
}

/* Убираем рамки у всех toolbar-кнопок — оставляем только фоновый цвет */
.risks-v2-btn-add,
.risks-v2-btn-sort,
.toolbar .btn-toolbar-add,
.toolbar .btn-add-phase,
.toolbar .btn-expand,
.toolbar .btn-collapse {
    border: none !important;
    box-shadow: none !important;
}

/* Primary остаются с заливкой */
.toolbar .btn-add-phase {
    background: var(--color-primary) !important;
}
.toolbar .btn-add-phase:hover {
    background: var(--color-primary-hover) !important;
}
.risks-v2-btn-add { gap: 4px !important; }

/* Secondary (sort, expand, collapse): фон чуть затемнили — чтобы были
   различимы без рамки. Акцент — цвет текста. */
.risks-v2-btn-sort {
    background: var(--color-gray-100) !important;
    color: var(--color-text-strong) !important;
}
.risks-v2-btn-sort:hover {
    background: var(--color-primary-25) !important;
    color: var(--color-primary) !important;
}

@media (max-width: 640px) {
    .risks-v2-btn-add,
    .risks-v2-btn-sort,
    .toolbar .btn-toolbar-add,
    .toolbar .btn-add-phase,
    .toolbar .btn-expand,
    .toolbar .btn-collapse {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    .risks-v2-toolbar { gap: 6px; }
    .toolbar { gap: 6px !important; padding: 10px 14px !important; }
    .toolbar .filter-group { width: 100%; justify-content: flex-start; gap: 6px; margin-left: 0; }
    .toolbar .filter-group select { font-size: 11px; padding: 5px 8px; }
}

/* ===== Мобильная симметрия =====
   На iOS Safari 100vw включает safe-area-inset, поэтому элементы с width:100vw
   рендерятся шире видимой области → «сдвиг вправо» в Simulator (в Chrome
   Responsive mode этого нет — там 100vw = видимая ширина). Жёстко режем
   горизонтальный overflow на всех верхних уровнях — любой выступающий блок
   будет обрезан, но страница не «сдвинется». */
html, body {
    max-width: 100%;
    overflow-x: clip;
    margin: 0;
}

@media (max-width: 768px) {
    .app-shell,
    .main-area,
    header,
    .mobile-chip-bar,
    .tab-content {
        max-width: 100vw;
        overflow-x: clip;
    }
    .main-area {
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
        width: 100%;
        box-sizing: border-box;
    }
    /* Header: убедимся, что его внутренние блоки тоже не выпирают */
    header > div { min-width: 0; }
    header > div:last-child {
        margin-right: env(safe-area-inset-right, 0);
    }
}
@media (max-width: 768px) {
    /* Лёгкое смещение вправо: левый padding чуть больше правого. */
    header {
        padding: 0 calc(10px + env(safe-area-inset-right, 0px)) 0 calc(14px + env(safe-area-inset-left, 0px)) !important;
    }
    .mobile-chip-bar {
        padding: 6px calc(8px + env(safe-area-inset-right, 0px)) 6px calc(14px + env(safe-area-inset-left, 0px)) !important;
    }
}
@media (max-width: 480px) {
    .home-layout { padding: 20px 12px 20px 16px; }
    .tab-content:not(#tab-chat):not(#tab-mindmap) { padding: 14px 10px 14px 14px; }
    /* Toolbar (в дорожной карте) */
    .toolbar { padding: 10px 10px 10px 14px !important; }

    /* ===== Карточки задач — компактнее =====
       Было много воздуха: padding 10/12, margin 6px, инпуты 115px. На
       мобильном это выглядело громоздко. Ужимаем: padding 6/9, поля
       меньше, шрифты 10–11px. */
    .task-row {
        padding: 6px 9px !important;
        margin-bottom: 4px !important;
        border-radius: 8px !important;
    }
    .task-row td:nth-child(2) {
        font-size: 12px !important;
        padding-bottom: 4px !important;
        line-height: 1.3 !important;
    }
    .task-row td:nth-child(3) input,
    .task-row td:nth-child(4) input {
        width: 88px !important;
        font-size: 10px !important;
        padding: 4px 6px !important;
    }
    .task-row td:nth-child(5) input {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }
    .task-row td:nth-child(6) select {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }
    .task-row td:nth-child(8) {
        padding-top: 4px !important;
        margin-top: 2px !important;
    }
    .task-row td:nth-child(8) input {
        font-size: 10px !important;
        padding: 4px 7px !important;
        margin-bottom: 3px !important;
    }
    .btn-attach, .btn-comment {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }

    /* Фаза и этап — компактнее */
    .phase-row td {
        padding: 7px 10px !important;
        font-size: 11px !important;
    }
    .step-row td[colspan] {
        padding: 5px 9px !important;
        font-size: 11px !important;
    }

    /* Название этапа (0.1 Подготовка КП) над карточкой — меньше отступ */
    .phase-row { margin: 6px 0 2px !important; }
    .step-row { margin: 2px 0 !important; }
}

/* Empty state на мобильных — меньше воздуха */
@media (max-width: 480px) {
    .empty-state { padding: 32px 16px; min-height: 200px; }
    .empty-state-illustration { width: 56px; height: 56px; }
    .empty-state-illustration svg { width: 28px; height: 28px; }
    .empty-state-title { font-size: 15px; }
    .empty-state-description { font-size: 12px; }
}

/* ===== Gantt на маленьких экранах =====
   Диаграмма всегда шире экрана телефона (min-width: 700px), но сам контейнер
   должен быть аккуратным: меньше паддинги, компактная тулбар с wrapping,
   более узкая колонка «Задача». Zoom-контролы переносятся ниже переключателя. */
@media (max-width: 640px) {
    .gantt-v2-source-bar {
        padding: 12px 14px 0;
        flex-wrap: wrap;
        gap: 10px;
    }
    .gantt-v2-toggle-btn { padding: 6px 14px; font-size: 12px; }
    .gantt-v2-wrap { padding: 12px 14px 20px; }
    .gantt-v2-name-head,
    .gantt-v2-task-name {
        width: 120px !important;
        padding: 12px !important;
        font-size: 12px !important;
    }
    .gantt-v2-month-cell {
        padding: 12px 0;
        font-size: 12px;
    }
    .gantt-v2-row { font-size: 12px; }
    .gantt-v2-avatar { width: 18px; height: 18px; font-size: 10px; }
}
@media (max-width: 420px) {
    .gantt-v2-name-head,
    .gantt-v2-task-name {
        width: 96px !important;
        padding: 10px !important;
    }
    .gantt-v2-source-bar { padding: 10px 12px 0; }
    .gantt-v2-wrap { padding: 10px 12px 16px; }
    .zoom-controls { padding: 3px; gap: 2px; }
    .zoom-btn { width: 26px; height: 26px; font-size: 14px; }
    .zoom-level { min-width: 36px; font-size: 11px; }
}

/* ===== Сводка: глобальный фикс SVG-доната =====
   JS генерирует <svg width="180" height="180" viewBox="0 0 180 180">. Без CSS
   SVG игнорирует уменьшение обёртки — отсюда горизонтальный overflow страницы
   на мобильных. Делаем SVG адаптивным на любой ширине: он заполняет обёртку и
   сохраняет пропорции через viewBox. */
.sumv2-donut-svg-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
}
.sumv2-donut-svg-wrap { max-width: 100%; }

/* Чарт фаз: svg тоже должен помещаться в свой контейнер */
.sumv2-chart-wrap svg { max-width: 100%; height: auto; }

/* Сам контейнер сводки: на всякий случай ограничиваем ширину экспортной
   области и режем горизонтальный overflow, чтобы случайный широкий блок
   не растягивал страницу. */
#sumv2ExportArea { max-width: 100%; overflow-x: hidden; }

/* ===== Fix: grid tracks не ужимаются ниже контента =====
   `grid-template-columns: 1fr 1fr` по умолчанию = `minmax(auto, 1fr)`,
   и если ребёнок имеет nowrap-текст шире колонки — он растягивает трек шире
   вьюпорта (горизонтальный overflow). Лечится `minmax(0, 1fr)` на треках +
   `min-width: 0` на ребёнке, чтобы flex/ellipsis корректно схлопывался.
   Повторяем существующие breakpoints, чтобы не сломать адаптацию колонок. */

/* Плитки фаз — 2 колонки на всех размерах, кроме ≤360 (там одна) */
.sumv2-phases-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sumv2-phase-tile { min-width: 0; }
.sumv2-phase-tile-info { min-width: 0; flex: 1 1 auto; }

/* Основной layout — 2 колонки на десктопе, 1 на ≤900 */
@media (min-width: 901px) {
    .sumv2-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sumv2-col-left, .sumv2-col-right { min-width: 0; }

/* Статистические карточки: 5 / 3 / 3 / 2 — как в основном CSS, но с minmax(0, 1fr) */
@media (min-width: 1201px) {
    .sumv2-stats-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1200px) {
    .sumv2-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 900px) {
    .sumv2-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 361px) and (max-width: 600px) {
    .sumv2-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sumv2-stat-card { min-width: 0; }

/* Списки (дедлайны, просрочки): с nowrap-title должны схлопываться */
.sumv2-list-item { min-width: 0; }
.sumv2-list-main { min-width: 0; }

/* ===== Сводка на маленьких экранах =====
   На ≤600px в основном CSS уже есть: stats 2 колонки, donut 150px,
   phase-name 80px, padding 12px. Дотягиваем тулбар, списки, легенду
   доната, воркпоад и саму карточку на ≤480px. */
@media (max-width: 600px) {
    .sumv2-toolbar { flex-wrap: wrap; gap: 8px; }
    .sumv2-export-btn { width: 100%; justify-content: center; }
    /* Доната: легенда переносится под сам круг, гэп уже */
    .sumv2-donut-wrap { gap: 12px; }
    .sumv2-donut-legend { min-width: 100%; }
    /* Списки и карточки: чуть компактнее на планшетах тоже */
    .sumv2-list-item { padding: 8px 10px; }
}
@media (max-width: 480px) {
    .sumv2-wrap { padding: 10px; }
    .sumv2-stats-row { gap: 8px; margin-bottom: 12px; }
    .sumv2-stat-card { padding: 12px 12px 10px; border-radius: 12px; min-width: 0; }
    .sumv2-stat-num { font-size: 22px; }
    .sumv2-stat-icon {
        width: 28px; height: 28px;
        font-size: 13px;
        top: 10px; right: 10px;
        border-radius: 8px;
    }
    .sumv2-stat-label { font-size: 10px; letter-spacing: 0.3px; padding-right: 32px; }
    .sumv2-stat-sub { font-size: 10px; }

    /* Карточка */
    .sumv2-card { padding: 12px; border-radius: 12px; }
    .sumv2-card-head { margin-bottom: 10px; gap: 8px; }
    .sumv2-card-title { font-size: 13px; }
    .sumv2-card-badge { font-size: 10px; padding: 2px 6px; }
    .sumv2-card-sub { font-size: 10px; }

    /* Прогресс фаз: имя flex-сжимаемое, бар тянется */
    .sumv2-phase-row { gap: 8px; padding: 3px 4px; }
    .sumv2-phase-name {
        width: auto;
        flex: 0 1 auto;
        max-width: 42%;
        font-size: 11px;
    }
    .sumv2-phase-pct { width: 30px; font-size: 10px; }
    .sumv2-phase-bar-track { height: 6px; }

    /* Плитки фаз */
    .sumv2-phases-grid { gap: 6px; }
    .sumv2-phase-tile { padding: 9px 10px; gap: 6px; }
    .sumv2-phase-tile-icon { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
    .sumv2-phase-tile-name { font-size: 11px; }
    .sumv2-phase-tile-count { font-size: 10px; }

    /* Донат */
    .sumv2-donut-wrap { gap: 10px; flex-direction: column; align-items: stretch; }
    .sumv2-donut-svg-wrap { width: 130px !important; height: 130px !important; margin: 0 auto; }
    .sumv2-donut-center-num { font-size: 22px; }
    .sumv2-donut-center-lbl { font-size: 9px; }
    .sumv2-donut-legend { min-width: 0; gap: 5px; }
    .sumv2-donut-legend-item { font-size: 11px; gap: 6px; }
    .sumv2-donut-pct { font-size: 10px; }

    /* Списки дедлайнов / просрочек */
    .sumv2-list { gap: 5px; }
    .sumv2-list-item { padding: 7px 9px; gap: 8px; border-radius: 8px; }
    .sumv2-list-title { font-size: 11px; }
    .sumv2-list-meta { font-size: 9px; }
    .sumv2-list-date { font-size: 10px; }
    .sumv2-list-days { font-size: 9px; }

    /* Загрузка по исполнителям */
    .sumv2-workload { gap: 7px; }
    .sumv2-workload-row { gap: 8px; }
    .sumv2-workload-name {
        width: auto !important;
        flex: 0 1 42%;
        max-width: 42%;
        font-size: 11px;
    }
    .sumv2-workload-bar-track { height: 6px; }
    .sumv2-workload-nums { font-size: 10px; min-width: 60px; }

    /* Общий пустой state */
    .sumv2-empty { font-size: 11px; padding: 14px 8px; }
}
@media (max-width: 360px) {
    .sumv2-stats-row { grid-template-columns: 1fr; }
    .sumv2-phases-grid { grid-template-columns: 1fr; }
    .sumv2-stat-num { font-size: 26px; }
    .sumv2-workload-name { max-width: 45%; }
    .sumv2-phase-name { max-width: 45%; }
}

/* ===== Карточки задач: чек-бокс на мобильных =====
   Исходное правило держит чек-бокс в top:10/right:30, впритык к кнопке
   удаления (right:6, ширина 22) — палец попадает то в чек-бокс, то в −.
   Переносим в top:10/left:12 (отдельная сторона карточки), увеличиваем до
   22×22 с tap-target через `transform: scale(1.4)` — нативная галочка
   остаётся, но кликабельная область растёт. */
@media (max-width: 768px) {
    .task-row td:nth-child(1) {
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
        padding: 6px !important;
        margin: -6px !important; /* расширяем tap-target наружу, не сдвигая сам input */
        z-index: 2;
    }
    .task-row td:nth-child(1) input[type=checkbox] {
        width: 20px !important;
        height: 20px !important;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(21, 101, 192, 0.2);
    }
    /* Название задачи оставляет место СЛЕВА под чек-бокс и СПРАВА под «−» */
    .task-row td:nth-child(2) {
        padding-left: 36px !important;
        padding-right: 40px !important;
    }
    /* Выравниваем всё остальное к тому же левому краю, что и заголовок —
       чтобы даты/ответственный/статус/примечание не «убегали» левее названия. */
    .task-row td:nth-child(3),
    .task-row td:nth-child(4),
    .task-row td:nth-child(5),
    .task-row td:nth-child(6),
    .task-row td:nth-child(8) {
        padding-left: 36px !important;
    }
}

/* ===== Карточки задач: мета-строка на узких экранах =====
   В task-row td:3/4/5 (две даты + ответственный) стоят фиксированные ширины
   115/115/120px — 350px+ в сумме, вылезают при ширине карточки ~340–370px
   (телефон 360–400px с паддингом). Делаем мета-строку flex с переносом,
   инпуты шринкаются пропорционально. */
@media (max-width: 640px) {
    .task-row td:nth-child(3),
    .task-row td:nth-child(4),
    .task-row td:nth-child(5) {
        display: inline-flex !important;
        width: auto;
    }
    .task-row td:nth-child(3) input,
    .task-row td:nth-child(4) input {
        width: 108px !important;
        min-width: 0;
    }
    .task-row td:nth-child(5) input {
        width: 110px !important;
        min-width: 0;
    }
}
@media (max-width: 480px) {
    .task-row td:nth-child(3) input,
    .task-row td:nth-child(4) input { width: 96px !important; font-size: 10.5px !important; }
    .task-row td:nth-child(5) input { width: calc(100% - 2px) !important; }
    /* «Ответственный» переносится на свою строку на 480 и уже */
    .task-row td:nth-child(5) {
        display: block !important;
        width: 100% !important;
        margin-top: 4px;
    }
}

/* ===== Чат на мобильном: two-view + 100dvh + фикс скролла =====
   На телефоне неудобно, когда список чатов сверху на 220px, а переписка
   снизу — приходится скроллить страницу между ними. Делаем классический
   паттерн: либо список на весь экран, либо переписка с кнопкой «Назад».
   Плюс `100dvh` — высота адаптируется к реальному viewport (учитывает
   адресную строку Safari и клавиатуру). */

/* Кнопка «Назад» в заголовке переписки — видна только на мобильных */
.messenger-back-btn {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text-strong);
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-pill);
    margin-right: 4px;
    flex-shrink: 0;
    transition: background var(--transition-fast);
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.messenger-back-btn:hover,
.messenger-back-btn:focus-visible { background: var(--color-gray-100); outline: none; }

/* Контейнерный скролл — на любом экране: список и переписка скроллятся
   внутри себя, не пытаются скроллить страницу. overflow-anchor: none
   отключает авто-коррекцию скролла браузером при изменении DOM сверху —
   без неё при ре-рендере сообщений (после отправки) scrollTop мог уехать
   вверх вопреки явному `container.scrollTop = container.scrollHeight`. */
.messenger-rooms,
.messenger-messages {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
}

@media (max-width: 768px) {
    /* Вкладка чата — edge-to-edge без padding, чтобы messenger точно совпал
       с реальным viewport-calc и не было paddin'га, съедающего высоту */
    #tab-chat { padding: 0 !important; }

    /* Полная высота окна: header 72px + безопасный запас = 72-80 сверху.
       dvh учитывает адресную строку Safari и открытую клавиатуру */
    .messenger {
        flex-direction: column;
        height: calc(100dvh - 72px);
        min-height: 0;
        border-radius: 0;
        margin: 0;
    }

    /* Когда открыта переписка — прячем только chip-bar (шапку оставляем,
       чтобы пользователь видел контекст и мог быстро переключиться в меню).
       Класс ставит/снимает JS (openRoom / closeMessengerRoom / showTabSidebar). */
    body.chat-conv-open .mobile-chip-bar { display: none !important; }
    body.chat-conv-open .messenger { height: calc(100dvh - 72px); }

    /* По умолчанию виден только список */
    .messenger[data-mobile-view="conv"] .messenger-sidebar,
    .messenger:not([data-mobile-view="conv"]) .messenger-main {
        display: none;
    }

    .messenger-sidebar {
        width: 100%;
        max-height: none;
        border-right: none;
        border-bottom: none;
        flex: 1;
        min-height: 0;
    }

    .messenger-main {
        width: 100%;
        flex: 1;
        min-height: 0;
    }

    .messenger-back-btn { display: inline-flex; }

    /* Заголовок переписки: немного компактнее и sticky */
    .messenger-conv-header {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 10px 12px;
    }
    .messenger-conv-avatar { width: 34px; height: 34px; font-size: 15px; }
    .messenger-conv-name { font-size: 14px; }
    .messenger-conv-subtitle { font-size: 10px; }

    /* Сообщения — скролл в контейнере, не на странице */
    .messenger-messages {
        flex: 1;
        min-height: 0;
        padding: 12px;
    }

    /* Поле ввода — прижато к низу, с safe-area-inset для iOS (жесты) */
    .messenger-input-wrap {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .messenger-input-row {
        padding: 8px 12px;
        gap: 8px;
    }
    .messenger-input-row input {
        font-size: 16px; /* предотвращает iOS auto-zoom */
        padding: 9px 14px;
    }
    .messenger-send-btn,
    .messenger-attach-btn {
        width: 38px;
        height: 38px;
    }

    /* Сайдбар: списку комнат нужен нормальный скролл */
    .messenger-rooms {
        flex: 1;
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .messenger-toolbar button { padding: 7px 4px; font-size: 11px; }
    .messenger-room-item { padding: 10px 12px; }
    .messenger-room-avatar { width: 36px; height: 36px; font-size: 15px; }
    .messenger-room-name { font-size: 13px; }
    .messenger-room-preview { font-size: 11px; }
}

/* Заголовок переписки должен быть flex со своими детьми */
.messenger-conv-info { min-width: 0; flex: 1; }
.messenger-conv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Кнопки модалок: primary vs secondary =====
   .btn-confirm раньше не имела своего стиля — выглядела как невзрачная
   светлая кнопка рядом со стилизованной «Отмена». Выделяем primary цветом,
   secondary токенами. Применяется ко всем модалкам (канбан, риски, календарь). */
.btn-confirm {
    background: var(--color-primary);
    color: var(--color-surface);
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn-confirm:hover { background: var(--color-primary-hover); }
.btn-confirm:active { transform: translateY(1px); }
.btn-confirm:disabled { background: var(--color-gray-300); cursor: not-allowed; }

.btn-cancel {
    background: var(--color-gray-100);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}
.btn-cancel:hover { background: var(--color-gray-200); }

/* ===== Kanban wizard modal: адаптив и базовые размеры =====
   Раньше modal имел inline min-width:480px — на телефоне модалка вылезала
   за viewport. Теперь base max-width: 560px, на ≤640 — full-width. */
.modal.kb-wizard {
    min-width: 0;
    width: min(560px, calc(100vw - 24px));
    max-width: 560px;
}
.kb-wizard-title { margin: 0 0 6px; }

@media (max-width: 640px) {
    .modal.kb-wizard {
        width: 100%;
        max-width: 100%;
        padding: 18px 16px 24px;
    }

    /* Stepper: на мобильном прячем labels у неактивных шагов —
       виден только номер, у активного ещё label */
    .kb-wizard .kb-stepper {
        gap: 6px;
        flex-wrap: nowrap;
        margin-bottom: 14px;
        justify-content: space-between;
    }
    .kb-step-dot { font-size: 11px; gap: 5px; min-width: 0; }
    .kb-step-dot span { width: 22px; height: 22px; font-size: 11px; border-width: 1px; }
    .kb-step-dot label { display: none; }
    .kb-step-dot.is-active label {
        display: inline;
        white-space: nowrap;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .kb-step-line { min-width: 8px; height: 1.5px; }

    /* Парные поля (Статус/Приоритет, Тег/Цвет) — в одну колонку */
    .kb-wizard .row-flex-gap {
        flex-direction: column;
        gap: 10px;
    }

    /* Навигация: кнопки на всю ширину, primary сверху (вне визуальной нормы
       — primary заметнее; внизу — Cancel/Back). */
    .kb-wizard-nav {
        flex-direction: column-reverse;
        gap: 8px;
        margin-top: 16px;
    }
    .kb-wizard-nav button {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }
    /* «Назад» и «Отмена» в одну строку — чтобы не плодить три ряда */
    .kb-wizard-nav #kbBackBtn { order: 2; }
    .kb-wizard-nav .btn-cancel:not(#kbBackBtn) { order: 1; }
    .kb-wizard-nav .btn-confirm { order: 3; }
}

/* ===== Канбан: фильтр по исполнителю =====
   Компактный select справа от заголовка «Канбан». Хранит свой выбор
   в localStorage (через JS). На мобильном переносится на новую строку и
   занимает всю ширину. */
.kb-toolbar-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kb-toolbar-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
/* Стиль селектора под общий дизайн системы (как .project-select-styled) */
.kb-toolbar-filter-sel {
    min-width: 200px;
    padding: 6px 32px 6px 12px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-gray-100);
    color: var(--color-text-strong);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.kb-toolbar-filter-sel:hover { border-color: var(--color-gray-400); }
.kb-toolbar-filter-sel:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}

@media (max-width: 640px) {
    .kb-toolbar-filter {
        width: 100%;
        gap: 6px;
    }
    .kb-toolbar-filter-label { font-size: 10px; }
    .kb-toolbar-filter-sel { flex: 1; min-width: 0; font-size: 12px; padding: 8px 10px; }
}

/* ===== Календарь: кнопка «+ Событие» =====
   Делаем компактнее (было 8/16px → 6/12px). На узком экране скрываем
   подпись «Событие», остаётся одна круглая кнопка «+». */
.cal-add-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: var(--radius-md) !important;
    gap: 4px !important;
}
.cal-add-btn-icon { font-size: 15px; line-height: 1; font-weight: 600; }
.cal-add-btn-label { font-weight: 600; letter-spacing: 0.2px; }

.cal-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
    /* Круглая иконка «+» без подписи */
    .cal-add-btn {
        width: 34px;
        height: 34px;
        padding: 0 !important;
        border-radius: var(--radius-pill) !important;
        justify-content: center;
    }
    .cal-add-btn-label { display: none; }
    .cal-add-btn-icon { font-size: 18px; }

    /* Переключатель view (День/Неделя/Месяц) тоже компактнее */
    .cal-view-btn { padding: 5px 10px; font-size: 11px; }
    .cal-view-toggle { padding: 2px; }

    /* Toolbar: название календаря переносится, кнопки не сжимаются */
    .cal-toolbar { flex-wrap: wrap; gap: 8px; }
    .cal-toolbar-right { margin-left: auto; }
}

/* ===== Календарь: модалка события =====
   Базовая ширина без inline-стилей. На мобильном — full-width с bottom-sheet
   поведением (наследуется из .modal media-query), парные поля (дата начала/конца)
   становятся одной колонкой. */
.cal-event-modal {
    min-width: 0;
    width: min(500px, calc(100vw - 24px));
    max-width: 500px;
}
.cal-event-view-modal { max-width: 520px; }
.cal-event-modal-title { margin: 0 0 16px; font-size: 18px; color: var(--color-nav-bg); }
.cal-view-title { margin: 0 0 6px; }

/* Кнопки в модалке: Primary (Сохранить) справа, Cancel слева. На мобильном
   стопка: primary сверху для большого пальца. */
.cal-event-modal-buttons { margin-top: 20px; }

/* Хардкод цвета в cal-modal-announce-row → токены */
.cal-modal-announce-row {
    background: var(--color-primary-25) !important;
    border-color: var(--color-primary-50) !important;
}
.cal-modal-check-label { color: var(--color-primary-hover) !important; }

@media (max-width: 640px) {
    .cal-event-modal {
        width: 100%;
        max-width: 100%;
        padding: 18px 16px 24px;
    }
    .cal-event-modal-title { font-size: 16px; margin-bottom: 12px; }

    /* Парные поля дат/времени — в одну колонку */
    .cal-event-modal .row-flex-gap { flex-direction: column; gap: 10px; }

    /* Кнопки на всю ширину, primary вниз (для большого пальца) */
    .cal-event-modal-buttons {
        flex-direction: column-reverse;
        gap: 8px;
        margin-top: 16px;
    }
    .cal-event-modal-buttons button { width: 100%; padding: 12px 16px; font-size: 14px; }

    /* Цветные swatch-и побольше для удобства тапа */
    .cal-color-swatch { width: 34px; height: 34px; }

    /* User picker: меньше высота, но touch-friendly */
    .cal-user-picker { max-height: 180px; }
    .cal-user-option { padding: 10px 12px; }
    .cal-user-option-name { font-size: 13px; }
    .cal-user-option-note { font-size: 11px; }

    /* View modal: meta-grid в один столбец */
    .cal-view-meta-grid { grid-template-columns: 1fr !important; }
}