/* Aidana — доступность интерфейса (WCAG 2.2 AA).
 *
 * Загружается только внутри документов чата (chat_ui*.html), которые виджет
 * открывает в <iframe>. На host-страницу (enbek.kz / aleumet.egov.kz) этот файл
 * не попадает никогда. Тем не менее ВСЕ селекторы дополнительно ограничены
 * контейнером [data-aidana-a11y] или префиксом .aidana-a11y — глобальных
 * селекторов тега (button, input, textarea, svg, a), а также body, html и
 * универсального селектора здесь нет by design.
 *
 * Состояния (атрибуты на .chat-container):
 *   data-a11y-contrast = normal | light | dark
 *   data-a11y-spacing  = off | on
 *   data-a11y-motion   = auto | reduce | auto-allow
 *   data-a11y-stack    = 0 (до 150%) | 1 (150%+) | 2 (175%+, аватар скрыт)
 *   --aidana-font-scale = 1 | 1.25 | 1.5 | 1.75 | 2
 *
 * Контрастность палитр проверена численно, не на глаз (см.
 * docs/ai/knowledge/accessibility.md, таблица ratio).
 */

/* ------------------------------------------------------------------ */
/* Утилиты                                                             */
/* ------------------------------------------------------------------ */

/* Видно только screen reader'у. Не display:none — иначе SR не прочитает. */
.aidana-a11y-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Базовые токены                                                      */
/* ------------------------------------------------------------------ */

[data-aidana-a11y] {
    --aidana-font-scale: 1;
    /* Кольцо фокуса: в обычной теме синее, в контрастных переопределяется. */
    --aidana-focus: #0A46B8;
    --aidana-focus-offset: 2px;
    --aidana-focus-width: 3px;
}

/* ------------------------------------------------------------------ */
/* Масштаб текста 100..200%                                            */
/* ------------------------------------------------------------------ */
/* Существующий CSS чата задан в px, поэтому масштабируем адресно —
 * по конечному списку селекторов, несущих текст. Имена классов совпадают
 * во всех трёх chat_ui-файлах, поэтому один блок покрывает все. */

[data-aidana-a11y] .chat-header .info h3        { font-size: calc(16px * var(--aidana-font-scale)); }
[data-aidana-a11y] .chat-header .info p         { font-size: calc(12px * var(--aidana-font-scale)); }
[data-aidana-a11y] .message,
[data-aidana-a11y] .message-text,
[data-aidana-a11y] .msg-text                    { font-size: calc(14px * var(--aidana-font-scale)); }
[data-aidana-a11y] .message-time                { font-size: calc(10px * var(--aidana-font-scale)); }
[data-aidana-a11y] .message.system              { font-size: calc(12px * var(--aidana-font-scale)); }
[data-aidana-a11y] .quick-actions button        { font-size: calc(12px * var(--aidana-font-scale)); }
[data-aidana-a11y] .chat-input input,
[data-aidana-a11y] .chat-input textarea         { font-size: calc(14px * var(--aidana-font-scale)); }
[data-aidana-a11y] #sendBtn                     { font-size: calc(16px * var(--aidana-font-scale)); }
[data-aidana-a11y] #endChatBtn                  { font-size: calc(16px * var(--aidana-font-scale)); }
[data-aidana-a11y] .complaint-link              { font-size: calc(12.5px * var(--aidana-font-scale)); }
[data-aidana-a11y] .powered-by                  { font-size: calc(10px * var(--aidana-font-scale)); }
[data-aidana-a11y] .status-banner,
[data-aidana-a11y] .status-banner span          { font-size: calc(11px * var(--aidana-font-scale)); }
[data-aidana-a11y] .lp-greet                    { font-size: calc(14px * var(--aidana-font-scale)); }
[data-aidana-a11y] .lp-btns button              { font-size: calc(16px * var(--aidana-font-scale)); }
[data-aidana-a11y] .closure-card h3             { font-size: calc(16px * var(--aidana-font-scale)); }
[data-aidana-a11y] .closure-card button         { font-size: calc(14px * var(--aidana-font-scale)); }
[data-aidana-a11y] .operator-card .text         { font-size: calc(12px * var(--aidana-font-scale)); }
[data-aidana-a11y] .cf-title                    { font-size: calc(15px * var(--aidana-font-scale)); }
[data-aidana-a11y] .cf-step-label               { font-size: calc(12px * var(--aidana-font-scale)); }
[data-aidana-a11y] .cf-field label,
[data-aidana-a11y] .cf-field input,
[data-aidana-a11y] .cf-field textarea,
[data-aidana-a11y] .cf-field select,
[data-aidana-a11y] .cf-btn                      { font-size: calc(14px * var(--aidana-font-scale)); }

