/*
 Theme Name:   Reboot
 Theme URI:    /
 Description:  дочка
 Author:       Dim
 Author URI:   /
 Template:     reboot
 Version:      1.0
*/

/* ==========================================================================
   ДИЗАЙН-СИСТЕМА

   Тема Reboot рассчитана на светлую область контента: её блоки и блоки
   плагинов приходят с фонами #fff, #f2f5f9, #f3f3f3, #fbfbfb, #e3f1f4 и
   тёмным текстом. На тёмном сайте они всплывают белыми плашками, а текст
   местами становится нечитаемым.

   Поэтому здесь ограниченная палитра и единые правила:
     • фонов блоков ровно два: PANEL (плотный) и SOFT (лёгкий);
     • рамка одна, радиус один, цвет текста один;
     • акцент один — пурпурный; синий, зелёный и оранжевый используются
       ТОЛЬКО как цвет иконки и полосы слева, но не как фон блока;
     • размеры шрифтов заданы шкалой, а не по месту.
   ========================================================================== */

:root {
    /* Поверхности */
    --dim-bg:            #02002b;   /* фон страницы */
    --dim-panel:         #14104d;   /* плотный блок: чат, оглавление, карточки */
    --dim-panel-2:       #1b1660;   /* та же панель, ступенью светлее */
    --dim-on-light:      #16123f;   /* текст на светлой плашке */
    --dim-soft:          rgba(255, 255, 255, 0.05); /* лёгкий блок внутри текста */
    --dim-field:         #0a0838;   /* поля ввода */

    /* Линии и текст */
    --dim-border:        rgba(255, 255, 255, 0.14);
    --dim-text:          #ffffff;
    --dim-text-soft:     rgba(255, 255, 255, 0.90);
    --dim-text-muted:    rgba(255, 255, 255, 0.60);

    /* Акцент */
    --dim-accent:        #eb18c0;
    --dim-accent-hover:  #ff00b2;
    /* Ссылка в тексте: фирменный #eb18c0 на тёмном фоне читается тяжело —
       для мелкого текста берём осветлённый оттенок того же цвета. */
    --dim-link:          #ff6fd8;
    --dim-accent-soft:   rgba(235, 24, 192, 0.12);
    --dim-accent-line:   rgba(235, 24, 192, 0.55);

    /* Смысловые цвета — только для иконок и полос */
    --dim-info:          #47ade4;
    --dim-success:       #35c47a;
    --dim-warning:       #f0a02a;

    /* Геометрия и шкала шрифтов */
    --dim-radius:        12px;
    --dim-radius-sm:     8px;
    --dim-fs-base:       16px;
    --dim-fs-small:      14px;
    --dim-fs-title:      17px;
    --dim-lh:            1.62;
}

/* ==========================================================================
   1. Нормализация светлых поверхностей
   Всё, что тема и плагины красят в светлое внутри контента, переводим
   на две наши поверхности и один цвет текста.
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box,
:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box__body,
:is(.entry-content,.taxonomy-description,.home-text) .table-of-contents,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa__text,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-faq-item,
:is(.entry-content,.taxonomy-description,.home-text) .subscribe-box,
:is(.entry-content,.taxonomy-description,.home-text) .subscribe-box-inner,
.home-text .spoiler-box,
.home-text .spoiler-box__body,
.home-text .table-of-contents {
    background: var(--dim-soft) !important;
    color: var(--dim-text-soft) !important;
}

/* Текст внутри этих блоков не должен оставаться тёмным */
:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box *,
:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box__body *,
:is(.entry-content,.taxonomy-description,.home-text) .table-of-contents li,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa__text *,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-faq-item__answer *,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-plus,
:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark) * {
    color: inherit;
}

/* ==========================================================================
   2. Базовая типографика контента
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text),
.home-text {
    font-size: var(--dim-fs-base);
    line-height: var(--dim-lh);
    color: var(--dim-text-soft);
}

:is(.entry-content,.taxonomy-description,.home-text) a {
    text-decoration-color: rgba(235, 24, 192, 0.45);
    text-underline-offset: 3px;
}

:is(.entry-content,.taxonomy-description,.home-text) h2,
:is(.entry-content,.taxonomy-description,.home-text) h3 {
    scroll-margin-top: 90px;
}

::selection {
    background: rgba(235, 24, 192, 0.35);
    color: #ffffff;
}

/* ==========================================================================
   3. Списки
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text) ol,
:is(.entry-content,.taxonomy-description,.home-text) ul {
    margin: 20px 0;
    padding: 0;
    list-style: none;
    counter-reset: dim-li;
}

:is(.entry-content,.taxonomy-description,.home-text) ol > li,
:is(.entry-content,.taxonomy-description,.home-text) ul > li {
    position: relative;
    margin: 0 0 12px;
    padding: 2px 0 2px 40px;
    line-height: var(--dim-lh);
}

:is(.entry-content,.taxonomy-description,.home-text) ol > li::before {
    counter-increment: dim-li;
    content: counter(dim-li);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--dim-accent-line);
    border-radius: var(--dim-radius-sm);
    background: var(--dim-accent-soft);
    color: var(--dim-accent-hover);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

:is(.entry-content,.taxonomy-description,.home-text) ul > li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 9px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--dim-accent);
    border-radius: 50%;
}

:is(.entry-content,.taxonomy-description,.home-text) ul ul,
:is(.entry-content,.taxonomy-description,.home-text) ol ol,
:is(.entry-content,.taxonomy-description,.home-text) ul ol,
:is(.entry-content,.taxonomy-description,.home-text) ol ul {
    margin: 10px 0 0;
}

/* ==========================================================================
   4. Таблицы
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text) table {
    width: 100%;
    margin: 24px 0;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--dim-soft);
    font-size: 15px;
}

/* Шапка бывает и в thead, и прямо в tbody — скругляем оба варианта.
   Радиус угловых ячеек на 1px меньше самой таблицы: этот пиксель занимает
   рамка, и при равном радиусе угол ячейки вылезал поверх неё. */
:is(.entry-content,.taxonomy-description,.home-text) table > thead:first-child > tr:first-child > *:first-child,
:is(.entry-content,.taxonomy-description,.home-text) table > tbody:first-child > tr:first-child > *:first-child,
:is(.entry-content,.taxonomy-description,.home-text) table > tr:first-child > *:first-child { border-top-left-radius: calc(var(--dim-radius) - 1px); }

:is(.entry-content,.taxonomy-description,.home-text) table > thead:first-child > tr:first-child > *:last-child,
:is(.entry-content,.taxonomy-description,.home-text) table > tbody:first-child > tr:first-child > *:last-child,
:is(.entry-content,.taxonomy-description,.home-text) table > tr:first-child > *:last-child { border-top-right-radius: calc(var(--dim-radius) - 1px); }

:is(.entry-content,.taxonomy-description,.home-text) table > tbody:last-child > tr:last-child > *:first-child,
:is(.entry-content,.taxonomy-description,.home-text) table > tfoot:last-child > tr:last-child > *:first-child,
:is(.entry-content,.taxonomy-description,.home-text) table > tr:last-child > *:first-child { border-bottom-left-radius: calc(var(--dim-radius) - 1px); }

:is(.entry-content,.taxonomy-description,.home-text) table > tbody:last-child > tr:last-child > *:last-child,
:is(.entry-content,.taxonomy-description,.home-text) table > tfoot:last-child > tr:last-child > *:last-child,
:is(.entry-content,.taxonomy-description,.home-text) table > tr:last-child > *:last-child { border-bottom-right-radius: calc(var(--dim-radius) - 1px); }

