/* Актив-Б — Talk-бренд: список бесед + комната (карта ~/cloud/05 §8 п.9). Субагент #2 */
/* Поверх brand.css (палитра --ab-*). Селекторы NC33/Talk 23: список = .app-navigation
   (legacy-режим), комната = .top-bar / .chatView / .new-message-form.
   Грабля F2.21: текст сообщений = .message-main__text + .rich-text--wrapper.
   ВАЖНО (грабля этой сессии): NC33 у юзера с дефолтной темой ставит body
   data-theme-default/data-themes="default" — РАЗЛИЧАТЬ ТЕМЫ надо не по атрибутам
   body, а по вычисленным CSS-переменным (--color-main-background) или
   @media (prefers-color-scheme), атрибуты data-theme-dark/light существуют
   только при явно выбранной теме. */

/* ============================================================
   0. Переменные Talk-контекста: NC-dark в Talk красит всё
      в чистый чёрный #171717 — уводим на графит Актив-Б.
   ============================================================ */
body {
  --ab-talk-hover: rgba(255, 164, 33, 0.14);
  --ab-talk-accent: #ffb64d;
  --ab-talk-border: rgba(255, 164, 33, 0.14);
}
/* тёмная тема (только когда фон реально тёмный) */
@media (prefers-color-scheme: dark) {
  body {
    --ab-talk-hover: rgba(255, 164, 33, 0.18);
    --ab-talk-accent: #ffb64d;
  }
}
body[data-theme-dark] {
  --color-main-background: #2b2929;        /* графит, не чёрный (база brand.css) */
  --color-main-background-dark: #3b3838;
  --color-background-dark: #332f2f;
  --color-primary-hover: #ff5e14;
  --color-primary-element-hover: #ff5e14;
  --color-primary-text: #ffffff;
  --color-text-maxcontrast: #a89f99;        /* серо-тёплый вместо #999 */
}

/* Шрифт: NC33-theming пишет [data-theme-*]{--font-face:system-ui…} на BODY,
   что перебивает brand.css :root (specificity 0-1-0 на body vs 0-1-0 на root,
   body ближе = выигрывает). Возвращаем Montserrat внутри Talk селектором
   той же специфичности, но позже по порядку (brand-talk грузится после theme). */
body[data-theme-light],
body[data-theme-dark],
body[data-theme-default],
body {
  --font-face: 'Montserrat', 'Noto Sans', system-ui, sans-serif;
}

/* ============================================================
   1. Левая колонка — список бесед
   ============================================================ */
/* тёмная: графит вместо NC-чёрного; светлая: лёгкая графитовая
   подложка, отделяющая колонку от белой комнаты */
