/* AI-Автопилот: header-controls + модал журнала.
 * Кладутся ВНУТРЬ <div class="header-right"> каждого дашборда.
 * Никаких FAB, никаких overlay'ев на карту — обычные inline-controls.
 */

/* Контейнер: inline-flex, чтобы лежал в header-right между другими кнопками */
.copilot-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    font-family: inherit;
}

/* Checkbox-обёртка — выглядит как пилюля с галкой */
.copilot-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: #FBFAF7;
    color: #1F3D2B;
    border: 1px solid #D9D3C5;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.copilot-checkbox:hover {
    background: #F4F1EA;
    border-color: #BDB6A4;
}
.copilot-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: #1F3D2B;
}
.copilot-checkbox-icon {
    font-size: 14px;
    line-height: 1;
}
.copilot-checkbox-label {
    line-height: 1;
}
/* Активное состояние — checkbox checked */
.copilot-checkbox:has(input:checked) {
    background: #E8EEEA;
    border-color: #1F3D2B;
    color: #1F3D2B;
}

.copilot-checkbox-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #8B2A1F;
    color: #FBFAF7;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.copilot-checkbox-badge[hidden] { display: none; }

/* Лог-кнопка — обычная btn-secondary, унаследует стиль дашборда.
 * Дополнительный нормализатор размера на случай если у дашборда нет
 * btn-sm в дизайн-системе. */
.copilot-log-btn {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
}

/* ────────── Drawer-style лог панели ──────────
 * Раньше было fullscreen-модалка с translucent-backdrop'ом — на дашбордах
 * с большой картой (Урбанист, Историк, Аналитик) backdrop тонировал всю
 * карту, выглядело прозрачным «облаком» поверх карты.
 *
 * Теперь — side-drawer справа, без backdrop'а: карта/контент остаётся
 * полностью видимым и кликабельным. Закрытие — по кнопке ✕ или Esc. */
.copilot-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 9999 !important;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    pointer-events: none;          /* drawer сам ловит клики через card */
}
.copilot-modal[hidden] { display: none !important; }
/* TRIPLE-LOCK против регрессий: модал виден ТОЛЬКО когда JS добавит .is-open.
 * История: модал «протекал» вниз страницы из-за CSS-кеша / inline-стилей.
 * Сейчас тройная защита:
 *   1. [hidden] attr → display:none !important
 *   2. style="display:none" inline (в HTML template)
 *   3. :not(.is-open) → display:none !important (этот rule)
 * Если хотя бы один lock сработает — модал не появится. */
body > .copilot-modal:not(.is-open),
.copilot-modal:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.copilot-modal-backdrop {
    /* В drawer-режиме backdrop невидим И не ловит клики — карта/контент
     * слева от drawer'а полностью кликабельны. Backdrop оставлен в DOM
     * только для обратной совместимости (старые шаблоны могли иметь
     * inline-style на нём). */
    position: absolute;
    top: 0;
    right: 480px;
    bottom: 0;
    left: 0;
    background: transparent;
    pointer-events: none;
}
.copilot-modal-card {
    position: relative;
    background: #FBFAF7;
    border-left: 1px solid #D9D3C5;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    width: 480px;
    max-width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    animation: copilot-drawer-in 0.18s ease-out;
}
@keyframes copilot-drawer-in {
    from { transform: translateX(16px); opacity: 0.6; }
    to   { transform: translateX(0);    opacity: 1; }
}
.copilot-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #E6E1D4;
}
.copilot-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
}
.copilot-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #E6E1D4;
    background: #F4F1EA;
}
.copilot-tab {
    flex: 1;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #6B6B66;
    transition: color 0.15s, border-color 0.15s;
}
.copilot-tab:hover { color: #1F3D2B; }
.copilot-tab.is-active {
    color: #1F3D2B;
    border-bottom-color: #1F3D2B;
    background: #FBFAF7;
}
.copilot-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px;
    min-height: 200px;
}
.copilot-tab-pane[hidden] { display: none; }
.copilot-modal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    border-top: 1px solid #E6E1D4;
    background: #FBFAF7;
}
.copilot-modal-status {
    font-size: 12px;
    color: #9B978C;
}

/* Список предложений и активности */
.copilot-list { display: flex; flex-direction: column; gap: 8px; }
.copilot-empty {
    color: #9B978C;
    font-size: 13px;
    text-align: center;
    padding: 24px 12px;
}

/* Карточка предложения */
.copilot-card {
    background: white;
    border: 1px solid #E6E1D4;
    border-radius: 6px;
    overflow: hidden;
}
.copilot-card.is-priority-1 { border-left: 3px solid #8B2A1F; }
.copilot-card.is-priority-2,
.copilot-card.is-priority-3 { border-left: 3px solid #8C5A1A; }
.copilot-card.is-priority-4,
.copilot-card.is-priority-5 { border-left: 3px solid #1F3D2B; }
.copilot-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    gap: 8px;
    border-bottom: 1px solid #F4F1EA;
}
.copilot-card-action-type {
    font-size: 11px;
    color: #6B6B66;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.copilot-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.4;
}
.copilot-card-confidence {
    background: #E8EEEA;
    color: #1F3D2B;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.copilot-card-summary {
    padding: 8px 12px;
    color: #3D3D3D;
    font-size: 13px;
    line-height: 1.5;
}
.copilot-card-actions {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: #FBFAF7;
    border-top: 1px solid #F4F1EA;
}
.copilot-card-meta {
    padding: 0 12px 8px;
    font-size: 11px;
    color: #9B978C;
    display: flex;
    gap: 12px;
}

/* Activity-row — строка журнала */
.copilot-activity {
    background: white;
    border: 1px solid #E6E1D4;
    border-left: 3px solid #BDB6A4;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
}
.copilot-activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    color: #6B6B66;
    font-size: 11px;
}
.copilot-activity-type {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #1F3D2B;
}
.copilot-activity-content {
    color: #3D3D3D;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Mobile: drawer на весь экран */
@media (max-width: 520px) {
    .copilot-checkbox-label { display: none; }
    .copilot-modal-card { width: 100vw; }
    .copilot-modal-backdrop { right: 0; }   /* нет просвета — drawer покрывает всё */
}

/* Очень узкие экраны (≤420px): прячем текст Лог, оставляем только эмодзи.
   Это даёт ~50px обратно в header-right для других кнопок. */
@media (max-width: 420px) {
    .copilot-log-btn {
        font-size: 0;          /* скрывает текст-узел */
        padding: 0 10px;
        gap: 0;
    }
    .copilot-log-btn::before {
        content: "📋";
        font-size: 14px;
    }
    .copilot-inline { margin-right: 4px; gap: 4px; }
}