/* Стили, часть 6 из 12: аналитик по товару: окно, карточка, разговор. Подключаются в base.html строго по порядку —
   от него зависит, какое правило главнее. Один base.css разбит 30.09.2026: Cloudflare
   отдавал файлы крупнее ~20 КБ обрезанными. Файл держать меньше 15 КБ. */

.opt-spend { margin: 0 0 var(--space-sm); color: var(--text-secondary); font-size: var(--font-size-small); }

.opt-cards { display: flex; flex-wrap: wrap; gap: var(--space-xs);
    margin: 0 0 var(--space-sm); padding: 0; list-style: none; }
.opt-card { padding: 6px 12px; border-radius: var(--r-pill); background: var(--state-warn-bg);
    color: var(--state-warn-text); font-size: var(--font-size-small); }
.opt-card b { font-weight: 600; }
.opt-card span::before { content: " — "; }
.opt-card-stock { background: var(--border); color: var(--text-secondary); }

.opt-facts summary { cursor: pointer; color: var(--text-secondary); font-size: var(--font-size-small); }
.opt-facts summary:hover { color: var(--text-primary); }
.opt-advice-check { margin: var(--space-xs) 0; color: var(--text-muted); font-size: var(--font-size-small); }
.opt-advice-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2xs) var(--space-md); margin: 0; padding: 0; list-style: none;
    font-size: var(--font-size-small); }
.opt-advice-facts li { display: flex; justify-content: space-between; gap: var(--space-xs);
    border-bottom: 1px solid var(--line); padding: 2px 0; }
.opt-advice-facts span { color: var(--text-secondary); }
.opt-advice-facts b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Аналитик по товару: окно по центру, слева карточка товара, справа разговор
   (владелец, 17.09.2026 — узкая панель сбоку налезала на таблицу). */
.analyst-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(26, 29, 31, .45); }
.analyst {
    position: fixed; z-index: 41; inset: 5vh 4vw; display: grid;
    grid-template-columns: 35fr 65fr;
    max-width: 1180px; margin: 0 auto; overflow: hidden;
    background: var(--bg-surface); border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
}
.analyst-close {
    position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2;
    border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1;
    color: var(--text-secondary); padding: 0 var(--space-2xs);
}
.analyst-close:hover { color: var(--text-primary); }

/* Левая колонка — только то, что нужно для решения. */
.analyst-card {
    padding: var(--space-lg) var(--space-md) var(--space-md);
    background: var(--bg-canvas); border-right: 1px solid var(--border-strong);
    overflow-y: auto;
}
.analyst-title { margin: 0; font-size: 18px; font-weight: 600; }
.analyst-sub { margin: var(--space-2xs) 0 var(--space-md); color: var(--text-secondary); font-size: var(--font-size-small); }
.analyst-result { margin: 0; display: flex; flex-direction: column; }
.analyst-result b { font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.analyst-result b.is-loss { color: var(--accent-magenta); }
.analyst-result span { color: var(--text-secondary); font-size: var(--font-size-small); }
.analyst-numbers, .analyst-all-list { margin: 0; padding: 0; list-style: none; font-size: var(--font-size-small); }
.analyst-numbers li, .analyst-all-list li {
    display: flex; justify-content: space-between; gap: var(--space-sm);
    padding: var(--space-2xs) 0; border-bottom: 1px solid var(--border-strong);
}
.analyst-numbers span, .analyst-all-list span { color: var(--text-secondary); }
.analyst-tabs { display: flex; gap: var(--space-2xs); margin: var(--space-md) 0 var(--space-sm);
    background: var(--bg-surface); border-radius: var(--radius-lg); padding: 2px; }
.analyst-tab { flex: 1; cursor: pointer; border: 0; background: none; font: inherit;
    color: var(--text-secondary); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-lg); }