:is(.entry-content,.taxonomy-description,.home-text) table th {
    padding: 15px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: var(--dim-panel) !important;
    color: var(--dim-text) !important;
    font-weight: 700;
    text-align: left;
}

:is(.entry-content,.taxonomy-description,.home-text) table td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--dim-text-soft);
    line-height: 1.55;
    vertical-align: top;
}

:is(.entry-content,.taxonomy-description,.home-text) table tr:last-child td { border-bottom: 0; }

:is(.entry-content,.taxonomy-description,.home-text) table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }

:is(.entry-content,.taxonomy-description,.home-text) table tbody tr:hover td { background: var(--dim-accent-soft); }

@media (max-width: 767px) {
    :is(.entry-content,.taxonomy-description,.home-text) table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    :is(.entry-content,.taxonomy-description,.home-text) table th,
    :is(.entry-content,.taxonomy-description,.home-text) table td { min-width: 150px; }
}

/* ==========================================================================
   5. Цитаты и блоки внимания
   Фон у всех один, отличаются только полоса слева и цвет иконки.
   Специфичность повторяет тему: blockquote:not(.wpremark).
   ========================================================================== */

/* Акцентная полоса слева сделана внутренней тенью, а не толстой рамкой:
   рамка не следует скруглению и на углах выглядит обрезанной. */
:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark),
.home-text blockquote:not(.wpremark),
.taxonomy-description blockquote:not(.wpremark) {
    border: 1px solid var(--dim-border) !important;
    border-radius: var(--dim-radius);
    box-shadow: inset 3px 0 0 var(--dim-accent);
    background: var(--dim-soft) !important;
    color: var(--dim-text-soft) !important;
    font-size: var(--dim-fs-base);
    line-height: var(--dim-lh);
}

:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark) p,
.home-text blockquote:not(.wpremark) p,
.taxonomy-description blockquote:not(.wpremark) p {
    color: var(--dim-text-soft) !important;
}

:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark) p:last-child { margin-bottom: 0; }

:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark)::before,
.home-text blockquote:not(.wpremark)::before,
.taxonomy-description blockquote:not(.wpremark)::before {
    color: var(--dim-accent) !important;
}

:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark).question,
:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark).info,
.home-text blockquote:not(.wpremark).question,
.home-text blockquote:not(.wpremark).info {
    box-shadow: inset 3px 0 0 var(--dim-info);
}

:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark).question::before,
:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark).info::before,
.home-text blockquote:not(.wpremark).question::before,
.home-text blockquote:not(.wpremark).info::before {
    color: var(--dim-info) !important;
}

:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark).warning,
.home-text blockquote:not(.wpremark).warning {
    border-left-color: var(--dim-warning) !important;
}

:is(.entry-content,.taxonomy-description,.home-text) blockquote:not(.wpremark).warning::before,
.home-text blockquote:not(.wpremark).warning::before {
    color: var(--dim-warning) !important;
}

/* ==========================================================================
   6. Спойлеры
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box {
    margin: 12px 0 !important;
    border: 1px solid var(--dim-border);
    border-left: 3px solid var(--dim-accent) !important;
    border-radius: var(--dim-radius);
    overflow: hidden;
    transition: border-color 0.18s ease;
}

:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box:hover {
    border-color: var(--dim-accent-line);
}

:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box__title {
    padding: 16px 52px 16px 20px !important;
    color: var(--dim-text) !important;
    font-size: var(--dim-fs-base);
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}

:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box__body {
    padding: 0 20px 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px !important;
    color: var(--dim-text-soft) !important;
    font-size: 15px;
    line-height: 1.65;
}

/* Стрелка спойлера рисуется чёрной SVG — перекрашиваем фильтром */
:is(.entry-content,.taxonomy-description,.home-text) .spoiler-box__title::after {
    filter: brightness(0) saturate(100%) invert(38%) sepia(85%) saturate(4500%) hue-rotate(295deg) brightness(100%) contrast(95%);
}

