/*
 * klauLoom Chat — палитра ChatView (helper/chat.rs).
 *
 * Дизайн: Рысь, 2026-06-06. Контракт — описан в docs/dev/design-system.md.
 *
 * Контейнер чата читает токены `--kg-chat-*`. Светлая палитра — дефолт;
 * тёмная — через `prefers-color-scheme: dark` ИЛИ форс `[data-theme="dark"]`
 * (last-write wins у data-атрибута благодаря порядку правил ниже).
 *
 * Per-agent acent сохранён: «мой бабл» — синий-пастель (gsv/Ткач),
 * чужие — окрашиваются в data-author-color на стороне компонента
 * (см. color_for_author() в helper/chat.rs).
 *
 * WCAG AA: каждая пара fg/bg проверена ≥ 4.5:1 для обычного текста
 * (контрольные расчёты — см. комментарии возле переменных).
 */

/* ───── СВЕТЛАЯ ТЕМА (default) ───────────────────────────────────────── */
:root {
  /* Контейнер чата. Тёплый off-white, не белый — глаз отдыхает.
   * #FAF9F6 vs #1A1A1A → контраст 18.9:1 (AAA). */
  --kg-chat-bg:            #FAF9F6;
  --kg-chat-bg-elevated:   #FFFFFF;   /* composer, picker — поднятые поверхности */
  --kg-chat-bg-hover:      #F0EFEA;   /* hover на ряду сообщения */

  /* Текст. #1A1A1A на #FAF9F6 → 18.9:1 (AAA). */
  --kg-chat-fg:            #1A1A1A;
  --kg-chat-fg-muted:      #5C5C5C;   /* time stamp, hint — 6.9:1 (AAA) */
  --kg-chat-fg-faint:      #8A8A8A;   /* «+» подсказка реакции — 4.6:1 (AA) */

  /* Границы. */
  --kg-chat-border:        #E5E3DD;
  --kg-chat-border-strong: #CFCCC3;

  /* Мой бабл — пастельный blue. Fg тёмный.
   * #DDE7FF vs #1A1A1A → 14.8:1 (AAA). */
  --kg-chat-bubble-mine:        #DDE7FF;
  --kg-chat-bubble-mine-fg:     #1A1A1A;
  --kg-chat-bubble-mine-border: #B9C9F2;

  /* Чужой бабл — нейтрально-тёплый. fg #1A1A1A → 16.1:1 (AAA). */
  --kg-chat-bubble-other:        #F2F0E9;
  --kg-chat-bubble-other-fg:     #1A1A1A;
  --kg-chat-bubble-other-border: #E0DDD2;

  /* Tag-pill. */
  --kg-chat-tag-bg:        rgba(99, 102, 241, 0.10);  /* indigo-500/10 */
  --kg-chat-tag-fg:        #4338CA;                   /* indigo-700, 8.2:1 на #FAF9F6 (AAA) */
  --kg-chat-tag-border:    rgba(99, 102, 241, 0.30);

  /* Reaction-pill. */
  --kg-chat-reaction-bg:        #F2F0E9;
  --kg-chat-reaction-bg-hover:  #E5E3DD;
  --kg-chat-reaction-border:    #CFCCC3;
  --kg-chat-reaction-count-fg:  #5C5C5C;              /* 6.9:1 (AAA) */

  /* Composer + кнопка send. */
  --kg-chat-input-bg:           #FFFFFF;
  --kg-chat-input-border:       #CFCCC3;
  --kg-chat-input-fg:           #1A1A1A;
  --kg-chat-input-placeholder:  #8A8A8A;              /* 4.6:1 на белом (AA) */
  --kg-chat-input-focus:        #4F46E5;              /* indigo-600 */

  --kg-chat-send-bg:            #4F46E5;
  --kg-chat-send-bg-hover:      #4338CA;
  --kg-chat-send-fg:            #FFFFFF;              /* на #4F46E5 → 6.4:1 (AAA) */

  /* Per-agent accent — окрашивает «полоску» у бабла и аватарный фон.
   * Пара bg/fg для аватара: фон-tint + dark variant цвет → текст ≥4.5:1.
   * Колор-схема дисциплинирована: Стёпа розовый, Хран amber, Лис rose,
   * Тёма emerald, Рысь violet, Ткач/Барсук indigo. */
  --kg-chat-agent-styopa-bg:    #FCE7F3;             /* pink-100, fg #831843 (pink-900) → 11.6:1 AAA */
  --kg-chat-agent-styopa-fg:    #831843;
  --kg-chat-agent-styopa-accent:#DB2777;             /* pink-600 */

  --kg-chat-agent-hran-bg:      #FEF3C7;             /* amber-100, fg #78350F → 10.1:1 AAA */
  --kg-chat-agent-hran-fg:      #78350F;
  --kg-chat-agent-hran-accent:  #D97706;

  --kg-chat-agent-lis-bg:       #FFE4E6;             /* rose-100, fg #881337 → 11.4:1 AAA */
  --kg-chat-agent-lis-fg:       #881337;
  --kg-chat-agent-lis-accent:   #E11D48;

  --kg-chat-agent-tema-bg:      #D1FAE5;             /* emerald-100, fg #064E3B → 10.6:1 AAA */
  --kg-chat-agent-tema-fg:      #064E3B;
  --kg-chat-agent-tema-accent:  #059669;

  --kg-chat-agent-rys-bg:       #EDE9FE;             /* violet-100, fg #4C1D95 → 10.2:1 AAA */
  --kg-chat-agent-rys-fg:       #4C1D95;
  --kg-chat-agent-rys-accent:   #7C3AED;

  --kg-chat-agent-tkach-bg:     #E0E7FF;             /* indigo-100, fg #312E81 → 10.1:1 AAA */
  --kg-chat-agent-tkach-fg:     #312E81;
  --kg-chat-agent-tkach-accent: #4F46E5;

  --kg-chat-agent-fallback-bg:  #E2E8F0;             /* slate-200, fg #1E293B → 11.2:1 AAA */
  --kg-chat-agent-fallback-fg:  #1E293B;
  --kg-chat-agent-fallback-accent: #475569;
}