.app-navigation--legacy.app-navigation {
  background-color: var(--color-main-background, #f2f2f5);
}
body[data-theme-dark] .app-navigation--legacy.app-navigation {
  background-color: rgba(59, 56, 56, 0.92);
  backdrop-filter: blur(6px);
  border-inline-end: 1px solid rgba(255, 164, 33, 0.14);
  color: #eee9e5;
}

/* строка беседы: воздух и ровный ритм (по умолчанию слипаются 52-54px впритык) */
.app-navigation .conversation .list-item {
  margin: 2px 8px;
  border-radius: 10px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.app-navigation .conversation .list-item__anchor {
  border-radius: 10px;
}
/* hover — оранжевый мягкий, не серый NC */
.app-navigation--legacy .conversation .list-item:hover {
  background-color: var(--ab-talk-hover) !important;
}
.app-navigation--legacy .conversation .list-item:hover .conversation-name,
.app-navigation--legacy .conversation .list-item:hover .line-one__text,
.app-navigation--legacy .conversation .list-item:hover .line-two__text {
  color: var(--ab-orange-deep, #ff5e14);
}
body[data-theme-dark] .app-navigation--legacy .conversation .list-item:hover .conversation-name,
body[data-theme-dark] .app-navigation--legacy .conversation .list-item:hover .line-one__text,
body[data-theme-dark] .app-navigation--legacy .conversation .list-item:hover .line-two__text {
  color: #ffb64d;
}

/* активная беседа: NC рисует плоский оранжевый #c07400 с чёрным текстом
   (контраст ~2.1 — ниже нормы). Заменяем на мягкую плашку + рейку.
   Реальный селектор NC33: .list-item__wrapper--active на li. */
.app-navigation .list-item__wrapper--active .list-item {
  background-color: rgba(255, 164, 33, 0.18) !important;
  box-shadow: inset 3px 0 0 var(--ab-orange, #ffa421);
  color: var(--ab-graphite, #3b3838);
}
/* имя активной: NC legacy пишет color:var(--color-primary-element-text)!important —
   перебиваем своей !important + большей специфичностью */
.app-navigation li.list-item__wrapper.list-item__wrapper--active .list-item-content__name {
  color: var(--ab-orange-deep, #ff5e14) !important;
  font-weight: 600;
}
body[data-theme-dark] .app-navigation .list-item__wrapper--active .list-item {
  background-color: rgba(255, 164, 33, 0.16) !important;
  color: #eee9e5;
}
body[data-theme-dark] .app-navigation li.list-item__wrapper.list-item__wrapper--active .list-item-content__name {
  color: #ffb64d !important;
}
/* фильтры-якори «Все/Непрочитанные» над списком */
.app-navigation .app-navigation-entry.active {
  background-color: var(--ab-talk-hover) !important;
  box-shadow: inset 3px 0 0 var(--ab-orange, #ffa421);
}
.app-navigation .app-navigation-entry.active .app-navigation-entry__name {
  color: var(--ab-orange-deep, #ff5e14);
  font-weight: 600;
}
body[data-theme-dark] .app-navigation .app-navigation-entry.active .app-navigation-entry__name {
  color: #ffb64d;
}

/* непрочитанные: счётчик NC33 = .counter-bubble__counter.list-item-details__counter
   (песочная плашка #f8f1e5 на #66410d — это NC «warning», не бренд).
   Заменяем на оранжевую с белым — читается в обеих темах. */
.app-navigation .conversation .counter-bubble__counter.list-item-details__counter,
.app-navigation .conversation .list-item-details__counter {
  background-color: var(--ab-orange, #ffa421) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 11px;
  padding-inline: 5px;
  box-sizing: border-box;
}
/* вторичная строка (превью сообщения) не должна сливаться с именем */
.conversation .list-item-content__details,
.conversation .line-two__text,
.conversation .conversation-preview {
  color: var(--color-text-maxcontrast);
}

/* кнопки над списком: hover оранжевым вместо серого */
.app-navigation .button-vue--tertiary:hover,
.app-navigation .button-vue--tertiary:focus-visible,
.app-navigation .action-item__menutoggle:hover {
  background-color: var(--ab-talk-hover);
  color: var(--ab-orange-deep, #ff5e14);
}
body[data-theme-dark] .app-navigation .button-vue--tertiary:hover,
body[data-theme-dark] .app-navigation .button-vue--tertiary:focus-visible,
body[data-theme-dark] .app-navigation .action-item__menutoggle:hover {
  color: #ffb64d;
}
/* поле поиска бесед */
.app-navigation .conversations-search input,
.app-navigation input[type='text'],
.app-navigation input[type='search'] {
  border: 1px solid transparent;
  border-radius: 9px;
  background-color: rgba(127, 127, 127, 0.12);
  color: inherit;
}
.app-navigation .conversations-search input::placeholder,
.app-navigation input::placeholder {
  color: var(--color-text-maxcontrast);
}
.app-navigation .conversations-search input:focus,
.app-navigation input[type='text']:focus,
.app-navigation input[type='search']:focus {
  border-color: var(--ab-orange, #ffa421) !important;
}

/* ============================================================
   2. Скроллбары (список виртуализирован; F2.5: повторный
      scrollTop после автоскролла, скроллбар не пересоздавать)
   ============================================================ */
.app-navigation .scroller,
.app-navigation ul.app-navigation__list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 164, 33, 0.55) transparent;
}
.app-navigation .scroller::-webkit-scrollbar,
.chatView .scroller::-webkit-scrollbar,
.chatView .messages-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.app-navigation .scroller::-webkit-scrollbar-thumb,
.chatView .scroller::-webkit-scrollbar-thumb,
.chatView .messages-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 164, 33, 0.5);
  border-radius: 4px;
}
.app-navigation .scroller::-webkit-scrollbar-thumb:hover,
.chatView .scroller::-webkit-scrollbar-thumb:hover {
  background-color: var(--ab-orange, #ffa421);
}
.app-navigation .scroller::-webkit-scrollbar-track,
.chatView .scroller::-webkit-scrollbar-track {
  background-color: transparent;
}

/* ============================================================
   3. Шапка беседы (top-bar) — графит в обеих темах
   ============================================================ */
.top-bar.top-bar--authorised {
  background-color: #3b3838;
  color: #f5f2f0;
  border-bottom: 1px solid rgba(255, 164, 33, 0.25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.top-bar .top-bar__wrapper,
.top-bar h2,
.top-bar .conversation-title {
  color: #ffffff !important;
}
.top-bar .top-bar__wrapper p,
.top-bar .top-bar__wrapper [class*='description'] {
  color: #c9c2bd !important;
}
/* иконки-действия в шапке читаемы на графите */
.top-bar .button-vue--tertiary,
.top-bar .action-item__menutoggle,
.top-bar .material-design-icon {
  color: #f0ebe7;
}
.top-bar .button-vue--tertiary:hover,
.top-bar .action-item__menutoggle:hover {
  background-color: rgba(255, 164, 33, 0.18);
  color: #ffb64d;
}
/* кнопка «Начать вызов»: NC красит её в success-зелёный */
.top-bar .button-vue--success,
.top-bar__buttons .button-vue--success {
  background-color: var(--ab-orange, #ffa421) !important;
  border: none !important;
  color: #ffffff !important;
}
.top-bar .button-vue--success:hover {
  background-color: var(--ab-orange-deep, #ff5e14) !important;
}
.top-bar .button-vue--success .button-vue__text {
  color: #ffffff !important;
}

/* ============================================================
   4. Комната: сообщения, разделители, реакции
   ============================================================ */
/* автора — акцентом, не #999 на графите */
body[data-theme-dark] .messages .author,
body[data-theme-dark] .messages-group .author {
  color: #ffb64d;
  font-weight: 600;
}
.messages .message-body .message__author,
.messages .message-body__author {
  font-weight: 600;
}
/* основной текст: F2.21 — селекторы .message-main__text/.rich-text--wrapper,
   красим только читаемость (line-height/перенос), цвет наследуется от темы */
.message-main__text,
.rich-text--wrapper {
  line-height: 1.45;
  overflow-wrap: anywhere;
}
/* системные сообщения («обсуждение создано…») приглушить */
.message-body.system,
.messages-group__system .message-body__text,
li.wrapper--system {
  color: var(--color-text-maxcontrast);
  font-size: 12.5px;
}
/* реакции-эмодзи плашки */
.message .reaction-button,
.reactions-button__emoji {
  border-radius: 8px;
}

/* ============================================================
   5. Поле ввода
   ============================================================ */
.new-message-form .rich-contenteditable__input {
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
body[data-theme-dark] .new-message-form .rich-contenteditable__input {
  background-color: #332f2f !important;   /* графит, не #171717 */
  color: #eee9e5 !important;
}
.new-message-form .rich-contenteditable__input:focus,
.new-message-form .rich-contenteditable__input:focus-within {
  border-color: var(--ab-orange, #ffa421) !important;
}
/* кнопки вокруг поля */
.new-message-form .button-vue--tertiary:hover,
.new-message-form .action-item__menutoggle:hover {
  background-color: var(--ab-talk-hover);
}
body[data-theme-dark] .new-message-form .button-vue--tertiary:hover,
body[data-theme-dark] .new-message-form .action-item__menutoggle:hover {
  color: #ffb64d;
}
/* ответ на сообщение — чипс над полем */
.new-message-form .reply,
.new-message-form [class*='reply'] {
  border-inline-start: 3px solid var(--ab-orange, #ffa421);
}

/* ============================================================
   6. Пустая комната / призывы
   ============================================================ */
.chatView .empty-content,
.chatView .messages-list__indicator,
.chatView .hint {
  color: var(--color-text-maxcontrast);
}

/* ============================================================
   7. Дашборд Talk (первый экран приложения)
   ============================================================ */
.talk-dashboard-wrapper .talk-dashboard__header {
  font-weight: 600;
}
/* primary — оранжевая с белым текстом (NC33 кладёт чёрный текст на оранж) */
.talk-dashboard__actions .button-vue--primary {
  background-color: var(--ab-orange, #ffa421) !important;
  color: #ffffff !important;
}
.talk-dashboard__actions .button-vue--primary .button-vue__text {
  color: #ffffff !important;
}
/* вторичные кнопки: NC рисует их песочными #f8f1e5/#66410d (warning-цвета,
   к бренду отношения не имеют) — приводим к нейтрально-оранжевому контуру */
.talk-dashboard__actions .button-vue--secondary {
  background-color: transparent !important;
  color: var(--ab-orange-deep, #ff5e14) !important;
  border: 1px solid rgba(255, 164, 33, 0.5) !important;
}
body[data-theme-dark] .talk-dashboard__actions .button-vue--secondary {
  color: #ffb64d !important;
}
.talk-dashboard__actions .button-vue--secondary .button-vue__text {
  color: inherit !important;
}
.talk-dashboard__actions .button-vue--secondary:hover {
  background-color: var(--ab-talk-hover) !important;
}
/* карточки-секции дашборда */
.talk-dashboard__items .dashboard-section {
  border-radius: 12px;
  border: 1px solid rgba(59, 56, 56, 0.12);
}
body[data-theme-dark] .talk-dashboard__items .dashboard-section {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   8. Поповеры меню беседы
   ============================================================ */
.v-popper--theme-nc-popover .v-popper__inner {
  border-radius: 10px;
}
.v-popper--theme-nc-popover button:hover,
.v-popper--theme-nc-popover .action:hover {
  background-color: var(--ab-talk-hover);
}