.analyst-tab.is-on { background: var(--bg-canvas); color: var(--text-primary); font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--border-strong); }
.analyst-pane-note { margin: 0 0 var(--space-xs); font-size: var(--font-size-small); color: var(--text-secondary); }
.analyst-memory { margin-top: var(--space-md); }
.analyst-memory-head { margin: 0 0 var(--space-2xs); font-weight: 500; }
.analyst-memory-head span { font-weight: 400; font-size: var(--font-size-small); color: var(--text-secondary); }
.analyst-memory ul { margin: 0; padding: 0; list-style: none; font-size: var(--font-size-small); }
.analyst-memory li { padding: var(--space-2xs) 0; border-bottom: 1px dashed var(--border-strong); }
.analyst-memory li.is-due { background: var(--state-warn-bg); }
.analyst-memory em { display: block; color: var(--text-secondary); font-style: normal; }
.analyst-note-tools { display: flex; gap: var(--space-sm); }
.analyst-note-empty { color: var(--text-secondary); }

/* Правая колонка — разговор. */
.analyst-talk { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.analyst-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-lg) var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.analyst-msg { max-width: 92%; }
.analyst-msg-owner { align-self: flex-end; max-width: 80%; padding: var(--space-sm) var(--space-md); background: var(--accent-lime); border-radius: var(--radius-lg); }
/* Кромка слева — степень доверия: разбор и мнение выглядят по-разному. */
.analyst-msg-analyst { align-self: flex-start; padding-left: var(--space-md); border-left: 3px solid var(--border-strong); }
.analyst-verified { border-left-color: var(--accent-violet); }
.analyst-mark { margin: 0 0 var(--space-2xs); font-size: var(--font-size-small); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.analyst-text { margin: 0; white-space: pre-wrap; }
.analyst-text mark { background: var(--state-warn-bg); color: var(--state-warn-text); padding: 0 2px; border-radius: 3px; }
.analyst-text mark.said { background: var(--border-strong); color: var(--text-primary); }
.analyst-alarm { margin: 0 0 var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-sm); font-size: var(--font-size-small); background: var(--state-warn-bg); color: var(--state-warn-text); }
.analyst-link { border: 0; background: none; padding: 0; margin-top: var(--space-xs); cursor: pointer; color: var(--accent-violet); font: inherit; text-decoration: underline; }
.analyst-basis { margin: var(--space-xs) 0 0; padding: 0; list-style: none; font-size: var(--font-size-small); }
.analyst-basis li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 2px 0; border-bottom: 1px dashed var(--border-strong); }
.analyst-wait { color: var(--text-secondary); }
/* Каре набора вместо трёх прыгающих точек — ближе к тому, как печатают. */
.analyst-caret { animation: analyst-blink 1s steps(2, start) infinite; }
@keyframes analyst-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .analyst-caret { animation: none; } }
.analyst-offer-card { align-self: stretch; padding: var(--space-sm); border: 1px dashed var(--accent-violet); border-radius: var(--radius-sm); }
.analyst-offer-said { margin: var(--space-2xs) 0; font-size: var(--font-size-small); color: var(--text-secondary); }
.analyst-note-edit { width: 100%; min-height: 56px; resize: vertical; font: inherit; padding: var(--space-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.analyst-limit, .analyst-switch-note { margin: 0 var(--space-lg); padding: var(--space-xs); background: var(--state-warn-bg); color: var(--state-warn-text); font-size: var(--font-size-small); border-radius: var(--radius-sm); }

.analyst-ask { flex: none; background: var(--bg-surface); padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 1px solid var(--border-strong); padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); }
.analyst-field { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface); }
.analyst-field:focus-within { border-color: var(--accent-violet); }
.analyst-ask textarea { flex: 1; resize: none; border: 0; outline: none; padding: var(--space-xs) 0; font: inherit; line-height: 1.4; min-height: 24px; max-height: 160px; background: none; }
.analyst-mic { cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg-canvas); border-radius: 50%; width: 32px; height: 32px; flex: none; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.analyst-mic svg { flex: none; width: 16px; height: 16px; }
.analyst-mic.is-listening { background: var(--accent-lime); border-color: var(--accent-lime); color: var(--text-primary); }
.analyst.is-listening .analyst-field { border-color: var(--accent-lime); box-shadow: 0 0 0 3px var(--accent-lime); }
.analyst-button { cursor: pointer; flex: none; padding: var(--space-xs) var(--space-md); border: 0; border-radius: var(--radius-lg); background: var(--accent-violet); color: #fff; font: inherit; font-weight: 500; }
.analyst-button:disabled { opacity: .5; cursor: progress; }
.analyst-bottom { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-xs) 0 0; }
.analyst-models { display: inline-flex; gap: var(--space-2xs); background: var(--bg-canvas); border-radius: var(--radius-lg); padding: 2px; }
.analyst-model { cursor: pointer; border: 0; background: none; border-radius: var(--radius-lg); padding: var(--space-2xs) var(--space-sm); font: inherit; color: var(--text-secondary); }
.analyst-model.is-on { background: var(--bg-surface); color: var(--text-primary); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.analyst-hint { font-size: var(--font-size-small); color: var(--text-secondary); }
.analyst-spent { margin-left: auto; font-size: var(--font-size-small); color: var(--text-secondary); }

.opt-ask { margin: var(--space-sm) 0 0; }
.analyst-open { cursor: pointer; border: 1px solid var(--accent-violet); color: var(--accent-violet); background: none; border-radius: var(--radius-sm); padding: var(--space-2xs) var(--space-sm); font: inherit; }
body.has-analyst { overflow: hidden; }

/* Узкий экран: колонки складываются — товар сверху, разговор снизу. */
@media (max-width: 860px) {
    .analyst { inset: 0; max-width: none; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .analyst-card { border-right: 0; border-bottom: 1px solid var(--border-strong); max-height: 40vh; padding-top: var(--space-md); }
    .analyst-feed, .analyst-ask { padding-left: var(--space-md); padding-right: var(--space-md); }
    .analyst-bottom { flex-wrap: wrap; }
}

/* Совсем узкий экран: кнопка отправки уходит под поле — иначе поле
   сжимается так, что подпись обрезается (замер 17.09.2026). */
@media (max-width: 560px) {
    .analyst-field { flex-wrap: wrap; }
    .analyst-ask textarea { flex: 1 1 60%; }
    .analyst-field .analyst-button { flex: 1 0 100%; margin-top: var(--space-xs); }
    .analyst-hint { display: none; }
}

/* ── Вкладка «Рост»: сезон и очищенный тренд ─────────────────────── */

.grw-trend { margin: var(--space-md) 0 var(--space-lg); }
.grw-trend-all { margin: 0 0 var(--space-2xs); color: var(--text-secondary); }
/* Главная строка экрана — падение без выводимых категорий: она отвечает
   на вопрос «живо ли то, что я развиваю» (владелец, 17.09.2026). */
.grw-trend-kept { margin: 0 0 var(--space-xs); font-size: var(--font-size-card-title); line-height: 1.2; }
.grw-trend-kept b { font-size: var(--font-size-title); }
.grw-up { color: var(--state-good-text); }
.grw-down { color: var(--state-bad-text); }
.grw-trend-note { margin: 0; color: var(--text-secondary); font-size: var(--font-size-small); max-width: 70ch; }

.grw-block { margin-top: var(--space-lg); }
.grw-block h2 { margin: 0 0 var(--space-2xs); }
.grw-sub { margin: 0 0 var(--space-sm); color: var(--text-secondary); font-size: var(--font-size-small); max-width: 80ch; }

.grw-hint { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md);
            border-radius: var(--r-sm); background: var(--bg-canvas); }
.grw-hint h3 { margin: 0 0 var(--space-xs); font-size: var(--font-size-base); }
.grw-hint-icon { margin-right: var(--space-2xs); }
.grw-hint ul { margin: 0; padding-left: var(--space-md); }
.grw-hint li { margin-bottom: var(--space-xs); line-height: 1.45; }
.grw-hint-burning { background: var(--state-bad-bg); }
.grw-hint-check { background: var(--state-warn-bg); }
.grw-hint-fine { background: var(--state-good-bg); }
.grw-rest { margin: var(--space-xs) 0 0; color: var(--text-secondary); font-size: var(--font-size-small); }