/* Панель настроек масштабируется вместе с остальным интерфейсом. */
[data-aidana-a11y] .aidana-a11y-panel           { font-size: calc(13px * var(--aidana-font-scale)); }
[data-aidana-a11y] .aidana-a11y-panel h2        { font-size: calc(15px * var(--aidana-font-scale)); }
[data-aidana-a11y] .aidana-a11y-panel legend    { font-size: calc(12px * var(--aidana-font-scale)); }

/* Reflow: при крупном шрифте фиксированные размеры обязаны отпускать контент.
 * Без этого 200% обрезает пузыри и ломает шапку — п.4 и п.20 требований. */
/* Атрибут висит на самом .chat-container, поэтому селектор без пробела. */
[data-aidana-a11y] {
    max-width: 100%;
    /* height:700px в базовом CSS — заменяем на «не выше вьюпорта». */
    max-height: 100vh;
    max-height: 100dvh;
}
[data-aidana-a11y] .message {
    max-width: 92%;
    /* Длинные RU/KK слова, ссылки и номера не должны распирать контейнер. */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    /* Никаких фиксированных высот у текстовых контейнеров. */
    height: auto;
    min-height: 0;
}
[data-aidana-a11y] .message-text,
[data-aidana-a11y] .msg-text {
    overflow-wrap: anywhere;
    height: auto;
}
/* Раскладка колонки. Правила ниже связаны — менять только вместе.
 *
 * 1. Шапка/ввод/подвал НЕ сжимаются (flex-shrink:0). Без этого при крупном
 *    шрифте flex сжимал шапку, а её перенесённое содержимое рисовалось ПОВЕРХ
 *    ленты сообщений (кнопки «глаз» и «назад» наезжали на диалог).
 * 2. Лента сообщений, наоборот, обязана уметь сжиматься: min-height:0 снимает
 *    флексовый auto-минимум, иначе элемент с overflow-y:auto не скроллится,
 *    а выдавливает соседей.
 * 3. Быстрым ответам разрешено сжиматься, но их содержимое не теряется:
 *    высота ограничена 30vh, дальше работает собственная прокрутка. */
[data-aidana-a11y] .chat-header {
    flex-wrap: wrap;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    row-gap: 8px;
}
[data-aidana-a11y] .chat-messages {
    flex: 1 1 0;
    min-height: 96px;
    overflow-y: auto;
}
[data-aidana-a11y] .chat-input,
[data-aidana-a11y] .chat-footer,
[data-aidana-a11y] .powered-by {
    flex: 0 0 auto;
}
[data-aidana-a11y] .quick-actions {
    flex: 0 1 auto;
    flex-wrap: wrap;
    height: auto;
    /* Собственная прокрутка вместо выдавливания ленты сообщений. */
    max-height: 30vh;
    overflow-y: auto;
}
/* flex-basis именно 0, а не auto. Шапке выше включён flex-wrap:wrap (он нужен
 * при шрифте 150%+), а при basis:auto браузер сначала переносит строку и только
 * потом сжимает: на 320–390px кнопка «назад» уезжала на вторую строку и шапка
 * вырастала со 69px до 121px при обычном шрифте. С basis:0 всё помещается в одну
 * строку, а stack-правило ниже (flex:1 1 100%) продолжает перестраивать шапку
 * в две строки там, где это действительно нужно. */