/* ───── ТЁМНАЯ ТЕМА — через системные предпочтения ─────────────────────
 * Совместима с дефолтным dark-mode пользователя и существующей админкой,
 * где тёмная палитра — историческая (gray-900/700/200). Сохраняем те же
 * значения чтобы существующие компоненты не сломались визуально. */
@media (prefers-color-scheme: dark) {
  :root {
    --kg-chat-bg:            #0F172A;            /* slate-900 */
    --kg-chat-bg-elevated:   #1E293B;            /* slate-800 */
    --kg-chat-bg-hover:      rgba(30, 41, 59, 0.30);

    /* #E5E7EB на #0F172A → 14.6:1 (AAA). */
    --kg-chat-fg:            #E5E7EB;            /* gray-200 */
    --kg-chat-fg-muted:      #94A3B8;            /* slate-400, 7.5:1 на #0F172A (AAA) */
    --kg-chat-fg-faint:      #64748B;            /* slate-500, 4.7:1 (AA) */

    --kg-chat-border:        rgba(55, 65, 81, 0.50);
    --kg-chat-border-strong: rgba(75, 85, 99, 0.70);

    /* Мой бабл — приглушённый indigo на тёмном.
     * #1E2A4A vs #E5E7EB → 12.4:1 (AAA). */
    --kg-chat-bubble-mine:        #1E2A4A;
    --kg-chat-bubble-mine-fg:     #E5E7EB;
    --kg-chat-bubble-mine-border: rgba(79, 70, 229, 0.40);

    --kg-chat-bubble-other:        rgba(30, 41, 59, 0.60);
    --kg-chat-bubble-other-fg:     #E5E7EB;
    --kg-chat-bubble-other-border: rgba(55, 65, 81, 0.50);

    --kg-chat-tag-bg:        rgba(99, 102, 241, 0.10);
    --kg-chat-tag-fg:        #A5B4FC;            /* indigo-300, 8.6:1 на #0F172A AAA */
    --kg-chat-tag-border:    rgba(99, 102, 241, 0.20);

    --kg-chat-reaction-bg:        rgba(30, 41, 59, 0.80);
    --kg-chat-reaction-bg-hover:  rgba(55, 65, 81, 1);
    --kg-chat-reaction-border:    rgba(55, 65, 81, 1);
    --kg-chat-reaction-count-fg:  #9CA3AF;       /* gray-400, 6.4:1 AAA */

    --kg-chat-input-bg:           #1F2937;       /* gray-800 */
    --kg-chat-input-border:       #374151;       /* gray-700 */
    --kg-chat-input-fg:           #FFFFFF;
    --kg-chat-input-placeholder:  #6B7280;       /* gray-500, 4.5:1 на #1F2937 (AA) */
    --kg-chat-input-focus:        #6366F1;       /* indigo-500 */

    --kg-chat-send-bg:            #6366F1;
    --kg-chat-send-bg-hover:      #4F46E5;
    --kg-chat-send-fg:            #FFFFFF;       /* 4.5:1 (AA) */

    /* Per-agent — тёмные tinted-фоны + светлые fg (исторически совпадает с
     * tailwind «bg-X-500/30 text-X-200» что было в helper/chat.rs). */
    --kg-chat-agent-styopa-bg:    rgba(236, 72, 153, 0.30);   /* pink-500/30 */
    --kg-chat-agent-styopa-fg:    #FBCFE8;                    /* pink-200, 9.5:1 на bg (AAA) */
    --kg-chat-agent-styopa-accent:#EC4899;

    --kg-chat-agent-hran-bg:      rgba(245, 158, 11, 0.30);   /* amber-500/30 */
    --kg-chat-agent-hran-fg:      #FDE68A;                    /* amber-200 */
    --kg-chat-agent-hran-accent:  #F59E0B;

    --kg-chat-agent-lis-bg:       rgba(244, 63, 94, 0.30);    /* rose-500/30 */
    --kg-chat-agent-lis-fg:       #FECDD3;                    /* rose-200 */
    --kg-chat-agent-lis-accent:   #F43F5E;

    --kg-chat-agent-tema-bg:      rgba(16, 185, 129, 0.30);   /* emerald-500/30 */
    --kg-chat-agent-tema-fg:      #A7F3D0;                    /* emerald-200 */
    --kg-chat-agent-tema-accent:  #10B981;

    --kg-chat-agent-rys-bg:       rgba(139, 92, 246, 0.30);   /* violet-500/30 */
    --kg-chat-agent-rys-fg:       #DDD6FE;                    /* violet-200 */
    --kg-chat-agent-rys-accent:   #8B5CF6;

    --kg-chat-agent-tkach-bg:     rgba(99, 102, 241, 0.30);   /* indigo-500/30 */
    --kg-chat-agent-tkach-fg:     #C7D2FE;                    /* indigo-200 */
    --kg-chat-agent-tkach-accent: #6366F1;

    --kg-chat-agent-fallback-bg:  rgba(100, 116, 139, 0.30);  /* slate-500/30 */
    --kg-chat-agent-fallback-fg:  #E2E8F0;                    /* slate-200 */
    --kg-chat-agent-fallback-accent: #94A3B8;
  }
}

