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

/* ------------------------------------------------------------- мелочи */
.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; }

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

/* -------------------------------------------------------------- бейджи */
.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.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); }

.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); }

/* --------------------------------------------------- столбики дашборда */
.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; }
}