[data-aidana-a11y] .chat-header .info {
    min-width: 0;
    flex: 1 1 0;
}
[data-aidana-a11y] .chat-header .info h3,
[data-aidana-a11y] .chat-header .info p {
    overflow-wrap: anywhere;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
[data-aidana-a11y] .quick-actions button {
    white-space: normal;
    height: auto;
    overflow-wrap: anywhere;
}
[data-aidana-a11y] .chat-input {
    flex-wrap: wrap;
    height: auto;
}
[data-aidana-a11y] .chat-input input,
[data-aidana-a11y] .chat-input textarea {
    min-width: 0;
    flex: 1 1 8em;
    height: auto;
}

/* Начиная со 150% шапка и поле ввода перестраиваются вертикально —
 * иначе на 320px кнопки наезжают друг на друга.
 *
 * Шапка становится двухстрочной и предсказуемой:
 *   строка 1 — управляющие кнопки (глаз, назад, индикатор);
 *   строка 2 — заголовок и подзаголовок во всю ширину.
 * order не расходится с порядком фокуса: в первой строке лежат оба
 * фокусируемых контрола, во второй — только текст. */
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .chat-header .info {
    flex: 1 1 100%;
    order: 2;
}
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .chat-header .avatar,
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .chat-header .status,
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .chat-header .header-right,
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .aidana-a11y-trigger,
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) #endChatBtn {
    order: 1;
}
/* Аватар — чисто декоративный (aria-hidden), при 175%+ он только отъедает
 * место у заголовка на узком экране. */
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .chat-header {
    padding-top: 12px;
    padding-bottom: 12px;
}
[data-aidana-a11y][data-a11y-stack="2"] .chat-header .avatar {
    display: none;
}
/* Ширину пузыря при обычном шрифте задаёт дизайн чата (.message.bot/.message.user,
 * та же специфичность 0-2-0, выигрывает порядком подключения). Начиная со 150%
 * текста экономия ширины важнее пропорций — возвращаем reflow-поведение. */
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .message {
    max-width: 96%;
}
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .chat-input {
    align-items: stretch;
}
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .chat-input input,
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) .chat-input textarea {
    flex: 1 1 100%;
}
[data-aidana-a11y][data-a11y-stack]:not([data-a11y-stack="0"]) #sendBtn {
    width: 100%;
    border-radius: 12px;
}

/* Целевой размер указателя: WCAG 2.2 AA (2.5.8) минимум 24x24. */
[data-aidana-a11y] #sendBtn,
[data-aidana-a11y] #endChatBtn,
[data-aidana-a11y] .aidana-a11y-trigger,
[data-aidana-a11y] .aidana-a11y-panel button {
    min-width: 44px;
    min-height: 44px;
}
[data-aidana-a11y] .quick-actions button,
[data-aidana-a11y] .complaint-link {
    min-height: 24px;
}

/* ------------------------------------------------------------------ */
/* Интервалы текста (WCAG 1.4.12 Text Spacing)                         */
/* ------------------------------------------------------------------ */
/* Значения = ровно те, что 1.4.12 требует пережить без потери контента.
 * Применяем к тексту сообщений и панели, но НЕ к полю ввода — там это
 * ломает каретку в некоторых браузерах. */