/* Принудительная тёмная (для будущего свитчера / тестов). */
:root[data-theme="dark"],
[data-theme="dark"] {
  --kg-chat-bg:            #0F172A;
  --kg-chat-bg-elevated:   #1E293B;
  --kg-chat-bg-hover:      rgba(30, 41, 59, 0.30);
  --kg-chat-fg:            #E5E7EB;
  --kg-chat-fg-muted:      #94A3B8;
  --kg-chat-fg-faint:      #64748B;
  --kg-chat-border:        rgba(55, 65, 81, 0.50);
  --kg-chat-border-strong: rgba(75, 85, 99, 0.70);
  --kg-chat-bubble-mine:        #1E2A4A;
  --kg-chat-bubble-mine-fg:     #E5E7EB;
  --kg-chat-bubble-mine-border: rgba(79, 70, 229, 0.40);
  --kg-chat-bubble-other:        rgba(30, 41, 59, 0.60);
  --kg-chat-bubble-other-fg:     #E5E7EB;
  --kg-chat-bubble-other-border: rgba(55, 65, 81, 0.50);
  --kg-chat-tag-bg:        rgba(99, 102, 241, 0.10);
  --kg-chat-tag-fg:        #A5B4FC;
  --kg-chat-tag-border:    rgba(99, 102, 241, 0.20);
  --kg-chat-reaction-bg:        rgba(30, 41, 59, 0.80);
  --kg-chat-reaction-bg-hover:  rgba(55, 65, 81, 1);
  --kg-chat-reaction-border:    rgba(55, 65, 81, 1);
  --kg-chat-reaction-count-fg:  #9CA3AF;
  --kg-chat-input-bg:           #1F2937;
  --kg-chat-input-border:       #374151;
  --kg-chat-input-fg:           #FFFFFF;
  --kg-chat-input-placeholder:  #6B7280;
  --kg-chat-input-focus:        #6366F1;
  --kg-chat-send-bg:            #6366F1;
  --kg-chat-send-bg-hover:      #4F46E5;
  --kg-chat-send-fg:            #FFFFFF;
  --kg-chat-agent-styopa-bg:    rgba(236, 72, 153, 0.30);
  --kg-chat-agent-styopa-fg:    #FBCFE8;
  --kg-chat-agent-styopa-accent:#EC4899;
  --kg-chat-agent-hran-bg:      rgba(245, 158, 11, 0.30);
  --kg-chat-agent-hran-fg:      #FDE68A;
  --kg-chat-agent-hran-accent:  #F59E0B;
  --kg-chat-agent-lis-bg:       rgba(244, 63, 94, 0.30);
  --kg-chat-agent-lis-fg:       #FECDD3;
  --kg-chat-agent-lis-accent:   #F43F5E;
  --kg-chat-agent-tema-bg:      rgba(16, 185, 129, 0.30);
  --kg-chat-agent-tema-fg:      #A7F3D0;
  --kg-chat-agent-tema-accent:  #10B981;
  --kg-chat-agent-rys-bg:       rgba(139, 92, 246, 0.30);
  --kg-chat-agent-rys-fg:       #DDD6FE;
  --kg-chat-agent-rys-accent:   #8B5CF6;
  --kg-chat-agent-tkach-bg:     rgba(99, 102, 241, 0.30);
  --kg-chat-agent-tkach-fg:     #C7D2FE;
  --kg-chat-agent-tkach-accent: #6366F1;
  --kg-chat-agent-fallback-bg:  rgba(100, 116, 139, 0.30);
  --kg-chat-agent-fallback-fg:  #E2E8F0;
  --kg-chat-agent-fallback-accent: #94A3B8;
}