/* ==========================================================================
   7. Плюсы, отзывы, эксперты, кейсы (Expert Review)
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text) .expert-review {
    margin: 24px 0;
    padding: 22px 24px;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius);
    background: var(--dim-soft);
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-expert-header,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa-header,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-pluses-minuses-header,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-score-header {
    margin-bottom: 14px;
    color: var(--dim-accent-hover) !important;
    font-size: var(--dim-fs-title);
    font-weight: 700;
}

/* Плагин рисует поверх блоков белые линии в 1px */
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-pluses-minuses::before,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa::before,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-score::before {
    background: rgba(255, 255, 255, 0.10) !important;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-pluses-minuses {
    padding: 8px 0 !important;
}

/* .expert-review-plus — это пункт списка, а не контейнер */
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-plus {
    margin: 12px 0 !important;
    padding: 0 0 0 30px !important;
    border: 0 !important;
    background: none !important;
    color: var(--dim-text-soft) !important;
    font-size: var(--dim-fs-base) !important;
    line-height: var(--dim-lh) !important;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-plus::before {
    top: 0.35em !important;
    left: 2px !important;
    width: 14px !important;
    height: 14px !important;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-expert-bio {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

/* Аватар эксперта. У плагина кружок — это блок с фоновой картинкой-заглушкой
   (силуэт человека на цветной подложке), а вставленное фото он не растягивает:
   `img{max-width:100%;height:auto}` при контейнере 80×80 и файле 50×50 оставляет
   подложку открытой по краям. Поэтому гасим фон и растягиваем фото на контейнер,
   а обводку рисуем тенью — она не съедает внутренний размер. */
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-expert-bio__avatar,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa__avatar {
    background-image: none !important;
    background-color: var(--dim-field) !important;
    border-radius: 50%;
    overflow: hidden;
    padding: 0 !important;
    box-shadow: 0 0 0 2px var(--dim-accent-line);
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-expert-bio__avatar img,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa__avatar img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center top;
    border: 0;
    margin: 0;
    border-radius: 50%;
    background: transparent;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-expert-bio-name {
    color: var(--dim-accent-hover);
    font-size: var(--dim-fs-base);
    font-weight: 700;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-expert-bio-description {
    color: var(--dim-text-muted);
    font-size: var(--dim-fs-small);
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-expert-text {
    padding: 14px 18px;
    border-left: 3px solid var(--dim-accent);
    border-radius: 0 var(--dim-radius) var(--dim-radius) 0;
    background: var(--dim-soft);
    color: var(--dim-text-soft);
    font-size: 15px;
    line-height: var(--dim-lh);
}

/* Реплика в кейсе: у плагина белый фон и белый «хвостик» треугольника */
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa__text {
    padding: 16px 20px !important;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius) !important;
    box-shadow: none !important;
    color: var(--dim-text-soft) !important;
    line-height: var(--dim-lh);
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa__text::before {
    border-color: transparent rgba(255, 255, 255, 0.09) transparent transparent !important;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa__text strong,
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-qa__text b { color: var(--dim-text); }

/* ==========================================================================
   7б. Опрос (Expert Review, стиль solid-1)
   Приходил сплошной пурпурной заливкой с тёмным текстом: кричал громче
   остального контента и плохо читался. Приводим к общей системе —
   поверхность как у прочих блоков, акцент только на заливке прогресса.
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll {
    margin: 24px 0;
    padding: 20px 22px !important;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius);
    background: var(--dim-soft) !important;
    color: var(--dim-text-soft) !important;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll__header {
    margin-bottom: 16px !important;
    padding: 0 !important;
    background: none !important;
    color: var(--dim-text) !important;
    font-size: var(--dim-fs-title);
    font-weight: 700;
    line-height: 1.4;
    text-align: left !important;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll-item {
    position: relative;
    margin-bottom: 9px !important;
    padding: 0 !important;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius-sm);
    background: rgba(255, 255, 255, 0.03) !important;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll-item:hover {
    border-color: var(--dim-accent-line);
    background: var(--dim-accent-soft) !important;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll-item__answer {
    position: relative;
    z-index: 2;
    padding: 12px 16px !important;
    background: none !important;
    color: var(--dim-text-soft) !important;
    font-size: 15px;
    line-height: 1.45;
}

:is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll-item__num {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--dim-text) !important;
    font-size: 13px;
    font-weight: 700;
}

/* Заливка результата — единственное акцентное пятно в блоке */
:is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll-item__progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(235, 24, 192, 0.28) !important;
    transition: width 0.4s ease;
}

@media (max-width: 575px) {
    :is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll { padding: 16px 14px !important; }
    :is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll__header { font-size: 16px; }
    :is(.entry-content,.taxonomy-description,.home-text) .expert-review-poll-item__answer { padding: 11px 42px 11px 13px !important; font-size: 14px; }
}

/* ==========================================================================
   7в. Страница рубрики: содержание и FAQ
   На архивах не работают шорткоды оглавления и FAQ из плагинов, поэтому
   блоки свои — но выглядят так же, как на страницах инструментов.
   ========================================================================== */

/* FAQ рубрики: раскрывается по клику, как на страницах инструментов */
.dim-cat-faq .faq-item {
    margin-bottom: 12px;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius);
    background: var(--dim-soft);
    transition: border-color 0.18s ease;
}

.dim-cat-faq .faq-item:hover { border-color: var(--dim-accent-line); }

.dim-cat-faq .faq-item.is-open { border-color: var(--dim-accent-line); }

.dim-cat-faq .faq-q {
    position: relative;
    padding: 18px 58px 18px 22px;
    color: var(--dim-text);
    font-size: var(--dim-fs-base);
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    user-select: none;
}

.dim-cat-faq .faq-q::before,
.dim-cat-faq .faq-q::after {
    content: "";
    position: absolute;
    background: var(--dim-accent);
    border-radius: 2px;
    transition: transform 0.22s ease;
}

.dim-cat-faq .faq-q::before { top: 26px; right: 27px; width: 2px; height: 14px; }
.dim-cat-faq .faq-q::after  { top: 32px; right: 21px; width: 14px; height: 2px; }

.dim-cat-faq .faq-item.is-open .faq-q::before { transform: rotate(90deg); }

.dim-cat-faq .faq-a {
    display: none;
    padding: 0 22px 20px;
    color: var(--dim-text-soft);
    font-size: 15px;
    line-height: 1.65;
}

.dim-cat-faq .faq-item.is-open .faq-a { display: block; }

@media (max-width: 575px) {
    .dim-cat-faq .faq-q { padding: 15px 48px 15px 16px; font-size: 15px; }
    .dim-cat-faq .faq-q::before { top: 23px; right: 23px; }
    .dim-cat-faq .faq-q::after  { top: 29px; right: 17px; }
    .dim-cat-faq .faq-a { padding: 0 16px 16px; }
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.expert-review-faq { margin: 2.2em 0; }

.expert-review-faq .expert-review-faq-item {
    margin-bottom: 12px;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius);
    transition: border-color 0.18s ease;
}

.expert-review-faq .expert-review-faq-item:hover { border-color: var(--dim-accent-line); }

.expert-review-faq .expert-review-faq-item.expand { border-color: var(--dim-accent-line); }

.expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item__question {
    position: relative;
    margin: 0;
    padding: 18px 58px 18px 22px;
    color: var(--dim-text);
    font-size: var(--dim-fs-base);
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    user-select: none;
}

.expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item:before,
.expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item:after {
    background: var(--dim-accent);
    border-radius: 2px;
    transition: transform 0.22s ease;
}

.expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item:before {
    top: 26px; left: auto; right: 27px; width: 2px; height: 14px;
}

.expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item:after {
    top: 32px; left: auto; right: 21px; width: 14px; height: 2px;
}

.expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item__answer {
    padding: 0 22px 20px 22px;
    color: var(--dim-text-soft);
    font-size: 15px;
    line-height: 1.65;
}

@media (max-width: 575px) {
    .expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item__question {
        padding: 15px 48px 15px 16px;
        font-size: 15px;
    }
    .expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item__answer {
        padding: 0 16px 16px 16px;
    }
    .expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item:before { top: 23px; right: 23px; }
    .expert-review-faq.expert-review-faq--style-simple-1 .expert-review-faq-item:after  { top: 29px; right: 17px; }
}

/* ==========================================================================
   9. Оглавление
   ========================================================================== */

.table-of-contents {
    margin: 28px 0;
    padding: 18px 24px 20px;
    border: 1px solid var(--dim-border);
    border-left: 3px solid var(--dim-accent) !important;
    border-radius: var(--dim-radius);
}

.table-of-contents .table-of-contents__header,
.table-of-contents .table-of-contents__hide {
    margin: 0;
    padding: 0;
    color: var(--dim-text) !important;
    font-size: var(--dim-fs-title);
    font-weight: 700;
    cursor: pointer;
}

.table-of-contents .table-of-contents__list {
    margin: 14px 0 0;
    padding-left: 22px;
}

.table-of-contents .table-of-contents__list li {
    margin: 7px 0;
    line-height: 1.5;
}

/* Многоуровневое оглавление.

   Разметка плоская — <ol> со всеми пунктами, вложенность задана только
   классами level-1…level-4 (генератор оглавления берёт h1–h4). Поэтому
   вложенность рисуем здесь: отступ + номер вида «5.1». Оформление плашки
   одно на все уровни.

   Вес селекторов поднят до (0,3,x) через [class]: ниже в файле объявлен
   общий стиль списков :is(.entry-content,…) ol[class] {counter-reset}
   и ol[class] > li::before {counter-increment: dim-li; content}. У него
   тот же вес, что у обычного селектора оглавления, и он идёт позже —
   при равенстве побеждал бы он, и номера снова стали бы сквозными. */
.table-of-contents ol.table-of-contents__list[class] {
    counter-reset: toc-1;
}

.table-of-contents .table-of-contents__list > li.level-1 {
    counter-increment: toc-1;
    counter-reset: toc-2;
}

.table-of-contents .table-of-contents__list > li.level-2 {
    margin-left: 28px;
    padding-left: 50px;
    counter-increment: toc-2;
    counter-reset: toc-3;
}

.table-of-contents .table-of-contents__list > li.level-3 {
    margin-left: 56px;
    padding-left: 62px;
    counter-increment: toc-3;
}

.table-of-contents .table-of-contents__list > li[class]::before {
    content: counter(toc-1);
    width: auto;
    min-width: 26px;
    padding: 0 6px;
    border: 1px solid var(--dim-accent-line);
    background: var(--dim-accent-soft);
    color: var(--dim-accent-hover);
    font-size: 13px;
    font-weight: 700;
}

.table-of-contents .table-of-contents__list > li.level-2::before {
    content: counter(toc-1) "." counter(toc-2);
}

.table-of-contents .table-of-contents__list > li.level-3::before {
    content: counter(toc-1) "." counter(toc-2) "." counter(toc-3);
}

/* На узком экране отступы вложенности урезаем, иначе длинные заголовки
   подпунктов остаются в две-три строки. */
@media (max-width: 480px) {
    .table-of-contents .table-of-contents__list > li.level-2 {
        margin-left: 12px;
        padding-left: 46px;
    }

    .table-of-contents .table-of-contents__list > li.level-3 {
        margin-left: 24px;
        padding-left: 56px;
    }
}

.table-of-contents .table-of-contents__list a {
    border-bottom: 1px solid transparent;
    color: var(--dim-text-soft);
    text-decoration: none;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.table-of-contents .table-of-contents__list a:hover {
    border-bottom-color: var(--dim-accent-line);
    color: var(--dim-accent-hover);
}

/* ==========================================================================
   10. Алфавитный указатель
   ========================================================================== */

.abc-pagination .abc-pagination-posts { border-top: 1px solid rgba(255, 255, 255, 0.10); }

.abc-pagination .abc-pagination-tab {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.abc-pagination .abc-pagination-tab__letter {
    flex: 0 0 34px;
    margin: 0;
    padding: 3px 0;
    border: 0;
    border-radius: var(--dim-radius-sm);
    background: var(--dim-accent-soft);
    color: var(--dim-accent-hover);
    font-size: var(--dim-fs-small);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.abc-pagination .abc-pagination-tab__posts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
}

.abc-pagination .abc-pagination-post { margin: 0; }

.abc-pagination .abc-pagination-post a {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--dim-border);
    border-radius: 999px;
    background: var(--dim-soft);
    color: var(--dim-text-soft);
    font-size: var(--dim-fs-small);
    line-height: 1.35;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.abc-pagination .abc-pagination-post a:hover {
    border-color: var(--dim-accent-line);
    background: var(--dim-accent-soft);
    color: var(--dim-text);
}

.abc-pagination .abc-pagination-post__title { display: inline; }

@media (max-width: 575px) {
    .abc-pagination .abc-pagination-tab { gap: 10px; padding: 10px 0; }
    .abc-pagination .abc-pagination-tab__letter { flex-basis: 28px; font-size: 13px; }
    .abc-pagination .abc-pagination-post a { padding: 3px 9px; font-size: 13px; }
}

/* ==========================================================================
   11. Похожие инструменты / Читайте также
   ========================================================================== */

.related-posts { margin-top: 54px; }

.related-posts .related-posts__header {
    margin-bottom: 28px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.related-posts .post-cards--vertical {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 576px) {
    .related-posts .post-cards--vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 18px; }
}

@media (min-width: 992px) {
    .related-posts .post-cards--vertical { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 20px; }
}

.related-posts .post-card--related {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 88px;
    margin: 0;
    padding: 18px 22px;
    border: 1px solid var(--dim-border);
    border-left: 3px solid var(--dim-accent);
    border-radius: var(--dim-radius);
    background: var(--dim-soft);
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.related-posts .post-card--related:hover {
    border-color: var(--dim-accent-line);
    background: var(--dim-accent-soft);
    transform: translateY(-2px);
}

.related-posts .post-card--related .post-card__title {
    margin: 0;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.42;
    text-align: left;
}

.related-posts .post-card--related .post-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--dim-text);
    text-decoration: none;
    transition: color 0.18s ease;
}

.related-posts .post-card--related:hover .post-card__title a { color: var(--dim-accent-hover); }

/* ==========================================================================
   12. Чат-бот
   ========================================================================== */

.mwai-chatbot-container { margin: 0; padding: 0; background: none; }

/* Оболочка сама играет роль окна чата: рамка, скругление и свечение живут
   на ней, а строка статуса — обычный первый блок внутри. Раньше статус был
   спозиционирован абсолютно и при переносе строки наезжал на приветствие. */
.dim-chat-shell {
    margin: 26px 0 0;
    border: 2px solid var(--dim-accent-line);
    border-radius: var(--dim-radius);
    background: var(--dim-panel);
    box-shadow: 0 20px 55px -28px rgba(235, 24, 192, 0.8);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    animation: dimChatGlow 3.6s ease-in-out infinite;
}

.dim-chat-shell:hover,
.dim-chat-shell:focus-within {
    animation: none;
    border-color: var(--dim-accent-hover);
    box-shadow: 0 24px 62px -24px rgba(235, 24, 192, 1);
}

.dim-chat-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: var(--dim-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 575px) {
    .dim-chat-status {
        flex-wrap: nowrap;
        padding: 9px 12px;
        font-size: 12px;
        white-space: nowrap;
    }
    /* Часть про скорость на узком экране прячем — иначе строка переносится */
    .dim-chat-status .dim-chat-status__wide { display: none; }
}

@media (max-width: 359px) {
    .dim-chat-status { font-size: 11px; padding: 8px 10px; }
}

.dim-chat-status .dim-chat-sep { opacity: 0.5; }

/* Мигающая точка «на связи» */
.dim-chat-dot {
    position: relative;
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dim-success);
    box-shadow: 0 0 8px rgba(53, 196, 122, 0.9);
    animation: dimDotBlink 1.6s ease-in-out infinite;
}

.dim-chat-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--dim-success);
    border-radius: 50%;
    opacity: 0;
    animation: dimDotPing 2s ease-out infinite;
}

@keyframes dimDotBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@keyframes dimDotPing {
    0%   { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.25); opacity: 0; }
}

/* Чипы с готовыми запросами: снимают вопрос «а что писать» */
.dim-chat-chips {
    margin: 14px 0 26px;
}

.dim-chat-chips__label {
    margin-bottom: 10px;
    padding: 0 4px;
    color: var(--dim-text-soft);
    font-size: 14px;
}

.dim-chat-chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dim-chat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 9px 15px;
    border: 1px solid var(--dim-border);
    border-radius: 999px;
    background: var(--dim-soft);
    color: var(--dim-text-soft);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.dim-chat-chip::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dim-accent);
}

.dim-chat-chip:hover,
.dim-chat-chip:focus-visible {
    border-color: var(--dim-accent-line);
    background: var(--dim-accent-soft);
    color: var(--dim-text);
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 575px) {
    .dim-chat-status { font-size: 13px; gap: 6px; }
    .dim-chat-chip { padding: 8px 13px; font-size: 14px; }
    .dim-chat-chips__label { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .dim-chat-dot::after,
    .dim-chat-hint__arrow { animation: none; }
}

.mwai-chatbot-container .mwai-chatgpt-theme {
    border: 2px solid var(--dim-accent-line);
    border-radius: var(--dim-radius);
    background: var(--dim-panel);
    box-shadow: 0 20px 55px -28px rgba(235, 24, 192, 0.8);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    animation: dimChatGlow 3.6s ease-in-out infinite;
}

/* Внутри оболочки окно чата рамки уже не рисует — её рисует оболочка */
.dim-chat-shell .mwai-chatgpt-theme {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
}

@keyframes dimChatGlow {
    0%, 100% { box-shadow: 0 18px 50px -30px rgba(235, 24, 192, 0.5); }
    50%      { box-shadow: 0 22px 58px -22px rgba(235, 24, 192, 0.9); }
}

.mwai-chatbot-container .mwai-chatgpt-theme:hover,
.mwai-chatbot-container .mwai-chatgpt-theme:focus-within {
    animation: none;
    border-color: var(--dim-accent-hover);
    box-shadow: 0 24px 62px -24px rgba(235, 24, 192, 1);
}

/* Имя бота — единственный элемент с градиентом, как логотип */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-name,
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-name-text {
    background: linear-gradient(90deg, var(--dim-link), #ff00b2, var(--dim-link));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--dim-accent-hover);
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    animation: dimNameSweep 4s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 0, 178, 0.55));
    font-size: 1.02em;
}

@keyframes dimNameSweep {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Реплики: бот слева, пользователь справа */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply {
    max-width: 88%;
    margin: 0 0 12px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius) var(--dim-radius) var(--dim-radius) 4px !important;
    background: var(--dim-soft) !important;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply:last-child { margin-bottom: 4px !important; }

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply.mwai-user {
    margin-left: auto !important;
    border-color: var(--dim-accent-line);
    border-radius: var(--dim-radius) var(--dim-radius) 4px var(--dim-radius) !important;
    background: var(--dim-accent-soft) !important;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-name,
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-name-text {
    background: none;
    -webkit-text-fill-color: var(--dim-text);
    color: var(--dim-text);
    animation: none;
    filter: none;
    letter-spacing: 0.2px;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-conversation { padding: 18px 18px 6px; }

/* Статус теперь обычный блок в потоке, отдельный отступ под него не нужен */

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply .mwai-text {
    font-size: var(--dim-fs-base);
    line-height: var(--dim-lh);
}

/* Курсор при печати приветствия */
.mwai-chatbot-container .mwai-text.dim-typing::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    background: var(--dim-accent-hover);
    vertical-align: text-bottom;
    animation: dimCaret 0.8s steps(1) infinite;
}

@keyframes dimCaret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Поле ввода */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input { padding: 14px 16px 16px; }

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input-text {
    border: 2px solid var(--dim-accent-line);
    border-radius: var(--dim-radius);
    background: var(--dim-field) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input-text:hover { border-color: var(--dim-accent-hover); }

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input-text:focus-within {
    border-color: var(--dim-accent-hover);
    box-shadow: 0 0 0 4px rgba(235, 24, 192, 0.22);
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input-text textarea {
    background: transparent !important;
    color: var(--dim-text);
    font-size: var(--dim-fs-base);
    line-height: 1.5;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input-text textarea::placeholder {
    color: var(--dim-text-muted) !important;
}

/* Кнопка отправки */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input-submit {
    padding: 12px 26px;
    border-radius: var(--dim-radius);
    box-shadow: 0 8px 22px -10px rgba(235, 24, 192, 0.9);
    font-size: var(--dim-fs-base);
    font-weight: 700;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 12px 26px -10px rgba(235, 24, 192, 1);
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-footer,
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-compliance {
    color: var(--dim-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-compliance a { color: var(--dim-text-soft); }

/* У плагина для этой же строки внутри подвала задано 11px и opacity .5 —
   правило того же веса, но идёт позже и выигрывает. Поднимаем вес и
   выравниваем со строкой состояния над чатом. */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-footer .mwai-compliance {
    padding-top: 4px;
    opacity: 1;
    color: var(--dim-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Блоки кода в ответах бота были шире экрана и растягивали всю страницу:
   из-за этого на телефоне контент уезжал влево и обрезались подписи.
   Код теперь прокручивается внутри себя, наружу ничего не выпирает. */
.mwai-chatbot-container,
.mwai-chatbot-container .mwai-chatgpt-theme,
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-conversation,
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply,
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-text {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply { overflow: hidden; }

.mwai-chatbot-container .mwai-chatgpt-theme pre,
:is(.entry-content,.taxonomy-description,.home-text) pre {
    max-width: 100%;
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius-sm);
    background: var(--dim-field);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre;
    font-size: 13px;
    line-height: 1.55;
}

.mwai-chatbot-container .mwai-chatgpt-theme pre code,
:is(.entry-content,.taxonomy-description,.home-text) pre code {
    white-space: pre;
    word-break: normal;
}

/* Инлайновый код может переноситься */
.mwai-chatbot-container .mwai-chatgpt-theme :not(pre) > code,
:is(.entry-content,.taxonomy-description,.home-text) :not(pre) > code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--dim-accent-soft);
    color: var(--dim-text);
    word-break: break-word;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-text {
    overflow-wrap: anywhere;
}

@media (max-width: 575px) {
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply {
        max-width: 100%;
        padding: 11px 13px !important;
    }
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply .mwai-name,
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply .mwai-name-text {
        font-size: 14px;
    }
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input-submit { padding: 11px 16px; font-size: 15px; }
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-conversation { padding: 12px 12px 4px; }
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input { padding: 10px 10px 12px; }
    .mwai-chatbot-container .mwai-chatgpt-theme pre { font-size: 12px; padding: 12px; }
}

/* Страховка от горизонтальной прокрутки: широкий контент внутри статьи
   (таблицы, код, встроенные блоки) не должен двигать всю страницу. */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
    :is(.entry-content,.taxonomy-description,.home-text) img,
    :is(.entry-content,.taxonomy-description,.home-text) iframe,
    :is(.entry-content,.taxonomy-description,.home-text) video { max-width: 100%; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .mwai-chatbot-container .mwai-chatgpt-theme,
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-name,
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-name-text,
    .mwai-chatbot-container .mwai-text.dim-typing::after { animation: none; }
}

/* ==========================================================================
   13. Шапка, меню, поиск, крошки
   ========================================================================== */

.site-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.site-branding .site-title,
.site-branding .site-title a {
    color: var(--dim-accent);
    font-weight: 800;
    letter-spacing: -0.3px;
}

.site-branding .site-description { color: var(--dim-info); }

.site-logotype img { transition: transform 0.2s ease, filter 0.2s ease; }

.site-branding:hover .site-logotype img {
    transform: scale(1.04);
    filter: drop-shadow(0 0 14px rgba(235, 24, 192, 0.45));
}

.main-navigation a,
.top-menu a { transition: color 0.16s ease; }

.main-navigation a:hover,
.top-menu a:hover { color: var(--dim-accent-hover); }

/* Выпадающие подменю приходят светлыми */
.main-navigation ul li .sub-menu,
.footer-navigation ul li .sub-menu,
.widget-area .widget_nav_menu > ul .sub-menu {
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius-sm);
    background: var(--dim-panel) !important;
}

.search-form .search-field {
    padding: 10px 14px;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius-sm);
    background: var(--dim-field);
    color: var(--dim-text);
}

.search-form .search-field::placeholder { color: var(--dim-text-muted); }

.search-form .search-field:focus {
    border-color: var(--dim-accent-line);
    box-shadow: 0 0 0 3px rgba(235, 24, 192, 0.15);
    outline: none;
}

.search-screen { background: var(--dim-bg) !important; }

.breadcrumb {
    margin-bottom: 14px;
    font-size: 13px;
}

.breadcrumb a {
    color: var(--dim-text-muted);
    text-decoration: none;
    transition: color 0.16s ease;
}

.breadcrumb a:hover { color: var(--dim-accent-hover); }

.breadcrumb .breadcrumb_last { color: var(--dim-text-muted); }

/* ==========================================================================
   14. Блог: мета-строка и сайдбар
   ========================================================================== */

.entry-meta,
.post-meta {
    padding: 14px 18px;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius);
    background: var(--dim-soft);
}

.widget {
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius);
    background: var(--dim-soft);
}

.widget .widget-title,
.widget .widgettitle {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--dim-text);
    font-size: var(--dim-fs-title);
    font-weight: 700;
}

.widget ul { margin: 0; padding: 0; list-style: none; }

.widget ul li {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.widget ul li:last-child { border-bottom: 0; }

.widget a {
    color: var(--dim-text-soft);
    text-decoration: none;
    transition: color 0.16s ease;
}

.widget a:hover { color: var(--dim-accent-hover); }

.widget img { border-radius: var(--dim-radius-sm); }

/* ==========================================================================
   15. Футер
   ========================================================================== */

.site-footer,
.site-footer--style-gray {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: #050238 !important;
    color: var(--dim-text-soft);
}

.site-footer a,
.site-footer .pseudo-link {
    color: var(--dim-text);
    text-decoration: underline;
    text-decoration-color: var(--dim-accent-line);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

.site-footer a:hover,
.site-footer .pseudo-link:hover {
    color: var(--dim-accent-hover);
    text-decoration-color: var(--dim-accent-hover);
}

.site-footer .footer-widget font[size="6"] {
    color: var(--dim-accent);
    font-weight: 800;
}

.site-footer .footer-widget font[color="#C0C0C0"],
.site-footer .footer-widget font[size="2"] {
    color: var(--dim-text-muted) !important;
}

.site-footer .widget { border: 0; background: transparent; padding: 0; }

.site-footer .widget ul li { border-bottom: 0; padding: 5px 0; }

.site-footer-bottom,
.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--dim-text-muted);
}

/* ==========================================================================
   16. Кнопка «наверх»
   ========================================================================== */

.scrolltop {
    width: 46px;
    height: 46px;
    border: 1px solid var(--dim-accent-line) !important;
    border-radius: 50% !important;
    background: var(--dim-accent-soft) !important;
    box-shadow: 0 10px 26px -12px rgba(235, 24, 192, 0.9);
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.scrolltop:hover {
    background: var(--dim-accent) !important;
    border-color: var(--dim-accent-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(235, 24, 192, 1);
}

.scrolltop:hover::before,
.scrolltop:hover::after,
.scrolltop:hover svg,
.scrolltop:hover path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


/* ==========================================================================
   Ссылки в тексте, таблицах и списках
   Фирменный пурпурный хорош для заголовков и кнопок, но мелкий текст
   этим цветом на тёмном фоне сливается — берём осветлённый оттенок.
   ========================================================================== */

:is(.entry-content, .taxonomy-description, .home-text) a {
    color: var(--dim-link);
    text-decoration-color: rgba(255, 111, 216, 0.45);
    text-underline-offset: 3px;
    transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

:is(.entry-content, .taxonomy-description, .home-text) a:hover {
    color: #ffffff;
    text-decoration-color: var(--dim-accent-hover);
}

/* В таблицах ссылка — основной элемент строки, делаем её заметнее */
:is(.entry-content, .taxonomy-description, .home-text) table a {
    color: var(--dim-link);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 111, 216, 0.35);
}

:is(.entry-content, .taxonomy-description, .home-text) table a:hover {
    color: #ffffff;
    border-bottom-color: var(--dim-accent-hover);
}


/* ==========================================================================
   Смежные разделы на странице рубрики
   Был обычный список ссылок: на тёмном фоне пурпурные ссылки читались
   плохо и терялись в тексте. Делаем карточками, как «Похожие инструменты».
   ========================================================================== */

.dim-cat-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 20px 0 8px;
}

@media (min-width: 576px) {
    .dim-cat-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .dim-cat-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

:is(.entry-content, .taxonomy-description, .home-text) .dim-cat-links .dim-cat-link {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 78px;
    justify-content: center;
    padding: 16px 20px;
    border: 1px solid var(--dim-border);
    border-radius: var(--dim-radius);
    box-shadow: inset 3px 0 0 var(--dim-accent);
    background: var(--dim-soft);
    color: var(--dim-text);
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

:is(.entry-content, .taxonomy-description, .home-text) .dim-cat-links .dim-cat-link:hover {
    border-color: var(--dim-accent-line);
    background: var(--dim-accent-soft);
    color: var(--dim-text);
    transform: translateY(-2px);
}

.dim-cat-link__name {
    color: var(--dim-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.dim-cat-link:hover .dim-cat-link__name { color: var(--dim-link); }

.dim-cat-link__count {
    color: var(--dim-text-muted);
    font-size: 13px;
}


/* ==========================================================================
   Маркеры списков: перебиваем правило темы
   У темы селектор вида .taxonomy-description ul:not([class])>li:before —
   :not([class]) добавляет вес класса, и её маркер выигрывал у нашего.
   Повторяем ту же конструкцию, чтобы списки в записях и рубриках
   выглядели одинаково.
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text) ul:not([class]) > li::before,
:is(.entry-content,.taxonomy-description,.home-text) ul.wp-block-list > li::before,
:is(.entry-content,.taxonomy-description,.home-text) ul[class] > li::before {
    position: absolute;
    top: 10px;
    left: 9px;
    width: 9px;
    height: 9px;
    content: "";
    display: inline-block;
    border: 2px solid var(--dim-accent);
    border-radius: 50%;
    background: transparent;
    color: transparent;
}

:is(.entry-content,.taxonomy-description,.home-text) ol:not([class]) > li::before,
:is(.entry-content,.taxonomy-description,.home-text) ol.wp-block-list > li::before,
:is(.entry-content,.taxonomy-description,.home-text) ol[class] > li::before {
    counter-increment: dim-li;
    content: counter(dim-li);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--dim-accent-line);
    border-radius: var(--dim-radius-sm);
    background: var(--dim-accent-soft);
    color: var(--dim-accent-hover);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* Сброс счётчика — с тем же весом, что у правила темы.
   У темы .entry-content ol:not([class]){counter-reset:section}: :not([class])
   добавляет вес класса, и её объявление выигрывало у нашего «:is(...) ol».
   Из-за этого dim-li не заводился на списке, а счётчик без сброса в области
   видимости создаётся заново на КАЖДОМ элементе — и все пункты показывали
   единицу. Повторяем конструкцию темы, чтобы наше объявление победило. */
:is(.entry-content,.taxonomy-description,.home-text) ol:not([class]),
:is(.entry-content,.taxonomy-description,.home-text) ol.wp-block-list,
:is(.entry-content,.taxonomy-description,.home-text) ol[class] {
    counter-reset: dim-li section;
}


/* ==========================================================================
   Единый цвет ссылок и наведения

   Тема красит ссылки правилом .entry-content a:not(.wp-block-button__link) —
   на рубрики оно не распространяется, поэтому там ссылки оставались
   фирменным тёмным. Карточки перекрывались отдельным правилом
   .post-card__title a:hover. Повторяем их специфичность и сводим к одному
   цвету: обычная ссылка — --dim-link, наведение — белый.
   ========================================================================== */

:is(.entry-content,.taxonomy-description,.home-text) a:not(.wp-block-button__link),
:is(.entry-content,.taxonomy-description,.home-text) a:not(.wp-block-button__link):visited {
    color: var(--dim-link);
}

:is(.entry-content,.taxonomy-description,.home-text) a:not(.wp-block-button__link):hover {
    color: #ffffff;
}

/* В таблице ссылка — главный элемент строки */
:is(.entry-content,.taxonomy-description,.home-text) table a:not(.wp-block-button__link) {
    color: var(--dim-link);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 111, 216, 0.35);
}

:is(.entry-content,.taxonomy-description,.home-text) table a:not(.wp-block-button__link):hover {
    color: #ffffff;
    border-bottom-color: var(--dim-accent-hover);
}

/* Карточки: заголовок белый, при наведении — тот же цвет ссылки.
   У темы здесь стоял тёмный #eb18c0, из-за чего наведение
   на «Похожие инструменты» и «Смежные разделы» отличалось. */
.post-card__title a:hover,
.related-posts .post-card--related:hover .post-card__title a,
.dim-cat-links .dim-cat-link:hover .dim-cat-link__name {
    color: var(--dim-link);
}


/* ==========================================================================
   Форма обратной связи

   Тема выводит её общими стилями: светлые поля на тёмной странице, а textarea
   тянется во всю ширину контента, тогда как остальные поля ограничены — форма
   выглядит перекошенной. Приводим к одному виду и к палитре сайта.
   ========================================================================== */

.contact-form {
    max-width: 640px;
    margin: 24px 0;
}

.contact-form__field {
    margin: 0 0 14px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 13px 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 16px !important; /* ниже 16px iOS зумит страницу при фокусе */
    line-height: 1.5;
    box-shadow: none !important;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 0;
    border-color: var(--dim-accent, #eb18c0) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 0 0 3px rgba(235, 24, 192, 0.25) !important;
}

/* Капча внутри формы держится ширины полей */
.contact-form .cf-turnstile {
    max-width: 100%;
    margin: 0 0 16px;
}

.contact-form button[type="submit"],
.contact-form .btn-primary {
    display: inline-block;
    padding: 14px 30px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ff2ad0, #d3149f) !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 12px 28px -16px rgba(235, 24, 192, 0.95) !important;
    transition: filter 0.16s ease, transform 0.16s ease;
}

.contact-form button[type="submit"]:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Сообщения формы */
.contact-form__success,
.contact-form__errors {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.55;
    list-style: none;
}

.contact-form__success {
    border-color: rgba(53, 196, 122, 0.55);
    background: rgba(53, 196, 122, 0.12);
}

.contact-form__errors {
    border-color: rgba(224, 73, 95, 0.55);
    background: rgba(224, 73, 95, 0.12);
}

.contact-form__errors li {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.contact-form__errors li::before { content: none !important; }

/* Пустая подпись под формой от темы */
.contact-form-notes-after:empty { display: none; }

@media (max-width: 600px) {
    .contact-form button[type="submit"] { width: 100%; }
}

/* --------------------------------------------------------------------------
   Опрос Expert Review на тёмном фоне
   --------------------------------------------------------------------------
   Плагин рассчитан на светлую тему, и на тёмной у него ломались три вещи.
   Обводка кружка выбора задана чёрным — на тёмном фоне её не видно. Заливка
   результата в разметке идёт последней и без слоёв ложится поверх текста
   ответа. И отступ слева, оставляющий место под кружок, перебивался чужим
   правилом — из-за этого кружок наезжал на первую букву ответа.

   Трогаем только цвета, слои и отступы. Логику показа результатов не меняем:
   проценты и заливка по-прежнему появляются после голоса, а не сразу.
   -------------------------------------------------------------------------- */

.entry-content .expert-review-poll-item {
    margin: 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.entry-content .expert-review-poll--style-light-2 .expert-review-poll-item,
.entry-content .expert-review-poll--style-light-2.voted .expert-review-poll-item,
.entry-content .expert-review-poll--style-light-2.voted .expert-review-poll-item.voted {
    padding: 12px 64px 12px 48px;
}

/* Кружок выбора */
.entry-content .expert-review-poll-item::before {
    border-color: rgba(255, 255, 255, 0.40);
}

.entry-content .expert-review-poll:not(.voted) .expert-review-poll-item:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

/* Слои: заливка под текстом, текст и процент над ней */
.entry-content .expert-review-poll-item__answer {
    position: relative;
    z-index: 2;
}

.entry-content .expert-review-poll-item__num {
    z-index: 2;
    font-weight: 600;
}

.entry-content .expert-review-poll-item__progress {
    z-index: 1;
}

.entry-content .expert-review-poll__header {
    margin-bottom: 4px;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .entry-content .expert-review-poll--style-light-2 .expert-review-poll-item,
    .entry-content .expert-review-poll--style-light-2.voted .expert-review-poll-item,
    .entry-content .expert-review-poll--style-light-2.voted .expert-review-poll-item.voted {
        padding: 11px 56px 11px 42px;
    }
}

/* --------------------------------------------------------------------------
   Подсказки под чатом: две колонки по пять
   --------------------------------------------------------------------------
   Раньше это был поток «пилюль» разной ширины: строки рвались в случайных
   местах, и глазу не за что было зацепиться. Сетка два на пять даёт ровный
   список, который читается сверху вниз, а не выискивается по обрывкам.

   Скругление уменьшено с круглого до 14 пикселей: пилюля хороша для короткой
   надписи в одну строку, а на всю ширину колонки в две строки она выглядит
   раздутой. Четырнадцать — то же скругление, что у карточек сайта.
   -------------------------------------------------------------------------- */

.dim-chat-chips__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.dim-chat-chip {
    display: flex;
    align-items: flex-start;
    width: 100%;
    border-radius: 14px;
}

/* Точка выравнивается по первой строке, а не по центру блока */
.dim-chat-chip::before {
    margin-top: 0.5em;
}

@media (max-width: 767px) {
    .dim-chat-chips__list { grid-template-columns: 1fr; }
}


/* Текст подсказки занимает всю ширину колонки и обрезается по двум строкам, а не
   по счёту символов: сколько влезло — столько и показали. Полная формулировка
   остаётся в подсказке при наведении и уходит в чат по клику. */
.dim-chat-chip > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   Своя подсказка у обрезанной кнопки
   --------------------------------------------------------------------------
   Показываем только там, где текст не поместился в две строки: у остальных
   она повторяла бы видимое. Помечает такие кнопки js/site.js — узнать факт
   обрезки можно только в браузере, по фактической высоте текста.
   -------------------------------------------------------------------------- */

.dim-chat-chip { position: relative; }

.dim-chat-chip[data-truncated="1"]::after {
    content: attr(data-prompt);
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 5;
    width: 100%;
    max-width: none;
    padding: 10px 13px;
    border: 1px solid var(--dim-accent);
    border-radius: 12px;
    background: var(--dim-panel-2, #1b1660);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(235, 24, 192, 0.12);
    color: var(--dim-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s ease;
    pointer-events: none;
}

.dim-chat-chip:hover,
.dim-chat-chip:focus-visible {
    z-index: 20;
}

.dim-chat-chip[data-truncated="1"]:hover::after,
.dim-chat-chip[data-truncated="1"]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Чат: возврат оформления после обновления AI Engine 3.2.7 → 3.7.7
   (09.09.2026)

   Что переписал плагин и что здесь чиним:
   1. Кнопка отправки стала круглой иконкой 32×32 — возвращаем кнопку
      с надписью «Отправить».
   2. Скрепка загрузки файла заменена на «+» (lucide-plus) — рисуем скрепку
      фоном, пряча только иконку покоя (галочка загруженного файла остаётся).
   3. Пузырь пользователя красится в --mwai-accentColor, а он в теме бота
      не задан и падает в синий #0d7df2 — снимаем фон с .mwai-text
      (оформление даёт .mwai-reply.mwai-user) и переводим саму переменную
      на фирменную маджента.
   4. Курсор потока рисуется ИНЛАЙНОМ (border-left: 8px) — перебить можно
      только !important; делаем тонким и фирменным.
   5. Высота окна: --mwai-maxHeight у плагина 40vh — поднимаем.

   ВАЖНО: стили плагина подключаются ПОСЛЕ файла темы, поэтому при равной
   специфичности выигрывает плагин. Все селекторы ниже намеренно на один
   уровень длиннее плагиновых.
   ========================================================================== */

/* Фирменный акцент вместо синего дефолта — им плагин красит пузырь
   пользователя, активную кнопку и значок файла */
.mwai-chatbot-container .mwai-chatgpt-theme {
    --mwai-accentColor: var(--dim-accent);
    --mwai-maxHeight: min(62vh, 620px);
}

/* --- Высота окна переписки -------------------------------------------- */

/* Окно растёт по содержимому до max-height. min-height держим небольшим:
   при коротком диалоге высокий минимум даёт пустую полосу над полем ввода. */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-conversation {
    max-height: min(62vh, 620px);
    min-height: 170px;
}

/* --- Пузырь пользователя ---------------------------------------------- */

/* Пузырь идёт по ширине текста и прижимается вправо; оформление даёт сам
   .mwai-reply.mwai-user выше по файлу */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply.mwai-user {
    width: fit-content;
    max-width: 88%;
    text-align: left;
}

/* Фон и скругление даёт .mwai-reply.mwai-user; внутренний .mwai-text должен
   остаться прозрачным, иначе поверх появляется вторая «капсула» цвета акцента.
   max-width здесь именно none: процент внутри обёртки с width:fit-content
   заставляет браузер рвать текст посреди слова. */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-text {
    background: transparent !important;
    color: var(--dim-text) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    display: block !important;
    text-align: left !important;
}

/* Подпись над репликой человека: «Вы:» гостю, имя — зарегистрированному
   (подставляет dim_chat_person_params в chat-hello.php).
   Плагин её прячет правилом .mwai-reply.mwai-user .mwai-name{display:none} */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-name {
    display: block;
    text-align: left;
}

/* --- Курсор во время ответа ------------------------------------------- */

/* Плагин задаёт border-left: 8px инлайном — снимается только !important */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-reply .mwai-text > span[style*="border-left"] {
    border-left-width: 2px !important;
    border-left-color: var(--dim-accent-hover) !important;
    height: 1.05em !important;
    margin-left: 3px !important;
    vertical-align: text-bottom !important;
}

/* --- Строка ввода ------------------------------------------------------ */

/* В 3.7.7 сама .mwai-input стала «капсулой»: своя рамка, скругление 26px и
   padding с !important. Поверх неё тема рисует вторую рамку на .mwai-input-text,
   получаются две рамки, а кнопка не помещается в капсулу и выходит за край.
   Внешнюю капсулу гасим — рамку оставляем одну, на поле ввода. */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 16px !important;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Рамку поля рисуем здесь: правило темы выше по файлу до 3.7.7 совпадало
   один в один с плагиновым (.mwai-input .mwai-input-text) и проигрывало ему
   по порядку подключения — поле оставалось без обводки. */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    overflow: visible;
    border: 2px solid var(--dim-accent-line);
    border-radius: var(--dim-radius);
    background: var(--dim-field);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Без этого поле не забирает свободную ширину: на телефоне оно сжимается
   до ширины подсказки, и та переносится на три строки */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text textarea {
    flex: 1 1 auto;
    min-width: 0;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text:hover {
    border-color: var(--dim-accent-hover);
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text:focus-within {
    border-color: var(--dim-accent-hover);
    box-shadow: 0 0 0 4px rgba(235, 24, 192, 0.22);
}

/* --- Скрепка вместо «+» ------------------------------------------------ */

/* Плагин задаёт размеры и фон иконки цепочкой из семи классов (0-7-0),
   поэтому здесь цепочка длиннее — иначе правило молча проигрывает.
   Трогаем только состояние покоя: при выбранном файле плагин рисует
   в этом же элементе галочку на фоне акцента, её перекрывать нельзя. */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload:not(.mwai-has-file) > svg {
    display: none;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload:not(.mwai-has-file) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ff6fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px 21px;
    opacity: 0.85;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text .mwai-file-upload:hover .mwai-file-upload-icon.mwai-lucide.mwai-chatgpt-upload:not(.mwai-has-file) {
    background-color: rgba(235, 24, 192, 0.16);
    opacity: 1;
    transform: rotate(-12deg);
}

/* Микрофон — в тон скрепке, чтобы правый и левый край поля читались парой */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-microphone svg {
    width: 20px;
    height: 20px;
    color: var(--dim-link);
    opacity: 0.8;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-microphone:hover svg { opacity: 1; }

/* --- Кнопка «Отправить» ------------------------------------------------ */

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-shrink: 0;
    padding: 12px 24px;
    border-radius: var(--dim-radius);
    background: rgba(235, 24, 192, 0.22);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--dim-fs-base);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.2px;
    gap: 8px;
    box-shadow: none;
}

/* Иконку-стрелку прячем — подпись даёт ::after */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit > svg {
    display: none !important;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit::after {
    content: "Отправить";
    white-space: nowrap;
}

/* Есть текст — кнопка загорается фирменным */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-has-content {
    background: var(--dim-accent);
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(235, 24, 192, 0.9);
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-has-content:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 12px 26px -10px rgba(235, 24, 192, 1);
}

/* Поле пустое, а переписка уже есть — плагин переключает ту же кнопку
   в режим очистки. Класс при этом не меняется, отличить состояние можно
   только по вложенной иконке, поэтому подпись выбираем через :has(). */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit:has(> svg.lucide-eraser)::after {
    content: "Очистить";
}

/* !important здесь не от лени: правило .mwai-has-content выше по файлу
   совпадает с той же кнопкой, а после объединения CSS в LiteSpeed порядок
   и вес правил меняются — без него очистка остаётся цвета отправки. */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit:has(> svg.lucide-eraser) {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--dim-text-soft) !important;
    font-weight: 600;
    box-shadow: none !important;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit:has(> svg.lucide-eraser):hover {
    background: rgba(235, 24, 192, 0.30) !important;
    color: #fff !important;
    transform: none;
    filter: none;
}

/* Идёт ответ: вместо надписи — «Отвечает» и таймер плагина */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-busy,
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-busy:hover {
    width: auto !important;
    padding: 12px 20px;
    border-radius: var(--dim-radius);
    background: rgba(235, 24, 192, 0.30) !important;
    color: #fff !important;
    cursor: wait;
    transform: none;
    filter: none;
    box-shadow: none !important;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-busy::after {
    content: "Отвечает";
    opacity: 0.9;
}

.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-busy .mwai-timer {
    order: 2;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

/* ::after идёт после .mwai-timer в потоке — возвращаем подпись перед ним */
.mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-busy::after { order: 1; }

/* --- Мобильные --------------------------------------------------------- */

@media (max-width: 768px) {
    .mwai-chatbot-container .mwai-chatgpt-theme {
        --mwai-maxHeight: 66vh;
    }

    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-conversation {
        max-height: 66vh;
        min-height: 190px;
    }

    /* На узком экране кнопка и отступы съедают ширину поля — ужимаем всё,
       чтобы подсказка помещалась в одну строку */
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input {
        padding: 10px 10px 12px !important;
        gap: 8px;
    }

    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text {
        padding: 4px 10px;
        gap: 6px;
    }

    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit {
        padding: 10px 14px;
        font-size: 14px;
    }

    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-microphone svg {
        width: 18px;
        height: 18px;
    }

    /* Подсказка не должна ломаться на две строки и растягивать поле */
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text textarea {
        font-size: 15px;
    }

    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-input-text textarea::placeholder {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-file-upload .mwai-file-upload-icon.mwai-idle-idle {
        width: 20px;
        height: 20px;
        background-size: 18px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input .mwai-file-upload:hover .mwai-file-upload-icon.mwai-idle-idle { transform: none; }
    .mwai-chatbot-container .mwai-chatgpt-theme .mwai-input button.mwai-input-submit.mwai-has-content:hover { transform: none; }
}