[data-aidana-a11y][data-a11y-spacing="on"] .message,
[data-aidana-a11y][data-a11y-spacing="on"] .message-text,
[data-aidana-a11y][data-a11y-spacing="on"] .msg-text,
[data-aidana-a11y][data-a11y-spacing="on"] .lp-greet,
[data-aidana-a11y][data-a11y-spacing="on"] .aidana-a11y-panel {
    line-height: 1.6 !important;      /* >= 1.5 */
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
[data-aidana-a11y][data-a11y-spacing="on"] .message + .message {
    margin-top: 2em;                  /* >= 2x font-size между абзацами */
}
/* Ссылки, номера и inline-код при увеличенных интервалах не должны рваться
 * посередине: даём им переносить только по-настоящему длинные строки. */
[data-aidana-a11y][data-a11y-spacing="on"] .message a,
[data-aidana-a11y][data-a11y-spacing="on"] .message code {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Высокий контраст — светлая тема                                     */
/* ------------------------------------------------------------------ */
/* Переопределяем ПЕРЕМЕННЫЕ всех трёх namespace'ов сразу. Существующий CSS
 * уже читает их через var(), поэтому одна декларация красит весь интерфейс,
 * а diff остаётся крошечным. */

[data-aidana-a11y][data-a11y-contrast="light"] {
    /* aleumet (crtr) */
    --aleumet-bg: #FFFFFF;
    --aleumet-surface: #FFFFFF;
    --aleumet-text: #000000;
    --aleumet-subtle: #000000;
    --aleumet-muted: #1F2124;
    --aleumet-border: #3A3A3A;
    --aleumet-border-strong: #000000;
    --aleumet-primary: #0A46B8;
    --aleumet-primary-hover: #072F7D;
    --aleumet-primary-soft: #FFFFFF;
    --aleumet-secondary: #0A46B8;
    --aleumet-accent: #A5003C;
    --aleumet-success: #0B5B2E;
    --aleumet-success-soft: #FFFFFF;
    /* enbek */
    --enbek-bg: #FFFFFF;
    --enbek-surface: #FFFFFF;
    --enbek-text: #000000;
    --enbek-subtle: #000000;
    --enbek-muted: #1F2124;
    --enbek-border: #3A3A3A;
    --enbek-border-strong: #000000;
    --enbek-primary: #0A46B8;
    --enbek-primary-hover: #072F7D;
    --enbek-primary-strong: #0A46B8;
    --enbek-primary-soft: #FFFFFF;
    --enbek-success: #0B5B2E;
    --enbek-success-soft: #FFFFFF;
    /* hr (Портал трудовых ресурсов). Брендовый бирюзовый в контрастном режиме
     * не выживает: даже затемнённый #0E7F60 на белом даёт 4.97:1, а здесь
     * нужен максимум — поэтому берём тот же синий, что у остальных порталов. */
    --hr-bg: #FFFFFF;
    --hr-surface: #FFFFFF;
    --hr-text: #000000;
    --hr-subtle: #000000;
    --hr-muted: #1F2124;
    --hr-border: #3A3A3A;
    --hr-border-strong: #000000;
    --hr-primary: #0A46B8;
    --hr-primary-hover: #072F7D;
    --hr-primary-soft: #FFFFFF;
    --hr-accent: #0A46B8;
    --hr-dark: #000000;
    --hr-success: #0B5B2E;
    --hr-success-soft: #FFFFFF;
    --hr-operator-soft: #FFFFFF;
    --hr-operator-ink: #000000;
    --hr-operator-border: #3A3A3A;
    /* migration (Портал трудовой миграции). Как и у hr — брендовый петроль
     * #245369 в контрастном режиме не нужен заменять по контрасту (8.35:1
     * и так проходит), но здесь максимальный режим требует того же общего
     * синего, что у остальных порталов — единообразие важнее оттенка бренда. */
    --migration-bg: #FFFFFF;
    --migration-surface: #FFFFFF;
    --migration-text: #000000;
    --migration-subtle: #000000;
    --migration-muted: #1F2124;
    --migration-border: #3A3A3A;
    --migration-border-strong: #000000;
    --migration-primary: #0A46B8;
    --migration-primary-hover: #072F7D;
    --migration-primary-soft: #FFFFFF;
    --migration-accent: #0A46B8;
    --migration-dark: #000000;
    --migration-success: #0B5B2E;
    --migration-success-soft: #FFFFFF;
    --migration-operator-soft: #FFFFFF;
    --migration-operator-ink: #000000;
    --migration-operator-border: #3A3A3A;
    /* unified */
    --primary: #0A46B8;
    --primary-dark: #072F7D;
    --accent: #A5003C;
    --green: #0B5B2E;
    --bg: #FFFFFF;
    --border: #3A3A3A;
    --text: #000000;
    --text-light: #1F2124;
    /* фокус */
    --aidana-focus: #A5003C;
}

/* ------------------------------------------------------------------ */
/* Высокий контраст — тёмная тема                                      */
/* ------------------------------------------------------------------ */

[data-aidana-a11y][data-a11y-contrast="dark"] {
    /* aleumet (crtr) */
    --aleumet-bg: #000000;
    --aleumet-surface: #12141A;
    --aleumet-text: #FFFFFF;
    --aleumet-subtle: #FFFFFF;
    --aleumet-muted: #E4E6EA;
    --aleumet-border: #9AA4B2;
    --aleumet-border-strong: #FFFFFF;
    --aleumet-primary: #8FB8FF;
    --aleumet-primary-hover: #B9D2FF;
    --aleumet-primary-soft: #1B1F27;
    --aleumet-secondary: #8FB8FF;
    --aleumet-accent: #FFD24A;
    --aleumet-success: #7BE0A4;
    --aleumet-success-soft: #12141A;
    /* enbek */
    --enbek-bg: #000000;
    --enbek-surface: #12141A;
    --enbek-text: #FFFFFF;
    --enbek-subtle: #FFFFFF;
    --enbek-muted: #E4E6EA;
    --enbek-border: #9AA4B2;
    --enbek-border-strong: #FFFFFF;
    --enbek-primary: #8FB8FF;
    --enbek-primary-hover: #B9D2FF;
    --enbek-primary-strong: #8FB8FF;
    --enbek-primary-soft: #1B1F27;
    --enbek-success: #7BE0A4;
    --enbek-success-soft: #12141A;
    /* hr (Портал трудовых ресурсов) */
    --hr-bg: #000000;
    --hr-surface: #12141A;
    --hr-text: #FFFFFF;
    --hr-subtle: #FFFFFF;
    --hr-muted: #E4E6EA;
    --hr-border: #9AA4B2;
    --hr-border-strong: #FFFFFF;
    --hr-primary: #8FB8FF;
    --hr-primary-hover: #B9D2FF;
    --hr-primary-soft: #1B1F27;
    --hr-accent: #8FB8FF;
    --hr-dark: #000000;
    --hr-success: #7BE0A4;
    --hr-success-soft: #12141A;
    --hr-operator-soft: #1B1F27;
    --hr-operator-ink: #FFFFFF;
    --hr-operator-border: #9AA4B2;
    /* migration (Портал трудовой миграции) */
    --migration-bg: #000000;
    --migration-surface: #12141A;
    --migration-text: #FFFFFF;
    --migration-subtle: #FFFFFF;
    --migration-muted: #E4E6EA;
    --migration-border: #9AA4B2;
    --migration-border-strong: #FFFFFF;
    --migration-primary: #8FB8FF;
    --migration-primary-hover: #B9D2FF;
    --migration-primary-soft: #1B1F27;
    --migration-accent: #8FB8FF;
    --migration-dark: #000000;
    --migration-success: #7BE0A4;
    --migration-success-soft: #12141A;
    --migration-operator-soft: #1B1F27;
    --migration-operator-ink: #FFFFFF;
    --migration-operator-border: #9AA4B2;
    /* unified */
    --primary: #8FB8FF;
    --primary-dark: #6E9CEE;
    --accent: #FFD24A;
    --green: #7BE0A4;
    --bg: #000000;
    --border: #9AA4B2;
    --text: #FFFFFF;
    --text-light: #E4E6EA;
    /* фокус */
    --aidana-focus: #FFD24A;
}

/* Не всё в базовом CSS ходит через переменные — часть цветов зашита
 * литералами (#fff, #e8eaf0 и т.п.). Ниже адресные правки только для
 * контрастных режимов; в обычной теме дизайн не трогаем. */

[data-aidana-a11y][data-a11y-contrast="light"],
[data-aidana-a11y][data-a11y-contrast="light"] .chat-messages,
[data-aidana-a11y][data-a11y-contrast="light"] .chat-header,
[data-aidana-a11y][data-a11y-contrast="light"] .chat-input,
[data-aidana-a11y][data-a11y-contrast="light"] .chat-footer,
[data-aidana-a11y][data-a11y-contrast="light"] .quick-actions {
    background: #FFFFFF;
    color: #000000;
}
[data-aidana-a11y][data-a11y-contrast="dark"],
[data-aidana-a11y][data-a11y-contrast="dark"] .chat-messages {
    background: #000000;
    color: #FFFFFF;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .chat-header,
[data-aidana-a11y][data-a11y-contrast="dark"] .chat-input,
[data-aidana-a11y][data-a11y-contrast="dark"] .chat-footer,
[data-aidana-a11y][data-a11y-contrast="dark"] .quick-actions {
    background: #12141A;
    color: #FFFFFF;
}

/* Пузыри сообщений: контрастные и с видимой границей — форма отличается
 * не только цветом (п.5: не передавать состояние одним лишь цветом). */
[data-aidana-a11y][data-a11y-contrast="light"] .message.bot {
    background: #F2F4F7;
    color: #000000;
    border: 2px solid #3A3A3A;
}
[data-aidana-a11y][data-a11y-contrast="light"] .message.user {
    background: #0A46B8;
    color: #FFFFFF;
    border: 2px solid #072F7D;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .message.bot {
    background: #1B1F27;
    color: #FFFFFF;
    border: 2px solid #9AA4B2;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .message.user {
    background: #8FB8FF;
    color: #000000;
    border: 2px solid #FFFFFF;
}
[data-aidana-a11y][data-a11y-contrast="light"] .message.system,
[data-aidana-a11y][data-a11y-contrast="dark"] .message.system {
    background: transparent;
    border: 1px dashed currentColor;
}

/* Поля ввода и кнопки */
[data-aidana-a11y][data-a11y-contrast="light"] .chat-input input,
[data-aidana-a11y][data-a11y-contrast="light"] .chat-input textarea {
    background: #FFFFFF;
    color: #000000;
    border: 2px solid #3A3A3A;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .chat-input input,
[data-aidana-a11y][data-a11y-contrast="dark"] .chat-input textarea {
    background: #000000;
    color: #FFFFFF;
    border: 2px solid #9AA4B2;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .chat-input input::placeholder,
[data-aidana-a11y][data-a11y-contrast="dark"] .chat-input textarea::placeholder {
    color: #C9CDD4;
}
[data-aidana-a11y][data-a11y-contrast="light"] .quick-actions button,
[data-aidana-a11y][data-a11y-contrast="light"] #endChatBtn,
[data-aidana-a11y][data-a11y-contrast="light"] .complaint-link {
    background: #FFFFFF;
    color: #0A46B8;
    border: 2px solid #0A46B8;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .quick-actions button,
[data-aidana-a11y][data-a11y-contrast="dark"] #endChatBtn,
[data-aidana-a11y][data-a11y-contrast="dark"] .complaint-link {
    background: #12141A;
    color: #8FB8FF;
    border: 2px solid #8FB8FF;
}
[data-aidana-a11y][data-a11y-contrast="light"] #sendBtn {
    background: #0A46B8;
    color: #FFFFFF;
    border: 2px solid #072F7D;
}
[data-aidana-a11y][data-a11y-contrast="dark"] #sendBtn {
    background: #8FB8FF;
    color: #000000;
    border: 2px solid #FFFFFF;
}
[data-aidana-a11y][data-a11y-contrast="dark"] #sendBtn svg,
[data-aidana-a11y][data-a11y-contrast="light"] #sendBtn svg {
    fill: currentColor;
}

/* Отключённые контролы: контраст + не только цвет (штриховка/прозрачность
 * дополняются явной границей, чтобы состояние читалось). */
[data-aidana-a11y][data-a11y-contrast="light"] button:disabled,
[data-aidana-a11y][data-a11y-contrast="dark"] button:disabled {
    opacity: 1;
    border-style: dashed;
    filter: grayscale(1);
}

/* Ссылки в сообщениях всегда подчёркнуты — не полагаемся на цвет. */
[data-aidana-a11y][data-a11y-contrast="light"] .message a,
[data-aidana-a11y][data-a11y-contrast="dark"] .message a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Аватар/декоративные плашки в контрастных темах не должны быть «мыльными» */
[data-aidana-a11y][data-a11y-contrast="light"] .avatar,
[data-aidana-a11y][data-a11y-contrast="dark"] .avatar {
    border: 2px solid currentColor;
}

/* В тёмной теме --primary становится СВЕТЛЫМ (#8FB8FF): он рассчитан на роль
 * текста по чёрному. Там, где базовый CSS использует его как ФОН, надпись
 * поверх обязана стать тёмной — иначе получается светлое по светлому.
 * Замеряно в браузере: белый на #8FB8FF даёт 2.01:1 при норме 3:1 (аватар,
 * крупный текст) и 4.5:1 (время сообщения). Чёрный по #8FB8FF даёт 8.6:1. */
[data-aidana-a11y][data-a11y-contrast="dark"] .avatar,
[data-aidana-a11y][data-a11y-contrast="dark"] .message.user .message-time {
    color: #000000;
}

/* Кнопка «Связаться с оператором» в тёмной теме получала светло-синий текст,
 * но сохраняла БЕЛЫЙ фон из базового CSS — 1.53:1. Возвращаем её на тёмную
 * поверхность, как остальные кнопки этой темы. */
[data-aidana-a11y][data-a11y-contrast="dark"] .operator-action-btn {
    background: #12141A;
    color: #B9D2FF;
    border: 2px solid #B9D2FF;
}

/* Финальный диалог раньше сохранял буквальный белый фон из chat_ui_*.html.
 * В тёмном режиме заголовок уже становился белым через --*-text и исчезал на
 * белой карточке; «Да»/«Нет» также не проходили AA. Пользователь не видел,
 * что именно подтверждает, и не мог отменить закрытие сессии. */
[data-aidana-a11y][data-a11y-contrast="light"] .closure-card {
    background: #FFFFFF;
    color: #000000;
    border: 2px solid #000000;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .closure-card {
    background: #12141A;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
}
[data-aidana-a11y][data-a11y-contrast="light"] .closure-card h3,
[data-aidana-a11y][data-a11y-contrast="dark"] .closure-card h3 {
    color: inherit;
}
[data-aidana-a11y][data-a11y-contrast="light"] .closure-btns .yes {
    background: #0B5B2E;
    color: #FFFFFF;
}
[data-aidana-a11y][data-a11y-contrast="light"] .closure-btns .no {
    background: #8B1E1E;
    color: #FFFFFF;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .closure-btns .yes {
    background: #7BE0A4;
    color: #000000;
}
[data-aidana-a11y][data-a11y-contrast="dark"] .closure-btns .no {
    background: #FFD1D1;
    color: #000000;
}
[data-aidana-a11y][data-a11y-contrast="light"] .closure-btns .cancel,
[data-aidana-a11y][data-a11y-contrast="dark"] .closure-btns .cancel {
    background: transparent;
    color: inherit;
    border: 2px solid currentColor;
}

/* ------------------------------------------------------------------ */
/* Фокус                                                               */
/* ------------------------------------------------------------------ */
/* Базовый CSS чата содержит outline:none у поля ввода. Возвращаем видимый
 * индикатор через :focus-visible — он не мешает мышиному вводу, но всегда
 * появляется при клавиатуре. Толщина 3px и offset дают >=3:1 к любому фону. */

[data-aidana-a11y] button:focus-visible,
[data-aidana-a11y] a:focus-visible,
[data-aidana-a11y] input:focus-visible,
[data-aidana-a11y] textarea:focus-visible,
[data-aidana-a11y] select:focus-visible,
[data-aidana-a11y] [tabindex]:focus-visible {
    outline: var(--aidana-focus-width) solid var(--aidana-focus) !important;
    outline-offset: var(--aidana-focus-offset) !important;
    /* Второе кольцо контрастного цвета — чтобы индикатор был виден и на
     * тёмном, и на светлом фоне независимо от темы. */
    box-shadow: 0 0 0 calc(var(--aidana-focus-width) + var(--aidana-focus-offset)) rgba(255, 255, 255, .9) !important;
    border-radius: 4px;
}
[data-aidana-a11y][data-a11y-contrast="dark"] button:focus-visible,
[data-aidana-a11y][data-a11y-contrast="dark"] a:focus-visible,
[data-aidana-a11y][data-a11y-contrast="dark"] input:focus-visible,
[data-aidana-a11y][data-a11y-contrast="dark"] textarea:focus-visible,
[data-aidana-a11y][data-a11y-contrast="dark"] [tabindex]:focus-visible {
    box-shadow: 0 0 0 calc(var(--aidana-focus-width) + var(--aidana-focus-offset)) rgba(0, 0, 0, .9) !important;
}

/* ------------------------------------------------------------------ */
/* Уменьшенная анимация                                                */
/* ------------------------------------------------------------------ */
/* Системная настройка. Явный выбор пользователя ниже имеет приоритет. */

@media (prefers-reduced-motion: reduce) {
    [data-aidana-a11y]:not([data-a11y-motion="auto-allow"]) *,
    [data-aidana-a11y]:not([data-a11y-motion="auto-allow"]) *::before,
    [data-aidana-a11y]:not([data-a11y-motion="auto-allow"]) *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Явно включено пользователем — действует независимо от системной настройки. */
[data-aidana-a11y][data-a11y-motion="reduce"] *,
[data-aidana-a11y][data-a11y-motion="reduce"] *::before,
[data-aidana-a11y][data-a11y-motion="reduce"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

/* Индикатор набора остаётся понятным без анимации: точки замирают, но
 * рядом есть текстовый статус, поэтому обратная связь не теряется. */
[data-aidana-a11y][data-a11y-motion="reduce"] .typing .dot {
    opacity: 1 !important;
    transform: none !important;
}

/* ------------------------------------------------------------------ */
/* Кнопка вызова панели                                                */
/* ------------------------------------------------------------------ */

.aidana-a11y-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 10px;
    cursor: pointer;
    opacity: .75;
}
.aidana-a11y-trigger:hover { opacity: 1; }
.aidana-a11y-trigger svg { width: 22px; height: 22px; display: block; pointer-events: none; }
.aidana-a11y-trigger[aria-expanded="true"] { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Панель настроек (ARIA dialog)                                       */
/* ------------------------------------------------------------------ */

.aidana-a11y-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    overflow-y: auto;
}
.aidana-a11y-panel {
    background: #FFFFFF;
    color: #18181B;
    border: 1px solid #3A3A3A;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    width: 100%;
    max-width: 340px;
    padding: 16px;
    /* Панель растёт вместе с текстом и скроллится, а не обрезает контент. */
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}
[data-a11y-contrast="dark"] .aidana-a11y-panel {
    background: #12141A;
    color: #FFFFFF;
    border-color: #9AA4B2;
}
[data-a11y-contrast="light"] .aidana-a11y-panel {
    background: #FFFFFF;
    color: #000000;
    border-color: #000000;
}

.aidana-a11y-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}
.aidana-a11y-panel h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.aidana-a11y-panel fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 14px;
    min-width: 0;
}
.aidana-a11y-panel legend {
    padding: 0;
    margin-bottom: 6px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.aidana-a11y-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.aidana-a11y-panel button {
    font: inherit;
    min-height: 44px;
    padding: 8px 12px;
    background: transparent;
    color: inherit;
    border: 2px solid currentColor;
    border-radius: 10px;
    cursor: pointer;
    overflow-wrap: anywhere;
    white-space: normal;
}
/* Выбранное состояние передаётся НЕ только цветом: жирность + галочка
 * в разметке (aria-pressed даёт то же самое для screen reader). */
.aidana-a11y-panel button[aria-pressed="true"] {
    font-weight: 700;
    box-shadow: inset 0 0 0 2px currentColor;
}
.aidana-a11y-panel .aidana-a11y-reset {
    width: 100%;
    margin-top: 4px;
}
.aidana-a11y-hint {
    margin: 0 0 12px;
    opacity: .85;
    overflow-wrap: anywhere;
}

/* Узкие экраны: панель занимает всю ширину контейнера. */
@media (max-width: 400px) {
    .aidana-a11y-backdrop { padding: 6px; }
    .aidana-a11y-panel { max-width: none; padding: 12px; }
    .aidana-a11y-group { gap: 5px; }
    .aidana-a11y-panel button { padding: 8px 10px; }
}