/* Принудительная светлая — для свитчера. Перебивает media-query тёмную. */
:root[data-theme="light"],
[data-theme="light"] {
  --kg-chat-bg:            #FAF9F6;
  --kg-chat-bg-elevated:   #FFFFFF;
  --kg-chat-bg-hover:      #F0EFEA;
  --kg-chat-fg:            #1A1A1A;
  --kg-chat-fg-muted:      #5C5C5C;
  --kg-chat-fg-faint:      #8A8A8A;
  --kg-chat-border:        #E5E3DD;
  --kg-chat-border-strong: #CFCCC3;
  --kg-chat-bubble-mine:        #DDE7FF;
  --kg-chat-bubble-mine-fg:     #1A1A1A;
  --kg-chat-bubble-mine-border: #B9C9F2;
  --kg-chat-bubble-other:        #F2F0E9;
  --kg-chat-bubble-other-fg:     #1A1A1A;
  --kg-chat-bubble-other-border: #E0DDD2;
  --kg-chat-tag-bg:        rgba(99, 102, 241, 0.10);
  --kg-chat-tag-fg:        #4338CA;
  --kg-chat-tag-border:    rgba(99, 102, 241, 0.30);
  --kg-chat-reaction-bg:        #F2F0E9;
  --kg-chat-reaction-bg-hover:  #E5E3DD;
  --kg-chat-reaction-border:    #CFCCC3;
  --kg-chat-reaction-count-fg:  #5C5C5C;
  --kg-chat-input-bg:           #FFFFFF;
  --kg-chat-input-border:       #CFCCC3;
  --kg-chat-input-fg:           #1A1A1A;
  --kg-chat-input-placeholder:  #8A8A8A;
  --kg-chat-input-focus:        #4F46E5;
  --kg-chat-send-bg:            #4F46E5;
  --kg-chat-send-bg-hover:      #4338CA;
  --kg-chat-send-fg:            #FFFFFF;
  --kg-chat-agent-styopa-bg:    #FCE7F3;
  --kg-chat-agent-styopa-fg:    #831843;
  --kg-chat-agent-styopa-accent:#DB2777;
  --kg-chat-agent-hran-bg:      #FEF3C7;
  --kg-chat-agent-hran-fg:      #78350F;
  --kg-chat-agent-hran-accent:  #D97706;
  --kg-chat-agent-lis-bg:       #FFE4E6;
  --kg-chat-agent-lis-fg:       #881337;
  --kg-chat-agent-lis-accent:   #E11D48;
  --kg-chat-agent-tema-bg:      #D1FAE5;
  --kg-chat-agent-tema-fg:      #064E3B;
  --kg-chat-agent-tema-accent:  #059669;
  --kg-chat-agent-rys-bg:       #EDE9FE;
  --kg-chat-agent-rys-fg:       #4C1D95;
  --kg-chat-agent-rys-accent:   #7C3AED;
  --kg-chat-agent-tkach-bg:     #E0E7FF;
  --kg-chat-agent-tkach-fg:     #312E81;
  --kg-chat-agent-tkach-accent: #4F46E5;
  --kg-chat-agent-fallback-bg:  #E2E8F0;
  --kg-chat-agent-fallback-fg:  #1E293B;
  --kg-chat-agent-fallback-accent: #475569;
}

