/* ==========================================================================
   ИИ Переписки — только то, чего нет в общем ките ЗЗД.
   Всё построено на токенах из brand.css, своих цветов не заводим,
   чтобы светлая и тёмная темы работали сами.
   ========================================================================== */

/* --------------------------------------------- заплатка к общему киту */
/* В style.css есть `.row-actions a { color: var(--gold-2) }`. Удельный вес
   у него 0,1,1 — выше, чем у `.btn-primary` (0,1,0), поэтому ссылка-кнопка
   внутри `.row-actions` получает золотой текст поверх золотой заливки и
   становится нечитаемой. Задевает «Открыть в CRM» и активные кнопки периода
   на дашборде и в «Без ответа».
   Правим здесь, а не в style.css: он общий с ICE Score. */
.row-actions a.btn-primary,
.row-actions a.btn-primary:hover,
.row-actions a.btn-primary:visited { color: var(--btn-gold-ink); }

/* ------------------------------------------------------------- мелочи */
.nowrap    { white-space: nowrap; }
.small     { font-size: .85em; }
.cell-clip { max-width: 380px; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.tpl-text  { max-width: 640px; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; font-family: var(--zzd-font-heading); }
.row-link  { cursor: pointer; }
.row-off   { opacity: .5; }

.pager { display: flex; align-items: center; gap: 14px; justify-content: center;
         margin: 18px 0 6px; }

/* Поля «с … по …» в фильтрах списка: подпись и поле одним блоком, чтобы
   строка фильтров переносилась целыми элементами, а не рвала label. */
.flt-date { display: inline-flex; align-items: center; gap: 6px;
            color: var(--zzd-muted, #8b8b8b); font-size: .9em; white-space: nowrap; }
.flt-date input { font: inherit; }

.dash-h { font-family: var(--zzd-font-heading); font-weight: 600;
          letter-spacing: var(--zzd-tracking-head); margin: 26px 0 12px; }

/* ------------------------------------------------------------- воронка */
.funnel  { display: flex; flex-direction: column; gap: 10px; }
.fn-row  { display: grid; grid-template-columns: minmax(140px, 230px) 1fr auto;
           align-items: center; gap: 14px; }
.fn-name { font-size: .95em; line-height: 1.25; }
.fn-hint { display: block; font-size: .78em; opacity: .6; }
.fn-bar-wrap { background: rgba(140,140,140,.12); border-radius: 4px; height: 22px; }
.fn-bar  { height: 100%; border-radius: 4px; min-width: 2px;
           background: linear-gradient(90deg, rgba(115,141,182,.85), rgba(115,141,182,.5)); }
/* последние две ступени заполняются руками — отделяем их цветом, чтобы никто
   не принял пустую полосу за провал в продажах */
.fn-bar-manual { background: linear-gradient(90deg, rgba(209,158,104,.85), rgba(209,158,104,.45)); }
.fn-num  { font-family: var(--zzd-font-heading); font-size: 1.05em; text-align: right;
           min-width: 78px; }
.fn-pct  { display: block; font-size: .75em; opacity: .6; font-family: inherit; }

@media (max-width: 640px) {
  .fn-row { grid-template-columns: 1fr auto; }
  .fn-bar-wrap { grid-column: 1 / -1; }
}

/* --------------------------------------------------- отметка в карточке */
.mark-bar form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mark-lbl  { font-size: .9em; opacity: .75; margin-right: 2px; }
.mark-note { flex: 1 1 220px; min-width: 160px; font: inherit; }
.mark-clear { opacity: .6; }
.wait-long { color: #d38377; }
.stat-tile.stat-warn .stat-num { color: #d9a856; }
/* «2 ч 15 мин» длиннее числа — плитке нужен шрифт помельче, иначе перенос */
.stat-num-sm { font-size: 1.5rem; }

/* -------------------------------------------------------------- бейджи */
.badge.ch-vk        { background: rgba(78,118,178,.16);  color: #7ea3d6; }
.badge.ch-telegram  { background: rgba(64,152,206,.16);  color: #74bce6; }
.badge.ch-avito     { background: rgba(160,208,80,.16);  color: #a9cf70; }
.badge.ch-wazzup    { background: rgba(37,211,102,.14);  color: #5cc98a; }
.badge.st-new       { background: rgba(15,122,79,.16);   color: #4bb98a; }
.badge.st-lost      { background: rgba(192,72,58,.14);   color: #d38377; }
.badge.st-won       { background: rgba(209,158,104,.18); color: var(--zzd-gold); }
.badge.rt-approved  { background: rgba(15,122,79,.16);   color: #4bb98a; }
.badge.rt-rejected  { background: rgba(192,72,58,.14);   color: #d38377; }
.badge.rt-edited    { background: rgba(201,138,46,.16);  color: #d9a856; }
.badge.rl-superuser { background: rgba(209,158,104,.18); color: var(--zzd-gold); }
.badge.rl-admin     { background: rgba(115,141,182,.18); color: var(--zzd-slate-blue); }

/* Ручные отметки исхода — своя, «нашего» происхождения метка, поэтому
   намеренно ярче статусов лида из CRM: их видно с первого взгляда. */
.badge.mk-booked  { background: rgba(15,122,79,.22);   color: #57c795; font-weight: 600; }
.badge.mk-came    { background: rgba(209,158,104,.24); color: var(--zzd-gold); font-weight: 600; }
.badge.mk-refused { background: rgba(192,72,58,.16);   color: #d38377; font-weight: 600; }
.badge-ghost      { background: rgba(140,140,140,.14); color: var(--zzd-muted, #9a9a9a); }
.badge-wait       { background: rgba(201,138,46,.16);  color: #d9a856; }

/* Ступени воронки по данным CRM. Продажа — зелёным, мусорный лид — серым:
   их в потоке половина, и они не должны выглядеть как проблема продаж. */
.badge.gr-sold    { background: rgba(15,122,79,.24);   color: #57c795; font-weight: 600; }
.badge.gr-came    { background: rgba(209,158,104,.24); color: var(--zzd-gold); font-weight: 600; }
.badge.gr-booked  { background: rgba(115,141,182,.20); color: #8fb0e0; }
.badge.gr-refused { background: rgba(192,72,58,.14);   color: #d38377; }
.badge.gr-junk    { background: rgba(140,140,140,.12); color: #8b8b8b; }
.badge.gr-work    { background: rgba(140,140,140,.10); color: #9aa6ba; }

/* ---------------------------------------------------------- польза ИИ */
.av-case { margin-bottom: 14px; }
.av-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
           margin-bottom: 10px; }
.av-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.av-lbl  { font-size: .8em; opacity: .6; margin-bottom: 4px; }
.av-text { white-space: pre-wrap; line-height: 1.5; }
.av-diff { white-space: pre-wrap; line-height: 1.7; }
.d-del { background: rgba(192,72,58,.16); color: #d38377;
         text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.d-add { background: rgba(15,122,79,.18); color: #57c795;
         border-radius: 3px; padding: 0 2px; }

@media (max-width: 760px) { .av-cols { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ конверсия */
.cv-pct   { font-family: var(--zzd-font-heading); }
.cv-final { color: var(--zzd-gold); font-weight: 600; }
.cv-total td { border-top: 2px solid var(--zzd-line, rgba(140,140,140,.3)); }
.warn-box { border-left: 4px solid #d9a856; background: rgba(201,138,46,.08);
            border-radius: 0; padding: .8rem 1rem; margin: 1rem 0; }

.stat-tile.rt-approved .stat-num { color: #4bb98a; }
.stat-tile.rt-rejected .stat-num { color: #d38377; }
.stat-tile.rt-edited   .stat-num { color: #d9a856; }

/* ---------------------------------------------------------- лента чата */
.chat { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }

.msg {
  max-width: 74%;
  padding: 10px 14px;
  border-radius: var(--zzd-r-md);
  border: 1px solid var(--zzd-line);
  background: rgba(127, 151, 189, .06);
}
.msg-head { display: flex; gap: 10px; align-items: baseline;
            font-family: var(--zzd-font-heading); font-size: 12px;
            letter-spacing: .04em; margin-bottom: 4px; }
.msg-head .who  { font-weight: 600; }
.msg-head .when { color: var(--zzd-muted-2); font-size: 11px; }
.msg-body { white-space: pre-wrap; word-break: break-word;
            line-height: var(--zzd-leading-body); }
.msg-note { margin-top: 6px; font-size: 11px; color: var(--zzd-muted-2);
            font-family: var(--zzd-font-heading); }

/* Клиент слева, менеджер справа, черновик ИИ — по центру и золотом:
   он не участник разговора, а подсказка. */
.msg-client  { align-self: flex-start; }
.msg-manager { align-self: flex-end; background: rgba(115,141,182,.14); }
.msg-ai_draft {
  align-self: center; max-width: 88%;
  background: rgba(209,158,104,.08);
  border: 1px dashed var(--zzd-gold);
}
.msg-ai_draft .who { color: var(--zzd-gold); }

/* Восстановленные черновики — та же золотая рамка, но приглушённая и с более
   редким пунктиром: видно, что это не боевая запись, а поднятая из памяти. */
.msg-ai_draft_recovered {
  align-self: center; max-width: 88%;
  background: rgba(209,158,104,.05);
  border: 1px dashed rgba(209,158,104,.45);
  border-spacing: 6px;
  opacity: .92;
}
.msg-ai_draft_recovered .who { color: rgba(209,158,104,.85); }
.msg-ai_draft_recovered .when::after { content: " · восстановлено"; opacity: .7; }

/* --------------------------------------------------- столбики дашборда */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 190px;
        padding: 8px 2px 0; overflow-x: auto; }
.bar-col { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column;
           align-items: center; height: 100%; }
.bar-stack { flex: 1; width: 100%; display: flex; align-items: flex-end;
             justify-content: center; gap: 1px; }
.bar { width: 32%; min-height: 1px; border-radius: 2px 2px 0 0;
       transition: filter var(--zzd-dur) var(--zzd-ease); }
.bar-client  { background: var(--zzd-slate-blue); }
.bar-manager { background: rgba(115,141,182,.45); }
.bar-draft   { background: var(--zzd-gold); }
.bar-col:hover .bar { filter: brightness(1.25); }
.bar-lbl { font-size: 10px; color: var(--zzd-muted-2); margin-top: 6px;
           font-family: var(--zzd-font-heading); white-space: nowrap; }

.legend { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 7px;
               font-size: 12px; color: var(--zzd-muted); }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-client  { background: var(--zzd-slate-blue); }
.sw-manager { background: rgba(115,141,182,.45); }
.sw-draft   { background: var(--zzd-gold); }

/* ------------------------------------------------- разбор качества ИИ */
.qcase { margin-bottom: 16px; }
.qhead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
         margin-bottom: 12px; font-family: var(--zzd-font-heading); }

.qblock { border-left: 3px solid var(--zzd-line); padding: 8px 0 8px 14px;
          margin-bottom: 10px; }
.qlabel { font-family: var(--zzd-font-heading); font-size: 11px;
          text-transform: uppercase; letter-spacing: var(--zzd-tracking-eyebrow);
          color: var(--zzd-muted-2); margin-bottom: 5px; }
.qtext  { white-space: pre-wrap; word-break: break-word; }

.qblock-client { border-left-color: var(--zzd-slate-blue); }
.qblock-ai     { border-left-color: var(--zzd-gold); }
.qblock-mgr    { border-left-color: #4bb98a; }
.qblock-none   { border-left-color: var(--zzd-danger); }
.qblock-none .qlabel { color: var(--zzd-danger); margin: 0; }

.qrate { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
         margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--zzd-line); }
.qrate input[type=text] { flex: 1 1 260px; }

/* ------------------------------------------------------- база знаний */
.chunk { margin-bottom: 12px; }
.chunk-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
              margin-bottom: 8px; font-family: var(--zzd-font-heading); }
.chunk-body { white-space: pre-wrap; word-break: break-word;
              line-height: var(--zzd-leading-body); }
.chunk-keys { margin-top: 8px; font-size: 12px; }

/* --------------------------------------------------------- адаптивность */
@media (max-width: 760px) {
  .msg { max-width: 92%; }
  .msg-ai_draft { max-width: 100%; }
  .cell-clip, .tpl-text { max-width: 200px; }
  .bars { height: 150px; }
}