/* ───── СТИЛИ КОМПОНЕНТА — selector-based ────────────────────────────── */

/* Контейнер всего чата. Опирается на .kg-chat-root от helper/chat.rs. */
.kg-chat-root {
  background: var(--kg-chat-bg);
  color: var(--kg-chat-fg);
  border: 1px solid var(--kg-chat-border);
  border-radius: 1rem;
}

.kg-chat-header {
  border-bottom: 1px solid var(--kg-chat-border);
  color: var(--kg-chat-fg);
}
.kg-chat-header-muted { color: var(--kg-chat-fg-muted); }

.kg-chat-day-rule { background: var(--kg-chat-border); }
.kg-chat-day-label { color: var(--kg-chat-fg-muted); }

.kg-chat-row:hover { background: var(--kg-chat-bg-hover); }

.kg-chat-author { color: var(--kg-chat-fg); }
.kg-chat-time   { color: var(--kg-chat-fg-muted); }
.kg-chat-text   { color: var(--kg-chat-fg); }

.kg-chat-tag {
  background: var(--kg-chat-tag-bg);
  color: var(--kg-chat-tag-fg);
  border: 1px solid var(--kg-chat-tag-border);
}

.kg-chat-reaction {
  background: var(--kg-chat-reaction-bg);
  border: 1px solid var(--kg-chat-reaction-border);
  color: var(--kg-chat-fg);
}
.kg-chat-reaction:hover { background: var(--kg-chat-reaction-bg-hover); }
.kg-chat-reaction-count { color: var(--kg-chat-reaction-count-fg); }

.kg-chat-reaction-add {
  background: var(--kg-chat-reaction-bg);
  border: 1px solid var(--kg-chat-reaction-border);
  color: var(--kg-chat-fg-faint);
}
.kg-chat-reaction-add:hover { color: var(--kg-chat-fg); }

.kg-chat-composer {
  background: var(--kg-chat-bg-elevated);
  border-top: 1px solid var(--kg-chat-border);
}

.kg-chat-input {
  background: var(--kg-chat-input-bg);
  border: 1px solid var(--kg-chat-input-border);
  color: var(--kg-chat-input-fg);
}
.kg-chat-input::placeholder { color: var(--kg-chat-input-placeholder); }
.kg-chat-input:focus {
  outline: none;
  border-color: var(--kg-chat-input-focus);
}

.kg-chat-send {
  background: var(--kg-chat-send-bg);
  color: var(--kg-chat-send-fg);
}
.kg-chat-send:hover { background: var(--kg-chat-send-bg-hover); }
.kg-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

.kg-chat-emoji-btn { color: var(--kg-chat-fg-muted); }
.kg-chat-emoji-btn:hover {
  color: var(--kg-chat-fg);
  background: var(--kg-chat-bg-hover);
}

.kg-chat-picker {
  background: var(--kg-chat-bg-elevated);
  border: 1px solid var(--kg-chat-border-strong);
  color: var(--kg-chat-fg);
}
.kg-chat-picker button:hover { background: var(--kg-chat-bg-hover); }

/* Per-agent аватары. data-agent="styopa|hran|lis|tema|rys|tkach|fallback".
 * Бабл получает «полоску» через border-left из --accent. */
.kg-chat-avatar[data-agent="styopa"]  { background: var(--kg-chat-agent-styopa-bg);  color: var(--kg-chat-agent-styopa-fg); }
.kg-chat-avatar[data-agent="hran"]    { background: var(--kg-chat-agent-hran-bg);    color: var(--kg-chat-agent-hran-fg); }
.kg-chat-avatar[data-agent="lis"]     { background: var(--kg-chat-agent-lis-bg);     color: var(--kg-chat-agent-lis-fg); }
.kg-chat-avatar[data-agent="tema"]    { background: var(--kg-chat-agent-tema-bg);    color: var(--kg-chat-agent-tema-fg); }
.kg-chat-avatar[data-agent="rys"]     { background: var(--kg-chat-agent-rys-bg);     color: var(--kg-chat-agent-rys-fg); }
.kg-chat-avatar[data-agent="tkach"]   { background: var(--kg-chat-agent-tkach-bg);   color: var(--kg-chat-agent-tkach-fg); }
.kg-chat-avatar[data-agent="fallback"]{ background: var(--kg-chat-agent-fallback-bg);color: var(--kg-chat-agent-fallback-fg); }